画面を何十枚も一瞬で作れるようになっても、デザイナーが1枚ずつ手作業で目視確認していては、結局そこで作業が止まってしまいます。
そんな「AIが作るUIの品質やルールを、どうやってチームで守っていくか？」という悩みを解く仕組みとして、いまデザイン界隈で注目されているのが「デザインハーネス（Design Harness）」という考え方です。

1. デザインハーネスとは？「AI生成は並列、レビューは直列」の停滞を解く仕組み

デザインハーネスは、プロダクトデザイナーのこぎそ（@kgsi）氏が提唱した設計思想です。
AIエージェントにデザイン作業を任せるときに、その出力がチームのルールやブランドのトンマナから外れないよう、あらかじめ外枠で支えてあげる仕組みのことを言います。

2026年に入ってからはグッドパッチ社が支援ソリューションをスタートするなど、現場への導入が一気に現実味を帯びてきました。
この考え方が生まれた背景には、AIツールを導入したチームがほぼ確実にぶつかる「生成は並列、レビューは直列」というリアルな問題があります。

AIに指示を出すと、数十画面のUIやバリエーションがあっという間に並列で作られますよね。
でも、その画面の余白が合っているか、変な色が混ざっていないかをチェックするデザイナーの目は、画面の数だけ増えるわけではありません。

結局、デザイナーが1画面ずつ手作業で確認することになり、AIが速くなればなるほどレビュー待ちのタスクが山積みになってしまいます。
しかも「チームとして何をもってOKとするか」の基準が曖昧なままだと、レビューする人の好みで判断がブレてしまいがちです。

もともと「ハーネス（馬具）」というのは、力強い馬を人間がコントロールして、安全に目的地へ走らせるための道具です。
エンジニア界隈の「テストハーネス（テストを自動で回すための実行環境）」と同じで、パワフルなAIの出力を一定の枠組みで支える仕組みをイメージするとわかりやすいと思います。

AIに「適当にいい感じの画面を作って」と丸投げするのではなく、あらかじめ決めたルールと検証のレールを通すことで、おかしなデザインが出ないように先回りします。
自分自身も現場でAIツールを使うときは、自由気ままに作らせるより、カチッとした制約を渡した方が手戻りが圧倒的に少ないなと実感しています。

2. デザインハーネスを支える「4層構造モデル」

デザインハーネスは、何か特定の有料ツールを指すわけではありません。
AIの出力をうまくコントロールして、日々のデザイン運用に落とし込むための「4層の設計フレームワーク」として整理されています。

「AIにどんな情報を渡して、どうチェックして、どう改善していくか」という一連の流れを4つの階層に分けたものです。
それぞれのレイヤーが担う役割と具体的な要素をまとめると、以下のようになります。

まず土台となる第1層の「制約」は、AIが使っていい色やフォント、余白のサイズを最初から絞り込んでおく枠組みです。
デザインシステムに定義されていない謎のカラーコード（いわゆる野良カラー）が勝手に作られるのを、入口の段階でシャットアウトします。

続く第2層の「文脈」は、「この画面は誰がどんな状況で使うものか」という背景情報をAIに共有するレイヤーです。
ただ見た目のパーツを並べるだけでなく、前後の画面遷移やユーザーの目的をしっかり渡すことで、的外れなレイアウトが出てくるのを防ぎます。

そして第3層の「検証」では、AIが書き出したコードやFigmaデータに対して、自動テストや静的解析（lint）を走らせます。
「フォントサイズが基準値と合っているか」「コントラスト比が足りているか」といった機械的に白黒つけられる部分は、すべてここで自動判定します。

こうして機械的なチェックをパスした画面だけを、最後の第4層「評価」で人間のデザイナーが確認します。
「操作していて違和感がないか」「体験として気持ちいいか」という定性的な判断に集中し、気づいた改善点はまた第1層や第2層の指示にフィードバックしていきます。

3. Figmaとデザインシステムを「機械可読なハーネス」にする手順

「考え方はわかったけれど、実際の現場では何から手をつければいいの？」と思いますよね。
一番手軽でおすすめなのが、いまあるデザインシステムを「AIが読めるデータ形式」に整えることです。

人間向けに作った分厚いスタイルガイドを、AIエージェントがそのまま解釈できる形へ落とし込んでいきます。
現場ですぐに取り入れやすい3つのステップを見ていきましょう。

