MotionBoardデザインコンテンツ

数値や文字のサイズ感がわからない

情報に適した文字サイズの基本とは？
Write your awesome label here.

もくじ

数値や文字サイズの考え方

ダッシュボードはグラフだけではなく、タイトル、ボタン、アイコンなどいろいろな素材で構成されています。そしてそれらの素材は、それぞれ重要度が異なり、重要度によってサイズも変わります。
画面の見せ方はこの『サイズ』が大きく関わっており、わかりやすさや使いやすさに直結します。
では、どのように『サイズ』を決めていけばいいのでしょうか？
ダッシュボードに配置する素材のサイズは、利用する人が情報を認識するスピードに影響を与えます。
まずは、例を見てみましょう。
例えばこれは、各エリアごとの数値を表示させたものです。
エリア名が上、数値が下、そして、文字サイズと表示エリアのサイズも同じものです。
一見整っているように見えますが、本当にこれは見やすいでしょうか？
今回のように、エリア名と数値が同じサイズである場合、人の目の動きは2回のステップを踏みます。
言葉にすると
　　エリア名を認識する、数値を見る
といった順序で、無意識で情報を分断し、視線を２回動かし理解します。
ごく自然な認識ではないか？と感じるかもしれませんが、本来であれば『Aエリアは12,345である』と、まとめて理解できる内容です。
ほんのわずかな視線の移動は、意図した確認手順だったり、数回程度なら苦痛に感じませんが、何度も繰り返し起こるとそのたびに視線が動くため、小さなストレスへと変わっていきます。
そのストレスは知らぬ間にたまっていき、いつの間にか『見づらい』という感情になってしまうのです。
そうなってしまわないように、次のことをポイントにサイズを検討しましょう。
サイズを決める時のポイント


  • ひとまとめで確認するか、しないか
  • 重要度・優先度の高いものは大きく

ひとまとめで確認するか、しないか

複数の情報をまとめて認識させるか、単体で認識させるかがまず1つのポイントです。
例えば、今回のように『Aエリアは12,345である』と、認識をさせたい場合は、「エリア名」と「数値」の2つの情報をまとめて認識できるようにサイズを調整します。
『情報と情報の空間（余白）を埋める』といったイメージです。
情報と情報の間に空間（余白）を作る一番の理由は、情報を切り分けるためです。
空間（余白）を作ることで、近くの情報との差別化をしたり、ひとつひとつに視線を向けさせたりすることができます。
ですが、すべての情報に空間（余白）を作ってしまうと、すべてが切り分けられてしまうため、認識スピードが落ちる上に誤認識をする可能性があります。
まとめたいものと切り分けたいものを決めてから、それぞれに合った空間（余白）を作ることが大切です。

重要度・優先度の高いものは大きく

情報にはそれぞれ重要度や認識させたい優先順位というものがあります。その重要度・優先度に沿ってサイズを決めていきます。
例えばエリア名と数値の場合、どちらの情報にフォーカスを当てたいかを決めます。
このように複数の情報を確認させる時、先に認識させたい情報がある場合はサイズを大きくしてあげると、人の視線の性質で大きい情報に注目させることができます。
また、重要度のレベルは同じぐらいだけど、少しだけ目立たせたいといった場合は、文字のサイズは変えず、太字にすると視線を向けやすくなります。

改善したデザインの例

これらのポイントを踏まえ、先ほどの例を改善してみましょう。
このように、目に見える情報の大きさはわかりやすさに直結します。
気にするポイントはとてもシンプルですが、どこに重点を置きたいか、なにを伝えたいのかがはっきりしていないと改善ができません。
利用者に知らせたい内容をしっかり検討し、これらのポイントを活用して画面を構成していきましょう。