良いプロダクトは「システム」でできている。デザインシステムとは何か？

Webサイトやアプリ開発の現場で、「デザインシステム」という言葉を耳にする機会が増えていませんか？「なんだか難しそう…」「自分には関係ないかも」と感じている方もいるかもしれません。

しかし、デザインシステムは、開発の効率を上げ、チームのコミュニケーションを円滑にし、プロダクトの品質を一貫して高く保つための、非常に強力な武器になります。

この記事で「良さそう、面白そう」と思っていただければ幸いです。

1 デザインシステムとは？
- 1.1 狭義のデザインシステム：再利用可能な「部品集」
- 1.2 広義のデザインシステム：一貫性を生み出す「文化」と「プロセス」
2 なぜ、いま「デザインシステム」なのか？
3 事例紹介：世界の優れた公開デザインシステム

デザインシステムとは？

「デザインシステム」って、そもそも何でしょうか？
その定義は場合によって異なり、ひとつに定めるのは、難しいです。
そこで、ザックリ「狭義の…」「広義の…」と2つに分けて解釈を試みます。

狭義のデザインシステム：再利用可能な「部品集」

狭義のデザインシステムは、デザインの具体的な構成要素やルールをまとめたものを指します。これは、デザイナーやエンジニアが直接的に利用する「部品」や「説明書」の集まりと考えると分かりやすいでしょう。

UIコンポーネント: ボタン、フォーム、アイコン、カードなど、繰り返し使えるデザインの部品。
デザイントークン: 色、タイポグラフィ（フォントサイズや種類）、スペーシング（間隔）などを管理する変数。これにより、デザインの変更が一括で容易になります。
スタイルガイド: ブランドのロゴの使用法や、デザインの原則などを定めたルールブック。
ドキュメンテーション: 各コンポーネントの使い方や、デザインの意図を解説した文書。

これらは、Figmaのようなデザインツールや、Storybookのような開発者向けのコンポーネントライブラリとして具体的に存在します。一言でいうと：「デザインと開発で使う、再利用可能な『レゴブロック』と『その組み立て方』のセット」です。

広義のデザインシステム：一貫性を生み出す「文化」と「プロセス」

広義のデザインシステムは、単なる部品集にとどまらず、製品開発に関わる人々の協力体制や思想、ワークフロー全体を包含します。

思想と原則: なぜそのデザインなのか？という根本的な考え方や、チームが共有する価値観（例：「シンプルであること」「アクセシビリティを重視すること」など）。
コミュニケーション: デザイナー、エンジニア、プロダクトマネージャーなどが円滑に協力するためのコミュニケーションの仕組みや文化。
ガバナンス: デザインシステムを誰が、どのように更新し、管理していくかという運用ルール。
ワークフロー: デザインシステムを実際の製品開発に組み込み、継続的に改善していくプロセス。

こちらは、ツールとして存在するだけでなく、チームの文化や働き方そのものに根付いています。

一言でいうと：「良い製品を効率的に作り続けるための『共通言語』であり、チームの『文化』」です。

上記はあえて2つに分類しましたが、実際のデザインシステムは広義と狭義の中間にあることが多いかと思います。
また、デザインシステムは、一度作って終わりではありません。プロダクトやチームの成長に合わせて、継続的に育てていくものです。

なぜ、いま「デザインシステム」なのか？

「車輪の再発明」を減らす

パソコンとスマートフォンは、多くのひとの仕事や生活のツールとして実用化し、コモディティ化と言ってよい段階と捉えています。
わたしたちが、新たなアプリケーション、ウェブサイトを構築する際、多くの場合に既存のデザインシステムが参考になります。
SmartHRのデザインシステムにて述べられている「“車輪の再発明”を減らす」という考え方です。
https://smarthr.design/introduction/operate-policy

巨人の肩の上に立つ

ありがたいことに、世界の大企業や政府を始めとする、さまざまな団体の知見を活用することができます。
公開された各デザインシステムは、日々進化していますが、その多くが高い品質に達しています。

