視覚階層・ゲシュタルト原則・CSS Subgrid・デザイントークン——Webデザインの土台を4つの視点でおさらい

2026年8月6日

AIツールに「いい感じのレイアウトにして」と頼めば、それなりの画面はすぐ出てくる時代になりました。ただ、出てきた案のどこが良くてどこが崩れているかを判断するには、人間側に基準が必要です。今日は原点に戻り、Webデザインの土台を4つの視点——見る人の注意を導く視覚階層、脳が形をどう認識するかというゲシュタルト原則、それを実装するためのCSS Grid／Subgrid、そしてチームやAIとの一貫性を保つデザイントークン——でおさらいします。

視覚階層：見る順番を設計する

視覚階層（Visual Hierarchy）とは、要素の大きさ・コントラスト・配置によって「先に見てほしいもの」と「後で見てもいいもの」を並べる技術です。Interaction Design Foundationの解説では、Z型・F型といった読み進めのパターン、三分割法、スケール、コントラスト、余白、近接性が核となる要素として挙げられています。実務でよく効くポイントを表にまとめます。

原則	やること	効果
サイズ	重要な要素を大きくする	Fittsの法則により大きい対象は視認・操作が速い
コントラスト	色・濃淡・太さで差を作る	最初に目が止まる場所を決める
余白（ホワイトスペース）	要素の周りに呼吸する空間を空ける	主役が「叫ばなくても」目立つ
近接性	関連する要素を近くに置く	グルーピングを言葉なしで伝える
アラインメント	グリッドに揃える	整然とした印象・信頼感につながる
反復	見出しや余白のルールを繰り返す	「これは見出しだ」と学習させ再確認の手間を減らす

ある調査では、余白を40%増やすだけでタスク完了までの時間が14秒から9秒に短縮されたという例も紹介されており（Roundcut）、余白は「装飾」ではなく機能であることがわかります。

ゲシュタルト原則：脳は「まとまり」で見る

ゲシュタルト心理学は、人間の脳が個々の要素ではなく「まとまり」としてものを認識する仕組みを説明します。UI設計で特に使う頻度が高いのは次の原則です（Toptal、UX Tigers）。

近接（Proximity）：距離が近い要素は「関係がある」と認識される。フォームのラベルと入力欄、価格と購入ボタンなど。
類似（Similarity）：同じ色・形・サイズの要素は同じグループとして認識される。リンクの色を統一するのはこのため。
閉合（Closure）：一部が欠けていても脳が補完して全体を認識する。IBMロゴのような線だけのロゴ表現に応用される。
共通運命（Common Fate）：一緒に動く要素は関連していると認識される。アコーディオンやスライダーの開閉アニメーションが該当。
図と地（Figure/Ground）：どれが主役でどれが背景かを明確にする。オーバーレイやモーダルの背景を暗くする処理が典型例。

逆に、意図的に「異なる機能は似せない」という使い方も有効です。例えば警告ボタンと通常ボタンを同じ見た目にすると誤操作を招くため、色や配置をあえて離します。

グリッドレイアウトのスケッチ — Photo: VFS Digital Design / CC BY 2.0, Openverse経由・出典ページ

実装の基礎：CSS GridとSubgridでレイアウトを組む

CSS Subgridは、親のグリッドが持つ行・列のトラックを子要素に引き継がせる仕組みです。従来のCSS Gridは直接の子要素までしかグリッドに参加できませんでしたが、Subgridを使うとネストしたカード内の見出し・本文・ボタンの高さを、兄弟カード同士でも自動的に揃えられます。

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;
}
.card {
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
}

親を触らずにカード内部だけレイアウトを微調整できるため、コンポーネント単位でAIにコードを書かせても崩れにくくなります。ブラウザサポートはモダンブラウザで安定してきており、フォームのラベル位置揃えなど地味だが効果の大きい場面で活躍します（Codrops）。

一貫性の基礎：デザイントークン

デザイントークンは、色・スペーシング・タイポグラフィ・角丸といったデザイン上の決定を、プラットフォームに依存しない名前付きの値として保存する仕組みです。2026年にはFigma Variablesで管理し、Style DictionaryでCSS変数やTailwindテーマなど各プラットフォーム向けに書き出す、という流れが定番になっています（The Masterly）。背景にはW3C Design Tokens Community Groupの安定仕様公開があり、ある調査ではトークン採用率が1年で56%から84%に伸びたと報告されています（Digital Applied）。

AIコーディングとの相性という観点でも重要です。トークンをCSS変数やTailwindクラスとして定義しておけば、ClaudeなどにUIコンポーネントを生成させたときも「汎用的な青」ではなく自社ブランドの値を自然に参照させやすくなります。まずは色・スペース・タイポ・角丸の30〜50個程度から始めるのが現実的なスコープです。

まとめ：AIに聞く前に、自分の判断基準を持つ

視覚階層とゲシュタルト原則は「なぜ見やすいか／見にくいか」を説明する言葉を与えてくれます。CSS Subgridとデザイントークンはそれをコードとチームのルールに落とし込む手段です。AIが生成したレイアウト案を評価するときも、この4つの視点に沿ってチェックすると、フィードバックが具体的になり修正の指示も出しやすくなります。

主な情報源

各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。