近年、デジタルプロダクトやサービスを開発する際、特にユーザーインターフェイスなどの視覚的な要素を中心とするデザインのパターンやコンポーネントとそのガイドライン、またそれらの礎となるデザイン原則やブランド定義などを包含し、関係者間で共有する仕組みが活用されるようになっています。こうした仕組みはデザインシステムと呼ばれており、効率的にデザインを行うための仕組みとしてデザイナーやエンジニアの間で認知されつつあります。デザインシステムについて解説しているWebサイトや文献も少なくありませんが、現在のところ、その定義は必ずしも一様ではありません。

『デザインシステムとは「あるべきデザインを一貫性をもってユーザーに提供するための仕組み」です。具体的には、デザインを作成する際の考え方としての「デザイン原則」や、フォントや色の種類、ボタンやフォームなどのコンポーネントが定義されている「UI ライブラリ」、それらを運用するためのルールなど、さまざまな構成要素を含んでいます。』

デジタル庁「デザインシステム勉強会を開催しました」

『デザインシステムとは、デジタルプロダクトの目的を達成するために首尾一貫したルールで編成された、お互いに関連づけられたパターンとその実践方法です。』

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

『デザインシステムとは、プロダクトを開発する上で必要となるデザイン原則や概念、スタイル、UIコンポーネントライブラリ、コードに関するルールを定めたものです。』

F Lab｜Fixel株式会社「デザインシステムとは？」

このように、デザインシステムの説明は書き手によってやや異なっており、絶対的な定義が存在する訳ではありませんが、「デジタルプロダクトやサービスの目的を達成するための、一貫性を持ったデザインを実現するための仕組み」という点では概ね共通しており、チームでの活用にあたってはデザイナーやエンジニアに限らず、あらゆる立場のメンバーが一丸となって取り組むべきものです。こうした理解を念頭に置きながら、その目的と意義、また構成要素や事例を概観し、デザインシステムへの理解を深めていきましょう。

デザインシステムの意義

デジタルプロダクトやサービスの目的を達成するにあたって、「一貫性を持ったデザインを実現するための仕組み」がなぜ重要なのでしょうか。日本政府により2021年に設置されたデジタル庁では有識者を集めたデザインシステムの勉強会を内部向けに開催し、「政府が提供するWebサイトやサービスは一度つくって終わりではなく、継続してメンテナンスされていく」ものだという認識のもと、デザインシステム導入のメリットとして3つの点を挙げています。

1. 各サイト・サービスを通じて一貫した体験を提供できる
標準化されたコンポーネントを用いてUI設計が可能になるため、政府が提供する各種サイト・サービスを通じて一貫した体験を提供できるようになり、ユーザーにとって使いやすくなる。

2. 開発コスト・管理コストが抑えられる
使用するフォントや色、デザインパーツの組み合わせ等がライブラリとして提供され、再利用できるため、開発コスト・管理コストが抑えられる。

3. 利用者へのサービス提供までの時間を短縮できる
サイト・サービスごとにデザインを個別に作成する必要がなくなり、ユーザーに対してサービスを提供するまでの時間を短縮することができる。

デジタル庁「デザインシステム勉強会を開催しました」

行政機関による勉強会ということもあり、ここでは「政府が提供するWebサイトやサービス」が念頭に置かれていますが、そうした領域に限らず、デザインシステムは幅広いデジタルプロダクトやサービスにメリットをもたらします。多数の開発者やユーザーが関わり、リリース後も繰り返しアップデートが行われることが当たり前になった今日では、デザインシステムを導入し、継続的にデザインを管理していくことが、開発者とユーザーの双方にとって有意義なことだと言えるでしょう。

デザインシステムの構成要素

デザインシステムが様々なメリットをもたらすのであれば、自社への導入を検討したいと考えるデジタルプロダクトやサービスの担当者も少なくないのではないでしょうか。デザインシステムは包括的な仕組みを指す言葉であり、実際には複数の要素から構成されています。デザインシステムの定義と同じく、その構成要素にもまた明確な決まりがあるわけではありませんが、一例として「Design Systems デジタルプロダクトのためのデザインシステム実践ガイド」では、デザインシステムの構成要素として以下のような項目を挙げています。

目的
プロダクトにおけるクリエイティブ面の明確な方向性と目標

原則
デザイン原則

パターン
ユーザーフロー、インタラクション、ボタン、テキストフィールド、アイコン、色、タイポグラフィ、リードテキストなど

共有言語
大まかなコンセプトの説明にも、デザイン上の判断について話し合うための言葉の共有

 

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

本稿の冒頭でも「視覚的な要素を中心とするデザインのパターンやコンポーネントとそのガイドライン、またそれらの礎となるデザイン原則やブランド定義などを包含」するものだと述べていますが、デジタルプロダクトやサービスを手掛ける機関がデザインシステムを導入するためには、こうした要素について検討していくことが必要です。

