目は「全体」を見ていない──中心視野と周辺視野が示す視線の優先順位

今回のテーマは、中心視野と周辺視野が示す視線の優先順位です。人はそもそも、どこを「見て」いるのか——視覚構造そのものに踏み込むことで、UI設計の精度が変わります。サンアンドムーンは、表層ではなく認知から設計するという視点で、視線の実態をUIデザインに活かしていきます。

「全体が見えている」という思い込み

目を開いていれば、視野全体が均等に見えている——多くの人がそう感じています。しかし実際には、そうではありません。人間が細部をはっきりと認識できるのは、視野のごく中心部分だけです。私たちが「見えている」と感じている広い視野の大部分は、精度の低い情報をもとに脳が補完した世界です。「見えているという感覚」と「認識できているという事実」は別のことなのです。この前提を持たないまま設計を行うと、「目立つ場所に置いたから伝わるはず」という思い込みが積み重なります。視野の実態を知ることは、設計の起点を変えることにつながります。

中心視野と周辺視野——見る機能の非対称性

視野には機能的に異なる二つの領域があります。ひとつは「中心視野（fovea）」です。視野角にして約2〜5度という非常に狭い範囲ですが、この領域だけが高解像度で機能し、文字を読んだり、ボタンのラベルを確認したり、細部を識別したりするのは、すべてここに依存しています。もうひとつは「周辺視野」です。広大な領域ですが解像度は大幅に落ち、文字の判読や細かな形の識別は難しくなります。ただし、周辺視野には別の特性があります。動きや明暗の変化、大きなコントラストの差に対して非常に敏感で、何かが「ありそう」「動いている」という気配を素早く察知します。

視線はどう動くのか——サッカードとフィクセーション

私たちが何かを見るとき、目は「サッカード（saccade）」と呼ばれる素早い跳躍運動を繰り返し、その間に「フィクセーション（fixation）」と呼ばれる停留を行っています。情報の処理が起きるのはフィクセーション中だけです。視線が止まっているときに、中心視野が情報を高解像度で処理しています。つまり人は「見ている」ように感じていても、実際に認識しているのは視線が停留した一点ずつです。Webサイトにおけるユーザーの視線パターンが「F型」や「Z型」として観察されるのは、この視線運動の特性の現れです。重要な情報は、ユーザーの視線が自然に停留する場所に配置することが、認識される設計の基本となります。

UI設計への応用

中心視野と周辺視野の非対称性を理解すると、設計判断が具体的に変わります。重要な情報（CTAボタン、主要メッセージ、ナビゲーション）は、ユーザーの視線が自然に向く中心領域に配置する。周辺視野を活用して、スクロールを促すシグナルやセクションの境界感を作る。中心視野に向けた情報は、細部まで正確に設計する（小さな文字、細いアイコン線、低コントラストは中心視野でも認識しにくい）。一方で、周辺視野を必要以上に刺激しない（点滅、過剰なアニメーション）——これらが視覚構造に基づいた設計の基本です。また、視線が向いていない情報は、たとえ画面に映っていても見落とされてしまいます。この「見えているのに気づかれない」現象は、「選択的注意とは？見えているのに見落とす脳の仕組みとUX設計」でも掘り下げています。

記事監修

中谷 浩和

株式会社サンアンドムーン｜代表取締役

1976年創業のデザイン事務所を前身に、Webコンサルティング・UI/UXデザインを専門とする。
国際標準のUX設計プロセスを学ぶ Google UX Design Professional Certificate を取得し、 上級ウェブ解析士 としてデータ主導のサイト改善にも精通。デザイン思考を軸に、ユーザー認知・行動・文脈からWebサイトの課題を捉え直し、成果につながる設計へ落とし込むことを使命としている。システム設計、フロントエンド技術、SEO・パフォーマンス改善まで技術知識を横断し、サイト全体を見通したディレクションを得意とする。自動車メーカー、銀行・クレジットカード、保険などの大手から中小企業まで、数値で検証しながら改善を積み重ねる実践的なコンサルティングを提供している。