特にデザイナーがいないプロジェクトや、プロジェクトマネージャー等から具体的な指示が少ない開発現場でフロントエンド開発をしていると、「このボタンの色やフォントサイズはどうするべきだろう？」と悩んで手が止まってしまった経験はありませんか？そんな時に指標となるのがデザインシステムです。

デザインシステムの定義

デザインシステムとは何でしょうか。デザイン庁デザインシステムでは、次のように定義されています。

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

デザイン

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

システム

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

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

開発現場では複数の人が関わるため、各自が「正しい」と思う基準が異なる場合もあります。このような意見の衝突を避け、統一感のあるプロダクトを作る助けとなるのが「デザインシステム」です。

デザインシステムの事例

以下に、実際の有名なデザインシステムをいくつか紹介します。プロジェクトにまだ明確なデザインシステムがない場合は、これらを参考としてプロジェクトに合ったルールを構築してみるのも良いでしょう。

デザイン庁デザインシステム

行政機関や公共機関での利用を想定し、アクセシビリティを最優先に設計されています。

デジタル庁デザインシステムはアクセシビリティを最優先事項として作成されています。アクセシビリティは、すべてのユーザーがウェブサイトやオンラインサービスを確実に利用できるようにするための品質基準であり、企画・設計からデザイン、開発、およびコンテンツ作成、そして運用など、プロセスのすべてにおいて考慮が必要となる概念です。
デジタル庁デザインシステムは、以下に関して特に注意を払って構築されており、アクセシビリティ規格において該当する達成基準の適合を容易にします。基本デザインやコンポーネントのFigmaデザインデータだけではなく、デザインシステム本体に含まれるコンポーネント仕様、作例、アクセシビリティガイドライン等にも等しく反映されています。

行政や公共サービスでは、「取り残されるユーザー」を作らないことが重要です。そのため、このシステムはユニバーサルなデザインを目指しています。

Material Design (Google)

Googleが提唱するデザインフレームワークで、React用ライブラリ「MUI」もこれをベースにしています。

特徴としては以下の点が挙げられます。

幅広いユーザーに対応するアクセシブルなデザイン
情報設計に基づいた直感的で使いやすいUI
ブランドのカスタマイズにも適応する柔軟性

ヒューマンインターフェイスガイドライン (Apple)

Appleのデザインガイドラインで、iPhoneやMacBookなど、異なるデバイス間でも統一感のあるUXを提供するための指針です。

「ヒューマンインターフェイスガイドライン」には、どのAppleプラットフォームでも優れた体験を設計できるようにするためのガイドとベストプラクティスが含まれています。

Appleの強烈なブランドイメージは、このガイドラインを通じてデザインに落とし込まれています。

デザインシステムのメリット

デザインシステムがある場合とない場合で、開発現場にはどのような違いが生じるのでしょうか。以下の表にまとめました。

比較内容	ある場合	ない場合
スタイルの一貫性	チーム全体で統一されている	個人に依存しばらつきが発生
デザイン適用方法	コンポーネント選択で容易	手作業で対応し時間がかかる
コミュニケーション	共通の基盤があるため効率的	細かい説明が必要で非効率
メンテナンス性	全体を簡単に修正可能	修正範囲が広がり非効率的

デザインシステムを導入することで、開発プロセスの効率化や品質の向上が期待できます。

まとめ

デザインシステムは、デザイナーだけのものではありません。エンジニアやPMなど、プロジェクトに関わるすべての人が活用できる「共通基盤」です。

特にデザインシステムがない現場では、まず他社のデザインシステムを参考にし、所属するプロジェクトに適した形で構築するところから始めてみてはいかがでしょうか。これにより、チーム全体で統一感のある効率的な開発が可能になります。

参考資料

デザイン庁デザインシステム
https://design.digital.go.jp/
Material Design (Google)
https://m3.material.io/
ヒューマンインターフェイスガイドライン (Apple)
https://developer.apple.com/jp/design/human-interface-guidelines/