デザインシステムが形骸化…運用に悩んでいた時に読んだ「つくって、みなおす、デザインシステム」
デザインシステムを運用し始めて1年が経過しましたが、なかなか本当の「ストック」として機能していないと感じていました。
最初は意気込んで構築したものの、日々の業務に追われ、更新が滞り、チーム内でも活用されなくなっている状況に悩んでいました。
そんなときに出会ったのが『つくって、みなおす、デザインシステム』です。本書のサブタイトルにある「デザインシステムのはじめかた、育てかたがわかる実践的ガイド」の「育てかた」という言葉に惹かれ、手に取ってみました。
デザインシステムを作ったはいいものの、運用の壁にぶつかっている人には参考になる部分が多かったので、学びを整理してみます。
1.『つくって、みなおす、デザインシステム』で参考になったこと
本の前半はデザインシステムの始め方について書かれています。
私の場合はすでに始めてしまっていたのでさっと読む程度だったのですが、はじめて取り組む方にとっては、ここで述べられている以下の点をまずはよく読み、把握するとよいかと思います。
・背景を定義する
・目的を定義する
本書を購入したのは、SmartHR以外でのデザインシステムの考え方の事例でしたので、気になっていたのはやはり「デザインシステムの設計」でした。
SmartHRのデザインシステムに書かれている内容とも重複をしてくるところもありますが、参考情報として挙げておきたいと思います。
・プリミティブトークン
カラーコードやテキストスタイル、予約、角丸のサイズなど、具体的な値に識別可能な名前をつけたもの。Name（名）に対するValue（値）。
（例）
カラー｜yellow-500（名）：＃E3E143（値）
余白｜M（名）：32（値）
・セマンティックトークン
特定の意味を持たせて定義するデザイントークンを差す。プライマリーボタン用の「Button-Primary」に「yellow-500」を割り当てるなど、使用用途にスタイルを関連付けたもの。
・カラーセット
WCAGに従い、文字と背景色のコントラスト比を4.5:1以上を担保することが推奨されていることから、確認しながら進めた方が良い。
-プライマリーカラー：主要な要素に利用される。
-セカンダリーカラー：副次的な色として定義する。プライマリーカラーと同じ色相で高明度or低明度の色。
-ターシャリーカラー：プライマリーカラー/セカンダリーカラーだけでは表現できない場合に用いることで、デザインの柔軟性を高める。プライマリーカラーと同じ色相で高明度or低明度の色。
-バックグラウンドカラー：スクリーンのバックグランドに使われる色を定義する。基本的に白や黒、グレーなどの無彩色を利用。
・タイポグラフィ
和文フォントと欧文フォントを定義するところから始める。参考のフォントしては以下の通り。またフォントサイズ、行の高さ、フォントの太さ、文字間隔を定義する。
【和文フォント】
-Hiragino｜MacOSやiOSに標準搭載されているシステムフォント
-Noto／源ノ角ゴシック｜GoogleとAdobeが共同開発したフリーフォント
【欧文フォント】
-San Francisco｜MacOSやiOSに標準搭載されているシステムフォント
-Roboto｜AndroidやChromeOSのシステムフォントとして採用されている。
・アイコン
アイコンを一から作るには、以下のステップを踏むと良い。
①モチーフを選定する。
②ラフを作成する。（ラフの段階でキーラインを意識しておくと、既存のアイコンとサイズが揃いやすくなる）
＊https://m3.material.io/styles/icons/designing-icons
③モチーフを決定する。
④決定したモチーフをブラッシュアップする。
⑤最終調整したものをメンバーに共有する。
アイコンライブラリで済ませる場合は以下のサイト
-Font Awesome｜https://fontawesome.com/
-Material Symbols｜https://fonts.google.com/icons
・余白
多くの組織では、余白を8の倍数で設計するルールを採用している。ただし、画面内の情報量が多いプロダクトでは、8の倍数のみで設計することが困難な場合もあり、その時は4pxや12pxなどの4の倍数の追加も検討する。
・コンポーネントライブラリの設計
ボタンやテキストボックスなど、Webサイトやアプリケーションを構成するコンポーネントを集めたコレクション。デザイントークンは「複数のUIコンポーネントやページにまたがって使用されている最小単位」で、コンポーネントはそれらを組み合わせて構成されている。
例えばUI要素であるボタンは、ステータスと強弱で決まってくる。
【ステータス】
-Default：操作が行われていない状態
-Hover：マウスなどのポインティングデバイスがボタンの上に置かれた状態
-Focus：UI操作が選択された状態
-Disabled：操作できないことを表す状態
【強弱（コントラスト）】
-塗りボタン（Primary）：画面の中で最も主要なアクションに利用する
-線ボタン（Secondary）：プライマリーボタンに付随する別のアクションに使用する。
-テキストボタン（Tertiary）：比較的重要度が低いアクションに使用する。
2.『つくって、みなおす、デザインシステム』で学んだ運用
デザインシステムは、これまでのノウハウを企業やプロダクトのブランディングと齟齬がないように、体系的にストック化する仕組みだと考えているのですが、なかなかストック化がされず、もしくはストックしても周知されないために、デザイナーの中に属人化していってしまうという傾向がありました。
そのような中において、本書でとても参考になったのが、更新を周知する仕組みです。地味でありながら、これを怠っていたかなと改めて反省をしました。
以下がワークフロー例ですが、納品後に更新という例ではありますが、これだと受注する案件をしているケースのみになります。自社プロダクトを持っているのであれば、1週間に1回などのペースでストック化していくように回すなどもありなのかなとは思いました。
01｜案件アサイン・インプット
02｜デザイン初稿制作
03｜デザインチェック
04｜納品
開発
05｜QA対応・デザイン受け入れテスト
リリース
振り返り
06｜マスターデータ反映・デザインシステム更新
07｜デザインシステムの更新の周知
なお07の周知の内容はSlackで実施する具体例も挙げられていました。Slackでは、更新内容・更新履歴・きっかけになった案件を挙げているようです。
3.今後のデザインシステム運用で取り入れること
本書で運用について読ませてもらいながら、デザインシステム運用については、色々と考えさせられるところもありました。
特に関係者でなかなか合意形成がされにくかったことや、その成果が全く周知されていなかったことに気づき、デザインシステムを作ることが目的になっていたようにも感じました。
そこで本書にのっている運用を参考にしつつ、
①デザインチームによる適宜デザインシステムへの反映
②プロダクトマネージャとのすり合わせ（ブランディング面での齟齬がないか）
③開発チームとのすり合わせ（開発プロセスとの齟齬がないか）
④関係者との最終合意とデザインシステムへの正式反映
⑤Slackでの全員への周知（更新内容・更新履歴・更新理由）
というようなプロセスがよさそうかなと思い、現在適用をしようとしています。
4.まとめ｜デザインシステム運用は育て続けるもの
デザインシステムを「作ること」が目的になってしまい、運用が形骸化するのはよくあることですが、本書を読んで「育てる」意識が重要だと再認識しました。
特に、定期的な更新フローの確立や、Slackなどを活用したチームへの周知の仕組みはすぐに取り入れられると感じています。これまではデザインシステムを「完成させるもの」と捉えていましたが、今後は「チームとともに進化させるもの」として、関係者と協力しながら運用の仕組みを見直していきたいと思います。
デザインシステムの運用に悩んでいる方には、本書の内容を参考にしながら「どのように育てていくか？」という視点を持つことをおすすめします。