こんにちは、塩です。デザインシステムは、仕事をする上で欠かせないものであり、デザインと深い関わりを持っていますが、今回はさらに知識を深めるために、デザインシステムの定義を明確にしてみようというのがテーマになります。

デザインシステムとは

一般的に言われている「デザインシステム」の定義を調べてみたところ、一貫性のあるデザインを効率的に作成・管理するための幅広いガイドラインやツールの集まりを指しているようです。これには、色やタイポグラフィ、スペーシング、コンポーネント、パターンなどの視覚的要素のほか、これらをどのように使用するかを定義するルールや原則も含まれます。組み合わせることで、モバイルアプリケーションやWebサイトなどデジタルプロダクトのデザインと開発をサポートしてくれます。デザインシステムは、チーム全体でのデザインの一貫性を保ち、再利用可能なコンポーネントと設計により、ソースコードから実行可能なアプリケーションや配布パッケージを生成する一連の作業が高速化されます。特に、大規模なプロジェクトや複数の人数が関与する場合において、その重要性が増しています。

デザインシステム_Wikipediaより引用(意訳)

専門用語が並んでいますが、つまりデザインシステムの構築とは、デザイン周りのガイドラインを明確にし、画面上に表示するUIのパーツ集を作成するということになります。

具体的にどのようなガイドラインを定める必要性があるのかを調べてみたところ、デジタル庁というサイトが秀逸だという話を耳にしました。

デジタル庁

こちらのサイトでは、デザインシステム構築を公開しています。実際に使用されているサイトの色やフォントについてや、ボタンのシャドーや余白など、なぜこのデザインを採用しているのか、理由がしっかりと明記されているので、デザインの教科書といっても良いくらい内容が充実しています。また、デジタル庁に書かれているデザインシステムでは、下記のように定義されています。

デザインシステムとは

「デザインシステム」とは、言葉どおりに「デザインのシステム」という意味です。そして、ここでいう「デザイン」と「システム」は、次のような意味で使われています。

デザイン

ウェブサイト（コンテンツを表示しているもの）やウェブアプリケーション（申し込みフォームなど入力できるものや、管理画面のような表示内容を操作できるもの）の、「見た目」や「操作感」のことを指しています。

システム

英語のsystemに対する和訳はいろいろありますが、デザインシステムのシステムは「原則や思想の体系」またはその体系を整える「秩序」や「仕組み」といった意味になります。「ルール」と言い換えても構いません。

すなわちデザインシステムとは「ウェブサイトやウェブアプリケーションを作る際に参照するルールのまとまり」のことです。

世の中にはさまざまな企業や団体がデザインシステムを作っており、また、公開されているものも多くありますが、このサイトで紹介している「デジタル庁デザインシステム」は、デジタル庁が作成・公開しているデザインシステムです。

デザイン庁「デザインシステムとは」より引用

デザインにおける〇〇システム

実は、デザインの中に含まれている、〇〇システムというワードは数多く存在しています。例えば、グリッドシステムなどが挙げられます。官公庁のサイトでも、12カラムグリッドデザインが採用されていました。どれだけ凄いことなのかというと、横幅を12等分するグリッドシステムは、2カラム（6:6）や3カラム（4:4:4）など、様々なレイアウトに対応できます。各要素をグリッドに沿ってブロックごとに配置するため、レスポンシブデザインにおいても画面幅に合わせたレイアウト調整が簡単です。つまり、情報を整理して見せることができることから、一貫性のあるデザインを作成できるというのが大きな魅力です。また、異なるデバイスサイズに対応しやすいため、更新性にも優れているといえるでしょう。

グリッドシステムも別々の単語に分解することができますから、それぞれの意味を噛み砕くとより理解が深まると思います。グリッドシステムのグリッド（英: Grid）とは、デザイン画面を水平線と垂直線で分割し、格子状または方眼状の線（ブロックライン）を組み合わせたものを指します。これにより、各要素を整然と配置し、バランスの取れたデザインを作成することができます。そのため、グリッドシステムは、レイアウトを統一しやすくし、情報を視覚的にわかりやすく整理するための整合性が高いデザイン手法になります。特に、ウェブデザインや印刷物のレイアウトでよく使用されており、カラム、ガター、マージンなどの要素から構成されます。

デザインシステムの目的

ここまでは、デザインシステムの魅力についてリサーチしたことを踏まえ、執筆をしました。では最後に、なぜデザインシステムが必要であるかについて考えていきたいと思います。もちろん、ユーザーにとって視覚的に見やすいデザインというのは不可欠であり、システムのルールが明確であればあるほど、誰もが理解しやすいUIといえるでしょう。ですが、デザインシステムを構築するためにはどうしても工数がかかってしまいます。そのため、小さいプロジェクトでの活用には向いていないといったデメリットがあります。システムの複雑さが増すことで、逆に負荷を与えてしまう可能性もあります。

そこで、デザインシステムの目的を振り返ってみましょう。デザインシステムは、意思決定のもと、明確なルールを定義付けしている性質があります。だからこそ、一貫性のあるユーザーインターフェースを手段としているのです。まずは、その性質に着目し、目的について洗い出しをおこなっていくと、以下の4つのような目的が浮かび上がってきます。

１.スケーラビリティの実現 

スケーラビリティの実現により、新しい機能やページを追加する際に、既存のデザインシステムを基に迅速に対応できる状態を維持できます。つまり、デザインのスケーラビリティが高ければ、「生産性」や 「ユーザの認知負荷の軽減」を重視したデザインを設計でき、大規模のプロジェクトや開発に関わる人数が多い場合でも、円滑なコミュニケーションが可能になります。

2.一貫性の確保

全てのプロダクトやページで統一されたビジュアルやインタラクションを担保してくれる一貫性は認知負荷の軽減に役立ちます。だからこそ、ユーザーは行政サービスが使いやすいと感じられるのです。よって、ユーザーの体験価値をさらに向上させてくれます。

3.生産性の効率化

デザイナーや開発者が再利用可能なコンポーネントやスタイルガイドを使用することで、作業の重複を避け、時間とコストを大幅に削減することができます。これにより、利用者の課題解決にフィーチャーする余裕が生まれるのです。

4.コラボレーションの向上

スケーラビリティとも密接に関与していますが、デザイナー、開発者、その他の関係者が同じ基準やガイドラインに基づいて作業することで、共有しあえるという大きなメリットが生まれます。これは、チーム全体の円滑なコミュニケーションに大きく貢献してくれると考えています。

もちろんデメリットはありますが、それ以上にメリットがあるからこそ、デザインシステムの構築が推奨されているのだと思います。そして、デザインシステムという基本的な考え方を仕事に取り入れることで、ブランドらしさのあるデザインの一貫性を担保しながら、効率化を図ることが、より簡単になるのです。