見やすいダッシュボードデザイン|直感的視覚属性で視覚化を改善する

「このダッシュボード見づらいな」と思われていたかもしれない、と気づいたのは、データ可視化の基礎を学んだあとのことでした。
以前の私は、特に意味もなく色を使い分けたり、スペースを埋める目的で円グラフを選んだりしていました。「華やかなほうが見やすそう」「それっぽい見た目になる」という感覚だけで作っていたのです。
でも実際は、意味のない色分けは見る人の注意を分散させるだけで、円グラフも数値の大小を正確に比較するには向いていません。「それっぽく見える」と「正確に伝わる」は、まったく別のことでした。
この判断ミスが起きた原因は、人が視覚情報を無意識に処理する仕組みを知らないまま作っていたからです。この仕組みのことを「直感的視覚属性」と言います。
本記事では、知っておくべき7つの直感的視覚属性と、実務で活かすためのポイントを紹介します。
「直感的視覚属性」とは?
直感的視覚属性とは、人が瞬時に認識できる視覚的特徴のことを言います。
英語では、Preattentive Attributesと言われ、日本語では「前注意的属性」と訳されます。「前注意的」とは、人が意識して注意を向ける前の段階で、視覚的な違いを瞬時に認識できる情報処理のことを指します。
本記事では「直感的視覚属性」と呼んで解説していきます。
しかし、直感的視覚属性がミスリードとなり、正確な情報を伝えられなくなる場合もあります。例えば、面積(バブルチャート)で数値差を表現すると、見た人は差を過大評価しやすいです。この手のズレが「ミスリード」となります。
そのため、目的に応じて正確な情報が素早く伝わるよう、直感的視覚属性を適切に選ぶことが「伝わる視覚化」の第一歩となります。
具体的にどういったものが直感的視覚属性にあたるのか、見ていきましょう。
7つの直感的視覚属性
ここでは、ダッシュボード設計において知っておくべき7つの直感的視覚属性を紹介します。これらを知っておくと、意思決定者が短時間で判断できる表現を選ぶ基盤になります。

長さ(Length)
「長さ」は、数量の比較に適した属性で他の多くの属性と比べて判断精度も高いです。
複数の数値の大小を一目で把握しやすく、わずかな差でも目に入りやすいため、比較を行うグラフで特に有効です。
実験研究では誤差の少なさという観点で「位置(共通尺度上>非整列尺度上)」に次いで「長さ」が正確であると報告されています。ただし精度は、課題設定(論文の実験は比率(%)判断)や、指示の与え方・実験条件などによって変動し得るため、目的と文脈に応じて属性を選ぶことが前提です。(参考:Cleveland & McGill ,1984, JASAより)

位置(Position)
位置は、位置の違いを手がかりに大小・傾向・まとまりを把握させる属性です。
とくに、同じ目盛りの軸(共通の尺度)上で位置を比べるタスクが、最も判断精度が高いです。次に正確なのは、同じ目盛りだが軸の位置がずれている場合(非整列の尺度)の位置判断です。ただし、この順位の一部には理論的な仮説にもとづく要素が含まれている点には注意が必要です。(参考:Cleveland & McGill ,1984, JASAより)
実務では、グラフ同士で目盛りをそろえる、軸の範囲を適切にする、縦横比を極端にしない、点の重なり対策(透明度の調節など)を行うなどをすると位置の強みが保たれます。地図では位置が地理的な場所やパターンの理解に有効ですが、数字の大きさを比較するときは色の濃さや丸の大きさなど、他の表現と併用されることが多いです。

濃淡(Lightness / Saturation)
濃淡は、同一色相内の明度(明るい↔暗い)や彩度(高い↔低い)の連続変化で差を表す属性です。
順序や量の大小を示すのに向いており(参考:Jacques Bertin, 1967より)、特に明度が単調に増加または減少する配色は序列理解を助けます。色相の数を増やさずに連続データを表現でき、凡例の数値と合わせて値の序列を伝えやすくなります。 ただし、濃淡だけではわずかな差を表現しづらい場合があるため、厳密な比較は位置・長さを優先し、濃淡は補助として使うと誤解が減ります。
また、色覚多様性への配慮のために、赤緑の色相差に依存せず、明度が単調に変化する配色を選びましょう。媒体によって見え方が変わるため、実際に利用される媒体での確認を行うことを推奨します(紙なら試し刷り、PCなら利用者のPCモニタ、プレゼンならスクリーン映りなど)。