1. Figma Variablesでトークンをかっちり決める

最初の一歩は、Figma上のカラーや余白を「デザイントークン」として整理することです。
カラーコードを生でベタ打ちするのではなく、PrimaryやSurfaceといった役割ベースの変数名で管理します。

変数のルールが綺麗に整っていれば、AIに対しても「ボタンの色は --color-button-primary だけを使ってね」とシンプルに指示を出せます。
これだけで、AIが勝手なカラーコードをでっち上げるミスを一気に減らせます。

2. ルールファイル（DESIGN.md）をプロジェクトに置く

CursorやClaude Codeを使ってUIを組むときは、プロジェクトのルートフォルダに DESIGN.md というルールファイルを1枚置いておくのがおすすめです。
フォントサイズのスケールや余白の基本ルール（4px/8pxグリッドなど）を、簡潔なMarkdownでメモ書きしておきます。

AIエージェントはコードを書くときにこのファイルを自動で読み込んでくれるので、毎回プロンプトに細かな指示を書く手間が省けます。
指示文が短くて済む分、入力トークン数の節約になって生成スピードが上がるのも嬉しいポイントです。

配置場所に迷ったら、まずはプロジェクトのルート直下（./DESIGN.md）に置くのが基本ルールです。AIツールが作業開始時に一番認識しやすい場所だからです。
フロントエンドとバックエンドが分かれているリポジトリなら、フロントエンド側（apps/web/DESIGN.md や frontend/DESIGN.md）、またはコンポーネント管理フォルダ（packages/ui/DESIGN.md）に配置するのが実務上の定石です。
さらに、Claude Codeの CLAUDE.md や Cursorの .cursorrules の中に「UIの実装時は DESIGN.md のルールを参照すること」と1行メモを添えておくと、AIが確実にルールを優先して読み込んでくれます。

3. プラグインやテストで機械的に自動チェックする

画面が出来上がってきたら、Figmaプラグイン（Figma Linterなど）を使ってワンクリックでスタイル違反をスキャンします。
未登録のフォントや勝手な余白が使われていれば、その場ですぐにアラートを出して修正できます。

「1pxズレていないか」「スタイルが合っているか」を目を凝らして探す作業は、ツールに任せてしまえばいいんですよね。
機械でできるチェックを自動化するほど、デザイナーは「本当に使いやすいUIになっているか」という本質的な体験設計に時間を使えるようになります。

デザイントークンを破綻させずに運用するVariablesの設計ルールについては、こちらの記事で具体的な命名のコツをまとめています。

Figma Variables（変数）の使い方｜バリアント肥大化を防ぐ2層トークンと命名規則【2026】

FigmaのVariables（変数）を活用し、デザイントークンを破綻させずに管理・運用するための設計ルールと命名規則を解説します。

4. デザイナーの役割の変化：パーツの配置者から「ハーネス設計者」へ

デザインハーネスが浸透してくると、現場のデザイナーに求められる動き方も少しずつ変わっていきます。
これまで時間をかけていた「ボタンやテキストを1px単位で並べる作業」は、AIエージェントにどんどん任せられるようになっていきます。

その代わり、デザイナーの大事な役割になっていくのが、「AIが迷わずにクオリティの高いUIを作り続けられるよう、ハーネス（ルールシステム）を整えてあげること」です。
部屋の壁紙を自分で1枚ずつ貼る作業から、建物全体の設計図を引いて安全基準を決める建築家のような立ち位置にシフトしていく感覚に近いかもしれません。

実務では、特に次のような領域が大切になってくると感じています。

• トークンと変数のルール設計: 画面数が増えても破綻しない、すっきりとした変数構造を組み立てる。
• 品質の合格ラインの言語化: どんな状態ならチームとしてリリースOKなのか、判断ロジックを整理する。
• フィードバックによるルールの更新: AIが間違えた箇所を分析して、DESIGN.mdや指示文を微調整していく。

デザインエンジニアの台頭と、溶け合うデザインとコード

こうした流れの中で、国内外の現場でいま急速に数が増えているのが「デザインエンジニア（Design Engineer）」という職種です。

これまでは「Figmaで画面を作るデザイナー」と「それをコードに落とし込むエンジニア」で分業するのが当たり前でした。
しかし、AIツールがFigmaデータから直接コードを書き、コードからUI画面を一瞬で生成する時代になったことで、デザインと実装の境界線が一気に溶け合っています。

