第12回: ダッシュボード設計

資料のダウンロード

ファイル	内容
exercise.py	ハンズオン演習スクリプト

ヒントの使い方

python exercise.py --hint 1            # 方向性ヒント
python exercise.py --hint 1 --level 2  # より具体的なヒント
python exercise.py --hint 1 --level 3  # コード例
python exercise.py --check             # 提出前の自己チェック

演習問題への取り組み方

下の講義ノートを読む（事前学習・2時間目安）
exercise.py を実行してグラフを確認する
演習問題（5問）に取り組む
python exercise.py --check で確認する
exercise.py を提出する（締切は授業後1週間）

詰まったとき

# ヒントを見る
python exercise.py --hint N --level 1

# AIに質問する
python ../../ask.py "質問内容"

解決しない場合は Q&A ページの投稿フォームを使ってください。

講義ノート

1. ダッシュボードとは何か

ダッシュボードとは、複数のグラフ・KPI・テキストを1つの画面にまとめ、意思決定に必要な情報を一覧できるようにした可視化インターフェースである。自動車のダッシュボード（計器盤）が語源で、多数の情報を瞬時に把握できる設計が求められる点で共通している。

データ分析の場面では、次の二つの目的でダッシュボードが使われる。

モニタリング: 定期的に更新されるデータを継続的に監視し、異常を早期に検知する（例: 毎週更新する感情スコアの変化）
コミュニケーション: 分析結果を意思決定者や関係者に伝える際、文章よりも視覚的に整理された情報を提示する

2. ダッシュボード設計の三原則

原則1: 情報の階層化（What matters most, first）

画面の限られた面積に詰め込みすぎると、何が重要かが分からなくなる。情報は重要度の順に階層化し、最も重要なKPIを最も目立つ場所（画面の左上・上部）に配置する。

第1階層（KPIカード）: 単一の数値で示す最重要指標。「平均幸福感スコア: 6.52」のように、文脈なしで意味が分かるものを選ぶ
第2階層（グラフ）: KPIの背景にある傾向・分布・比較を示す
第3階層（詳細テーブル/インタラクション）: 必要に応じてドリルダウンできる詳細情報

原則2: 視線の流れの設計（F字パターン / Z字パターン）

人間がWebページを読む際の視線は、左上から右へ、次に左へ折り返して下へ移動するF字またはZ字のパターンをたどることが知られている。

左上: 最重要KPI・フィルター
右上から左中段: 比較グラフ（箱ひげ図、棒グラフ）
下段: 補足的な詳細グラフ（相関ヒートマップなど）

原則3: グリッドレイアウトの一貫性

グラフのサイズや配置が不揃いだと、認知負荷が増す。水平・垂直のグリッドに沿って要素を揃えることで、視覚的な秩序を保つ。本演習では「KPIカード1行 + グラフ2列 + ヒートマップ全幅」という3段グリッドを採用した。

3. KPI選定の考え方

KPI（Key Performance Indicator）は「測定可能で、目的に直結し、行動を促せる」指標であるべきである。以下の基準で選定する。

関連性: そのKPIを見た人が、次にとるべき行動を判断できるか。「平均幸福感スコア」は低ければ地点の環境改善を示唆し、高ければ現状維持を支持するため、行動と直結する。

簡潔性: KPIは原則として1〜3個に絞る。4個以上になると、どれを優先すべきか分からなくなる。補足的な指標はグラフに回す。

比較可能性: 単体の数値よりも、「前週比+0.3」「全地点平均との差」のように相対的な文脈があると意味を持ちやすい。

落とし穴: 測定しやすい指標をKPIに選びがちだが、「測定しやすい ≠ 重要」である。来訪者数（visit_count）は測定しやすいが、幸福感の改善に直結するとは限らない。目的から逆算してKPIを設定することが重要である。

4. Dashのコールバックアーキテクチャ

Plotly Dashは「入力が変わると出力が自動更新される」という宣言的な仕組みを採用している。

基本構造

from dash import Dash, dcc, html, Input, Output

app = Dash(__name__)

app.layout = html.Div([
    dcc.Dropdown(id="filter", options=[...], value="全地点"),
    dcc.Graph(id="my-graph"),
])

@app.callback(
    Output("my-graph", "figure"),   # 更新先: グラフのfigureプロパティ
    Input("filter", "value"),       # 入力元: ドロップダウンのvalueプロパティ
)
def update_graph(selected_value):
    # selected_value を使ってデータをフィルタし、figureを返す
    filtered_df = df[df["place_type"] == selected_value]
    return px.box(filtered_df, x="place_type", y="happiness_score")

複数OutputへのコールバックとState

一つのコールバックで複数のグラフを同時に更新できる。これにより、フィルターを変えるたびに全パネルが一括で更新される「同期的なダッシュボード」が実現できる。

@app.callback(
    Output("graph-1", "figure"),
    Output("graph-2", "figure"),
    Input("filter", "value"),
)
def update_all(selected):
    fig1 = make_graph_1(selected)
    fig2 = make_graph_2(selected)
    return fig1, fig2

State はInputとは異なり、値が変わってもコールバックを自動発火しない。ボタンを押したときだけ現在値を読み取りたい場合（フォーム送信型の操作）に使う。

5. よくあるダッシュボード設計ミスとその対策

ミス1: 情報過多（情報の詰め込み）

1画面に10個以上のグラフを並べても、ユーザーは何を見ればよいか分からなくなる。

対策: まず「このダッシュボードで伝えたい問いは何か」を一文で定義する。その問いに答えるために必要最小限のパネルだけを配置する。

ミス2: 3次元グラフ・派手な視覚効果の多用

3D棒グラフや多色の円グラフは見栄えが良いように見えるが、正確な比較を妨げる。奥行きのある3Dグラフは手前の棒が実際より大きく見える視覚的歪みを生む。

対策: 比較には2次元の棒グラフや折れ線グラフを使う。円グラフは2〜4カテゴリ以内に限定する。

ミス3: フィルターの連動不整合

あるフィルターを変えたとき、ダッシュボードの一部のグラフだけが更新され、他が更新されない場合、ユーザーは画面内の情報が同じ条件を示しているのか分からなくなる。

対策: Dashのコールバックで、同じフィルターに対して全パネルのOutputを一括更新する設計にする。コールバックは「入力が変わると対応するすべての出力が即座に更新される」ことを徹底する。

ミス4: 色の乱用

同じグラフ内で多色を使いすぎると、色が「カテゴリの違い」を示すのか「重要度の違い」を示すのか分からなくなる。

対策: 色には一貫したルールを設ける。例えば「青=幸福感、赤=ストレス、緑=感情極性」と決め、ダッシュボード全体で統一する。警告・異常を示す色（赤・オレンジ）は本当に注意を促したい箇所にのみ使う。

6. 本日の演習の目的

本演習では exercise.py を起動してDashダッシュボードを動かし、以下を体験する。

場所種別ドロップダウンを切り替えて、4つのパネルが一括更新される動作を確認する
KPIカードから「どの地点に課題があるか」を読み取る
相関ヒートマップで特徴量間の関係を把握する
演習問題Q3〜Q5でコールバックを自分で拡張し、ダッシュボードに機能を追加する

ダッシュボードは「作って終わり」ではなく、ユーザーのフィードバックを受けて繰り返し改善するものである。演習問題の改修作業を通じて、「どこを変えれば何が改善されるか」を体感してほしい。