デザイン4原則「近接・整列・反復・対比」
の実務での使い方

「近接・整列・反復・対比」。デザインの入門書やUI解説で、繰り返し登場する4原則です。頭文字を取って「CRAP（近接:Proximity、整列:Alignment、反復:Repetition、対比:Contrast）」と呼ばれることもあります。この4原則は、どんな研究から生まれたのでしょうか。

実験ではなく、1冊の教科書から広まった

この4原則は、心理学の実験から導かれたものではありません。1994年、グラフィックデザイナーのロビン・ウィリアムズ氏が出版した『ノンデザイナーズ・デザインブック』という書籍で、デザインの専門教育を受けていない人向けに整理した枠組みです。ウィリアムズ氏自身、デザインの経験をもとに、既存の原則を実務者向けに分かりやすくまとめた、という位置づけで紹介しています。学術論文ではなく、教える立場の実務者が体系化した、実践のための枠組みだということです。

学術的な裏づけが薄い、というわけではない

出どころが教科書だからといって、内容に根拠がないわけではありません。4原則のうち、近接と類同（似たものはまとまって見える）は、この連載で扱ったゲシュタルトの法則がもとになっています。整列や反復についても、視覚的な情報を予測しやすくすることが、認知の負担を減らすという考え方と重なります。個々の原則は心理学に基づいているが、「4つにまとめて教える」という編集の仕方が、ウィリアムズ氏によるもの、と理解するのが正確です。

4つのうち、どれか1つは崩れていることが多い

実務で画面を見直すとき、この4つは診断のチェックリストとして使いやすいです。

• 近接:関連する情報が、離れて配置されていないか
• 整列:要素の左端・中央などが、見えない線でそろっているか
• 反復:同じ役割の要素（見出し・ボタンなど）が、同じ見た目で統一されているか
• 対比:重要な情報と、そうでない情報の差が、はっきりついているか

「なんとなく読みにくい」と感じる画面は、たいていこの4つのうち、どれか1つか2つが崩れています。原因を言語化する道具として、4原則は実務的に機能します。

結論:出どころを知ったうえで、道具として使う

4原則は、実験で証明された法則というより、実務者が教えるために整理した枠組みです。とはいえ、個々の要素は心理学的な裏づけと重なっており、画面の問題点を見つける実用的なチェックリストとして、いまも十分に使える考え方です。

参考文献

• Williams, R. (1994) The Non-Designer's Design Book, Peachpit Press
• Wagemans, J. et al. (2012) "A Century of Gestalt Psychology in Visual Perception I"（近接・類同の学術的な裏づけとして。PMC掲載）