情報は近くに置けば伝わる？「近接適合性原則」で決めるダッシュボード設計

月次のKPIダッシュボードに、売上、利益率、解約率、問い合わせ件数を並べる。どれも事業の状態を示す数字だから、同じ枠の中へ詰め込んだ。ところが会議では、「結局、全体として良いのか悪いのか」がつかめない。一方、一つの総合指標にまとめると、今度はどの数字が変わったのか確かめにくくなります。

この問題は、余白や配色を整えるだけでは解けません。大切なのは、読み手が複数の情報をまとめて一つの判断をするのか、それとも一つずつ正確に確かめるのかです。人間工学では、作業に必要な心の動きと、表示の近さを合わせる考え方を近接適合性原則と呼びます。

本稿では、関連する情報を近くに置くべき場面と、あえて分けるべき場面を整理します。対象はダッシュボードだけではありません。経営報告、営業資料、調査レポート、プレゼン資料にも応用できます。

結論：情報の近さは「何を判断するか」で決める

先に結論を言うと、複数の情報を組み合わせて一つの状態を判断するときは、関係がひと目で分かるように近づけます。個別の値や異常箇所を正確に確かめるときは、混同しないように分けます。両方が必要なら、全体像と個別値の二段構えにします。

• まとめて判断する：共通の軸、整列、重ね合わせ、全体の形などで関係を見せる
• 個別に確認する：十分な間隔、明確な見出し、単位、数値、基準線で見分けやすくする
• 両方必要：全体の傾向を示す表示と、根拠となる個別値を行き来できるようにする

ここでいう「近づける」は、単に箱を隣り合わせることではありません。同じ時間軸にそろえる、対応する点を線で結ぶ、複数の変化から一つの形が浮かぶようにするなど、関係を読み取るための知覚的な近さを含みます。

近接適合性原則とは何か

WickensとCarswellは1995年、表示設計に関する研究を整理し、近接適合性原則を提案しました。要点は、同じ心の操作に使う情報は知覚的にも近くし、別々に扱う情報は区別しやすくすることです。

ここでは二つの「近さ」を分けて考えます。一つは、読み手が情報をどれほど一緒に処理する必要があるかという作業上の近さです。もう一つは、画面の中で情報がどれほど一体として見えるかという表示上の近さです。この二つが合うと、判断に必要な情報を探し、頭の中で結び直す手間が減ります。

たとえば、売上、利益率、解約率を使って「事業全体の悪化が同時に進んでいるか」を判断するなら、三つの推移を同じ時間軸にそろえる価値があります。反対に、「今月の利益率は基準を何ポイント下回ったか」を正確に読むなら、利益率の値、単位、基準を独立して示す方がよいでしょう。

研究が示すのは「近いほどよい」ではない

まとめる表示は、全体判断を助ける一方で個別確認を妨げる

CarswellとWickensは1987年、複数の値を一本ずつ見る棒グラフと、それらを一つの形として見せる表示を比べました。複数値をまとめて判断する課題と、一つの値を確かめる課題では、優れた表示が異なりました。一体化した表示は全体判断を助ける一方、個別の値を見る課題では必ずしも有利ではありませんでした。

WickensとAndreが1990年に航空機の状態表示を使って行った実験でも、複数の指標を一つの図形にまとめた表示は、情報を統合する課題で成績を高めました。しかし、個別の指標へ注意を向ける課題では成績が下がりました。色で指標を区別すると個別確認はしやすくなる一方、統合判断が乱れる場合もありました。

つまり、同じ画面に集めれば万能なのではありません。まとめる設計は、複数の値から一つの意味を読み取るときに力を発揮します。その代わり、構成要素が一体に見えすぎると、一つずつ調べる作業が難しくなります。

距離だけでなく、関係が「形として現れるか」が重要

BarnettとWickensは1988年、複数の手掛かりを統合する課題を調べました。長方形など一体として見える表示には利点がありましたが、空間的に近づけるだけでは明確な改善が見られない条件もありました。情報が同時に現れることの方が役立つ場合もありました。

ButtigiegとSandersonは1991年、複数の値の組み合わせから異常を見つける課題で、表示全体に現れる目立つ特徴を調べました。成績の向上を支えたのは、単に図形を一つにまとめたことではなく、異常な関係が全体の形の変化として現れたことでした。

たとえば、三つの指標を一つの円の中へ押し込んでも、関係を読む手掛かりがなければ「近いだけ」です。共通の時間軸にそろえる、対応する変化を同じ位置で比べる、目標からのずれが一つの輪郭として現れる、といった仕組みが必要です。

見た目のまとまりより、仕事との対応を優先する

BennettとFlachは1992年、表示の図形的な特徴だけで良し悪しを決めず、利用者の仕事や対象領域との対応を考える必要があると論じました。美しく整った図でも、判断に必要な関係を表していなければ役に立ちません。

