こんにちは！
UIデザイナーの自分（Yuny）です。
日々のUI制作で画面に向き合っていると、「なんとなく良さそうな青色を選んでみた」「いまっぽい角丸の数値にしてみた」と、自分の直感や感覚だけに頼って決めてしまう場面はないでしょうか。
デザインの意図をチームやエンジニアに説明する際、「なぜここはこの余白なのか」「なぜこの色なのか」という根拠が曖昧だと、レビューでの合意形成に時間がかかったり、手戻りが発生する原因になりがちです。
そんな「デザイン決定の根拠」をロジカルに整理する上で大きな助けになるのが、Googleが策定・公開しているオープンソースのデザインシステム「Material Design 3（M3）」です。
M3は単なるコンポーネントのカタログではなく、人間の知覚に基づいた配色ロジックや、アクセシビリティを仕組みで担保するトークン設計など、実務で今すぐ活かせる実践知見が体系化されています。
今回は、Material Design 3の基本思想から、配色迷子をなくす「HCT理論」、実務で破綻しないカラートークンの階層設計、そしてFigmaでの具体的な活用フローまでを分かりやすく整理しました。
Material Design 3（M3）は、Googleが策定した個人の嗜好やデバイス環境に柔軟に適応するオープンソース・デザインシステムです。影による物理的な階層表現が中心だったM2に対し、M3では人間の視覚特性に合わせた「HCTカラースペース」と、役割で階層化された「カラートークン設計」を採用し、デザインの意図とアクセシビリティをロジカルに両立できる点が大きな特徴です。
- 1. Material Design 3（M3）とは？通常ルールとの決定的な違い
- Form follows feeling（形態は感情に従う）
- Apple HIG vs Google M3 の設計思想の対比
- 2. 配色の迷子をなくす「HCTカラースペース」とコントラストの科学
- 従来のRGBやHSLが抱えていた限界
- HCT（Hue / Chroma / Tone）の仕組み
- 3. 実務で破綻しない「カラートークン（Roles）」の階層設計
- 主要カラートークンの役割と階層一覧
- 「Container」と「On-〜」の命名規則の読み解き方
- 4. Figma実務でM3を取り入れる3つのステップ
- Step 1: 公式プラグイン「Material Theme Builder」でトークンを一括生成
- Step 2: Figma Variablesにトークンをマッピングする
- Step 3: 公式「Material 3 Design Kit」からレイヤー構造をリバースエンジニアリングする
- 5. 動き（Motion）に物理法則を取り入れるスプリングアニメーション
- 6. Material Design 3に関するよくある質問（FAQ）
- 次のステップ：あわせて深掘りしたい知見
- まとめ：デザインの「感覚」を強固な「ロジック」に変える
1. Material Design 3（M3）とは？通常ルールとの決定的な違い
Material Design（マテリアルデザイン）は、GoogleがAndroidやWeb向けに展開してきたデザインシステムです。
従来のMaterial Design（M2）は、「紙とインク」の物理法則を画面上に模倣し、影（Elevation / Drop Shadow）の高さによって要素の階層関係を伝えるアプローチが中心でした。
それに対して最新のM3では、「ユーザー個人の好みや利用環境に合わせて、デザイン側が柔軟に変化する」という思想へと大きく舵を切っています。
均一で固定された1枚のデザインカンプを作るのではなく、ユーザーごとに心地よい形へと適応させる「システムの柔軟性」を設計するスタンスが根本にあります。
Form follows feeling（形態は感情に従う）
近代デザインの有名な原則に「形態は機能に従う（Form follows function）」がありますが、M3が掲げるテーマは「形態は感情に従う（Form follows feeling）」です。
使いやすさや機能性は大前提とした上で、使う人が愛着を感じられるパーソナルな体験を重視しています。
その代表例が「ダイナミックカラー（Dynamic Color）」です。
ユーザーがスマートフォンの壁紙を変更すると、壁紙から抽出されたキーカラーをもとに、OSやアプリ全体の配色パレットが自動生成され、調和のとれた色合いへとシームレスに変化します。
このアプローチは単なる思いつきではなく、数千人規模のユーザー調査と認知心理学の実験を経て導き出された設計です。
固定的なビジュアルを押し付けるのではなく、ユーザーのコンテキストに寄り添うUI設計の思想は、自社サービスをデザインする際にも大きな示唆を与えてくれます。
Apple HIG vs Google M3 の設計思想の対比
UIデザインの現場で双璧をなすのが、AppleのHIG（Human Interface Guidelines）とGoogleのM3です。
どちらが優れているかという話ではなく、両者が目指す哲学の違いを理解しておくと、プラットフォームごとの適切なUI判断が下しやすくなります。
| 比較項目 | Apple HIG（Human Interface Guidelines） | Google M3（Material Design 3） |
|---|---|---|
| 基本哲学 | コンテンツの邪魔をしない（Deference） 洗練されたミニマリズムと物理的な質感 | 個に適応する（Personal & Expressive） 感情に寄り添い、親しみやすい表現 |
| 階層表現 | 半透明のブラー（Materials）、繊細なボーダー、物理的な奥行き | 面（Surface）のトーン変化、控えめな影、コンテナの塗り分け |
| カラーアプローチ | ブランドカラーとセマンティックカラーの厳格な固定運用 | キーカラーから自動展開するダイナミックカラーとHCT理論 |
| 角丸・シェイプ | 連続曲線（Squircle / 超楕円）による滑らかなコーナー | 大きめの角丸（Full / Pill）、柔らかな親しみやすさ |
| 主な適性 | iOS / macOSネイティブアプリ、高級感・ミニマルなUI | Android、Webアプリ、多様なテーマ展開を前提としたサービス |
両者の思想を把握しておくことで、iOSとAndroidのマルチプラットフォーム展開時にも、それぞれのユーザーのメンタルモデルに沿った自然なデザインの出し分けが可能になります。
2. 配色の迷子をなくす「HCTカラースペース」とコントラストの科学
UIデザイナーが最も多くの時間を費やし、かつ迷いやすいのが「配色」の決定です。
「綺麗に見えるけれど文字が読みにくい」「ダークモードにしたらコントラストが崩れてしまった」という問題は、従来のカラーモデルの仕組みそのものに原因がありました。
その課題を根本から解決するためにGoogleが開発したのが、M3の基盤となる「HCTカラースペース」です。
従来のRGBやHSLが抱えていた限界
Web制作で広く使われてきたRGBやHSLは、コンピュータの画面表示にとって都合の良い数値モデルです。
しかし、人間の目は色相（Hue）によって明るさの感じ方が大きく異なるという特性を持っています。
例えば、HSLで同じ明度（Lightness 50%）に設定した場合でも、人間には「黄色」が非常に明るく見え、「青色」は暗く見えます。
そのため、HSLの数値を揃えるだけではアクセシビリティ（WCAGのコントラスト比）を担保できず、デザイナーが画面を見ながら手作業で微調整を繰り返す必要がありました。
HCT（Hue / Chroma / Tone）の仕組み
HCTは、人間の知覚モデル（CAM16）を組み込むことで、この「見え方のズレ」を解消した新しい色空間です。
- Hue（色相 / 0〜360）: 色味そのもの（赤、青、緑など）
- Chroma（彩度 / 0〜無制限）: 色の鮮やかさ。0は無彩色（グレー）
- Tone（トーン / 0〜100）: 人間の目が知覚する明るさ（輝度）。0は純粋な黒、100は純粋な白
HCTの最大の特徴は、「色相が何色であっても、Toneの数値が同じなら人間が知覚する明るさが同一になる」という点です。
Tone 40の青も、Tone 40の黄色も、人間にとっては全く同じ明るさとして認識されます。
この仕組みのおかげで、「Toneの差がそのままコントラスト比になる」というシンプルな計算式が成立します。
例えば「背景がTone 90なら、文字にはTone 40以下の色を置く」というルールを守るだけで、どんな色相を選んでもWCAG 2.1のコントラスト基準（4.5:1以上）を自動的にクリアできます。
3. 実務で破綻しない「カラートークン（Roles）」の階層設計
HCT理論の優れた知見を日々のUI設計に落とし込むための仕組みが、M3の「カラートークン（Color Roles）」です。
M3では、生の色コード（#1E40AF など）をUIパーツに直接指定することを推奨していません。すべて「その色が果たす役割（Role）」として名前をつけて管理します。
主要カラートークンの役割と階層一覧
M3のカラーパレットは、UIの構成要素に合わせて明確なグループに分かれています。
実務で頻出する主要なトークンの役割は以下の通りです。
| グループ | トークン名 | 主な役割・用途 | 適用の具体例 |
|---|---|---|---|
| アクセント系 （Primary） | Primary | 画面内で最も強調したい主要なアクション | メインボタン（CTA）、選択中のタブ |
| On-Primary | Primaryの上に載せるテキストやアイコン | メインボタン内の白文字やラベル | |
| Primary Container | Primaryよりも主張を抑えた塗りの領域 | カードのハイライト面、FAB背景 | |
| On-Primary Container | Primary Containerの上に載せるテキスト | Container内の視認性を確保する文字色 | |
| 補助アクセント （Secondary / Tertiary） | Secondary / On-Secondary | Primaryに次ぐ重要度のコンポーネント | フィルターチップ、補助的なスイッチ |
| Tertiary / On-Tertiary | 対比やバランスを取るためのアクセント色 | バッジ、注意喚起以外のタグ表示 | |
| サーフェス系 （Surface） | Surface | アプリや画面の基本背景となる面 | ページ全体の背景、モーダルの下地 |
| On-Surface | Surfaceの上に載せる最も標準的な文字 | 本文テキスト、基本見出し、主要アイコン | |
| Surface Variant | Surfaceと区別するためのわずかに異なる面 | カードの背景、区切り線、テキストフィールド | |
| On-Surface Variant | 優先度の低い補助テキストや無効アイコン | プレースホルダー、キャプション、補足文 | |
| 状態・エラー系 （Error） | Error | 警告やエラー状態を示す注意色 | バリデーションエラー枠、削除ボタン |
| On-Error | Errorの上に載せる文字やアイコン | エラーバッジ内のテキスト |
「Container」と「On-〜」の命名規則の読み解き方
M3の命名規則で最初に覚えるべき重要なパターンが、「Container」と「On-〜」の接頭辞・接尾辞です。
- 単体名（例: Primary）: 最もコントラストが高く目立つ塗り。メインボタンなどに使用。
- Container（例: Primary Container）: 明るい淡いトーン（ダークモードでは適度に沈んだトーン）の面。視覚的な圧迫感を抑えつつグルーピングしたい領域に使用。
- On-〜（例: On-Primary, On-Surface）: 「その面の上に載せる色（On top of）」を意味する。背景のトーンに応じた視認性の高い文字色やアイコン色を指す。
「Primaryの上にはOn-Primaryを載せる」「Surfaceの上にはOn-Surfaceを載せる」という組み合わせルールが名前自体に組み込まれているため、デザイナーもエンジニアも迷うことなくコントラストを担保できます。
この設計思想は、自社サービスで独自のデザイントークンを組む際にもそのまま流用できる強力なフレームワークです。
4. Figma実務でM3を取り入れる3つのステップ
M3の設計思想やトークン構造を、日々のFigma作業で効率的に活用するための3つの実践ステップを紹介します。
複雑な計算を手動で行う必要はなく、公式ツールを賢く組み合わせることで素早く高品質な基盤を整えられます。
Step 1: 公式プラグイン「Material Theme Builder」でトークンを一括生成
Google公式がFigma向けに無償提供しているプラグイン「Material Theme Builder」を使用します。
プラグインを開き、ブランドの核となるキーカラー（Primary Color）を1色指定するだけで、HCT理論に基づいて計算されたLightモードおよびDarkモードのフルカラーパレットが一瞬で生成されます。
SecondaryやTertiaryも自動で調和する補色が提案されますが、ブランドガイドラインに合わせて個別にキーカラーを上書き指定することも可能です。
コントラスト計算に頭を悩ませる作業をツールに任せ、デザイナーはUI全体の情報設計に集中できます。
Step 2: Figma Variablesにトークンをマッピングする
Material Theme Builderで生成されたカラートークンは、Figmaの標準機能である「Variables（変数）」としてそのままファイル内に登録されます。
コレクション内に「Light」列と「Dark」列が自動生成され、color/primary や color/surface といったセマンティックな変数名で管理されます。
フレームのFillやテキストのカラーに変数を割り当てておけば、親フレームのModeを「Dark」に切り替えるだけで、画面全体のカラーが適切なコントラストを保ったまま一瞬で反転表示されます。
ライト版とダーク版のカンプを2重管理する手間がなくなります。
Step 3: 公式「Material 3 Design Kit」からレイヤー構造をリバースエンジニアリングする
Figma Communityで公式配布されている「Material 3 Design Kit」は、公式チームの手によるコンポーネント構造の実践的なお手本です。
ボタン、カード、トップアプリバー、ダイアログなど、すべてのUIコンポーネントが最新のAuto LayoutとVariablesで精緻に組み上げられています。
自分自身も、新しいUIパーツの余白設計やネスト階層で迷った際は、このM3 Design Kitを開いて「Googleのチームはここをどう組んでいるのか」を必ず確認するようにしています。
公式データのレイヤー階層を分解して観察するだけでも、プロの構造設計ルールが自然と身につきます。
5. 動き（Motion）に物理法則を取り入れるスプリングアニメーション
UIの触り心地や操作感を決定づけるのが「動き（Motion / Micro-interactions）」です。
ボタンを押したときや画面が遷移するとき、どこか機械的で味気なく感じてしまう原因の多くは、等速（Linear）で動いて急停止するなど、自然界の物理法則を無視している点にあります。
M3では、アニメーションに「スプリング（バネ力学）」の考え方を全面的に取り入れています。
「0.3秒で移動する」という時間（Duration）指定ではなく、物体の「重みや反発」という質感で動きを表現するアプローチです。
- Stiffness（剛性 / バネの硬さ）: 数値が高いほどキビキビと素早く反応し、低いほどゆったりと追従する。
- Damping（減衰 / 摩擦の強さ）: 数値が低いとボヨンとバウンドし、高いと揺れずにスーッと静かに収束する。
例えば、成功トースト通知や重要なバッジは少しバウンドさせて視線を集め、設定シートのスライド表示は減衰を高めて滑らかに定位置へ収める、といった調整を行います。
指先のタップ操作に対して自然な手応えを返す配慮が、プロダクトへの心地よさと信頼感を高めてくれます。
6. Material Design 3に関するよくある質問（FAQ）
M3の導入や学習を進める中で、現場のデザイナーからよく寄せられる疑問とその回答をまとめました。
- Q. WebサイトやiOSアプリのUI設計でもM3の考え方は活用できますか？
十分に活用できます。ダイナミックカラー自体はAndroid OS独自の機能ですが、HCT理論によるアクセシブルな配色ルールや、Surface/Containerによるカラートークン構造、スプリング力学などは、プラットフォームを問わずWebやiOSのプロダクト設計にもそのまま応用できる普遍的な知見です。 - Q. ダイナミックカラーはすべてのプロダクトで導入すべきですか？
いいえ、必須ではありません。強いコーポレートカラーやブランドの世界観を厳密に固定したいプロダクト（金融、BtoB SaaS、特定ブランドアプリなど）では、あえて壁紙連動のダイナミックカラーを採用せず、ブランド固定のPrimaryトークンを運用するのが実務上一般的です。 - Q. M3のトークン数が多すぎてチームで管理しきれない場合はどうすればいいですか？
最初から全トークンを網羅する必要はありません。まずは「Primary」「Surface」「On-Surface」「Background」「Error」の主要5系統に絞ってスモールスタートし、運用しながら必要に応じてContainerやTertiaryを段階的に増やしていく運用をおすすめします。
次のステップ：あわせて深掘りしたい知見
M3のカラートークン設計をチームで破綻させずに運用するためには、FigmaのVariables機能とオートレイアウトの基礎を押さえておくことが不可欠です。
トークンの2層構造（PrimitiveとSemantic）やライブラリの非公開化など、実務で迷わない変数設計ルールは以下の記事で詳しく解説しています。
コンポーネント内の要素間余白やPaddingを崩さずに組むオートレイアウトのネスト設計手法については、こちらの解説記事を参考にしてください。
設計したトークンや余白をエンジニアへ手戻りなく引き渡すためのDev Mode活用法については、以下の記事で体系的に整理しています。
まとめ：デザインの「感覚」を強固な「ロジック」に変える
Material Design 3は、単なるGoogle専用のデザインガイドラインではありません。
アクセシビリティを担保しながら、デザインの意思決定に確かな根拠を与えるための優れた設計思想です。
- HCTカラースペースを理解し、Toneの数値差によってアクセシビリティを自動担保する
- Hex値の直打ちをやめ、Primary / Surface / Containerなどの役割（Role）でトークンを管理する
- Material Theme Builderと公式Design Kitを活用し、Figma実務での設計精度を高める
まずは次の案件から、主要なカラーを「役割」で定義してみたり、公式のDesign Kitを覗いてみることから始めてみてください。
「なんとなく決めた色や余白」に論理的な説明がつくようになるだけで、チームとの合意形成がぐっとスムーズになります。
