Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone

私たちの視野はとても広い範囲が見えているように思いますが、本当によく見えているのはほんの少しの領域しかありません。これは人間の目には「中心視野」と「周辺視野」という役割の異なる機能を持っているからです。
この記事では「中心視野」と「周辺視野」がどのような役割を果たすのかを調査し、それらがデザインにおいてどのように利用されているのか、作り手はどのような事を意識する必要があるのかを考察したいと思います。

中心視野で詳細を把握し、周辺視野であらましを把握する

Peripheral_vision

人間は両目を合わせておおよそ左右100~110度を見る事ができると言われていますが、本当によく見えているのは5度ほどしかなく、よく見える領域を中心視野、それ以外の領域を周辺視野と呼んでいます。
中心視野から離れるほど視力は落ちていき、解像度が低くなっていきます。

網膜位置における視力

引用元:有効視野とは

本を読んだり、何かに注目する時などは中心視野を使いますが、全体のあらましを把握する時には周辺視野を使っています。以下は中心部分のみを見せる写真と中心部分以外を見せる写真ですが、後者の写真の方が場所や状況をより早く把握できるという事が実験で分かったそうです。

中心が見える写真と周辺が見える写真

そのため、Webサイトにおいてもユーザーは周辺視野に入っているもので期待したコンテンツがありそうなのか、あるいはデザインの印象といったものを決めていると考えられます。

中心視野は色、周辺視野は明るさを認識する

中心視野には錐体細胞が密集していますが、錐体細胞は色を識別するのが得意です。しかし、色を識別するために多くの光量を必要とします。一方、周辺視野には桿体細胞が多くあり、桿体細胞は感度が高いので明るさを識別する事が得意です。
暗い場所などでは錐体細胞が機能せずに桿体細胞が機能するため、あらましが分かっても色などをはっきりと識別する事が出来ません。

そのため、夜景などでは光のある箇所のみ色を識別する事ができます。

夜景

引用元:Golden Gate Bridge ~夜のゴールデンゲートブリッジ~

周辺視野は動きを検知する

周辺視野は人間の視野の90%を占めますが、解像度は低いのでモノの形や色などを認識するのは苦手です。以下の動画はシュコダ・ファビアのCMですが、微妙な変化に気づきにくい人間の目の特性をうまく利用した例だと思います。

 

その代わり、周辺視野は動きにとても敏感なので、ユーザーの周辺視野に存在する要素に対して動きを与える事で注目を集める事ができます。しかし、ユーザーの目的に沿わない形で動きを与えてしまうと、鬱陶しいと思われてしまうので注意が必要です。

これはGoogleが提唱しているMaterialDesignのガイドラインに掲載されているものですが、トグルを切り替えた後にページ下部からトーストをアニメーションで表示する事でユーザーに注目を促す事ができています。

 

GoogleMaterialDesignSample

周辺視野は加齢とともに低下する

周辺視野は加齢とともに機能が低下する事が分かっており、これは「周辺は見えていても脳が認識していない」ことが原因なのだそうです。人間の動体視力は50歳あたりから低下しはじめ、65歳以上になると顕著です。

年齢と動体視力の低下推移

引用元:安全運転講習.com – 加齢に伴う動体視力や視野の低下

高齢者は、視野検査の結果が良くても、日常生活での実用的な視野は悪くなっていると言われています。視野検査の時には見ることに集中して努力するから周辺まで見えても、普段は「周辺は見えていても脳が認識していない」と言うのです。
若い時には複数のことを同時に行うことも比較的簡単です。脳の引き出しがたくさんあって、それほど努力しなくても並行処理できるのです。周辺視野で見えていることには、それなりに注意を払っています。
ところが、高齢者は、周辺視野で見えていても、それに注意を払うことができません。脳の引き出しが少なくなっていて、並行処理できないのです。
高齢者が道路を横断する際に事故に遭いやすいのは、実用視野が狭くなっているせいだろうと考えられています。

引用元:視野と加齢

この点においては高齢者向けのWebサイトでも同様に注意を払う必要がありそうです。

まとめ

このように中心視野と周辺視野の機能を踏まえて以下の点を意識する必要があります。

  • Webページのあらましや印象は周辺視野に映っている要素で決まる
  • 文字を読んだり、特定の要素に注目してほしい時には周辺視野に動きのある要素を含めない
  • 逆に特定の要素に注目してほしい時には要素に動きを加える。形や色の変化だけでは気づきにくい
  • 高齢者向けのWebサイトでは周辺視野が機能しにくい事を考慮した上で設計する

中心視野と周辺視野はとても便利な機能を果たしていますが、コンテンツによっては注意が必要です。
過去に運転中にPokemonGoに夢中になって事故になるニュースがありましたが、これも人間の中心視野が狭い事が原因の1つになっていると考えられます。

また、VRやARなどのコンテンツにおいてはWebサイトとは違い、ディスプレイの領域を超えてコンテンツにアクセスできる事から、周辺視野を考慮してインターフェースを設計する事でより良いユーザー体験を実現できると思います。

参考

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone