MotionBoardデザインコンテンツ
視線誘導
見やすさ、わかりやすさに直結する視線誘導
Write your awesome label here.
視線誘導の目的とその効果
ダッシュボードをデザインするときは「使いやすさ」「わかりやすさ」が重要なポイントです。
利用する人にストレスなく使ってもらうためには、使い方や確認順序などの導線を意識して画面を構成しなければなりません。
そこで必要となるのが「視線誘導」です。
もくじ
視線誘導とは
視線誘導とは、ユーザーの視線の流れを意図的にコントロールし、意図した順番で見てもらうための手法です。
ユーザーに情報を認知させやすくし、視線移動のサポートをする役割を持っています。
アプリケーションやWebサイトだけでなく、広告や商品パッケージ、チラシ、売り場の棚割り・レイアウトなどにも活用されています。
ダッシュボードにおいても視線誘導は効果的な手法です。
入力作業や、操作をさせる画面は視線誘導の手法を活用することで、ユーザーがよりスムーズに作業しやすくなる効果が期待できます。
視線誘導の種類
視線誘導には基本的な手法と、人の視線の性質をふまえて視線移動を促したりサポートするための手法があります。
基本的な視線誘導の種類
視線誘導の基本をご紹介します。
この４つの手法は、多くの場面でよく利用されています。
まずはこの４つから知識を身につけましょう！
グーテンベルク・ダイヤグラム
グーテンベルク・ダイヤグラムは、情報が均等に配置されているときにおこる視線の流れです。
情報が均等に配置されている場合、視線は左上から斜め下方向に向かって移動する傾向があります。
この視線の動きの影響で、右上や左下にある情報は読み飛ばされてしまう可能性があります。
Webサイトやチラシなどでは、この斜めのラインに重要な要素を置いて、右上や左下には補足情報を配置するといった活用がされています。
ダッシュボードで均等な情報を配置する際は、こういった視線の動きを想定して情報の配置を検討するとよいでしょう。
Z型
Z型は、画面上での視線の流れがZの字のよう動きます。
左上はユーザーの最初の視点であり、情報が最も目立つ位置でもあります。そのため、重要な情報や目的を示す要素をこの位置に配置されることが多いです。
また、視線の最後の終点である右下には、ユーザーに特定の行動を促すアクション（実行・決定など）やリンクを配置することで、効果的な情報伝達と行動への誘導を促せます。
F型
F型は、ECサイトやブログ記事などのテキストが多いコンテンツ、また、SNSや横書きの書籍を閲覧する際の一般的な視線の動きです。
F型は下の方に行くほどユーザーが内容を読み飛ばす可能性が高くなります。
そのため、最も重要な情報は一番上に配置し、次に重要な情報を左側に配置します。
N型
N型は、ユーザーの視線が右上から始まり、右下へ移動してから左上へ、最後に左下へと移動するパターンです。
N型は、日本語の縦書きレイアウトに適しており、主に雑誌や新聞、漫画などの右開きの紙媒体で見られ、特にユーザーの年齢層が高い場合は縦書きが馴染みやすいです。
大から小へ
人は目に見える面積比が多いものから視線を向ける性質があります。
その性質を生かした手法が大から小へ視線を向けさせる誘導方法です。これは文字のサイズや太さにおいても同じことが言えます。
また、大から小への視線の流れは、これまで紹介した視線誘導を上回るほどの効果を発揮すると言われています。
ユーザーにまず見てほしい情報、認識してほしい情報を伝えるためには有力な手法であるため、チラシや、雑誌、Webサイト、看板など、この効果を利用しています。
例えば、下の画面のようなデザインだと、まず下部に配置された縦棒グラフに人は視線を向ける可能性が高くなります。
近接・整列・反復
人は画面上の情報を理解するとき、周囲にある情報も認識しながら理解しようとします。
「わかりづらい」「使いづらい」と思ってしまう原因はこの『近接・整列・反復』の視線誘導が関係していることも多いです。
どのような影響があるのか、ひとつずつ見ていきましょう。
- 近接
画面上の情報を理解するとき、周囲にある情報も踏まえて内容を理解しようとします。
情報を均等に配置することは一見きれいに揃えられているようにも見えますが、そのせいで人が混乱してしまうことがあります。
「Bad」のように、すべての情報を均等に配置してしまうと商品・商品名・金額の差別化がされてしまい、内容を見間違える可能性があります。
「Good」のように関連している情報は近接して配置するだけで、枠組みなどしなくても、情報をグルーピングして認識させることができます。
ダッシュボードをデザインする際も関連する情報を近接させて配置することで、混乱なく認識できます。
- 整列
情報が不揃いに配置されている状態は、見る人にストレスを与えてしまいます。
ほんの些細な箇所であってもしっかりと整列させることが重要です。
情報は先頭・末尾をしっかりそろえること、また、それぞれの幅や文字サイズをそろえることで読みやすさを大幅に向上できます。
- 反復
反復とは、繰り返しという意味で、デザインにおいては同じルールやスタイルに基づいてデザインを統一することを言います。
同じ要素を繰り返し利用することによって画面に一貫性が生まれ、整った印象を与えます。また、読み間違いなど、混乱を防ぐことができます。
上記のように、グラフの表現手法がすべて違っていたり、タイトルデザインの統一感がないと利用者はパッと見たときに混乱してしまいます。
全てのグラフやタイトルにはデザインのルールを設けて表現すると見やすく、わかりやすい画面になります。
数字
人は無意識に、数字の順に視線を動かす性質があります。たとえ不規則な配置だったとしても、数字をふることで数字の順番に目線を動かして確認していきます。
操作の手順がはっきりと決まっているときやステップを必ず実施させたいときなどは、数字を活用した視線誘導が効果的です。
同形同色
情報が均一に配置されている場合、人は無意識に形が同じ画像や同じ色の文字に視線を動かします。
Webサイトのデザインでは、同形、同色のあしらいを繰り返し使うことで、統一感や美しさを演出する他、視線を誘導しながらテンポよく情報を伝えることができます。
ダッシュボードの場合だと、例えば同じ意味合いを持つ情報は同色を使うなどすると、ユーザーの理解度を速める効果があります。
例えば、下記のような２種類のダッシュボードがあった場合、同形の情報（円グラフ）は視線を動かして連続して確認させやすくなり、パターンBのように同色の情報とすることで縦棒グラフの情報と関連した内容だとひと目で判断させることができます。
まとめ
視線誘導は皆様が実際に使っているツールやWebサイト、身の回りにあるいろいろな分野で活用されているので、比較的馴染みやすい内容だと思います。
ダッシュボードをデザインする上で、こういった視線の流れを利用した画面構成は「使いやすい」「わかりやすい」と思ってもらうために必要不可欠な要素となるので、内容を理解し、画面構成を考える際には積極的に活用しましょう！
copyright© WingArc1st Inc. All Rights Reserved.
