視線は順序を求める
Gordon（2021）は色・コントラスト・大きさ・グループで重要度を伝えることと定義します。単一の特徴で異なる要素は即座に目立ちます（Treisman & Gelade, 1980; Wolfe, 1994）。強調が五つあれば強調はないのと同じです。
余白とグループ
近接の原理（Wagemans et al., 2012）により、余白だけで構造が見えます。複雑さは第一印象を下げます（Reinecke et al., 2013）。文章の多いページはF型パターンを考慮します。
モバイル：一画面一主役
主要な行動は塗りボタン一つ、補助は枠線ボタンに。補助テキストを薄くしても色のコントラスト基準は守ります。整った画面は美的ユーザビリティ効果も得られます。
よくある質問
- 素早い確認法は？
- 画面をぼかして最初に目に入るものを確かめます。
- 強調色はいくつ？
- 主要行動用一色と状態色程度が目安です。
出典確認日：2026-10-27
参考文献
- Gordon, K. (2021, January 17). Visual hierarchy in UX: Definition. Nielsen Norman Group. 色・コントラスト・大きさ・グループで階層を作る方法の定義です。
- Treisman, A. M., & Gelade, G. (1980). A feature-integration theory of attention. Cognitive Psychology, 12(1), 97–136. 色や大きさなど単一特徴は即座に目立つという理論です。
- Wolfe, J. M. (1994). Guided Search 2.0: A revised model of visual search. Psychonomic Bulletin & Review, 1(2), 202–238. 視覚探索は特徴に導かれるというモデルです。
- Wagemans, J., Elder, J. H., Kubovy, M., Palmer, S. E., Peterson, M. A., Singh, M., & von der Heydt, R. (2012). A century of Gestalt psychology in visual perception: I. Perceptual grouping and figure–ground organization. Psychological Bulletin, 138(6), 1172–1217. 近接・類同などゲシュタルトの群化を総説しています。
- Reinecke, K., Yeh, T., Miratrix, L., Mardiko, R., Zhao, Y., Liu, J., & Gajos, K. Z. (2013). Predicting users' first impressions of website aesthetics with a quantification of perceived visual complexity and colorfulness. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 2049–2058). ACM. 視覚的複雑さが第一印象を下げることを示した大規模研究です。
- Buscher, G., Cutrell, E., & Morris, M. R. (2009). What do you see when you're surfing? Using eye tracking to predict salient regions of web pages. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 21–30). ACM. 視線追跡で目立つ領域を予測した研究です。
- Lidwell, W., Holden, K., & Butler, J. (2010). Universal principles of design (Rev. ed.). Rockport. 階層・整列・近接の原則を簡潔にまとめています。