MotionBoardデザインコンテンツ

グラフの並べ方って
どうしたら見やすい?

情報の並べ方を工夫して理解力向上！
Write your awesome label here.

もくじ

情報の並べ方

画面上に情報を並べる時、情報を適当に配置してしまうと分析手順や理解スピードが遅くなる原因になります。そうならないためには情報の配置位置が非常に重要です。
可視化画面を作成する際には、利用ストーリーをあらかじめ設定する必要があります。
事前に決めておくこと
  • どういった順番で何を確認していくのか
  • 確認時にどんなことに気づかせたいのか
利用ストーリーが定義できたら、実際に配置を考えていきます。
情報を配置していくときは、人の視線の習性を利用して配置していきます。
これを視線誘導といいます。
では、視線誘導効果を利用しつつ、以下の画面を見ていきましょう。
この画面を見たときに、まず視線が向くのは左上のチャートですが、その視線の動きも視線誘導のひとつで「グーテンベルク・ダイヤグラム」といいます。
Webデザインなどで重要な情報やそのタイトルなどが左上に表示されているのも、この視線誘導効果を利用しています。

視線誘導効果

グーテンベルク・ダイヤグラム

  • 均等に配置された情報を見るとき、視線は左上から右下に流れていく
  • 左上から右下へ視線が流れる理由は、横書きの文章は「左から右へ読む」から
この視線の動きは、人が自然に行うので、配置する素材をその順序に沿って並べることで、重要な要素を意図的に把握させることができます。
この画面は、表現としては整って見えるかもしれません。
しかし、利用ストーリーに沿った見方をしたとき、以下のような優先順位である場合はどうでしょうか？
現在のままでは重要ではない情報が重要な情報として認識されやすく、利用ストーリに沿った配置になっていないため、問題点や課題の発見に時間がかかってしまいます。
優先的に確認させたいものが何なのかを見極め、その順序に沿って情報を並べなければなりません。
今回は、情報にもっと目を向けやすくするために、重要な要素から目に入る視線誘導効果『大きいものから小さいものへ』を利用します。

大きいものから小さいものへ

この視線誘導の効果は以下の二つです。
  • 画面上の面積比が多い物から最初に読む
  • 大きいものを最初に読む傾向は「上から下へ読む」と言う視線誘導を事実上うわまわるほどに強力
人は目に見える面積比が多いものから視線を向ける性質があります。
チラシや、雑誌、Webサイト、看板など、この大小効果を利用しているものが多く、利用者にまず見てほしい情報、認識してほしい情報を伝えるためには有力な手法です。
例を見てみましょう。
以下のような文章で、一部目立たせたい、目を向けさせたい部分があったときの例です。
このように、サイズの違いだけで、人の視線を意図的に誘導させることができます。
この視線誘導効果を利用して、先ほどの画面を並べ替えてみましょう。
このように、一番重要度が高い情報を大きく見せ、それ以外の情報はサイズを小さくして上から下へ並べます。
こうすることで、人の目線はまず１番に目が向き、その他の情報を上から下へ確認していきます。
利用者が画面をどう見るのかをあらかじめ想定し、その見方を視線誘導にて意図的にコントロールすることによって、ユーザーはストレスなく画面を確認していくことができ、情報の見落としを防ぐことができます。