人間の視野とUIデザインの小話
こんにちは、トークアンドデザイン合同会社の今西(@no_imanishi)です。
弊社で開発のお手伝いをさせていただいているような様々なデジタル機器を用いる時には視覚が重要な役割を果たしています。UIデザイナーとして視覚の特性についてしっかり理解しているかいうと、昔学校で習ったけれど…という感じになりがちです（なりませんか？）。視覚の中でも視野について、ちょっと復習をしたことをまとめたいと思います。
人間の視野についての基礎知識
視覚が情報をキャッチできる範囲が視野ですが、まず視野についていくつか知識をまとめてみます。
人間の視野は水平方向に200〜220°（＝片側100〜110°）、上下方向に130〜135°
その中でも最も鮮鋭な視覚が得られるのは中心の5°程度。
人間の目で光のセンサーの役割を果たす細胞には、錐体細胞と桿体細胞の2種類がある。
錐体細胞は色を認識できるが、暗いところでは働かない。視野の中心部分に集まっている。
桿体細胞は色は認識できないが、感度が高く暗いところでも働く。
中心視野ってなんだ
中心視野と周辺視野という言葉を聞いたことがあるかもしれません。
中心視野・周辺視野という言葉は慣用的なもので、明確に線の引けるものでもないところがありますが、中心視野を一番狭い意味で見ると視野の中心の5°の部分を指すし（この5°は目の奥にある中心窩と呼ばれる最も高精細な視知覚が得られる場所と対応する）、少し広めに捉えると中心の18°（これは黄斑と呼ばれるエリアと対応します）ということになりそうです。
【視野の分類】 視野は大きく分けて，中心視野central visionと周辺視野peripheral visionとに分けられる。視野の分類は網膜の構造に依存するところが大きい。これは二つの主要なトポグラフィカルな領域から成る。黄斑macula（高い空間分解をもつ視野の中心18°程度の広さの領域）とその周辺網膜である。黄斑には錐体coneが多い一方で，周辺網膜は桿体rodにほとんど占められている。錐体が多い視野の中心では色覚と高い空間解像度に優れる一方で，桿体が多い視野の周辺部では低い光量での感度や運動の検出に優れている。
我々が扱う、各種の画面上に表示されるUIは、多くの場合中心視野で捉えられることになります。では、この5°や18°の中心視野は、我々がスマートフォンやPCを使う際には、どのくらいの広さをカバーしているのでしょうか？計算して、簡単に図にしてみたのが以下です。
円が二重になっていますが、内側の円が狭い意味での5°の視野に相当し、外側の円が18°の視野に相当します。ここで一つ分かることは、中心視野は画面全体を覆わない（ことが多い）ということです。違う言葉で言うと、我々は中心視野という穴を通してUIを見ている、とも言えます。
もちろん、眼球は非常に素早く動くことができ、サッカード（跳躍性眼球運動）と呼ばれる注視位置を変える眼球運動が1秒間に3〜4回行われています。こうした眼球運動を通じて、我々は画面全体を認識しています。
よく「視点は左上から右下に動く」とか「F型の視点移動」とか「Z型の視点移動」とか言われますが、こうした視点移動は、我々が穴を通して自身の欲求を満たそうとするなかで、様々なUIの利用経験を通して学習してきたこととその時々に中心視野内に見えている情報の解釈がない混ぜになって、生み出されているということが言えるかと思います。
周辺視野はUIデザインに関わらないのか
一方で、周辺視野はUIデザインに関わることはないのでしょうか？
ある程度サイズのあるハードウェアプロダクトになると、人間との接触点も広い範囲に渡ることがあります。例えばオフィスやコンビニにある複合機は、操作画面部が主たるUIですが、出力された紙の取り出し口やスキャンベッドも人と関わるUIと言えます。
一部の複合機では、紙の取り出し口に、取り忘れ防止を意図したと思われるランプが内蔵されていますが、こうしたものは、周辺視野で認識されることの多いUIと言えそうです。
周辺視野の特徴は、桿体細胞が中心になっていると言う点であり、桿体細胞は暗所も含めて明るさに鋭敏な一方で色を認識する機能を持ちません。
従って、「注意を引く様に赤くしておこう」といった発想は、それが周辺視野に収まっている場合にはあまり意味がない可能性があります。周辺視野で何か注意を引きたい場合は、動きや明るさの変化で注意を引くことを中心に考えた方がよさそうです。
最後に〜ユーザー理解の一部として
ユーザー中心にデザインするということが当たり前に語られる様になった現在ですが、ユーザーを知るということは非常に多面的なことでもあります。ユーザーである人間を知ることの一つとして、UIデザインの一助になれば幸いです。
参考資料
弊社トークアンドデザインでは、組み込みシステムを中心としたUIデザインの制作、新規商品・新規事業に関わるプランニングの支援、ハードウェアプロダクトのインダストリアルデザインを行っています。
詳細はこちら↓から。