UIデザインにおける「デザインシステム」の作り方
Relicでデザイナーをしている ひらばやし です。
私はUIデザインに携わることが多いのですが、最近は以前にも増して「デザインシステム」を意識するようになりました。
デザインシステムといえば、コンポーネントやスタイルを設定し、それを地道に構築していく作業をイメージする方も多いかもしれません。
しかし、デザインシステムの構築は簡単なものではなく、中途半端な状態になってしまったり、デザインや開発のプロセスで十分に機能しないまま進んでしまうケースもあります。
そのような状態が続くと、開発負債が増え、作業効率が下がるだけでなく、デザインの一貫性が損なわれるリスクも高まります。
実際、私自身も過去に同様の問題に直面したことが何度かありました。
こうした課題に触れたきたからこそ、開発負債を軽減しながら、デザインと開発の両面でより良い成果を生み出すための「デザインシステムの作り方」をまとめてみたいと思いました。
ベストプラクティスではありませんが、実践的な指針として少しでもお役に立てる内容を目指しています🔥
1. デザインシステムとは？
デザインシステムとは、UIを構成するすべての要素を統合した開発のフレームワークです。
デザインシステムを構築することでデザインの一貫性が保たれ、作業効率の向上や品質維持につながります。
また、開発者がデザインシステムを反映することで、デザインとコードの整合性を確保することができます。
代表的な例として、Appleの「Human Interface Guidelines」や、Googleの「Material Design」などが挙げられます。
これらは多くのプロダクトで利用されており、開発コストを削減しつつ一定の品質を担保するためのシステム・ガイドラインとして機能しています。
ここでデザインシステムを作るメリットをまとめてみます：
UIの一貫性が担保される：一貫性のあるルック＆フィールはブランドの強化や、より良いユーザー体験の提供につながります。
デザインとコードの共通言語が形成される：チーム全体のコミュニケーション効率が向上し、開発がスムーズになります。
デザインの再現性が向上する：デザインの品質が向上し、デザインの不整合が発生しにくくなります。
機能拡張に柔軟に対応できる：プロダクトの成長に伴う機能追加や変更にも対応しやすくなります。
2. デザインシステムによくある課題
デザインシステムには多くのメリットがあります。
しかし、ゼロから完璧なものを作ろうとしたり、目的・方針を決めないまま取り組むと、大変で終わりのない作業になってしまいます。
まずはよくある課題を取り上げ、それぞれの課題の解消方法をいくつか紹介していきます。
デザインシステムによくある課題：
ツール（Figma）に不慣れ
デザインシステムに関する知識不足
作業時間の不足
デザインシステムに対する方針が定まっていない
💡 デザインシステムの必要度が低い場合もある
デザインの方向性を模索したい場合や、ツールに慣れていないメンバーが多いチームでは、デザインシステムがない方が作業しやすいことがあります。
デザインシステムは本格的な開発が必要になったタイミングで導入するのが効果的です。
👉 課題１： ツール（Figma）に不慣れ
デザインシステムの作成に必要になる機能はFigmaがチュートリアルを出しているので、それを確認しながら進めるやり方がおすすめです！
チュートリアルのリンクをまとめました。
コンポーネントについて
UIの基本要素を再利用可能に設計したデザインや機能のことを指します。
具体的には、以下のようなレベルで構成されます：
最小単位の要素: アイコンやアバターなどUIの基本要素となる単一の小さなパーツ。
最小単位を組み合わせた要素: ボタンや入力フォームなど複数のパーツを組み合わせて構築された要素。
セクションレベルのUI: ナビゲーションバーやカードリストなど複数のコンポーネントを組み合わせて作成されたセクションやモジュール。
💡「セクション」とは？
UIデザインにおいて、特定の目的や機能を持つページ内のまとまった領域を指します。
セクションはページを構成する単位の一つであり、複数のセクションが組み合わさってページ全体が完成します。
💡「モジュール」とは？
コンポーネントと似ていますが、モジュールは複数のコンポーネントを組み合わせた機能的な要素を指します。
コンポーネントは「部品」、モジュールは「部品を組み合わせたまとまり」のようなものです。
バリアントについて
サイズ、UIの状態、カラースタイルなどの違いをバリエーションとして設定したデザインや機能のことです。
例えば、ボタンのバリアントとして、スモールサイズ・レギュラーサイズ、プライマリーカラー・セカンダリーカラー、通常時・ホバー時などの状態を一つのコンポーネント内で管理できるようにするものが挙げられます。
プロパティについて
コンポーネント化されたオブジェクトにバリエーションが存在する場合、その変数（例：サイズ、色、状態など）を管理できるように設定したものや機能のことです。
例えば、ボタンコンポーネントに「サイズ（大・中・小）」や「タイプ（プライマリー・セカンダリー・エラー）」といったプロパティを設定することで、管理と再利用がより効率的になります。
スタイルについて
デザインを構成する要素であるカラー、タイポグラフィ（フォント、フォントサイズ、行間…）、エフェクト（シャドウ、ブラー…）、グリッドなどを設定したものや、その機能のことです。
変数（バリアブル）について
カラー、タイポグラフィ、数値などの単一の値を変数として設定したものや機能のことです。
変数の種類ごとに「コレクション」を作成したり、異なる「モード」を設定することで「カラースキーム」や「表示モード」などの切り替えも行うことができます。
「スタイル」と似ていますが、登録可能な値の数や種類、管理方法、モードの有無が大きな違いです。
👉 課題２： デザインシステムに関する知識不足
デザインシステムの概念やノウハウについては、Figmaのブログに興味深い記事がいくつか掲載されています。ぜひ読んでみてください！
また、デザインシステムの構成要素や、それぞれの役割を把握することで、デザインシステムに対する解像度が上がり、格段に作りやすくなります。
デザインシステムの構成要素（※ 格構成要素の詳細は 「３.デザインシステムを構築する」で説明しています）
・タイポグラフィ
UIで使用されるテキストスタイルの数は多く、デバイスサイズや使用箇所に応じた適切なタイポグラフィを設定する必要があります。
例えば、フォントカテゴリーの設定、強弱やバランスを保つためのフォントサイズ、太さ（Weight）、行高（Line hight）、レタースペーシング（Letter spacing）の設定があります。
・スペーシング・システム、グリッド・システム
UIにおける要素間のスペーシング・システム（パディングやマージンなど）や、グリッド・システムを定義することで、要素の配置やページ全体のレイアウトに安定感が生まれます。
ほとんど4か8の倍数に統一されて作成されます。
・カラー、カラースケール
プライマリーカラー、セカンダリーカラーなどを２〜３色決めるだけではなく、テキストやアイコン、UIの状態に応じたカラーの変化など、UIデザインの細部に至る表現まで耐え得るカラーバリエーション、カラースケールを作成する必要があります。
例えば、ボタンの通常状態、ホバー状態、クリック時などの色を統一することで視覚的な整合性が保たれ、ユーザーにとって分かりやすいデザインになります。
・シャドウエフェクト（シャドウ、ブラーなど）
シャドウエフェクトを使って「エレベーション」を設定します。
これにより、重要な要素が浮き上がって見えるようになり、視覚的な階層を作ることができます。
例えば、ボタンにシャドウを加えることで、クリック可能な状態であることが強調され、ユーザーが直感的に操作しやすくなります。
・コンポーネント（アイコン、ボタン、タグ など）
UIの基本要素を再利用可能な形で設定したものことです。
必要となるコンポーネントはある程度決まっています。（必要なコンポーネントさえ揃えてしまえば、それらを組み合わせることで効率的にデザインを作成できる場合もあります。）
コンポーネントに関しては、必要なコンポーネントのチェックリストやデザインシステムのリファレンスなどを設計初期から活用することで、効率的に構築できます。
コンポーネントのチェックリスト👇
デザインシステム、コンポーネントのリファレンスが豊富なサイト👇
👉 課題３： 作業時間の不足
作業時間不足の場合、すぐに着手できてインパクトが大きそうなものを選んで作成していくのがおすすめです。
例えばカラーやタイポグラフィなどは全てのデザインに必要な要素のためインパクトが大きいです。
コンポーネントの場合、ボタンやナビゲーションなどは比較的多くの画面で使用するため、他と比べた際の優先度は高い…という感じです。
オープンソースや有料のデザインシステムを導入するのもおすすめです。
代表的なものだと Chakra UI とか Tailwind UI あたりでしょうか。
Figma用に最適化されていて、実際に自分が使ってみた中で良かったものをいくつか紹介します👇
開発速度を上げたり、品質を一定に保ったりするための強力なツールになりますが、以下のようなデメリットもあります。
カスタマイズに制約がある
長期的な維持管理について計画を立てる必要がある
デザインの独自性を出すのが難しい場合がある
デザインのカスタマイズや独自性をもっと出したいなどの声はよく見かけます。
そのような場合、使用したいデザインシステムを参考にしつつ、必要に応じてデザインシステムをカスタマイズする必要があります。
👉 課題４： デザインシステムに対する方針が定まっていない
デザインシステムの構築・運用において、どの要素を優先すべきか事前に決めておくことで、必要以上のリソースを割いたり、開発チームとの認識のズレが生じる事態を防ぐことができます。
着手前にデザインシステムを構築する目的とゴールの明確化を行い、関係者に共有しておくと安心です。
また、将来的な運用、拡張を見据えて、デザインシステムの目的やデザインのルールなどを記載したガイドラインを整備することも効果的です。
伝わりずらい細かなディテールや、デザインルールなどをガイドライン化することで、デザインシステムに対する理解度やデザインの再現性が高まります。
デザインシステムに対する方針で重要なものをまとめました：
目的とゴールの明確化：事前に目的やスコープを定めておくことで、認識のズレを減らし、適切なリソースで取り組むことを目指します。
優先度を設定する：優先度の高い箇所から対応することで、短期間で成果を出す「小さく始めるアプローチ」が効果的です。
ガイドラインを整備する：デザインシステムの目的やデザインルールを分かりやすくまとめることで、チームメンバーのデザインシステムへの理解度とデザインの再現性を高めます。
3.デザインシステムを構築する
実際にデザインシステムを構築手順や効率的に進められる方法を紹介していきます。
デザインシステムの作成手順
まず「タイポグラフィ」や「カラー」などのデザインスタイルを定義し、次に「スペーシング・システム」「グリッド・システム」「エフェクト」など、レイアウトや空間、視覚的効果を決める要素を定義します。
そして、最後に「コンポーネント」などの作成に進む流れが考えられます。
デザインスタイルなどはブランドガイドラインを反映したものであることが多く、すでに方針が定まっている場合もありますが、これらをUIデザインに最適化する必要があります。
1. タイポグラフィ
「見出し（Headline）」「テキスト（Text）」「UI要素（Label）」というように使用用途に応じたタイポグラフィのカテゴリーを設定します。
さらに「見出し（Headline）」 ならH1, H2, H3, H4… 、「テキスト」なら Text/X Large, Text/Large, Text/Medium、Text/Small… 、「UI要素（Label）」ならLabel/X Large, Label/Large, Label/Medium… というように必要な数だけタイプスケールを設定します。
次に適切なテキストプロパティを設定します。
「太さ（Weight）」「行高（Line height）」「文字間（Letter spacing）」といった要素は、文章の読みやすさに大きな影響を与えます。
例えば、UIで使用できる日本語フォントは限られていますが、ウェイトの種類が豊富なものを選ぶのがおすすめです。
そうなると使用するウェイトも増えがちですが、Regularより細いウェイトはアクセシビリティが低下する可能性があるため、注意が必要です。
逆に、Boldより太いウェイトは過度に使用すると視覚的に重く感じさせ、全体のバランスを崩すことがあります。
ウェイトを追加する際は使いどころを意識し、上記のような問題を回避できるか判断して選ぶのがおすすめです。
行高（Line height）はフォントサイズに合わせて最適な値に調整する必要があります。
たとえば、標準的なテキストサイズ（14px〜16px）では1.5（150%）程度がよく使われますが、見出しのようにフォントサイズが大きい場合は、1.4（140%）などに小さくする方が読みやすくなります。
行高（Line height）はデザインの意図やフォントの種類にも依存するため、必ずしもこの数値に固定されるわけではありません。
また、行高（Line height）は「％」ではなく「px」で作成する方が、スペーシングを4や8の倍数で統一したい場合には有利です。
2. カラー
カラーは「プライマリーカラー」「セカンダリーカラー」の２種類に分類し、それぞれのカラーごとにカラースケールと使用用途を定義します。
カラーやカラースケールの作成には以下のツールがおすすめです。
カラースケールの作成ツール👇
カラーパレットの作成ツール👇
プライマリーカラーの構成要素
ブランドカラー：プライマリーボタンなどの強調したいオブジェクトやテーマーカラーとして使用します。
ニュートラルカラー：UIのほとんどを占める色になります。中間色とも言います。
セマンティックカラー：エラー（何らかの問題が発生した状態）、ワーニング（警告、注意が必要な状態）、サクセス（操作の成功、プロセス完了などのポジティブな状態）などがあり、ユーザーがシステムの状態を迅速に理解できるようにする役割を果たします。
セカンダリーカラー、アクセントカラー
決まった用途はありませんが、プライマリーカラーだけではカバーできないカラーバリエーションが必要な箇所（タグ、ラベル、グラフなど）に使用します。
カラーバリエーションは多いに越したことはないので、事前に何色か検討しておくと良いと思います。
セカンダリーカラーは副次的な色なので、プライマリーカラーとの相性や主従関係、差別化を意識して使用する必要があります。
使用用途の登録
カラーごとに使用用途を定義することで、UIの状態に応じた使い分けや、アクセシビリティの強化を図ることができます。
また、「バリアブル機能」で「カラートークン」を登録することで、デザインの一貫性や開発効率が向上します。
例えば具体的な色コード（例: #D13131）などではなく、カラー名（例: primary, secondary, error, success）や機能的な名前（例: background, text, border）を使って色を登録します。
「スタイル」で登録だと上記のような管理をしたい場合に少し不便なため、「バリアブル機能」を活用してカラースケールと使用用途を分けて登録を行うことをおすすめします。
簡単なやり方をまとめました：
カラースケールを作成する。（例：セマンティックカラーの場合：red/50, red/100, red/200 … red/950）
バリアブル機能のコレクションに「カラー プリミティブ（元となるカラースケール）」を作成し、１で作成したカラースケールを登録する。
バリアブル機能のコレクションに「カラートークン」を作成し、２で登録した色をUIの使用用途ごとにカラーを登録する。（例：red/50： error-backgroud, red/500: error-icon, error-border）
💡 「カラートークン」とは？
UIやデザインシステムにおいて、特定の色（ボタンの背景色やテキストの色など）に名前をつけて管理するためのものです。
似た言葉に「デザイントークン」がありますが、デザイントークンは色を含めたデザイン全体の要素（タイポグラフィ、シャドウ、ボーダーなど）を定義したものです。
3. スペーシング・システム
スペーシング・システムとはデザインの要素間に設けるパディングや要素同士のマージンなどの値を決めるためのものです。
基本的に4か8の倍数で設定していきます。
（例：4px、8px、12px、16px、20px … 40px、48px、56px、64px … ）
「倍数だけ覚えればいいのではないか？」と思いますが、デザインする中で、スペーシングを規則正しく行うのはかなり難しい作業です。
バリアブル機能にスペーシング・システムを登録し、デザインに反映していくことでスペーシングの乱れを防ぎやすくなります。
スペーシングについてはさまざまな考え方がありますが、標準的な値がどれぐらいかを知るのは重要です。
個人的には、スペーシングを人間関係で例えた「Spacing friendships」という考え方が面白くて分かりやすかったです。
4. グリッド・システム
グリットデザインに関してもスペーシング・システムと同様に一貫性のある配置を作るために必要な要素です。
特に複雑な画面デザインではグリッド・システムがないと、スペーシングは管理されても要素の配置が不均等になり、ページ全体の一貫性が崩れ、異なるデバイスサイズにフィットしづらくなります。
UIのグリッドシステムを作成するには、まずカラム数を決めます。
デスクトップの場合、一般的に12カラムがよく使われますが、デバイスサイズに応じてカラム数を調整します。
例: モバイルは4カラム、タブレットは6カラム、デスクトップは12カラムなど…
その後、カラム間のスペースであるガター（余白）と画面の端との余白を管理するマージンを設定します。
必要に応じて、サイドバー、ヘッダーなどのスペースも確保します。
これにより、要素が均等に配置され、視覚的なバランスが保たれます。
5. コーナーラディウス（角丸の大きさ）
ボタンやカードなどの要素には、コーナーラディウスを設定します。
オブジェクトの大きさに応じて適切なコーナーラディウスを設定することで視覚的なバランスが保たれます。
6. シャドウエフェクト
エフェクトにはさまざまな種類がありますが、特にドロップシャドウは、エレベーション（要素の高さや階層）を表現するために欠かせない重要な要素です。
エレベーションは、ボタン、モーダル、カードなどのインタラクティブな要素を際立たせ、ユーザーの視線を誘導する役割を果たします。
そして他の要素と同様、エレベーションも使用用途ごとに設定することが重要です。
たとえば、以下のような感じです。
低いエレベーション: 通常状態のボタンやカードは、背景からわずかに浮き上がった控えめなシャドウにします。
中程度のエレベーション: ユーザーの注意を引く必要がある状態（例: ボタンのホバー、カードのアクティブ状態など）では、より明確なシャドウにしてし、浮き上がり感を強調します。
高いエレベーション: モーダルウィンドウやドロップダウンメニューのように、背景から完全に独立している上位レイヤーは、濃く広がりのあるシャドウを用い、エレベーションの高さを伝えます。
また、シャドウ効果を作成をする際は、複数のシャドウプロパティを組み合わせることで、理想的な効果を表現できます。
たとえば、以下のような表現ができます。
ニューモーフィズム：柔らかい光と影を組み合わせて背景に馴染んでいながら立体感を表現できます。
スキューモフィズム：現実の物体に近いリアルな影を表現できます。
キーライトとアンビエントライトの併用：メインの光源（キーライト）と周囲からの光（アンビエントライト）を組み合わせることで自然光に近いシャドウを表現できます。
7. コンポーネント
コンポーネントの作成を始める前に、どのようなコンポーネントが必要なのかや、コンポーネントに必要なプロパティについて考慮しておくと作り忘れや設計後の考慮もれを防ぐことができます。
具体的には、以下の点に気を配ると良いです。
UIの状態を作成する
Default, Hover, Disabled, Focus… といった状態の変化によるバリエーションを作成することで、ユーザーが各要素の状態を直感的に理解できるようになり、操作性やアクセシビリティを向上できます。
変数をプロパティ内で管理する
コンポーネントのバリエーション変更や、内部のアイコンやテキストなどの小要素には、「バリアント」「インスタンススワップ」「ブーリアン」「テキスト」の4種類のプロパティを設定でき、これらを組み合わせることで多様なバリエーションを設定できます。
プロパティを設定したインスタンスを含む場合は「ネスト機能」を使う
プロパティを設定したインスタンスが含まれるコンポーネントは、インスタンスのプロパティ表示がコンポーネントに格納されることで隠れてしまいますが、インスタンスをネストさせることで、インスタンスのプロパティが直接表示され、コンポーネントの管理がより効率的になります。
「ネスト機能」の詳細な説明はこちらのチュートリアルが参考になります。
4. デザインシステムを運用する
デザインシステムは構築した時点で完成ではなく、新しいコンポーネントの追加や機能拡張が必要になることが多いです。
また、デザインデータが正しく反映され、常に最新の状態を維持するために、定期的なメンテナンスも欠かせません。
さらに、運用中に発生する課題や改善点を修正することで、より実用的で柔軟なシステムに進化させることも重要です。
このようなプロセスを繰り返すことで、デザインと開発の効率を最大化し、一貫性のある高品質なユーザー体験を提供できると考えています。
基本的なことばかりですが、デザインシステムを運用する上で大切だと感じたポイントを紹介したいと思います。
📍チームとの共有と連携
デザインシステムを構築してもユーザー環境に反映されなければ効果を発揮できません。
デザイナーだけではそれができないので、まずは開発チームへの共有と連携作業が欠かせません。
デザインシステムを構築する前からチームに目的や対応スコープなどを共有しつつ、開発チーム側の要望も取り入れることができたら理想的です。
📍一貫性の維持と定期的なメンテナンス
プロダクト全体の一貫性を保つことがデザインシステムの担う最も重要な役割です。
一貫性を損なっている箇所がないか確認を行い、不整合が起きていたり、放置される状態を防ぐ必要があります。
📍柔軟に、拡張しやすく
デザインの変化に柔軟に対応できるよう、細かい部分まで過度に固定化させず、ある程度の柔軟性を残しておくことも重要です。
少し矛盾しているようにも思いますが、デザインの変更頻度が高い場合や、まだ検証段階の際には、ある程度の柔軟性を残しておいた方が修正や再設計の手間を減らすことができます。
5. 最後に
デザインシステムに必要な要素すべてを一度に実現しようとすると、どうしても時間と労力がかかってしまいます。
ゼロから始める場合でも、既存のプロジェクトに途中から導入する場合でも、まずはデザインシステムがどの段階でどこに必要なのかを判断し、状況や優先順位に応じて必要な箇所から少しずつ取り組んでいくことが重要です。
また、一般的にデザインシステムは一人で構築・運用するものではないので、チームと情報を共有し、共通認識を持つことも重要です。
これにより、チーム全体でデザインシステムを支え、デザインシステムの継続的な拡張や成長につなげることができます！
ここまで色々と説明させていただきましたが、私自身が作成したデザインシステムを振り返ると、まだまだ改善の余地があると感じています。
なので、これからも得た知見や経験を皆さんと共有しながら、この記事をより良い形へとブラッシュアップしていけたらと考えています✨
長文でしたが、最後まで読んでいただきありがとうございました！
少しでも皆さんのお役に立てたのであれば嬉しく思います。