#249
インタラクション・アニメーション
#249ふぉーかるぽいんと
フォーカルポイント (焦点)
別名・表記:Focal PointEye Catcher視覚的焦点
UIXHERO Definition
「注目の的」。画面の中で一番目立つ場所。
概要
人間は本能的に、コントラスト（対比）の強い部分や、顔、動くものに目を奪われる。 デザイナーは色、サイズ、余白、動きなどを操作してフォーカルポイントを作り出し、ユーザーの視線をコントロールする。
UXでの活用
- コンバージョン率の向上: 「購入する」などの重要なアクションボタンをフォーカルポイントにすることで、クリックされる確率（CTR）を高める。
- 迷いの解消: 画面を開いた瞬間に「ここから始めればいいんだ」と直感的に分かるようにすることで、ユーザーの学習コストを下げる。
💡 使いどころ
ユーザーに最初に見てもらいたい情報がある時（ヒーローイメージ、CTAボタンなど）。情報の優先順位を明確にしたい時。
⚠️ 注意点・誤用
フォーカルポイントが多すぎると、ユーザーの視線が定まらず（分散）、混乱を招く。原則として、1つの画面（またはセクション）につき、メインのフォーカルポイントは1つに絞るべき。
具体例
- 白黒写真の中で、一箇所だけ赤色になっているリンゴ
- 何もない空間にポツンと置かれたボタン
- 人物の写真（特に「目」は強力なフォーカルポイントになる）
出典・参考文献:
- Ware, C. (2013). Information Visualization: Perception for Design (3rd ed.). Morgan Kaufmann.
- Nielsen, J., & Pernice, K. (2010). Eyetracking Web Usability. New Riders.
- Itti, L., & Koch, C. (2001). Computational modelling of visual attention. Nature Reviews Neuroscience, 2(3), 194–203.
関連する解説記事
関連する記事詳細が見つかりませんでした。