← 仕事を速くする技術と考え方(guide.yoshimoto.dev トップ)へ
認知心理学 × ビジュアルデザイン

デザイン4原則はなぜ「わかりやすい」のか

近接・整列・反復・対比は、見た目を飾る作法ではない。読み手が意味を取り出すために払う認知資源(注意・作業記憶)の消費を、視覚の側で先回りして肩代わりする負荷軽減装置である。ゲシュタルト・前注意的処理・認知負荷理論を土台に、4つを一本の背骨で読み解く。

2026-07-05 8 セクション構成 近接・整列・反復・対比
SECTION 01

全体像 ── 4原則は認知処理のどこに効くか

4原則が効くのは、見た目を飾るからではない。読み手の認知資源を、視覚情報の側であらかじめ肩代わりして減らすからである。読み手の処理を段階で捉えると、4原則はそれぞれ別の段階を担う。

第1段階 · ボトムアップ
注意の捕捉
意識して探す前に「まずどこを見るか」が前注意的に決まる。
対比
第2段階 · 知覚的群化
まとまりと秩序
目が向いた先を、考える前に「かたまり」と「並び」へ組織化する。
近接・整列
第3段階 · トップダウン
学習と予測
一度覚えた規則で、次のブロックを一から読まずに先読みする。
反復
対比だけは複数段にまたがる 対比は入口の注意捕捉を主に担うが、それに加えて、際立った要素が記憶に残りやすいこと(孤立効果、von Restorff、1933)と、限られた注意をどこへ割り当てるか(選択的注意)にもまたがる。「入口の役割」を近接・整列・反復に紐づけてはならない一方、対比の守備範囲だけは前注意の1段階に収まらない。

まとめると、対比が入口で目を引き(前注意)、近接・整列が知覚のうちにまとまりと秩序を与え(群化)、反復が学習した規則で先読みを可能にする(予測)。ただし各段階は厳密に排他ではなく、実際の紙面では同時に働く。ここで示したのは「主にどの段階を担うか」の見取り図である。認知法則と原則の対応づけは、両者の結びつきが学術的に確立しているものだけを「対応」と呼んでいる。

SECTION 02

近接 ── 関係を距離で示すPROXIMITY

近接は、関係する要素をまとめ、無関係な要素を離すことで、レイアウトそのものに「どれとどれが仲間か」という情報構造を持たせる。線や囲み枠を1本も引かなくても、距離の差だけで見えないグループが生まれる。

認知メカニズム / ゲシュタルトの近接の要因(Wertheimer, 1923)

人の視覚は、点や線をひとつずつ順番に読むのではなく、まず全体をいくつかの「かたまり(群)」に自動でくくってから解釈する。この「近くのものを勝手に仲間だと見なす」働きが近接の要因である。関係する見出しと本文を近づけ、別の話題との間を大きく空けると、読み手は考える前に、余白の切れ目を境界線として「ここまでが1つの塊」と受け取る。「どれが仲間かを探す」手間を距離だけで肩代わりするので、これは認知負荷理論(Sweller, 1988)の言う課題外在性負荷(提示のしかたの悪さから生まれる余計な負荷)を下げる方向に働く。

用語の注 ゲシュタルト:要素の総和を超えて、まとまった形として立ち現れる全体。 作業記憶:いま使っている情報を一時的に保ちながら操作する記憶。情報を意味あるまとまりに整理すると、その負荷が下がる方向に働く(容量そのものは §07 で扱う)。
適用例 / 破った版 → 守った版
破った版:全部を等間隔
入力欄とラベル(均等)
氏名
山田 太郎
部署
経理部
内線
1234

どのラベルがどの値の相棒か1件ずつ確かめることになり、目が上下に往復して手が止まる。

守った版:群の内外で差
入力欄とラベル(グループ化)
氏名
山田 太郎
部署
経理部
内線
1234

ラベルと値を密着させ、組と組を離す。距離の差だけで対応が瞬時に見え、線なしで各項目が塊として立つ。

よくある誤解:「近接=とにかく詰めて省スペース化」。本質は距離の絶対的な近さではなく、群の内側と外側の距離の差をつけること。全体を均等に詰めると境界が消え、かえってまとまりが失われる。余白はグループを区切る積極的な設計要素であって、埋めるべき無駄ではない。
SECTION 03