Figma Variablesなどのデザイントークンを理解しつつ、それをDESIGN.mdやコード側のLint・テスト（ハーネス）として落とし込める人材の需要が急増しているんですよね。
自分自身も現場で作業していて、「画面を作る作業そのもの」よりも「Figmaとコードの間でルールが破綻しないよう仕組みを整える役割」がどんどん重要になっているのを強く実感しています。

最初から完璧な仕組みを作る必要はないので、まずは普段よく使う余白やカラーのルール化から気軽に試してみるのがおすすめです。

まとめ：適切な制約が、AIとの共創をスケールさせる

デザインハーネスは、AIの自由を奪って窮屈にするためのルールではありません。
しっかりとした安全帯（制約）があるからこそ、AIは迷わずに素早く画面を作れますし、人間も安心してその出力をレビューできます。

「生成は一瞬、でも確認に追われて疲弊する」という悪循環を抜ける鍵は、レビューを人間の根性で乗り切るのではなく、仕組みで軽くしていくことです。
制約、文脈、検証、評価という4つの層を意識しながら、日々のデザインシステムをAI時代に合わせて少しずつ育てていきましょう。

まずはプロジェクトに小さな DESIGN.md を1枚置いてみる。そんな身近な一歩から、AIとの気持ちいいチームプレイを始めてみてくださいね。

次のステップ：あわせて深掘りしたい知見

デザインハーネスの土台となる「崩れないUI構造」や「OS標準のガイドライン」を把握しておくと、ルール作りの解像度がさらに上がります。
現場の実務ですぐに役立つ記事をピックアップしましたので、ぜひあわせてチェックしてみてください。

オートレイアウトを使った崩れないフレーム設計の手順は、こちらの記事でステップ順に詳しく解説しています。

Figmaオートレイアウト完全ガイド！崩れないネストと余白設計

Figmaのオートレイアウトを駆使し、崩れないネスト構造と整然とした余白設計を実現するための実践的な組み立て手順を解説します。

Appleが定めるOS標準のタップ領域や文字基準については、以下の実務ガイドで数値を整理しています。

Apple HIG実務ガイド｜タップ領域44pt・文字11pt基準とiOSの基本原則【2026】

AppleのHuman Interface Guidelines（HIG）が定めるタップ領域44ptや最小フォント基準など、iOSアプリ設計に必須の実務数値を網羅解説。

The post デザインハーネス入門｜AIのUI生成とレビュー停滞を解く4層構造【2026】 first appeared on デザペディア.

iPhoneやMacを使っていて感じる「吸い付くような使い心地」は、デザイナーの直感ではなく、Appleが数十年にわたり磨き上げてきた「HIG（Human Interface Guidelines）」の厳格な数値基準と認知心理学によって生み出されています。

この記事では、タップ領域「44pt」の人間工学的根拠から、階層を伝えるすりガラス表現、目に負担をかけないフォント比率まで、WebやアプリのUI設計に今すぐ転用できる「心地よさを生む4つの必須基準」を現場目線で分かりやすく解説します。

1. なぜAppleのUIは「触っていて気持ちいい」のか？

Appleのプロダクトに共通する心地よさの正体は、「ユーザーの認知負荷を徹底的に削ぎ落とす設計」にあります。

HIG（Human Interface Guidelines）の根底には、以下の3原則が一貫して流れています。

• Clarity（明瞭さ）：文字はどんな環境でも瞬時に読め、アイコンは意味を正確に伝え、装飾はコンテンツを引き立てるためにのみ存在する。
• Deference（敬意・コンテンツ重視）：UI（枠線やボタン）が前に出すぎず、コンテンツそのものが主役となって画面を満たすように空間を譲る。
• Depth（奥行きと階層）：物理的な重なりや滑らかなアニメーションによって、いま自分がアプリのどの深さにいるのかを直感させる。

それでは、これら3つの原則が具体的にどんな数値やルールとして落とし込まれているのか、実務で使える4つのポイントを見ていきましょう。

2. 【実務で即使える】Apple HIGが定める4つの必須基準

① タップ領域「44×44pt」の人間工学ルール

HIGで最も有名であり、絶対に外してはならないのが「すべてのインタラクティブ要素のタップ領域は最小でも44×44pt（CSSでは44×44px相当）を確保する」という基準です。