形状(Shape)
形状は、記号などの形の違いでカテゴリを区別するための属性です。
順序や量の表現には向かず、主に名義カテゴリの識別に使います。(参考:Tamara Munzner, 2014より)名義カテゴリとは、順序付けやランク付けができないカテゴリーのことを指します。(引用:QuestionPro)例えば、顧客セグメント(新規・既存・非アクティブ)のような名義カテゴリを、〇・▢・△の形状で区別することが挙げられます。
形状は色相や位置ほど群として目立ちにくいため、パターンを素早く見せたい主要グループの識別には色相や位置を優先し、形状は補助的に使うのが実務的です。種類は少数に絞り(例:3〜5程度)、凡例・ラベルで補強します。
色覚多様性への配慮として、色だけに頼らず形状と色相の両方で示すと判読性が向上します。
意味のあるアイコン(例:家マーク=住宅、工場マーク=産業など)は解釈を助ける一方、文化依存や紛らわしさもあるため、凡例で定義するなど工夫して使いましょう。

色相(Hue)
色相は、カテゴリをひと目で区別させるのに適した属性です。
色相は順序をもたないので大小の順序や量の比較には向かず、名義カテゴリの区分けに用いるのが適切と考えられます。(参考:Jacques Bertin, 1967より)色数は2〜5色程度に抑え、色だけに依存しない(形状・線種・ラベルの併用)設計にしましょう。
色覚多様性に配慮したパレットを選び、目立たせたい要素とその後ろの面の明度コントラストを確保します。
例えば、赤色の意味は文化圏で大きく異なります。このことから、色の意味づけは文化・文脈に左右されるため、読者に確認してもらうことを推奨します。
冒頭で触れた「意味のない色分け」は、この色相の誤用が原因でした。華やかに見えても、カテゴリの区別という目的がなければ、見る人の注意を分散させるだけになってしまいます。
色相の具体的な使い方・カテゴリの色分けや強調色の選び方については、こちらの記事で詳しく解説しています。

幅(Width)
幅は、線や枠線を太くして目立たせるための属性です。
幅の違いは「どこを見てほしいか」を示す用途に向いています。しかし、同じ物理的な太さでも水平線は垂直線より太く見えやすいといった錯視が報告されており(参考:de Waard ら, 2019より)、誤読が起きやすい属性です。向きや文脈の影響を受けやすいため、注意して扱う必要があります。
幅は長さや位置ほど数量比較には用いられず、グラフの主な数量軸ではなく、重要な線だけ太くする、関連項目を太枠で囲むといった「強調や区別の補助」として使うのが安全です。棒グラフでは値は長さで表し、幅は一定にし、線の方向が混在する比較では数値表示や補助線で数量情報を補強するのが無難です。

サイズ(Area / Size)
サイズは、図形の面積の違いで量感や重要度をざっくり伝える属性です。見た瞬間に目を引くため、強調したい要素を大きくして視線を誘導する用途に向きます。
一方で、面積による数量判断は位置や長さより下位に置かれています。根拠には推論・実験・心理物理学の知見が含まれ、面積は見た目と実際の差が出やすいとされるため、精密な比較には不利になり得ます。(参考:Cleveland & McGill ,1984, JASAより)
実務では、円や形状の大きさは面積比例(=値が2倍なら面積も2倍)で設定し、半径比例は値を誇張してしまうため避けます。段階数は3〜5程度に抑え、読み取りやすい凡例と主要な値のラベルで補いましょう。厳密な比較が要るときは長さや位置で表すのが安全です。
冒頭で触れた「スペースを埋めるための円グラフ選び」は、このサイズの特性を知らなかったことが原因でした。円グラフも面積で数量を表現するグラフのひとつで、厳密な数量比較には向きません。面積による数量判断は、位置や長さと比べて正確さが下がりやすく、見た目の収まりの良さと正確に伝わるかどうかは別の話です。

7つの直感的視覚属性が分かったところで、実務でどのように活用すれば良いかについて見ていきましょう。
実務で活かすためのポイント
ここからは、直感的視覚属性を実務で活用するための3つのポイントを紹介します。
直感的視覚属性を踏まえたうえで、実際にダッシュボードを設計する際の参考として、デジタル庁のガイドブックに沿ってTableauでダッシュボードを作り直した事例も紹介しています。
①属性の選び方 -作成前-
まず考えるべきことは「何を伝えたいのか」です。関係性・比較・分類・強調のような、視覚化する目的を明確にしましょう。なぜ目的から考えるかというと、視覚化の目的によって選ぶべき直感的視覚属性が異なるからです。
よくある視覚化タスクごとに、相性のよい直感的視覚属性と代表的なグラフ例を、組み合わせの一例として一覧にしました。作成前に以下の表を確認して、頭に入れておくことで「伝わる視覚化」の助けになると思います。