整列 ── 見えない線で秩序を作るALIGNMENT

整列は、要素の位置を目に見えない基準線(縁がつくる想像上の直線)にそろえ、視線の流れと秩序を作る。文字サイズも色も変えず、位置をそろえるだけで読む速さと一体感が変わる。

認知メカニズム / ゲシュタルトの連続の要因(Wertheimer, 1923)

整列は見えない基準線を生む。連続の要因(good continuation・良い連続)により、脳は縁のそろった要素を「一続きの線」として自動的にまとめる。線のそろい/不ぞろいは、向きや傾きといった基本特徴として、視線を止めずに把握される(特徴統合理論、Treisman & Gelade、1980)。基準線があると次に視線を運ぶ先を予測しやすく、探索の迷いが減る。逆に縁がばらつくと、脳はどの要素が仲間かを一つずつ照合し直す。この照合という課題外在性負荷を最初から取り除くのが整列である。

注(前注意的処理) 「前注意的処理」(注意を向けて一つずつ確かめる前の段階で走る視覚処理)という呼称は特徴統合理論が名付けたものではなく、注意を要さず並列に処理される特徴登録の段階に対応する概念である。この段階で並列に拾われるのは、向き・色・大きさなど一部の基本特徴に限られる。
適用例 / 破った版 → 守った版
破った版:縁がばらつく
見出し・箇条書き・出典(中央ぞろえ)
四半期レビュー
売上が回復した
在庫が減った
出典:社内集計

縁がそろわず基準線が生まれない。視線は要素ごとに開始位置を探し直し、4つが同じ話だと分かりにくい。

守った版:左端を一直線に
見出し・箇条書き・出典(左ぞろえ)
四半期レビュー
売上が回復した
在庫が減った
出典:社内集計

左端を1本の見えない縦線にそろえる。視線は線を上から下へなぞるだけで全体を追え、一体感が生まれる。

よくある誤解:「中央ぞろえは整っていて美しい」。中央ぞろえは左右の縁がそろわず基準線が生まれないため、視線の開始位置が行ごとに変わり探索の手間が増える。整列の本質は「見た目の対称」ではなく「縁をそろえて一本の基準線を作ること」。短い見出しなどの例外を除き、左(または右)ぞろえで縁を一直線に通すほうが役割を果たす。
SECTION 04

反復 ── 一度学べば二度目から速いREPETITION

反復は、見出し・ボタン・色の役割・余白といった視覚要素を全体で同じルールに従って繰り返し、一貫性と予測可能性を作る。効くのは、既知の規則を参照するトップダウンの処理段階である。

認知メカニズム / 類同の要因・スキーマ・自動化

人はまず「似た見た目のもの=同じ役割」と無意識にグループ分けする(ゲシュタルトの類同の要因、Wertheimer, 1923)。ここまでは近接・整列と同じ知覚的群化の働きだ。反復が固有に効くのはこの先である。同じ体裁が資料全体で繰り返されると、群化された仲間が「青い下線つき=クリックできる」「太字ゴシック=見出し」という規則の型(スキーマ)として学習され、二度目からはトップダウンに先読みできる。この型に照らせば、要素ごとに「これは何か」を判断し直さず即座に意味を割り当てられる(パターン認識の自動化)。逆に見た目のルールが毎回変わると、その都度型を作り直す再学習が発生し、処理がやり直しになる。

用語の注 スキーマ:過去の経験から作られる知識の枠組み(概念は Bartlett, 1932)。繰り返し接した規則が意識的な吟味なしに自動処理されること(自動処理)は Shiffrin & Schneider, 1977 に由来。 プライミング(先行刺激効果):先に触れた刺激が後続の関連刺激の処理を速める現象(Meyer & Schvaneveldt, 1971)。最初の「この色=警告」が後続ページの解釈を速める。
適用例 / 破った版 → 守った版
破った版:見出しの体裁が毎回変わる
3枚のスライド(見出し+本文)
◆ 売上概況
前年比プラス12%。主力製品が牽引した。
コスト
物流費が想定を上回った。
— 今後の課題 —
在庫回転の改善が要る。

見出しの色・サイズ・位置が毎回変わり、どれが見出しでどれが本文か、ページごとに一から見分け直す。

守った版:同じ役割は同じ見た目
3枚のスライド(見出し+本文)
売上概況
前年比プラス12%。主力製品が牽引した。
コスト
物流費が想定を上回った。
今後の課題
在庫回転の改善が要る。

