なぜデザインシステムを使うのか

2018年9月18日

皆さんこんにちは。
ホワイトボードの末ちゃんこと末吉です。

気付いたら空が高くなり、うろこ雲をほぼ毎日見かける季節になりました。

春夏秋冬、どんな季節もいい表情を持っているものですが、
切ない気持ちにさせる色を持つ秋はまた乙なものです。

針葉樹の緑、広葉樹の赤や黄色、枯れ果てた茶色。
今年の紅葉の写真は、あせていく色をイメージしてみようかなと。

38184241842_21402bdf3a_k

今日はデザインシステムを使うことの話をしてみようと思います。

最近はAtomic Designが人気です。

Atomic Designとは、主にデザインシステムの設計方法のことです。
著者のサイトから、Atomic Designの内容を見ることもできますし、
他の数多なる解説サイトから詳しく知ることができます。

なにもAtomic Designにこだわるだけの話ではありません。
それはFLOCSSやSMACSSなどCSSガイドでも同様の話です。

こういったことはクライアントさんは当然のこと、
ディレクターや営業などの人たちからなかなか理解してもらえません。

なぜなら、このような設計を挟むと言うことは、
初期構築時に多少のコストが発生するためです。

昨今、ほぼすべての企業がウェブサイトをもち、
サービスやプロダクトがウェブサイトを持っているのは、
それがすべてと言っても過言ではありません。

となると発生することは、ウェブの競争、
すなわちレベルがあがってくるということです。

これは悪いことでは無く、良いことです。
しかし、従来通りの行き当たりばったりのサイト作りでは、
当然質はあがらないどころか、はっきり言って悪いでしょう。

そのようなものはエンドユーザーから評価されることはなく、
情報発信という役割を十分に果たせず終わることがほとんどでしょう。

デザインシステムは、ウェブサイトが提供するデザインの
共通性をしっかり持たせ、運用を安定させ、かつ運用考ストを低くし、
一貫したUIを提供しつつも、改善を行いやすくさせます。

そもそも、見積を作る際にウェブページ数に対しての見積というのがおかしいのです。
また、同様にページの長さで見積をするというのもおかしいのです。

当たり前の話でしょう。

コンポーネント（コンポーネント化しないとしても）の数に応じて、
コーディングの工数が大きく変わります。

Aというカードを10回繰り返すページと、
Aというカードを5回、Bというセクションを3回繰り返すページがあったとし、
そのページの長さが同じだった場合、工数は明らかに後者が大きく増えます。

なぜか？それは見積の段階で仕様なぞいっさら決まらないからです。

ほとんどの場合、仕様は後追いで決まってきます。

酷い時はほとんどできあがった段階で、
積み木で作り上げた城の最下段のブロックを入れ替えろ。
というような変更が平気でやってきます。不可能です。
一回全部崩さなければそれは実現できません。

なぜそのようなことが発生するかというと、
誰もどのようにして作り上げられるのか知らないからなんですね。

話がそれました。

でも、ある程度見積の段階でしっかり仕様を決めない限りは、
適切な見積金額を出すことはできません。

これは、営業だけの問題ではありません。
プロジェクトに関わるすべての人間に対する問題です。

見積が営業だけで作り上げることのないようにするのではなく、
ディレクター、デザイナー、エンジニアなどの人間と共に作るのが良いでしょう。

はて、愚痴を書き殴った気がしますが、
少しずつウェブ業界は進歩してきています。

その中で営業が、ディレクターが、デザイナーが、エンジニアが、コーダーが、
互いに寄り添ってより良いものを作っていくと言うこと。
そのためには、何らかのシステムを使用することが大切だと思います。

この言葉、どこかの本か何かでみたのですが、皆さんこれを覚えておいてください。

建築業界ではトラブルはほとんど発生しません。なぜなら、例えばドアを作る際、
ドアパネル、ヒンジ、ドアノブなどすべてそれぞれが単独で設計・作成され、テストされ、
それらを組み合わせることによってドアひとつが完成します。

これはコンポーネント指向の設計です。

そう、建築業界だけではありません、既存の歴史ある業界はほとんどがコンポーネント指向です。
ひとつひとつしっかりテストされたものを組合せ、プロダクトを作り上げます。

行き当たりばったりのウェブサイト作りしていませんか？
100年以上続く古い業界に対しても胸を張れる。そんな業界にしていきたいですね。