人間の成人の指の腹は、画面上で約7〜10mmの接触面積を持ちます。これをディスプレイの解像度に換算した物理的な最小値が44ptです。

• 見た目のサイズとタップ領域を分離する：アイコン自体は16pxや24pxと小さくても、周囲にパディングを持たせて「透明なタップ可能エリア」を必ず44px以上に広げます。
• 隣接要素との安全マージン：タップ領域同士が重なると誤操作（ミスタッチ）の原因になるため、最低でも8〜12pt以上の余白を空けて配置します。

② 視覚的ノイズを削る「マテリアル（半透明ブラー）」の階層表現

AppleのUIでは、ナビゲーションバーやモーダルシートに「ベタ塗り」や「黒いドロップシャドウ」をあまり使いません。代わりに多用されるのが、すりガラスのような「マテリアル（透過ブラー）」です。

背後のコンテンツがほんのり透けて見えることで、ユーザーは「いま上のレイヤーを操作しているけれど、下の画面もちゃんと残っている」と無意識に把握できます。画面の文脈（コンテキスト）を切断しないための、高度な情報設計です。

③ 視認性とジャンプ率を担保する「SF Pro」タイポグラフィ比率

Appleのシステムフォント「SF Pro」には、文字サイズごとに視認性を保つための厳密なスケールが定義されています。

Webやアプリをデザインする際、フォントサイズを目分量で決めるのではなく、「本文17ptを基準に、上下のスケールを行送りとセットで固定する」ことで、全体の文字組みに秩序が生まれます。

④ 角丸の統一ルール（Squircle / スコーカル曲線）

iPhoneのアイコンやカードの角丸は、単純な円弧（正円の角丸）ではありません。直線からカーブへの変化率を極限まで滑らかにした「スコーカル（超楕円 / Continuous Corner）」が採用されています。

Figmaで角丸を設定する際は、Corner Smoothing（角の滑らかさ）を「60%（iOS標準）」に設定することで、このApple特有の上品な曲線を再現できます。

3. Webデザインに応用する！HIGのエッセンスを取り入れるCSSテクニック

HIGの考え方は、iOSアプリだけでなくモダンなWebサイトやLPのコーディングにもそのまま活用できます。

Apple風のすりガラスヘッダーを実装するCSS

.apple-blur-header {
  position: sticky;
  top: 0;
  width: 100%;
  height: 60px;
  /* 背景をうっすら透過 */
  background: rgba(255, 255, 255, 0.72);
  /* 背後を強烈にぼかす */
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  /* ごく薄い境界線を引く */
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  z-index: 1000;
}

ポイントは saturate(180%) を加えることです。彩度を少しブーストしてぼかすことで、背後の写真や色が濁らず、Apple製品のようなみずみずしい透明感が表現できます。

4. 操作性の差を生む「マイクロインタラクション」の設計

HIGが強く意識しているのが、「ユーザーが画面を触った瞬間のフィードバック」です。

触覚フィードバック（Haptics）と視覚変化の同期

トグルスイッチを切り替えたとき、指先に「コトッ」と伝わる微細な振動（Taptic Engine）。画面の見た目の切り替わりと触覚刺激が1ミリ秒のズレもなく同期することで、ユーザーは「物理的なスイッチを押し込んだ」と錯覚します。

物理法則がもたらす安心感

iOSのアニメーションは、質量、摩擦、バネの反発力といった現実世界の力学法則を忠実に再現しています。

画面上の要素が指のフリックに対して遅延なく自然に追従することで、操作の違和感や引っかかりを排除しています。

5. 【比較】Googleの「紙」と、Appleの「ガラス」。思想から見るUIデザインの違い

少し視野を広げて、よく比較されるGoogleの「Material Design（マテリアルデザイン）」と、Appleの「HIG」のデザイン思想の違いについても整理しておきましょう。

両者は、デジタル空間の解釈とアプローチが根本から異なっています。

Googleは「重なり合う紙」

Googleは画面を「デジタル空間に配置された紙（インクとプレート）」と捉えています。カードが何層も重なっているように見せるため、明確な「影（ドロップシャドウ）」とエレベーション（標高）を用いて要素の上下関係を定義します。

AndroidやWebなど、多種多様なデバイス環境で一貫した操作性とロジックを担保することを重視した、機能的で堅牢なアプローチです。

Appleは「空間を仕切るガラス」