「濃紺の太字=見出し/灰色=本文」という規則が繰り返しで学習され、2枚目からは見分けずに中身へ視線が向かう。

よくある誤解:「反復=目立たせる手段」という取り違えが最も多い。目立たせる(重要度の可視化)は対比の役割であり、反復の仕事ではない。反復が担うのは一貫性と予測可能性の確立。統一すべきは「同じ役割には同じ見た目」という規則であって、全要素を同一に見せることではない(階層は対比でつける)。
SECTION 05

対比 ── 最初の視線を設計するCONTRAST

対比は、要素間に意図的な差(大きさ・色・太さ・余白)をつけ、重要度の高いものを目立たせて差異を可視化する。「どこを最初に見るか」を作り手が設計する原則である。

認知メカニズム / 前注意的処理・図と地・孤立効果

視覚には、意識して探す前に色・向き・大きさを視野全体で一斉に(並列に)拾い上げる段階がある。周囲と1つの特徴だけが際立って違う要素は、この段階でポップアウト(背景から飛び出して見える現象)を起こし、探さなくても目に入る(特徴統合理論、Treisman & Gelade、1980)。対比とは、目立たせたい要素に「周囲と違う単一の特徴」を与え、この自動検出に載せる操作である。さらに図と地の働きが絡む——視野は自動的に「図(浮き出て注目される領域)」と「地(後退する背景)」に分かれ、両者を同時に主役として見ることはできない(Rubin, 1915)。対比は要素を「図」に押し上げ、それ以外を「地」に退かせる。

注(太字の効き方) 色・大きさ・向きは前注意段階で検出される単一特徴だが、太字が目立つのは独立した特徴というより、周囲との輝度・コントラスト差によるもの、と位置づけるのが正確である。また孤立効果(von Restorff, 1933)は、周囲との文脈(似ている度合い)に対して相対的に効くのであって、単に派手にすれば記憶に残るわけではない。
適用例 / 破った版 → 守った版
破った版:差がない
売上報告スライド
当四半期の売上は前年比プラス12%となり、堅調に推移しました。

数字が文章に埋もれる。上から全部読んで自分で要点を探すしかなく、探索の負担が丸ごと残る。

守った版:1点だけ際立たせる
売上報告スライド
+12% 前年比・当四半期売上

12%だけを数倍に、他は控えめに落とす。差が単一かつ大きいので、開いた瞬間に視線が数字へ吸い寄せられる。

よくある誤解:「対比=とにかく目立たせる」と捉え、赤・太字・大サイズ・下線を何箇所にも同時に使う誤用。強調が増えるほど「図」が乱立して図と地の分化が崩れ、どれも突出しなくなる(=すべてを強調することは、どれも強調しないことに等しい)。目立たせる対象を1〜2点に絞り、残りを意図的に弱めることが本質。
SECTION 06

4原則の連携 ── 一枚の中でどう協働するか

4原則は単独でも効くが、連携すると読み手の視線が、途中で止まったり戻ったりせず、入口から最後までひと続きに流れる。この流れは、おおむね §01 の処理段階の順に起きる。

① 対比が入口を作る

前注意的に拾われる強調が「まずここを見よ」と視線の開始点を与える(注意捕捉)。引きつけた先が無秩序なら、捕捉した注意は行き場を失い探索に漏れる。

② 近接・整列が秩序を渡す

目が向いた先にまとまりと基準線があると、視線は迷わずまとまりから次のまとまりへ流れる(知覚的群化)。

③ 反復が次を保証する

最初のブロックで学んだ規則が次でも通用し、2つ目以降を一から読み解かずに先読みできる(トップダウンの予測)。

骨格と装飾の切り分け 4原則は扱う対象で2つに割れる。骨格=どこに置くか(配置)=近接・整列・反復は、色を一切使わず白黒のワイヤー(骨組みだけの下絵)でも成立する。装飾=どう際立たせるか=対比は、色のコントラスト・太字・サイズ強調で「目立たせる」専任。「目立たせる」を整列・近接・反復に持ち込んではならない——整列は秩序、近接はまとまり、反復は予測可能性であって、いずれも強調ではない。
作る順番:骨格を先に、装飾を後に。配置を変えると要素の位置そのものが動くため、先に色や強調を決めても位置が動いた瞬間にやり直しになる。配置を固めてから対比を載せれば、強調は動かない土台の上で一度で決まり、最重要要素だけに絞れる。
対比だけ強く、骨格が弱い紙面

