良いデザインシステムとは？ 役割と評価をするためのワーク手法を公開します。ノンデザイナーもバッチリ理解できるワークだよ！
デザイナー不在の組織では、専門家不在の状況でデザインに関する議論をすることに不毛さを感じているケースもあるのではないでしょうか。
フロントエンドエンジニアさんが必要に感じてデザインシステムを独学で作ったのでそれをレビューして欲しいというオーダーをいただきました。
さて、これは困りました。デザインシステムは外部の人間がさらっと目を通して評価できるような性質のものなのでしょうか。半分は正解で、もう半分は違うように感じます。
Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド
改めてこの本を読んでみると、多くの疑問に対する答えが書いてありました。そうだ。これを元にワークにしよう！
デザインシステムを理解するワークをMiroで行う
自由にアクセスして、ぜひご自身やチームでのワークにご活用ください。
クレジットなどでちらりと名前を挙げてくださったら嬉しいです。
https://twitter.com/mikiishijima
所要時間：2-3時間
参加者：デザインに興味のあるプロダクト関係者全員
必須参加者：
プロダクトの思想や目的を語れる人
リリースサイクルを網羅的に知っている人
デザインシステムを評価するために必要なことを順序立ててチームで見ていく設計です。
評価に必要なこと
1. プロダクトにどう貢献するものかを知る
2. デザインシステムとプロダクトの他のシステムがどう連動するかを知る
3. プロダクトとそのデザインシステムの原則を知る
4. 活用し続けるための手段を知る
デザインシステムは「システム」ですので、まずは機能しているかが基本的な評価の基準となります。
そして「機能しているか」どうかはプロダクトの価値を高めるアクションを連続的に行える仕組みになっているかと言い替えることができます。
Step1. デザインシステムに納得するためのワーク
Step1は、デザインシステムにデザイナー以外もリソースを割くことにどのようなメリットがあり、本当にそれが享受できているかをチームメンバーが議論するためのものです。
デザインシステムは1人の運用では効果が最大化できません。他のメンバーに運用と保守の負担を依頼するケースが存在します。「デザインシステム導入して本当に便利になった？」という問いの答えを持つためには、彼ら自身が運用の労力とプロジェクトへの価値貢献を秤にかけ、それがどちらに傾くかを知らなければなりません。
1-1.プロダクトの何にデザインシステムが貢献しているかを知る
手法：
1. プロダクトの目的を全員が付箋で挙げていく
2. 付箋を大別する
3. デザインシステムが大別したカテゴリのどこの寄与するかを矢印で繋げてみてもらう
この手順を進めると、3でつまづくようになっています。
そこでわたしはそれを知ったうえで意地悪くこう言います。「さて皆さんこの目的のどこにデザインシステムは貢献しますか？」
わざとらしいやり方かもしれません。この関係図を完成させるのには「プロダクトの目的」と「デザインシステム」の間にひとつの項目が抜けているからです。この二つは直接繋ることはありません。
デザインシステムは試行回数を増やすことに寄与する
上の図は不足した項目を追加し、デザイン手法がそれらにどう貢献しているかを矢印で繋いでみた例
プロダクトの価値を高めるためできる事は様々ですが、それらをより多く繰り返し実行し、試行回数を増やしていく事がプロダクトの価値を高めることに繋ります。
そしてデザインシステムはその試行回数を増やすことに寄与します。
デザインシステムはデザインがスケールすることを許すからです。画面設計フェーズに「デザイナー」というボトルネックが存在しなくなり、素早く、多くの人が、職能や社内外問わず、たくさん仮説を立て検証するサイクルを同時に平行して行えれば試行回数はどんどん増えていくようになります。
デザインシステムはデザインの専門家が行ってきたフローを定型化します。職能に限らず多くの人がデザインを実行するためのシステムであり、それにより試行回数を爆発的に増やし、プロダクトの価値精度を高めるためのものなのです。
1-2.デザインシステムがどのように既存システムと繋っているかを知る
手法：
1. 現在のリリースサイクルを書きだす
2. デザインシステムの利用とそのレビューをどのように組込むかを検討する
次のボードでは、プロダクトのリリースサイクルを描いてもらいます。そこにデザインシステムがどう位置するかを考えるためのものです。
デザインシステムが良いものであるかどうかを判断するのには、デザインシステムが適切に参照されており、コンポーネントが意図どおりの役割を果たしているかどうかを確認するフローが必要です。
Step2. デザインシステムと、そのコンポーネントの評価項目を作る
デザインシステムとは、観点および視点のガイドラインを含み、デザインシステムで何かを構築する全関係者にクリエイティブ面の方向性を伝えるものでなけれなりません。チーム全体にこの言語を浸透させる必要があります。そうした要件を満たせないならば、MaterialDesignを使って終わりにした方がよいでしょう。──ダン・モール
MaterialDesignは非常に優れたデザインシステムです。開発者はドキュメントとにらめっこし、適切なコンポーネントを採用できているか議論し、自身で判断が可能です。
そして整った見た目で統一するために使うのならこれで十分なのです。ではなぜデザインシステムを導入するのか。
Step2では、デザインシステムを通して、プロダクトの在り方とその評価方法をチームで作るためのものです。
デザインシステムを導入すると、デザイナーが不在でもその設計や意図に関して議論ができるようになります。
デザイン原則に問題点を放り込み、原則にそって処理していけば自動的にプロダクトパーソナリティに沿った機能が出来上がるという便利なものなのです。
2-1.代表的なプロダクトのデザイン原則を知る
手法：
* 掲載されている原則を読む
* 自分の気になっているプロダクトの原則を探す
(公開されている画面やコンポーネントをその原則に照らし合わせてみてもいいかも)
このボードには他のプロダクトがどのように原則を定義し、評価軸として採用しているかを見るためのものをまとめてあります。
デザインシステムの本に載っている例と、ボード作成時にちょうど公開されがSmartHRさんの原則を掲載しました。
* 最優先事項が二つあればリジェクト
* コンポーネントの中にサンプルテキストの三倍の文字を入れても大丈夫ならOK
* 調査と分析、インタビューのフェーズがなければリジェクト
など、客観的に判断できる基準が原則に含まれていると解釈に迷いにくくなるでしょう。
2-2. 我々のプロダクトに原則を作る
手法：
1. プロダクトの思想を話してもらう
2. 思想からキーワードを抽出
3. キーワードを体現するのに適切な印象を挙げる
思想を話し共有するのはチーム全体で行いますが、そこからのフローは印象設計を担う専門家に行ってもらいます。
このボードはワークの時間では終えることは不可能なので、プロジェクトへの宿題とし後から記入してもらうためのものです。
なぜ、ここだけはチームで行わないのでしょうか。
デザインにおける民主主義の活用法
少し話はそれますが、デザインシステムはデザインを参加型にすることでり、「多くの人がデザインプロセスに参加ができる」システムです。それはデザインにおける民主主義の採用であると言えます。
これはとても素晴しいことですが、万能ではありません。わたしはその適用を「デザインプロセス」に限定しており、意匠設計においては独裁政治に近いプロセスをとります。
わたしがそのような手法をとっているので、それに倣いこのボードでもプロダクトパーソナリティとデザイン原則はチームにおける「デザイン専門家」がプロダクトと市場、そして社会を鑑みた上でチームに提案するという方法を勧めています。
意匠設計についてもし、民主主義を採用するとしたら「印象評価」のみに限定します。青がいいか、赤がいいかはデザイナーが決めるのです。そしてその赤が本当にデザイナーが意図したように機能しているか。その評価を多くの人に尋ねるに留めるようにしています。
これについては別の記事に書きますね。
Step3 システムを連携させる
Step3ではデザインシステムの運用のために浸透をどのようにすべきかをデザイン本から参照しまとめています。
3-1.デザインシステムの浸透のために
手法：
* 読んでもらう
* レビューフローを書いてみる
デザインシステムを運用するのには、協力的なメンバーを増やしていく試みが必要です。チームがデザインシステムについて理解を深めているうちにカタチにしておくことで、少しでも継続する助けとしています。
まとめ
一連のワークを行うと、デザインシステムが何に責任を負い、どう評価すれば良いかが分かるようになっています。
ワークしに行くので呼んでください
まだまだ更新の余地があるボードではありますが、デザインシステムを導入したい。プロジェクトのUI面について不安がある場合などに活用してもらえると幸いです。
呼んでくださればオンラインでどこでもワークするのでぜひ下記アカウントへDMしてください！
https://twitter.com/mikiishijima
ワークに参加したお客様の声
* ワークの進め方、ファシリテーションがデザイン領域に限らず多くの領域に展開させられそうだった
* アクティブな参加者を増やす仕組みが良かった
* 名言が多くてタメになった
* 褒め方がエグかった
* デザインシステムがあれば非デザイナーの自分でも関われることがあるかもなと考えられるようになった
* デザインシステムの保守と維持を懸念していたが、浸透に対する具体的な働きかけが知れて良かった
* デザインシステムを評価するフローに納得感が得られて良かった
* デザインシステムを成長させていくにあたり、各プロダクトへの反映をどうするのか分かって良かった
* 自分の作ったデザインシステムが意義があるのか、貢献できてるのが不安だったが意義を再確認できて確信がもてた
* デザインになると何を達成したら良いのか不明だったのが明確になった
よろしければサポートお願いいたします。記事を書くモチベーションと頻度が上がります。