一方、Appleは画面を「空間を仕切るガラス」として捉えています。要素の重ね合わせは、透過とブラー効果による光学的な奥行きで表現します。

UIの装飾を目立たせるのではなく、コンテンツ（写真やテキスト）を主役に据える方針がHIGのベースになっています。

ハードウェア（iPhone/Mac）とソフトウェア（iOS/macOS）を統合的に開発するAppleだからこそ、ハードウェアとOSの一体感を高める合理的な設計アプローチが貫かれています。

まとめ：HIGの数値基準をUI設計とレビューの根拠にする

今回紹介した数値やルールはAppleのガイドラインの一部ですが、日常的に触れるUIパーツには、人間工学に基づいた厳密な数値ルールが組み込まれています。

誤操作を防ぐ44ptのタップ領域、背後の階層を伝える半透明マテリアル、目に負担をかけない11pt・17ptの文字設計、そして指先に吸い付く物理アニメーション。そのすべてが、誤操作や認知負荷を最小限に抑えるための実務的な設計基準です。

UX/UIデザイナーにとって、HIGは発想を縛る制約ではなく、「なぜこのデザインが押しやすく、使いやすいのか」を論理的かつ説得力を持って説明するための強力な論理的根拠となります。ぜひ日々の実務設計やレビューに役立ててみてください。

スマホやWebのUI設計に必要な基本基準や、迷わない画面設計のロジックを体系的に学びたい方は、以下の1冊を持っておくと実務の辞書代わりに重宝します。

次のステップ：あわせて深掘りしたい知見

画面の視認性やレイアウトの整合性をさらに高めたい方は、以下のタイポグラフィ設計やレスポンシブ構築の実践記事もぜひ参考にしてみてください。

ボタンのUIデザイン設計ガイド｜Primary・Secondary優先度と44pt基準

UIデザインにおけるボタンの優先度5階層（Primary・Secondary・Tertiary・Destructive・Ghost）の使い分けと、44pt基準やコントラスト比4.5:1など「迷わず押せるUI」の設計ルールを実務目線で徹底解説します。

画面崩れを根本から防ぐ。モダンCSSとFigmaで構築する「絶対に破綻しない」レスポンシブ・レイアウト設計

デバイスサイズが変わっても破綻しない、Auto LayoutとモダンCSSを組み合わせた頑健なUI設計手法をお届けします。

The post Apple HIG実務ガイド｜タップ領域44pt・文字11pt基準とiOSの基本原則【2026】 first appeared on デザペディア.

日々のUI制作で画面に向き合っていると、「なんとなく良さそうな青色を選んでみた」「いまっぽい角丸の数値にしてみた」と、自分の直感や感覚だけに頼って決めてしまう場面はないでしょうか。
デザインの意図をチームやエンジニアに説明する際、「なぜここはこの余白なのか」「なぜこの色なのか」という根拠が曖昧だと、レビューでの合意形成に時間がかかったり、手戻りが発生する原因になりがちです。

そんな「デザイン決定の根拠」をロジカルに整理する上で大きな助けになるのが、Googleが策定・公開しているオープンソースのデザインシステム「Material Design 3（M3）」です。
M3は単なるコンポーネントのカタログではなく、人間の知覚に基づいた配色ロジックや、アクセシビリティを仕組みで担保するトークン設計など、実務で今すぐ活かせる実践知見が体系化されています。

今回は、Material Design 3の基本思想から、配色迷子をなくす「HCT理論」、実務で破綻しないカラートークンの階層設計、そしてFigmaでの具体的な活用フローまでを分かりやすく整理しました。

1. Material Design 3（M3）とは？通常ルールとの決定的な違い

Material Design 3 – Google's Open Source Design System

Googleが提供するオープンソースデザインシステム。個人の嗜好に適応するダイナミックカラーやHCTカラースペース、最新のUIコンポーネント仕様を網羅。

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判断が下しやすくなります。

両者の思想を把握しておくことで、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の構成要素に合わせて明確なグループに分かれています。
実務で頻出する主要なトークンの役割は以下の通りです。

「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で精緻に組み上げられています。

Material 3 Design Kit – Figma Community

Google公式提供のMaterial Design 3 UIキット。最新のAuto Layout、カラートークン、コンポーネント構造をFigma上で直接複製・参照可能。

自分自身も、新しい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）やライブラリの非公開化など、実務で迷わない変数設計ルールは以下の記事で詳しく解説しています。