目を引いた先が散らかっていて、読み手を疲れさせる。

骨格だけ整い、対比が無い紙面

秩序はあるが、どこから読むかの入口が無く、視線が彷徨う。

連鎖を1文で言えば、対比で引きつけた先に近接・整列の秩序があり、反復でその秩序が次も同じ規則だと保証される。4つは互いの弱点を補い合う一組として設計するのが要点である。

SECTION 07

認知負荷の総括 ── なぜ「わかりやすい」と感じるのか

最後に、4原則がなぜ「楽に読める」のかを、認知負荷という一つの物差しでまとめる。4原則が主に減らすのは、3種の負荷のうち「外在的負荷」である。

内在的負荷

題材そのものの難しさに由来する負荷。4原則では変えられない。

外在的負荷 ← ここを削る

提示のしかたが悪いために余計にかかる負荷。「どれが同じ群か」「どこから読むか」「この色は何か」を自力で探す手間。

関連的負荷 → ここへ回す

理解や図式の形成という有益な処理へ振り向けられる負荷。空いた枠がここへ回る。

作業記憶の容量 3種の負荷は、限られた作業記憶の枠を奪い合う。同時に保持できる項目はごく少ない(Miller の7±2、1956/現代的にはより厳しく約4とする説、Cowan、2001)。ただしこれは記憶で同時に保持・操作できるチャンク数の話であって、紙面上でいくつのグループを作るべきかを直接規定するものではない。

近接・整列が群化を、反復が規則の学習を、対比が入口の指定を紙面側で済ませるほど、探索に食われていた作業記憶の枠が空く。外在的負荷が下がると、空いた枠を内容理解という関連的負荷へ回せる。4原則は見た目を飾るのではなく、限られた作業記憶を無駄遣いから守り、本来向けるべき「意味を取り出す処理」へ資源を集中させる、負荷配分の装置として効く。

だから読み手は、理由を言葉にできないまま「わかりやすい」と感じる。4原則は装飾ではなく、認知資源を節約する4つの装置である。

SECTION 08

出典

認知法則の帰属(提唱者・年)は、超一流編集者レビューの査読で全件が正確と確認された。数値は Miller(7±2)・Cowan(約4)のように教科書的に確立したものだけを用い、効果量などの統計は創作していない。

  • Robin Williams(ロビン・ウィリアムズ)、1994/第4版 2015、『The Non-Designer's Design Book(ノンデザイナーズ・デザインブック)』── 近接・整列・反復・対比の4原則そのものの実務上の出典。
  • Max Wertheimer(ヴェルトハイマー)、1923、"Untersuchungen zur Lehre von der Gestalt II" ── ゲシュタルトの群化法則(近接・類同・連続などの要因)の原典。
  • Edgar Rubin(ルビン)、1915、『Synsoplevede Figurer』── 図と地の分化の原典。
  • Anne Treisman & Garry Gelade(トライスマン、ゲラーデ)、1980、"A feature-integration theory of attention" ── 特徴統合理論。単一特徴の前注意的な並列検出(ポップアウト)と、複数特徴結合時の逐次探索。
  • Hedwig von Restorff(フォン・レストルフ)、1933 ── 孤立効果(際立った項目が記憶に残りやすい)の古典的実験。
  • Frederic Bartlett(バートレット)、1932、『Remembering』── スキーマ概念の出典。
  • Richard Shiffrin & Walter Schneider(シフリン、シュナイダー)、1977 ── 自動処理と統制処理の二重過程理論。
  • David Meyer & Roger Schvaneveldt(マイヤー、シュヴァネヴェルト)、1971 ── 意味的プライミング(先行刺激効果)の古典。
  • George A. Miller(ミラー)、1956、"The Magical Number Seven, Plus or Minus Two" ── 短期記憶の容量(7±2チャンク)の原典。
  • Nelson Cowan(カウワン)、2001、"The magical number 4 in short-term memory" ── 作業記憶容量の現代的精緻化(約4チャンク)。
  • John Sweller(スウェラー)、1988、"Cognitive load during problem solving" ── 認知負荷理論(作業記憶への負荷と学習)。