デザインシステムについて調べてみた
最近、UI/UXやデザインについて情報収集している際によく耳にする言葉があります。
それが「デザインシステム」です。
有名Webサービスなどが近年導入を進めているとのことで、今回はそのデザインシステムについて簡単に調べてみました。
デザインシステムとは
デザインシステムは一言で表現するならば、
「デザインルールの共有を行い、組織全体でデザインの統一を行うためのルール」
となります。
ここからはタスク管理サービスの「Trello」が公開している「Nachos」というデザインシステムを参考に進めていきたいと思います。
https://design.trello.com/
トップには以下のような説明があります。
Nachos is Trello’s design system. This comprehensive guide and resource library contains everything you’ll need to design with us, including our core principles, visual design, interface components, branding, and resources to help make your initiative the tastiest.
(主要な原則、ビジュアルデザイン、インターフェイスコンポーネント、ブランディング、リソースなど、デザインが必要なすべてが含まれています。)
As teams and products grow, it becomes increasingly difficult to stay in sync. Nachos is here to keep internal and external Trello designers and engineers informed—and their work feeling fresh.
(チームと製品が成長するにつれて、同期を保つのがますます困難になっています。 Nachosは、Trelloの社内外のデザイナーやエンジニアに最新の情報を伝えるためのものです。)
このようにデザインシステムはデザインが必要な全ての要素についてまとめられていて、そのルールがデザインを行うチームや人間に関わらず、社内外のデザイナーやエンジニアまた企業に参照されることを想定して作られるものです。
では、デザインシステムの中にはどのようなルールが定められているでしょうか。
さらに「Nachos」の中を見てみます。
Style – Color
Webサービスなどではテーマとなるカラーが設定されている場合がありますが、Trelloの場合は青がブランドカラーとなっています。
その青についても以下のように詳細にルールが設定されています。
また以下のように注意が書かれています。
We use Trello Blue 500 in backgrounds, app headers, and logos. When you need a single color to represent the brand, use Trello Blue.
(バックグラウンド、アプリのヘッダー、ロゴでTrello Blue 500を使用しています。ブランドを表すために単一の色が必要な場合は、Trello Blueを使用してください。)
このようにブランドカラーを明文化することによって、デザインの一貫性が維持されています。
Style – Icons
ここではTrello内で使用されているアイコンが全て記載され、なおかつ全てダウンロード可能となっています。
Style – Motion
Motionという項目にはサービス内で行うモーション効果について定義されています。
この中にはどのようなモーションを行うかという内容に止まらず、どんな際にアニメーションを使用すべきかということまで指定されていることが分かります。
Components – Buttons
ボタンについてのルールが厳密に定義されています。
ボタンに設定すべきカラールールやボタンのサイズ・余白の設定、また間違ったボタンの使い方の例などが記載されています。
ボタンカラーがその用途ごとに明確に指定されておらず混乱してしまったという経験はWebサービスを使う中で度々経験する問題かと思います。
このように定義されていればユーザビリティの向上に繋がります。
Components – Form
フォームについてここでも厳密に指定があります。
特にボタン押下後の処理中のボタンカラーなどが段階的に定められていて、ここまで厳密にするのかと驚く部分かと思います。
いかがでしょうか。項目として紹介したのはほんの一部になりますが、これだけ見てもデザインのこだわりや一貫性を保つ為に注力していることが分かると思います。
また、デザイナーや社内の有識者でないと理解できないような内容でなく、私達のような社外の人間が見ても理解できるように工夫されていることを感じることができるのではないでしょうか。
では、このようなデザインシステムを用意し共有・公開するとどのような効果があるのでしょうか。
効果
一貫性が保たれる
上記で見てきたように詳細にルール付けをすることで誰がデザインしても同じ見た目・意図をユーザーに与えることができます。
コミュニケーションの円滑化に繋がる
デザインは言語化が難しいということは誰しも共感できるのではないかと思いますが、デザインシステムでデザインを定義・明文化することで共通の認識を持つことができます。
「あの濃い青」と伝えるよりも「Blue 600」と伝えた方が確実なのは明らかです。
縦割り状態の解消
デザイナーやプログラマ、マーケティング担当など様々な職種・立場の人間がお互いの作業や認識を統一する為にもデザインシステムは役立ちます。
Nachosの例を見ると分かる通り、デザインシステムにはデザインの範囲を超える内容についても言及されています(どんな時にどんな考えを持ってそのデザインを使うかなど)。
このような知識の共有でチーム間のいわゆる縦割り状態の解消が見込めます。
ブランドの価値向上
ひとつのものに一貫したルールがあると、それは独自性の創出に繋がります。
Trelloの例でいうと、このカードのデザインを見ただけでTrelloだと理解できる、この青はTrelloの青だ！などそのサービスらしさを出すことができます。
その他にも様々なメリットがあることが様々な場所で言及されています。
実際今回「Nachos」を見ただけでも上記のような効果がもたらされることを感じましたし、何よりTrelloに対して愛着のような感情を抱きました。
作り手が使い手に対してこだわりを持って良いものを提供したいという意図が伝わるのが一番のメリットかもしれません。
課題
恐らく「Nachos」を見てみて分かる通りデザインシステムを作成するには初期コストが掛かります。
またデザインに変更があったり、追加がある場合にはその都度デザインシステムの更新が必要になります。一貫性を保つという点からもデザインシステムが更新されないというのは大問題です。
初期コストや維持コストを掛けてでも作成する価値があるのかというのは十分に検討する必要があるでしょう。
現に自分が携わっているシステムやアプリに導入するのはコスト的にも規模的にも難しいかもなというのが率直な印象です。
ですが、最近はデザインシステム作成を補助してくれるようなツールも出てきています。
プロトタイピングツールで有名なinVisionは「Desing System Manager」というツールを公開しています。
https://www.invisionapp.com/design-system-manager/
今後デザインシステムを採用する企業やサービスが増えれば、初期コストが低下していくようなこともあるかもしれません。
まとめ
今回はデザインシステムについて簡単に調べてみました。
デザインシステムは今後色々なサービスで導入が見込まれそうな状況です。
なのでこのタイミングで少しでも理解を深める意味はあるのではないかと思います。
今後は自分の関わるプロジェクトに効率よく導入する方法はないかなど検討して行きたいと思っています。
参考