Figma Variables（変数）の使い方完全ガイド｜破綻しない命名規則とトークン設計【2026】

Variablesへの心理的ハードルを下げ、スモールスタートで運用を回すための2層トークン構造（PrimitiveとSemantic）とガバナンス設計ルールを徹底解説。

コンポーネント内の要素間余白やPaddingを崩さずに組むオートレイアウトのネスト設計手法については、こちらの解説記事を参考にしてください。

Figmaオートレイアウト完全ガイド！崩れないネストと余白設計

Figmaオートレイアウトの基本と崩れないネスト設計を解説。Padding・Gapの設定からHug・Fill・Fixedの使い分け、メディアカードの組み立て手順まで網羅。

設計したトークンや余白をエンジニアへ手戻りなく引き渡すためのDev Mode活用法については、以下の記事で体系的に整理しています。

Figma Dev Mode（開発モード）の使い方と料金体系｜できること・できないことと実装連携【2026】

Figma Dev Modeで何ができて何ができないのか、有料シートの料金体系やVS Code連携、差分比較（Diff）による手戻り防止フローを徹底解説。

まとめ：デザインの「感覚」を強固な「ロジック」に変える

Material Design 3は、単なるGoogle専用のデザインガイドラインではありません。
アクセシビリティを担保しながら、デザインの意思決定に確かな根拠を与えるための優れた設計思想です。

• HCTカラースペースを理解し、Toneの数値差によってアクセシビリティを自動担保する
• Hex値の直打ちをやめ、Primary / Surface / Containerなどの役割（Role）でトークンを管理する
• Material Theme Builderと公式Design Kitを活用し、Figma実務での設計精度を高める

まずは次の案件から、主要なカラーを「役割」で定義してみたり、公式のDesign Kitを覗いてみることから始めてみてください。
「なんとなく決めた色や余白」に論理的な説明がつくようになるだけで、チームとの合意形成がぐっとスムーズになります。

The post Material Design 3（M3）入門ガイド｜カラートークン設計とFigma実務活用【2026】 first appeared on デザペディア.

今回は、UIデザインの質を劇的にアップさせる「グリッドシステム」の本質と実践的な活用法について紹介します。

実は私自身、デザイナーとして駆け出しの頃は「なんとなく綺麗に見えるから」という感覚だけでレイアウトをしていました。

その結果どうなったかというと……

先輩デザイナーから「画面ごとに余白がバラバラ」「なぜここにこのボタンを置いたの？意図が伝わらない」と、真っ赤な修正指示を山のように返される毎日でした。

何度もやり直しになり、深夜まで残業しては「私にはデザインのセンスがないのかも……」と落ち込むほどのドン底を味わった苦い経験があります。

そんな「デザインがなんだかバラバラに見える…」「どこに何を置けばいいのか、自分の感覚だけで決めていて不安！」という過去の私と同じような悩みを抱えている方に向けて、当時の私が「もっと早く知っておきたかった！」と痛感したグリッドシステムの考え方やテクニックをまとめました。

この記事を読めば、明日からすぐに使えるレイアウトの基礎が身につき、迷いのないデザインができるようになるはずです！

1. グリッドシステムとは何か？──デザインの「骨格」を作る思考法

グリッドシステムとは、「事前にグリッド（格子上）の構図ルールを決めておいて運用するもの」です。

デザインツール上で格子状のガイドラインを引き、それを「骨格」として画像や見出しなどの要素を配置していくことで、ページ全体に一貫性と美しさを生み出します。

歴史と現代のUIにおける重要性

グリッドシステムの歴史は古く、1950年代の「スイス・スタイル」から生まれたと言われています。

グラフィックデザインの世界で体系化されたこの手法は、現代のWebサイトやスマートフォンアプリのデザインにおいても、レイアウトの根幹を担う必要不可欠なルールとなっています。

私が初めてグリッドシステムを本格的に導入したのは、ある大手企業のコーポレートサイト案件でした。

それまで「目分量」で作っていた私は、この「見えない骨格」に沿って要素を配置しただけで、画面全体がカチッと整うのを見て大きな衝撃を受けました。

それまでバラバラだった要素が、ルールに沿うだけで見違えるように綺麗にまとまったのを今でも覚えています。

2. なぜグリッドシステムが必要なのか？──「なんとなく」を卒業する理由