CarswellとWickensによる1990年の研究も、線、形、色などの特徴が互いにどう作用し、一つのまとまりとして知覚されるかを検討しています。表示は、情報の意味を映す器です。目立つ形を作ること自体が目的になると、読み手は強い印象を受けても、正しい判断へ進めないことがあります。

「関連情報は近くに」という原則だけでは足りない

資料づくりでは、関連する要素を近くに置くという助言がよく使われます。これは、どこまでが一つのまとまりかを示す上で有効です。しかし、内容が関連していることと、同じ判断で一緒に使うことは同じではありません。

売上と解約率は事業上は関連しています。それでも、経理担当者が売上の確定値だけを監査するとき、解約率を一体化して見せる必要はありません。反対に、経営者が「顧客離れが売上へ表れ始めているか」を判断するときは、二つの推移を同じ期間で比べられる方が役立ちます。

ゲシュタルト原則を使ったスライド設計は、余白や囲みで意味のまとまりを作る方法を扱っています。本稿が加えるのは、まとまりの境界を、内容の分類だけでなく読み手の作業から決める視点です。

また、グラフィカル・パーセプションと図表選びは、長さや位置など、値を正確に読み取る手掛かりを扱っています。図表形式を選ぶ前に、そもそも全体判断と個別確認のどちらを優先するのかを定めると、選択の基準が明確になります。

「視覚化・構造化」で、判断に合う配置を作る

この考え方は、伸滋Designの伝わる設計マップにある視覚化・構造化（引き算のデザイン）と相性がよいものです。複雑なデータをきれいに並べるのではなく、読み手が答えるべき問いから、必要な関係と詳しさを選びます。

1．判断したいことを一文で書く

「売上のダッシュボードを作る」では広すぎます。「三つの事業で成長の鈍化が同時に起きているか判断する」「今月、基準を下回った事業を特定する」のように、読み手が画面を見た後に答える問いを書きます。

2．必要な作業を「まとめて判断」と「個別に確認」に分ける

複数の値の組み合わせ、同時変化、比率、因果の仮説を見るなら「まとめて判断」です。一つの値、異常箇所、単位、担当、期限を読むなら「個別に確認」です。一つの資料に両方が含まれることは珍しくありません。

3．まとめて判断する情報は、関係が見える形にする

共通の時間軸、同じ基準、そろった位置、意味のある接続を使います。たとえば、売上、解約率、問い合わせ件数を別々の大きさのグラフにするのではなく、同じ期間の小さなグラフを縦にそろえます。同じ月の変化を視線の移動を少なく比べられます。

一つの図形へまとめる場合は、形の変化が何を意味するかを確かめます。見た目が崩れたから危険、整っているから安全という対応が、実際の判断と一致していなければなりません。

4．個別に確認する情報は、見分ける手掛かりを残す

各項目に見出し、単位、現在値、比較基準を付けます。色だけに頼らず、位置やラベルでも区別します。全体の図へまとめた場合も、元の値を表や補足で確かめられるようにします。

5．両方必要なら、全体像と詳細を二段にする

上段では「注意すべき状態か」を短時間で判断できる全体像を示し、下段では「どの値が根拠か」を確認できるようにします。画面を切り替えるなら、全体像から該当する詳細へ直接進めるようにします。全体と詳細を同じ強さで並べると、結局どこから読めばよいか分からなくなります。

具体例：事業の健康状態を伝えるダッシュボード

売上、粗利率、解約率、問い合わせへの返信時間を示す月次報告を考えます。悪い例は、四つの円形メーターを同じ箱に詰め込み、「総合的に確認してください」とするものです。要素は近くても、どの変化を組み合わせれば全体状態が分かるのか示されていません。

まず、問いを二つに分けます。

1. 顧客対応の悪化が、解約と売上へ連続して表れているか
2. 今月、基準を超えた指標はどれか

一つ目は、まとめて判断する問いです。四つの推移を同じ六か月の時間軸にそろえ、返信時間が延びた月、解約率が上がった月、売上が落ちた月を縦に比べられるようにします。ただし、並んだ変化は因果関係の証明ではありません。「対応の遅れが解約を引き起こした」と断定せず、追加調査が必要な関係として示します。

二つ目は、個別に確認する問いです。各指標について、今月の値、基準、差、単位を表で示します。警告は色に加えて「基準超過」などの文字でも表します。これなら、全体の変化に気づいた後、根拠となる値を正確に確かめられます。

全体像と詳細を二段に分けると、経営者は状況を短時間でつかみ、担当者は計算や基準を確認できます。両者に同じ一枚を強いるのではなく、同じ問いへ異なる詳しさで答える設計です。

研究を実務へ使うときの限界