生成AI時代のUIの土台

「生成AI」によって、コンピューターを利用するためのインターフェースは、見直されていくかもしれません。
今後、AIによってUIの生成が自動化されても、その基盤となる一貫したルールやコンポーネントは必要となるでしょう。

事例紹介：世界の優れた公開デザインシステム

品質、汎用性、応用性が高く、Figmaファイルも公開されているデザインシステムを、UIデザイナーの視点でピックアップして、紹介します。

政府系

行政は対象者が多様なため、特にアクセシビリティを重視していることが特徴かと思います。

文字やボタンなどの要素は大きく、余白も十分。

イギリス政府「GOV.UK Design System」

シンプル、アクセシブル、スタイリッシュ、が実現されています。
スタイルとしては、ボタンの形状が角丸ではなく四角いのも特徴。
「Cookie banner」がコンポーネント化されているのもヨーロッパらしいです。
抽象面では、Principles（原則）も秀逸で、ポスターもあります。

アメリカ政府「U.S. Web Design System (USWDS)」

文字サイズ定義の最小がイギリス政府のものが16pxに対して、こちらは13pxです。
UI要素全般的に、イギリス政府に比べると小さい設計です。
これは、大きな国土、多くの人口、多様性、という背景から、訴訟社会、ローコンテクストな傾向にあるため、さまざまなシーンで説明的になる。つまり文章が長く、文字が多くなるのでしょう。
多くの情報が表現できることと、アクセシブルであることのバランスを定着させた事例と捉えています。

デジタル庁（日本）

イギリス政府のデザインシステムと同様に、シンプルで明快な印象のスタイルです。
UIコンポーネントの名称は「検索ボックス」「パンくずリスト」「日付ピッカー」のように、平易な表現となっています。
近い将来、各省庁をはじめ、多くの各行政機関のサイトが、このデザインシステムに沿って構築、運用されることを、期待しています。

日本の企業

SmartHR

フルセットのデザインシステムです。
デザインシステムの構想、構築、運用を教えてくれる書籍「ちいさくはじめるデザインシステム」も出版されています。
https://bnn.co.jp/products/9784802512480
デザインシステムを学習、検討するなら必見です。

Ubie「Ubie Vitals」

デザイン原則では「気軽」「かんたん」「誠実」「スッキリ」と謳われています。
その原則がドキュメントにも現れており、簡潔で把握しやすいです。
シンプルであるとともに、ライディングガイドライン、コンポーネント、GitHubでのコード公開など、ドキュメントの構成が行き届いています。
ライティングガイドラインには医療機関での問診の文例があり、アイコン集には形状の異なる複数の薬剤など「医療」という特定の分野に焦点あわせて設計された事例としても参考になります。
「Ubie Vitals」という名前は、医療用語の「バイタルサイン」に由来していると考えられ、デザインシステムの重要性と、医療分野へ注力していることが表されていると思います。

プラットフォーマー

Google「Material Design」

Android OS、Googleの各サービスが基本的にこれに則っており、一番利用されているUIかもしれません。
最も影響力のあるデザインシステムと言ってもよいでしょう。
Material DesignをReactで実装する際は、MUIが便利です。（MUIはMaterial Designのバージョン2を基にしています。）
https://mui.com/

Apple「ヒューマンインターフェイスガイドライン（HIG）」

「無料で公開されている資料」ではありますが、オープンソースではありません。
基本的には、iPhoneやMacなど、Apple製品向けアプリケーション開発を行う際に参照するドキュメントです。
「デザインシステム」という言葉が広く使われるようになったのは2010年代ですが、Appleは1980年代からHIGを定めています。
ユーザー体験を重視し、パソコンやスマートフォンを絶対的な価値に高めたメーカーが、どのような考え方でUI構築をしているのかを知ることができます。
スマートウォッチや、MR（複合現実）ヘッドセットのUIも含まれているのも特徴です。