「目分量でなんとなく配置する」デザインから卒業すると、実務において以下のような絶大なメリットがあります。

3. グリッドシステムの基本──3つの基本型

実務で使い分けることが多い、代表的な3つの型を紹介します。

1. 2カラム8ブロック（初級）: シンプルなランディングページ（LP）や、スマートフォン向けのレイアウトによく使います。情報が少ない分、ダイナミックな見せ方が可能です。

2. 3カラム18ブロック（中級）: 一般的なコーポレートサイトやメディアサイトで最もよく使われる構成です。私も新規サイトを立ち上げる際は、まずこのあたりから骨組みを考え始めます。

3. 4カラム32ブロック（上級）: SaaSの管理画面や、情報量が多い複雑なダッシュボードで活躍します。細かい情報整理が必要な案件では、12カラムで細かく分割し、要素によって「4カラム分使う」「8カラム分使う」と柔軟に組み合わせる手法をよく採ります。

カラム数（分割数）が少ないほどシンプルで大胆な表現に向いており、多いほど緻密な情報整理に向いています。

4. 実践：実務で使えるグリッドの作り方

いきなり複雑なグリッドを組むと混乱してしまうため、まずは「12カラム」をベースに設定してみるのが、現在のWebデザインの主流でありおすすめです。

私がよくやる基本の手順

1. 画面サイズとマージンを決める：例えばPC向けなら横幅を1440pxなどに設定し、左右の余白（マージン）をしっかり確保します。

2. カラムとガター（溝）を設定する：デザインツール（Figmaなど）のレイアウトグリッド機能を使い、12カラムに分割します。カラムとカラムの間にある余白（ガター）は、24pxや32pxなど、8の倍数で設定することが多いです。

3. 要素を配置する：「メインコンテンツは8カラム分」「サイドバーは4カラム分」というように、グリッドに合わせてブロックを配置していきます。

お恥ずかしい話ですが、初心者の頃の私は「カラム」だけを意識して「ガター（要素間の余白）」を完全に無視していました。

その結果、要素同士がギチギチにくっついた、窮屈で素人っぽいデザインになってしまったんです。

先輩に「ガターの幅を一定（例えば24px）に保ってみて」とアドバイスされ、その通りに直した瞬間、画面にしっかりとした余白が生まれ、一気にプロが作ったような洗練されたレイアウトに変わりました。

5. 最近のトレンド：弁当グリッド（Bento Grid）

最近、Appleの製品ページなどでよく見かける、大きさの異なる四角い「箱」を綺麗に敷き詰めたようなデザイン。それが「弁当グリッド（Bento Grid）」です。日本の「お弁当箱」の仕切りからインスピレーションを得たと言われています。

実際に案件で取り入れて感じたメリット

6. よくある失敗と対処法──「グリッドの罠」に気をつけよう

グリッドは強力な味方ですが、ルールに縛られすぎると陥る罠もあります。

デザインが退屈になる

グリッドの便利さに感動した私が次に陥ったのは、「ルール絶対主義」という罠でした。すべてをグリッドの中にきっちり収めようとするあまり、どこか事務的で単調なデザインになってしまったんです。そんな時は、あえて画像をグリッドから少しはみ出させて配置したり、背景のあしらいでリズムを作ったりして意図的な「崩し」を入れます。

まずは基本を守ってから崩す

ただし、最初からグリッドを無視して感覚で配置するのはNGです。「一度ルールの通りに完璧に作ってから、意図的に崩す」のがプロのテクニックです。

まとめ

今回紹介したグリッドシステムは、UIデザインのクオリティと作業効率を同時に底上げしてくれる、一生モノのスキルです。

かつての私のように「なんだかデザインが垢抜けない」「レイアウトに時間がかかりすぎる」と悩んで、自分のセンスを疑ってしまっている方は、ぜひ「12カラムのグリッドを引く」ところから始めてみてください。

配置の迷いがなくなることで、本来デザイナーが一番時間をかけるべき「ユーザー体験（UX）の向上」や「魅力的なビジュアル作り」に集中できるようになりますよ！

終わりに

この記事が、過去の私と同じようにレイアウトで悩む方々のスキルアップに少しでも役立てば幸いです。

それでは、良いデザインライフを！

The post “なんとなく”を卒業する──グリッドシステムが教える、UIデザインの基本 first appeared on デザペディア.