「Design System デジタルプロダクトのためのデザインシステム実践ガイド」を読む

デザインシステムとは結局のところ何なのかを探るべく、「Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド」を読みます。

Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド

随所で目にするデザインシステムという言葉ですが、何を意味するのか。デジタル業界のデザイナーはどう実践すれば恩恵を受けられるのかという疑問を解決すべくこの本を手に取りました。

本の内容はここでは解説しません。
個人的な備忘録と、今後実践していくためのTIPSとしてまとめます。

TIPS1:機能パターンと認知パターンに分ける

ボタンなど、繰り返し使う要素をパターンとして管理するメリットはよくわかる。ただライブラリを作成するときに、まずぶつかる悩みが「どう仕分けすればいいのか」だと思います。

Atomic Designの命名規則を参考にするのも手ですが、それでもどの粒度で管理すればいいのかまでは見えていませんでした。

本の中では、大きく機能パターンと認知パターンというカテゴリ分けをしています。

機能パターン
プロダクトの機能に基づくもの。ECサイトであれば商品表示、絞り込み機能、支払い機能など。

認知パターン
プロダクトが、どのように認知されるかを左右するもの。
口調、タイポグラフィ、色の選択、アイコンのスタイル、余白、アニメーションなど。

言語でいうと、機能パターンは名詞や動詞、実体ですね。認知パターンは形容詞で、感情的な要素です。コードでいうとHTMLとCSS。めちゃくちゃ腑に落ちました。

この分割を利用するだけで、ライブラリの作り方がグッと具体的になりそうです。

TIPS2:共通言語をチームで徹底する

みなさん薄々感づいてると思いますが、デザインシステムはビジュアル言語です。言葉はみんなが同じ定義だと認識して初めて機能します。

「ボタン」という言葉がどういう意味をもって、どう使われるべきなのか。
ボタンが果たす目的は？リンクがあればボタンなのか。じゃあフォームに使うあれはボタンじゃない？

ちょっと気が遠くなりますが、文脈や目的までしっかり共有することが大切。

TIPS3:パターンライブラリはデザインシステムじゃない

当たり前だけど忘れるだろうなと思ったのでメモ。単なるコンポーネントの寄せ集めはサインシステムとは呼べない。

パターンライブラリは、道具。
道具を通じて明確にプロダクトの目的を表現する方法まで示したものがデザインシステム。

TIPS4:きちんと機能するシステムは、必ず明確な原則に基づいている

デザインシステムの課題は、コンセプトやブランド価値といった高度なコンセプトを、どうやって具体的なUI要素に落とし込むか。そのためには細かいデザインのための指標となるような原則が必要です。

これがあるだけでおおまかな一貫性は保てるのではないでしょうか。

たとえばMediumでは「指示は選択に勝る」という原則にしたがって、複雑で高度ななエディタを避け、↓のように限定的でシンプルな機能を採用しているそうです。

TIPS5:ブランドと一貫性のバランス

完璧な一貫性ばかりを優先させると、汎用的で柔軟性のないデザインシステムになる。認知パターンを進化させるには、システムの境界の外に余裕が必要。一貫性とブランドの創造的表現のバランスをとる。

TIPS6:命名規則をつくる

パターンの名前の付け方はとても重要。表面的な名称をつけてしまうと、用途が限定されてしまう。
本では
・メタファーに基づく
・個性を持つ 
・パターンの目的を表すデザインパターンが目に付くようにする
のうち１つ以上にあてはまる名称が良いとされる。

以上、個人的に便利そうな概念をTIPSとしてまとめました。
デザインシステムの役割について実例も交えて包括的に書いてありとても参考になりました。実践の手助けとなるようなヒントもちりばめられています。

特徴的だったのは、一冊を通して常に人間の行動にフォーカスを当てていたところです。

例えば、良いデザイン原則には実用的であることが求められ、作業する人の判断の指標になるようなものでなければいけません。

単なるコンポーネントリストがデザインシステムと呼べない理由がここにある気がしました。

ユーザーの行動、チームメイトの行動を手助けできる、本質的なシステムができるとかっこいいですね。