②誤解を避けるための設計ルール -作成中-
目的に適した直感的視覚属性を使っていたとしても、人の認知のクセや表現上の工夫不足または過多によって、読み手に誤った判断をさせてしまう可能性があります。
誤解を生まない設計にするために、気をつけるべきポイントと、考慮しなかった場合に起こりうる危険性について表にして整理しました。グラフの作成中に、以下の表を意識しながら作ることで、読者があなたの意図を汲み取りやすいものにできると思います。
直感的視覚属性 | 気をつけるべきポイント | 起こりうる誤解・危険性 |
|---|---|---|
長さ | 棒グラフの軸の始まりを0にする | 差が極端に大きく見える |
長さ | 棒の幅や並びを項目ごとに変えない | 量より視覚的ボリュームに引きずられる |
位置 | 時系列の間隔を変更しない | 伸び/減りのスピードを誤解される |
位置 | 対数軸や非線形目盛りを明示する | 傾き・差の解釈を誤る |
濃淡 | 色の濃さの差を極端に大きく/小さくしない | 一部が強調されすぎる/値の差が読めない |
濃淡 | 背景色とのコントラストを考慮する | 情報が視認できない(印刷時は特に注意) |
形状 | 類似した形を多用しない(△と▽など) | 違いが直感的に伝わらない |
形状 | 複雑なアイコンを使わない | 小さい表示は視認できず、意味が読み取れない |
色相 | 色数を多用しすぎない | 区別がつかず、分類の意味が失われる |
色相 | 赤=危険、青=安全など文化依存を前提に使わない | 意図と異なる解釈をされる |
幅 | 線や棒を過度に太くしない | 強調したい意図以上に重みがあると誤解される |
幅 | 線の幅の段階数を増やし過ぎない | どこが強調されているかを見失う |
サイズ | 等角図法(例:メルカトル)で面積を比較しない | 高緯度が過大に見える(面積比較は等積図法を使う) |
サイズ | サイズ凡例の数値を明示する | 大小の差の解釈を誤る |
③「意味が分かるグラフ」になっているか見直しをする -作成後-
冒頭でも書いたように、「見た瞬間に意味が分かるグラフ」を作るためには、直感的視覚属性を理解する必要があります。最後に、直感的視覚属性の使い方を中心に「意味が伝わる状態」になっているかをチェックしましょう。
グラフやダッシュボード作成後に確認しておきたいポイントを、6個にまとめました。完成したグラフやダッシュボードを社内やチーム内で共有する前に、このチェックリストを使ってセルフレビューしてみましょう。定例レポートの更新時などに、「前より伝わりやすくなっているか?」をこれらの視点で振り返ることをおすすめします。
✅ | チェック内容 | 確認の意図 | 直感的視覚属性 |
|---|---|---|---|
最重要メッセージが、最も目立つ属性に割り当てられているか? | 重要度×目立ちやすさの不一致を潰す | 位置、長さ、濃淡、サイズ | |
重要な比較(結論に直結する比較)が、「共通尺度の位置」か「長さ」でできる形になっているか? | 精密比較を、精度の低い属性(サイズ等)に乗せない | 位置、長さ | |
カテゴリ(順序なし)を色相・形状などで表し、順序/量を位置・長さ・濃淡・サイズなどで表しているか? | データ型と属性の相性ミス(カテゴリに順序感を付ける等)を防ぐ | 色相・形状/位置・長さ・濃淡・サイズ | |
順序がないカテゴリに、順序を匂わせる表現(連続したグラデーション、過剰な大小差など)を当てていないか? | 濃淡・サイズをつけることによって意図していない序列や強弱として読まれる事故を防ぐ | 濃淡、サイズ | |
色相を使ったグラフで色の意味を同じにしているか?(グラフごとに色相の意味を変えていないか?) | 色は強いので、意味が揺れると解釈が崩壊する | 色相、濃淡 | |
色覚多様性に配慮し、重要情報が色だけに依存していないか?(濃淡差が小さい・形状での補助/凡例なし等) | 見えない人にとって破綻する設計=実務での事故率が上がる | 色相、濃淡、形状 |
直感的視覚属性を実務で活かすには、まず「何を伝えたいのか」を明確にし、その目的に合った属性を選びます。さらに、誤解を招かない設計ルールを守り、完成後にはチェックリストでセルフレビューを行うことで、意思決定者に理解の負荷をかけない表現が可能になります。
データ視覚化は「作って終わり」ではなく、「伝わったかどうか」がゴールです。
直感的視覚属性を意識し、作る前・作成中・作った後に各ポイントについてチェックすることを実務に取り入れると、グラフやダッシュボードの有用性の向上が見込めます。
まとめ
本記事では、直感的視覚属性とは何かを解説し、代表的な7つの属性と実務で活かすための3つのポイントについて紹介しました。
直感的視覚属性とは、人が直感的に理解しやすい視覚的な特徴のことでした。
グラフやダッシュボードは、「見せる」だけでなく「伝える」ためのツールです。人間の視覚の仕組みに基づいて設計することで、誤解なく伝わる情報表現が可能になります。
これからは直感的視覚属性を活用し、読み手に「伝わる」グラフやダッシュボードを作っていきましょう。
まずは、あなたがよく使うグラフ・ダッシュボードを1つ選び、今回紹介したチェックリストを使って見直しをしてみるところから始めることをおすすめします。