近接適合性原則の根拠には、1980年代から1990年代の航空、監視、実験課題が多く含まれます。現代の経営ダッシュボードやスマートフォン画面を使い、実際の企業で長期間検証した研究ではありません。そのため、特定の配置にすれば会議時間や売上が必ず改善するとまでは言えません。

また、研究が示すのは、情報を物理的に近づけるだけの効果ではありません。表示が一体として見えること、複数の変化から意味のある特徴が現れること、同じ時点を比べられることが関わります。近くに箱を置いただけで、統合できたと考えない方がよいでしょう。

全体判断と個別確認を二つに分ける説明も、実務を考えるための整理です。現実の仕事では、利用者は数秒のうちに両方を行き来します。利用者の経験、画面の大きさ、色覚の違い、時間制限によっても結果は変わります。実際の問いを使い、正答率、判断時間、見落としを確かめる必要があります。

一体化した表示には、誤った関係を強く印象づける危険もあります。全体の形が目立つほど、読み手は意味があると感じやすくなります。形に反映する関係は、業務上の根拠があるものに限り、推測と事実を分けてください。

小さく試すための確認方法

表示案を評価するときは、「見やすいと思いますか」だけを尋ねないようにします。実際に行う二種類の問いを用意します。

• 全体判断：三つの事業のうち、成長の鈍化が複数指標へ同時に表れているのはどれか
• 個別確認：B事業の今月の粗利率は基準を何ポイント下回っているか

二案を数名に見てもらい、答えの正しさ、答えるまでの時間、見落とした項目を記録します。全体判断だけ速くなり、個別確認の誤りが増えるなら、詳細へ戻る道が不足しています。両方が遅いなら、情報を減らすか、問いを分ける必要があります。

一度のテストで結論を固定せず、よく使う質問と新しく発生した質問を記録します。利用者の役割が変われば、必要な配置も変わります。

公開前チェックリスト

• この画面を見た人が答える問いを、一文で書ける
• 複数情報をまとめて判断する部分と、個別に確認する部分を分けた
• 関連しているという理由だけで、同じ箱へ詰め込んでいない
• まとめる表示では、共通の軸や整列によって関係が見える
• 全体の形や総合指標が、業務上の意味と正しく対応している
• 個別の値に、見出し、単位、現在値、比較基準がある
• 色だけで項目や警告を区別していない
• 全体像から根拠となる個別値へ戻れる
• 推移が並んでいるだけで、因果関係と断定していない
• 実際の全体判断と個別確認の問いで試した
• 正答率、判断時間、見落としの少なくとも一つを確かめた
• 画面の大きさや利用者の役割が変わっても読めるか確認した

まとめ：配置は情報ではなく、読み手の判断に合わせる

情報を近づけるか分けるかは、見た目の好みではありません。複数の値から一つの意味を読み取るなら、関係が自然に見えるようにまとめます。一つの値を正確に確かめるなら、混同しないように分けます。両方が必要なら、全体像と詳細を行き来できるようにします。

「関連するから同じ場所へ置く」から一歩進み、「読み手は何を判断するのか」から配置を決めてみてください。ダッシュボードや報告資料で、全体は分かるのに根拠が読めない、数字は読めるのに結論が見えないという問題を減らせます。

伸滋Designでは、経営資料、調査レポート、営業資料などを、読み手の問いと判断の流れから設計しています。情報量は足りているのに意思決定へつながらない場合は、お問い合わせページからご相談ください。

参考文献

1. Wickens, C. D., & Carswell, C. M. (1995). The Proximity Compatibility Principle: Its Psychological Foundation and Relevance to Display Design. Human Factors, 37(3), 473–494.
2. Wickens, C. D., & Andre, A. D. (1990). Proximity Compatibility and Information Display: Effects of Color, Space, and Object Display on Information Integration. Human Factors, 32(1), 61–77.
3. Carswell, C. M., & Wickens, C. D. (1987). Information Integration and the Object Display: An Interaction of Task Demands and Display Superiority. Ergonomics, 30(3), 511–527.
4. Carswell, C. M., & Wickens, C. D. (1990). The Perceptual Interaction of Graphical Attributes: Configurality, Stimulus Homogeneity, and Object Integration. Perception & Psychophysics, 47(2), 157–168.
5. Barnett, B. J., & Wickens, C. D. (1988). Display Proximity in Multicue Information Integration: The Benefits of Boxes. Human Factors, 30(1), 15–24.
6. Bennett, K. B., & Flach, J. M. (1992). Graphical Displays: Implications for Divided Attention, Focused Attention, and Problem Solving. Human Factors, 34(5), 513–533.
7. Buttigieg, M. A., & Sanderson, P. M. (1991). Emergent Features in Visual Display Design for Two Types of Failure Detection Tasks. Human Factors, 33(6), 631–651.