なお、株式会社CIRCLでは「デザインシステム構築における成果物」として、以下のような項目を挙げています。

デザインシステム
デザインの基準やドキュメント、原則に加えて、基準を達成するためのUIパターンやコンポーネントなどのツールキットをすべて備えたもの。

スタイルガイド
デザインシステムの別のサブクラスで、静的なドキュメントにデザインシステム自体を説明したもの。たとえば、製品の見た目や雰囲気、UIパターンの使用例、正しいタイポグラフィの大きさなどを記載する。

UIライブラリ（デザイン・コード）
デザインシステムのサブクラスで、組織全体で使用するデザインパターンの集まり。

開発環境
プロトタイピングとプロダクト全体のメンテナンスを可能にするため、ビルド環境、リンティング、パフォーマンス改善ツールなどといった開発環境を汎用化して提供する。

テストフロー
コードベースのUIライブラリのためのテストフロー(さまざまなスクリーンサイズ、ブラウザ、OSなど)

CIRCL「デザインシステムの構築」より

デザインシステムの事例

デジタルプロダクトやサービスの領域では、既に様々なデザインシステムが登場しています。これまでに挙げてきたような要素を包含しながら、現在進行形で活用され続けている優れたデザインシステムとして、4つの事例を紹介します。

1）Material Design

Google：Material Design

Googleが提唱するMaterial Designは、デザインシステムの代表的な事例として知られています。ユーザーインターフェイスの表現にあたって、現実にある物質の「動き」「影」「奥行き」といった要素をモチーフにすることで、ユーザーの直感的な理解を促しています。その実現のために、Material Designではユーザーインターフェイスを「紙とインク」に見立てるとともに、色数を抑えつつ影やアニメーションを活用した表現を多用することで、複雑な情報を簡潔に見せています。

社名／関連業界
Google Inc.（アメリカ合衆国）／情報サービス

企業規模
従業員数 139995名

デザインシステムの目的
デジタルプロダクトやサービスの操作などにおけるユーザーの操作性の向上

 

2）Atlassian Design System

Atlassian：Atlassian Design System

Atlassianが提唱するAtlassian Design Systemは、同社が手掛ける様々なプロダクトへ横断的に適用することを念頭に置きながら注意深く設計されています。その構成要素はBrand, Foundations, Contentといったカテゴリによって整理されており、新規にデザインシステムを構築したいという場合にも大いに参考になるでしょう。

社名／関連業界
Atlassian（オーストラリア）／情報サービス

企業規模
従業員数 1259名

デザインシステムの目的
内製プロダクト開発におけるデザインの統合や操作方法の明確化

 

3）Salesforce Lightning Design System

salesforce：Lightning Design System

Salesforceが提唱するSalesforce Lightning Design Systemは、特に業務で利用するための機能を提供するアプリケーションなど、複雑な機能や多量の情報を扱う際に親和性の高いデザインシステムです。その原則を「明快」「効率化」「一覧性」「美しさ」の順に定め、効率化や一覧性といった視座を重視して開発されています。

社名／関連業界
Salesforce .com, Inc.（アメリカ合衆国）／情報サービス

企業規模
従業員数 36000名

デザインシステムの目的
内製プロダクト開発の効率化や機能拡張等における合理的なワークフローの提供

 

4）Shopify Polaris

Shopify：Polaris

Shopifyが提唱するPolarisは、同社が提供するオンラインビジネスのプラットフォームの利用者が、顧客にとって優れた体験を作り出すために役立つデザインシステムです。Shopifyプラットフォーム内のチャンネルや独自のアプリケーションを開発する際に参照するガイドラインや原則などから構成されています。

社名／関連業界
Shopify Inc.（カナダ）／情報サービス

企業規模
従業員数 5000名

デザインシステムの目的
同社が提供するプラットフォームにおける顧客体験の向上

 

まとめ

ここで紹介した事例以外にも様々なデザインシステムがあり、それぞれに異なった目的や特徴を備えています。

デザインシステムは企業とユーザーの双方へ様々なメリットをもたらすため、様々な分野で活用されつつありますが、その導入にあたっては「既存のデザインシステムを活用する」あるいは「新たなデザインシステムを構築する」といった選択肢を念頭に置きながら、まず何よりも対象となるデジタルプロダクトやサービスが果たすべき目的を注意深く検討していく必要があります。また、導入すればそれで終わりという訳ではなく、継続的に管理・更新を続けていくことも大切です。そのためには、デザインシステムそれ自体だけではなく、デザインシステムを含むデザインのエコシステム全体を意識していくことが重要になるでしょう。