良いデザインシステムとは？その基本と構造をグッドパッチが解説
これまでさまざまな組織のデザインシステム構築や運用を支援してきたグッドパッチ。本連載「みんなで育てるデザインシステム」では、デザインシステムにフォーカスし、その概要や歴史、導入から運用、構築にいたるまで網羅的にお届けします。
※本記事はウェブマガジン「CreatorZine」に2023年9月15日に掲載した記事を再掲載したものです。
こんにちは。グッドパッチのUIデザイナーの乗田です。グッドパッチはビジネス課題をデザインで解決するデザインカンパニーとして、これまでさまざまな組織に対してデザインシステムの構築や運用を支援してきました。
これらの経験を基に、本連載ではグッドパッチが大切にしている観点や姿勢を交えながら、「デザインシステムとは何か」「必要性」「始め方」「運用方法」などのテーマをお届けします。初回である今回は「デザインシステムとは何か」について紹介します。
目次
デザインシステムのはじまり
はじめに、デザインシステムとはどのようなものかを調べてみると、ソフトウェアにおける「一貫性を維持するためのもの」や「デザイン指針をドキュメント化したもの」などと表現されていることが多いです。
この取り組みは最近始まったことではなく、以前からさまざまな領域における創作活動のプロセスや設計方針を明らかにし、組織で一貫したデザインを行うための仕組みとして発明されてきました。
ドイツのタイポグラファーであるヤン・チヒョルトは1928年に『DIE NEUE TYPOGRAPHIE』にて、グラフィックにおけるタイポグラフィのありかたを体系的に示し、印刷物のサイズを統一する重要性や、活字のサイズやウエイトを適切に使い分ける手法について明らかにしました。
また、1950年代にスイスのグラフィックデザイナーのヨゼフ・ミューラー=ブロックマンは、グラフィックデザインにおいてテキストや図版をグリッドに則って配置する手法「グリッドシステム」を確立。デザインを届ける対象者が情報を正しく解釈できること、そのためにもデザインが構成的であることを大切にしていた人物でした。
彼らが提唱したグリッドシステムなどの手法はグラフィックデザインのためのものでしたが、今日では多くの手法がインタフェースデザインに取り入れられるほど普及しています。それだけでなく、デザイン手法を「システム」として秩序立てて扱う考え方も現在のデザインシステムに受け継がれているものです。
建築家のクリスストファー・アレグザンダーは1964年に執筆した『形の合成に関するノート』で、建築や都市を設計する行為そのものを数学的に形式化することを試みています。このアイディアを基に、建築や都市で繰り返し現れる構造を再利用しやすい形式にまとめる手法「パタン・ランゲージ」を自身の著書『パタン・ランゲージ』で提唱しています。
1976年にはNASAが、グラフィックシステムのマニュアル『NASA Graphics Standards Manual』を発表しました。このマニュアルはグラフィックデザインにおけるタイポグラフィやロゴ、色の扱いかたについて細かに記されており、現在のデザインシステムのように、組織で一貫したデザインを実現する仕組みの原型と言えるものです。
このように、タイポグラフィ、建築、グラフィックなど、デザインを構築するための手法を明文化する取り組みは旧来から行われてきました。これらの手法やデザインに基準を設ける目的、構築にいたるまでのプロセスは現在のデザインシステムと共通しています。
デザインシステムの構造
デザインシステムはおもにデジタルプロダクトのデザインを円滑にするために構築される存在です。その構造は一般的に「デザイン原則」「デザインパターン」を明文化したものと、それらをプロダクトに反映させるためのライブラリなどの「アセット」によって成り立っています。
次の画像は、グッドパッチがデザインシステムの構築や運用を支援する際に頻出する要素をまとめたものです。
原則
「良いデザインとはなにか」「デザインを行う上での姿勢」など、大切にしている考えを明文化したものです。また、デザインシステムの目的やデザインシステム自身をどのように育てるかという方針を示すこともあります。
ブランドガイドライン
色、フォント、ロゴなどブランドを表すためのビジュアルアイデンティティをまとめたものです。企業理念、提供価値、行動規範などブランドを行動によって体現するためのコーポレートアイデンティティも含まれます。
ユーザーインタフェースガイドライン
インタフェースを構成するトークン、コンポーネント、UIパターン、コンテンツなどの設計方針を明文化したものです。インタフェースをどのように構築するかという原則やアクセシビリティ方針も含まれます。
ユーザーインタフェースキット
ユーザーインタフェースガイドラインで明文化した指針に則ったUIを効率的に構築するためのリソースやツールをまとめたものです。デザインファイル内のライブラリや開発時のプラットフォーム、フレームワークに応じたコンポーネントライブラリなどが相当します。
デザインシステムは組織を表す
デザインシステムには「どれひとつとして同じ形にはならない」という特徴があります。デザインシステムを言葉で定義することの難しさは、この特性によるものだと言っても良いでしょう。グッドパッチでもこれまでさまざまなデザインシステムの構築や運用を支援しましたが、いずれもその構造は異なっています。
なぜならデザインシステムは組織を表したものであるからです。デザインシステムは組織がデザインを行うプロセスの中で抱える課題から生まれます。当然課題は組織によって異なるため、デザインシステムの形も同様に変化するというわけです。
例えば株式会社SmartHRが運用している『SmartHR Design System』はデザイン対象に「プロダクト」だけではなく「コミュニケーション」を設けているのが特徴です。これは「現在SmartHR利用している人やこれから利用する可能性のある人とサービス間でのコミュニケーションをより良くする」ことが目的ではないかと考えられます。
また、GMOペパボ株式会社が運用している『Inhouse』の特徴は、「Flavor」という仕組みが導入されている点にあります。Flavorはブランドに応じて上書き可能な色や形などのデザイントークンを変数にまとめたものです。Inhouseは複数のブランドで使用することを前提としているからこそ、ブランドイメージに沿ったデザインを共通基盤にて実現することを目指しているのではないでしょうか。
組織によってはコンポーネントライブラリ単体や、デザインファイル単体がデザインシステムとして扱われるケースもあります。これらも組織の課題解決を目的に運用されているのであれば、デザインシステムと定義できるでしょう。
ただ、デザインシステムを構築する際によくある「別の組織の完成度が高いデザインシステムを流用する」ケースは、落とし穴になりがちなケースも多いため注意が必要です。
すでに構築されているデザインシステムを採用することは非常に効率が良く、作業時間を大幅に短縮できる印象があるかもしれません。
しかし、あくまでもデザインシステムはその組織の課題を解決するための仕組みでしかないのです。デザインシステムが構築された前提の解決すべき課題が異なるため、多くの場合は組織に適合しない点に気をつけましょう。
デザインシステムは組織の課題、特性、ワークフローを理解した上で、組織にとって達成すべき目的を定め、その目的を達成するために必要な要素を構築、運用することで価値を発揮します。
良いデザインシステムの性質
デザインシステムはどれひとつとして同じ構造にはならないことをお伝えしました。その一方、デザインシステムには共通する性質があります。
Single Source of Truth
Single Source of Truthは、日本語で「信頼できる唯一の情報源」と訳されることが多い言葉で、ソフトウェア開発における情報の一貫性や整合性を保つために、特定の情報またはデータをひとつの場所だけで管理・更新するという考えかたを指します。
デザインシステムにおいてSingle Source of Truthの性質が担保されることは、参照すべき最新のガイドラインやコンポーネントがなにかが明確になるため、誤解や情報の齟齬を減らすことができ、チーム内でのコミュニケーションが円滑になります。
新しいチームメンバーがプロジェクトに参加した際に、必要な情報やリソースを見つけたり、理解したりすることを助けてくれるでしょう。プロダクトやデザインシステム自身のアップデートが必要な場合も一箇所を更新することで関連するすべての部分に反映されるため、時間の節約や更新のミスを防ぐことができます。
デザインシステムがチームの「共通言語」となる背景には、この性質の存在が大きく影響しています。
再利用性
現代のプロダクト開発は非常に複雑なものになっています。その背景には、プロダクトにおけるページ、機能、状態が膨大な数になっていること、多くの組織がこの複雑なプロダクトを複数個も抱えながら運用していることなどが影響しています。それだけでなく、プロダクトの肥大化に比例し、組織自体が大きなものになっていることも複雑化の一因です。
そんなプロダクト開発の複雑化を解消するうえで有効な性質のひとつが「再利用性」です。
再利用性が高く維持されていると、プロダクトにおける多様なユースケース／コンテキスト下においても、同一のコンポーネントやパターンなどのアセットを繰り返して利用できます。またそれだけでなく、再利用性によってチーム間の認識のずれが減少し、メンバー間のコミュニケーションもなめらかになるでしょう。同じコンポーネントやパターンを繰り返し利用できるため、デザインや開発時のコストを大幅に削減することにもつながります。
プロダクトと相互作用を与える
プロダクトはユーザーのニーズに合わせて常にアップデートする必要があるため、永遠に完成することはないと言われています。デザインシステムもプロダクトと同様に組織のニーズに合わせて常に改善していかなければならないため、完成することはありません。「デザインシステムはプロダクトのプロダクト」と言われることが多いのは、この背景からでしょう。
そしてデザインシステムはプロダクト開発の場で生まれた課題をもとにアップデートされ、それがプロダクトに反映されるというサイクルで発展していきます。良いデザインシステムは、プロダクトと相互作用を与え合いながら進化するという性質を持っているのです。
文化として育むデザインシステム
デザインシステムは、その構築と運用を行うだけで組織課題を解決できるような万能なものではありません。なぜならデザインシステムは、想定する組織に活用してもらうことで初めて価値を発揮するからです。そのためにもデザインシステムの運用は「浸透施策」も同時に行う必要があります。
デザインシステムが完成することはなく、浸透まで行う必要がある点は「組織文化」と近似しています。
ここで、組織文化の構築や浸透に取り組むグッドパッチのメンバーが組織文化の必要性について話していた際の言葉を引用します。
ビジョン・ミッションは企業文化（カルチャー）の軸となるもの、価値観（バリュー）の軸となるものです。
もしなくなったとしたら、意思決定の軸となるものが不明瞭になり、属人性のある意思決定が大量に発生し、再現性のない組織になってしまうと思います。
10年先が見えない企業で働きたい人はいるでしょうか。ビジョン・ミッション・バリューが明確であれば、それに基づいて採用や育成戦略、制度や習慣を整理していくことが可能になり、それが強いカルチャーとなって強い組織を作れます。
プロダクト開発の場においてもデザインシステム（文化）が意思決定の軸となり、再現性の定着や、制度や習慣の構築、強い組織の実現に寄与するのです。
ユーザーがデザインシステムの活用にいたる課程には組織文化と同様「認知」「理解」「共感」「実践（活用）」という行動モデルがあります。そのためにも真っ先に「行動」を要求するのではなく、「認知」や「理解」のための施策を推進することが必要です。
IBMのデザインシステム「Carbon Design System」のように、円滑な浸透を促進するためにデザインシステムの中に職能ごとのオンボーディングやチュートリアル用のドキュメントを用意しているケースも多く存在します。浸透させるには大きな労力がかかりますが、浸透して適切に活用されるようになれば、チームのつながりは強固なものになり、組織課題の解消にもつながります。
デザインシステムの誤解
デザインシステムは曖昧な概念であるからこそ、誤った認識が広がってしまうことがよくあります。
遵守すべきルールではない
よくある誤りとして、デザインシステムを「遵守すべきルール」として浸透させてしまう場合があります。運用チームにはそのような意図がない場合でも活用するメンバーが、デザインシステムは多くのコストをかけて構築された分、それを徹底して遵守することが正義であり、デザインシステムから逸脱することは悪であるという観念に捉われてしまうことも多くあります。
デザインシステムはあくまでもデザインを行う際のガイドライン (指針)であって、ゴールではありません。より創造的なアウトプットを生み出すための「ジャンプ台」として機能する存在であるととらえています。
デザインシステム内のパターンから逸脱したアウトプットは、デザインシステムをさらに良いものへ改善していくことにつながるため、むしろ歓迎すべき行為だと考えています。
銀の弾丸ではない
組織に最適ではない形でデザインシステムを構築してしまったり、運用や浸透施策を怠るとプロダクトとデザインシステムの乖離が生まれ、簡単に形骸化してしまいます。私たちはデザインシステムに対して、一度構築しただけで有用性を発揮する“銀の弾丸”ではないことを常に頭に置いておく必要があります。
まとめ
今回はデザインシステムの構造、特徴、性質について紹介しました。
デザインシステムはどれひとつとして同じ形にはなりません。組織課題や特性、ワークフローを理解したうえで達成すべき目的を定め、そのために必要な要素を構築／運用することで価値を発揮します。一方で、例外なく守らなければいけないルールではないことやプロダクト開発における銀の弾丸ではないことにも注意する必要があるでしょう。
次回はデザインシステムの必要性や効果についての記事をお届けします。お楽しみに。
