🏗️ STEP 30: 情報階層の設計
重要度に応じた情報の配置と表現方法をマスターしよう!
📋 このステップで学ぶこと
- 情報階層の重要性と基本概念
- レベル1（最重要KPI）の設計方法
- レベル2（主要グラフ）の配置方法
- レベル3（詳細情報）の扱い方
- グリッドシステムの活用方法
- 実務での階層設計の実例
🏗️ 1. 情報階層とは
なぜ情報階層を学ぶのか
ダッシュボードには多くの情報が含まれますが、すべての情報が同じ重要度ではありません。経営者が最初に見たいのは「売上が目標を達成したかどうか」であり、「商品Aの3月15日の売上明細」ではありません。
情報階層（Information Hierarchy）とは、情報の重要度に応じて、視覚的な優先順位をつけるデザイン手法です。重要な情報を大きく目立たせ、詳細情報は小さく控えめにすることで、ユーザーは自然と重要な情報から理解できます。
【情報階層の基本原則 – 新聞に例えると】
新聞の第一面を想像してください:
① 最重要ニュース → 大見出し（48pt）→ 最も目立つ
② 重要ニュース → 中見出し（24pt）→ 次に目立つ
③ 詳細記事 → 本文（12pt） → 必要な人だけ読む
この「大・中・小」のメリハリが情報階層です。
【ダッシュボードに置き換えると】
レベル1: 最重要KPI → 大きく目立つ（5秒で理解）
レベル2: 主要グラフ → 中程度（30秒で分析）
レベル3: 詳細データ → 小さめ（必要な人だけ確認）
🏗️ 情報階層がもたらす効果
| 効果 | 説明 | 具体例 |
|---|---|---|
| 理解速度UP | 重要な情報から順に理解できる | 5秒で「目標達成」がわかる |
| 意思決定促進 | 判断に必要な情報が明確 | 「対策が必要か」すぐわかる |
| 視覚的快適性 | 目の動きが自然 | 上から下、左から右へ自然に見れる |
| 情報の整理 | 何がどこにあるか分かる | 詳細を見たいときは下を見る |
⚠️ 階層がない場合の問題
| 問題 | 原因 | 結果 |
|---|---|---|
| 何が重要かわからない | すべての情報が同じ大きさ | 見る人が混乱する |
| 視線が散る | どこを見ればいいか不明 | 情報を見落とす |
| 理解に時間がかかる | 5秒ルールが守れない | 使われないダッシュボード |
| 疲れる | 視覚的な負荷が高い | 見るのを避けるようになる |
🥇 2. レベル1: 最重要KPI
レベル1の役割
レベル1は、「このダッシュボードで最も伝えたいこと」を表示する場所です。ユーザーがダッシュボードを開いた瞬間、5秒で理解できるように設計します。
例えば、営業ダッシュボードなら「今月の売上目標達成率」、マーケティングダッシュボードなら「コンバージョン率」が該当します。
【レベル1の特徴】
配置: 画面の最上部または中央（最も目立つ位置）
大きさ: 数値は32-72pt（最大級のフォントサイズ）
個数: 1-3個（多くても5個まで）
内容: ビジネスの成否を決める指標
【良い例】
━━━━━━━━━━━━━━━━━━━━━━━━━━
月間売上目標達成率
112% ✓
━━━━━━━━━━━━━
目標: 400万円
実績: 450万円
━━━━━━━━━━━━━━━━━━━━━━━━━━
→ 1つの数値（112%）で状況が即座にわかる
→ 達成を示す✓マークで視覚的にも明確
→ 補足情報（目標/実績）は小さく
【悪い例】
━━━━━━━━━━━━━━━━━━━━━━━━━━
売上:450万 訪問者:15K CVR:2.9%
新規:8社 商談:25件 受注:5件
━━━━━━━━━━━━━━━━━━━━━━━━━━
→ 情報が多すぎて重要度が不明確
→ どれが「最重要」か判断できない
レベル1のデザイン要素
レベル1を目立たせるには、サイズ、色、アイコン、余白の4つの要素を活用します。
【視覚的強調の4つの方法】
1. サイズ（最も効果的）
✓ 数値: 48-72pt（画面で最大級）
✓ ラベル: 18-24pt（数値の補足）
✓ 補足: 14-16pt（目標値など）
2. 色（状態を伝える）
✓ 達成: 緑系（#2ECC71）→ ポジティブ
✓ 未達成: 赤系（#E74C3C）→ 要注意
✓ 警告: 黄系（#F39C12）→ 注意
✓ 中立: 青系（#3498DB）→ 情報
3. アイコン（直感的に伝える）
✓ 達成: ✓（チェックマーク）
✓ 未達成: ✗（バツマーク）
✓ 上昇: ↑（矢印上）
✓ 下降: ↓（矢印下）
4. 余白（孤立させて目立たせる）
✓ 周囲に十分な余白（最低40px）
✓ 他の要素から隔離
✓ 視線を集中させる効果
複数KPIの配置
KPIが複数ある場合は、横に並べて均等配置します。3つが最も見やすく、最大でも5つまでに抑えましょう。
【3つのKPIを並べる例】
┌──────────────────────────────────────────────┐
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ 売上 │ │ 新規客 │ │ 満足度 │ │
│ │ │ │ │ │ │ │
│ │ 450万円 │ │ 38社 │ │ 4.5 │ │
│ │ ↑ +12% │ │ ↑ +60% │ │ ↑ +0.3 │ │
│ │ ✓ │ │ ✓ │ │ ✓ │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │
└──────────────────────────────────────────────┘
【ポイント】
✓ 3つを均等に配置（各4列）
✓ すべて同じサイズ（優劣をつけない）
✓ 達成状況を色とアイコンで表現
✓ 前月比を矢印で表示
✓ 周囲に十分な余白
Pythonでの実装例
PlotlyのIndicatorを使うと、KPIカードを簡単に作成できます。
【Indicatorの解説】
go.Indicator(
mode=’number+delta’, # 数値と変化量を表示
value=450, # メインの数値
delta={ # 変化量の設定
‘reference’: 400, # 比較対象（目標値）
‘relative’: True # 相対値（%）で表示
},
number={ # 数値の書式
‘suffix’: ‘万円’, # 単位
‘font’: {‘size’: 48} # フォントサイズ
}
)
【modeの種類】
・’number’: 数値のみ
・’delta’: 変化量のみ
・’gauge’: ゲージ（メーター）
・’number+delta’: 数値と変化量
・’number+gauge’: 数値とゲージ
▼ 入力するコード
import plotly.graph_objects as go
from plotly.subplots import make_subplots
# KPIデータ
kpis = {
‘売上’: {‘value’: 450, ‘target’: 400, ‘unit’: ‘万円’},
‘新規顧客’: {‘value’: 38, ‘target’: 30, ‘unit’: ‘社’},
‘満足度’: {‘value’: 4.5, ‘target’: 4.0, ‘unit’: ‘点’}
}
# 3列のサブプロットを作成
fig = make_subplots(
rows=1, cols=3,
subplot_titles=list(kpis.keys()),
specs=[[{‘type’: ‘indicator’}, {‘type’: ‘indicator’}, {‘type’: ‘indicator’}]]
)
# 各KPIをIndicatorとして追加
col = 1
for name, data in kpis.items():
達成率 = (data[‘value’] / data[‘target’]) * 100
色 = ‘green’ if 達成率 >= 100 else ‘red’
fig.add_trace(go.Indicator(
mode=’number+delta’,
value=data[‘value’],
delta={‘reference’: data[‘target’], ‘relative’: True},
number={‘suffix’: data[‘unit’], ‘font’: {‘size’: 48}},
domain={‘x’: [0, 1], ‘y’: [0, 1]}
), row=1, col=col)
col += 1
# レイアウト設定
fig.update_layout(
height=300,
title_text=’📊 主要KPI’,
title_font_size=24,
showlegend=False
)
fig.show()
🥈 3. レベル2: 主要グラフ
レベル2の役割
レベル2は、KPIの背景や詳細を説明するグラフや図表を配置します。「なぜ売上が112%になったのか」「どの商品が好調なのか」といった疑問に答える場所です。
【レベル2の特徴】
配置: 中段（レベル1の下）
大きさ: 中程度（グラフ高さ300-400px）
個数: 4-6個（多すぎると見づらい）
内容: トレンド、比較、内訳などのグラフ
【画面全体のレイアウト】
┌──────────────────────────────────┐
│ [レベル1: KPI × 3個]（上部30%） │
├──────────────────────────────────┤
│ [レベル2: グラフ × 4個]（中部60%）│
│ ┌──────────┐ ┌──────────┐ │
│ │売上推移 │ │商品別売上 │ │
│ │[折れ線] │ │[棒グラフ]│ │
│ └──────────┘ └──────────┘ │
│ ┌──────────┐ ┌──────────┐ │
│ │地域別比較 │ │顧客ランク│ │
│ │[地図] │ │[円グラフ]│ │
│ └──────────┘ └──────────┘ │
├──────────────────────────────────┤
│ [レベル3: 詳細]（下部10%） │
└──────────────────────────────────┘
グラフの種類と使い分け
レベル2では、目的に応じた適切なグラフタイプを選ぶことが重要です。
📊 レベル2でよく使うグラフ
| グラフタイプ | 用途 | 具体例 |
|---|---|---|
| 折れ線グラフ | 推移・トレンド | 売上推移、訪問者数の変化 |
| 棒グラフ | 比較 | 商品別売上、店舗別比較 |
| 円グラフ | 構成比 | 売上の内訳、顧客セグメント |
| ヒートマップ | 相関・密度 | 曜日×時間帯の売上 |
| エリアチャート | 累積推移 | 商品別の売上累積 |
2×2グリッドレイアウト
4つのグラフを配置する場合、2行×2列のグリッドが最もバランスが良くなります。
【make_subplotsの解説】
fig = make_subplots(
rows=2, cols=2, # 2行×2列のグリッド
subplot_titles=(‘売上推移’, ‘商品別売上’, ‘地域別構成’, ‘月別比較’),
specs=[ # 各セルのタイプを指定
[{‘type’: ‘scatter’}, {‘type’: ‘bar’}], # 1行目
[{‘type’: ‘pie’}, {‘type’: ‘bar’}] # 2行目
]
)
【specsで指定できるタイプ】
・’scatter’: 折れ線/散布図
・’bar’: 棒グラフ
・’pie’: 円グラフ
・’heatmap’: ヒートマップ
・’indicator’: KPIカード
・’table’: テーブル
▼ 入力するコード
import plotly.graph_objects as go
from plotly.subplots import make_subplots
import pandas as pd
import numpy as np
# サンプルデータ
dates = pd.date_range(‘2024-01-01’, ‘2024-12-31′, freq=’M’)
売上 = np.random.randint(300, 600, size=len(dates))
商品別 = {‘商品A’: 450, ‘商品B’: 380, ‘商品C’: 320, ‘商品D’: 250}
# 2×2のサブプロット
fig = make_subplots(
rows=2, cols=2,
subplot_titles=(‘売上推移’, ‘商品別売上’, ‘地域別構成’, ‘月別比較’),
specs=[
[{‘type’: ‘scatter’}, {‘type’: ‘bar’}],
[{‘type’: ‘pie’}, {‘type’: ‘bar’}]
]
)
# 1. 売上推移（折れ線）- 左上
fig.add_trace(
go.Scatter(x=dates, y=売上, mode=’lines+markers’, name=’売上’),
row=1, col=1
)
# 2. 商品別売上（棒グラフ）- 右上
fig.add_trace(
go.Bar(x=list(商品別.keys()), y=list(商品別.values()), name=’商品別’),
row=1, col=2
)
# 3. 地域別構成（円グラフ）- 左下
fig.add_trace(
go.Pie(labels=[‘東京’, ‘大阪’, ‘名古屋’], values=[45, 30, 25]),
row=2, col=1
)
# 4. 月別比較（棒グラフ）- 右下
fig.add_trace(
go.Bar(x=[‘1月’, ‘2月’, ‘3月’], y=[400, 450, 500], name=’月別’),
row=2, col=2
)
# レイアウト設定
fig.update_layout(
height=800,
title_text=’📊 売上分析ダッシュボード’,
showlegend=False
)
fig.show()
🥉 4. レベル3: 詳細情報
レベル3の役割
レベル3は、補足情報や詳細データを配置します。すべてのユーザーが見るわけではなく、「詳細を確認したい人だけ」が見る領域です。
【レベル3の特徴】
配置: 下部またはサイドバー
大きさ: 小さめ（フォント10-12pt）
個数: 制限なし（必要なだけ）
内容: テーブル、注釈、ドリルダウンリンク
【配置例】
┌──────────────────────────────┐
│ [レベル1: KPI] │
├──────────────────────────────┤
│ [レベル2: グラフ × 4] │
├──────────────────────────────┤
│ [レベル3: 詳細] │
│ ┌──────────────────────┐ │
│ │ 商品別詳細テーブル │ │
│ │ 商品A | 450万 | +12% │ │
│ │ 商品B | 380万 | +8% │ │
│ │ 商品C | 320万 | -3% │ │
│ └──────────────────────┘ │
│ ※注: 前月比は前年同月比較 │
│ 更新日時: 2024/12/15 10:00 │
└──────────────────────────────┘
【レベル3に含める情報】
・詳細データテーブル
・注釈・免責事項
・データソース
・更新日時
・ドリルダウンリンク
詳細テーブルの作成
Plotlyのgo.Tableを使うと、見やすいテーブルを作成できます。
【go.Tableの解説】
go.Table(
header=dict( # ヘッダー（見出し行）
values=list(data.columns), # 列名
fill_color=’#3498DB’, # 背景色
font=dict(color=’white’, size=14), # フォント
align=’left’, # 左揃え
height=40 # 行の高さ
),
cells=dict( # セル（データ行）
values=[data[col] for col in data.columns],
fill_color=’#ECF0F1′, # 背景色
align=’left’,
font=dict(size=12),
height=30
)
)
▼ 入力するコード
import plotly.graph_objects as go
import pandas as pd
# 詳細データ
data = pd.DataFrame({
‘商品名’: [‘商品A’, ‘商品B’, ‘商品C’, ‘商品D’, ‘商品E’],
‘売上’: [450, 380, 320, 250, 180],
‘前月比’: [‘+12%’, ‘+8%’, ‘-3%’, ‘+5%’, ‘-8%’],
‘在庫’: [120, 85, 200, 150, 90],
‘ステータス’: [‘好調’, ‘好調’, ‘注意’, ‘普通’, ‘要改善’]
})
# テーブル作成
fig = go.Figure(data=[go.Table(
header=dict(
values=list(data.columns),
fill_color=’#3498DB’,
font=dict(color=’white’, size=14),
align=’left’,
height=40
),
cells=dict(
values=[data[col] for col in data.columns],
fill_color=’#ECF0F1′,
align=’left’,
font=dict(size=12),
height=30
)
)])
fig.update_layout(
title=’商品別詳細データ’,
height=300
)
fig.show()
💡 アコーディオン（折りたたみ）の活用
レベル3の情報は、折りたたみ可能にすると画面がすっきりします。必要な人だけが開いて確認できます。
【折りたたみの効果】
┌──────────────────────────────┐
│ [レベル1: KPI] │
├──────────────────────────────┤
│ [レベル2: グラフ × 4] │
├──────────────────────────────┤
│ ▼ 詳細データを表示 ──────┐ │
│ │ [商品別テーブル] │ │
│ │ [地域別テーブル] │ │
│ │ [顧客別テーブル] │ │
│ └──────────────────────┘ │
└──────────────────────────────┘
【メリット】
✓ 画面がすっきり（情報過多を防ぐ）
✓ 必要な人だけ見る（全員が見る必要はない）
✓ 情報の整理がしやすい
📐 5. グリッドシステムの活用
グリッドシステムとは
グリッドシステムは、画面を均等な列に分割して、要素を配置する手法です。Webデザインの標準的な手法で、整然としたレイアウトが簡単に作れます。
【12列グリッドシステム】
画面を12列に分割するのが一般的です:
┌─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┐
│1│2│3│4│5│6│7│8│9│10│11│12│
└─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴─┘
【なぜ12列なのか】
12は2, 3, 4, 6で割り切れるため、
様々な分割パターンに対応できます:
・全幅（12列）: タイトル、KPI
・半分（6列）: グラフを2つ並べる
・1/3（4列）: グラフを3つ並べる
・1/4（3列）: グラフを4つ並べる
【具体的な配置例】
┌────────────────────────┐ ← 12列（全幅）
│ タイトル │
├────────────┬───────────┤
│ グラフ1 │ グラフ2 │ ← 各6列（半分）
├──────┬─────┼───────────┤
│グラフ3│グラフ4│ グラフ5 │ ← 4+4+4列
└──────┴─────┴───────────┘
グリッドの基本ルール
📐 グリッドレイアウトのルール
| ルール | 内容 | 推奨値 |
|---|---|---|
| 余白（Gutter） | 列と列の間、行と行の間 | 20-30px |
| 画面の端 | 左右の余白 | 20-40px |
| 整列 | 同じ行は高さを揃える | グリッドラインに合わせる |
| 比率 | 重要な要素は広い列幅 | 6:6、8:4、4:4:4など |
【良い例と悪い例】
【良い例】均等な配置
┌──────────┬──────────┐
│ グラフ1 │ グラフ2 │
│ （6列） │ （6列） │
└──────────┴──────────┘
→ バランスが良く、見やすい
【悪い例】不均等な配置
┌─────┬──────────────┐
│グラフ1│ グラフ2 │
│(3列) │ （9列） │
└─────┴──────────────┘
→ バランスが悪く、違和感がある
【例外】意図的な強調
┌──────────────┬─────┐
│ 重要グラフ │補足 │
│ （8列） │(4列)│
└──────────────┴─────┘
→ 重要なものを大きくするのはOK
レスポンシブグリッド
画面サイズに応じてレイアウトを変えることをレスポンシブデザインと呼びます。
【画面サイズに応じた変化】
【デスクトップ（1200px以上）】4列表示
┌──────┬──────┬──────┬──────┐
│グラフ1│グラフ2│グラフ3│グラフ4│
└──────┴──────┴──────┴──────┘
【タブレット（768-1199px）】2列表示
┌──────────┬──────────┐
│ グラフ1 │ グラフ2 │
├──────────┼──────────┤
│ グラフ3 │ グラフ4 │
└──────────┴──────────┘
【モバイル（768px未満）】1列表示
┌────────────────┐
│ グラフ1 │
├────────────────┤
│ グラフ2 │
├────────────────┤
│ グラフ3 │
├────────────────┤
│ グラフ4 │
└────────────────┘
【ポイント】
・画面が狭くなるほど、列数を減らす
・グラフの内容は同じ、配置だけ変える
・タップしやすいサイズを確保
💼 6. 実務での階層設計の実例
例1: 経営ダッシュボード
経営者向けのダッシュボードは、シンプルさが重要です。詳細よりも「全体の状況」を一目で把握できることが求められます。
【経営層向けダッシュボード】
┌─────────────────────────────────────┐
│ レベル1: 最重要KPI（画面上部40%） │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐│
│ │ 売上 │ │ 利益 │ │ 顧客満足度││
│ │ 1.2億円 │ │ 3,500万円 │ │ 4.5 ││
│ │ ↑ +15% │ │ ↑ +22% │ │ ↑ +0.3 ││
│ │ ✓ │ │ ✓ │ │ ✓ ││
│ └──────────┘ └──────────┘ └──────────┘│
├─────────────────────────────────────┤
│ レベル2: 主要グラフ（画面中部50%） │
│ ┌───────────────┐ ┌───────────────┐│
│ │ 四半期売上推移 │ │ 部門別利益率 ││
│ │ [折れ線グラフ] │ │ [棒グラフ] ││
│ └───────────────┘ └───────────────┘│
├─────────────────────────────────────┤
│ レベル3: 補足情報（画面下部10%） │
│ 更新: 2024/12/15 10:00 │
│ データソース: 会計システム │
└─────────────────────────────────────┘
【特徴】
✓ KPIが最も目立つ（大きく、上部に配置）
✓ グラフは2つに絞る（シンプル）
✓ 詳細は最小限（必要なら別画面で確認）
例2: マーケティングダッシュボード
マーケター向けのダッシュボードは、分析が重要です。KPIだけでなく、その背景にあるデータを詳しく見せます。
【マーケター向けダッシュボード】
┌─────────────────────────────────────┐
│ レベル1: 主要KPI（30%）- 4つ │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │訪問者│ │ CVR │ │売上 │ │ROAS│ │
│ │15,000│ │2.9% │ │450万│ │350%│ │
│ └─────┘ └─────┘ └─────┘ └─────┘ │
├─────────────────────────────────────┤
│ レベル2: 分析グラフ（60%）- 4つ │
│ ┌──────────┐ ┌──────────┐ │
│ │訪問者推移 │ │チャネル別 │ │
│ │[折れ線] │ │[円グラフ] │ │
│ └──────────┘ └──────────┘ │
│ ┌──────────┐ ┌──────────┐ │
│ │CVRファネル │ │広告効果 │ │
│ │[ファネル] │ │[棒グラフ] │ │
│ └──────────┘ └──────────┘ │
├─────────────────────────────────────┤
│ レベル3: 詳細テーブル（10%） │
│ [キャンペーン別詳細データ] │
└─────────────────────────────────────┘
【特徴】
✓ KPIは4つ（マーケティング指標を網羅）
✓ グラフは4つ（詳細な分析が可能）
✓ テーブルで個別データを確認可能
例3: 営業ダッシュボード
営業担当者向けのダッシュボードは、アクションが重要です。「次に何をすべきか」が明確にわかることが求められます。
【営業担当者向けダッシュボード】
┌─────────────────────────────────────┐
│ レベル1: 個人目標達成状況（25%） │
│ ┌──────────────────────────┐ │
│ │ 今月の目標達成率: 112% ✓ │ │
│ │ 目標: 400万 実績: 450万 │ │
│ └──────────────────────────┘ │
├─────────────────────────────────────┤
│ レベル2: 活動状況（50%） │
│ ┌──────────┐ ┌──────────┐ │
│ │売上推移 │ │案件状況 │ │
│ │[折れ線] │ │[ファネル] │ │
│ └──────────┘ └──────────┘ │
│ ┌─────────────────────────┐ │
│ │ 顧客別売上ランキング │ │
│ │ [棒グラフ] │ │
│ └─────────────────────────┘ │
├─────────────────────────────────────┤
│ レベル3: アクションアイテム（25%） │
│ □ A社 最終提案（12/16） │
│ □ B社 見積提出（12/17） │
│ □ C社 初回訪問（12/18） │
│ [全案件詳細テーブル] │
└─────────────────────────────────────┘
【特徴】
✓ 個人の目標達成が最重要（モチベーション）
✓ 活動状況を可視化（現状把握）
✓ 次のアクションが明確（ToDo形式）
📝 STEP 30 のまとめ
✅ このステップで学んだこと
| トピック | 重要ポイント |
|---|---|
| 情報階層 | 重要度に応じた視覚的優先順位付け |
| レベル1 | 最重要KPI（大きく目立つ、1-3個） |
| レベル2 | 主要グラフ（中程度、4-6個） |
| レベル3 | 詳細情報（小さめ、必要に応じて） |
| グリッドシステム | 12列分割で整然とした配置 |
| 実務例 | 対象者に合わせた設計が重要 |
💡 最重要ポイント
情報階層を意識することで、ユーザーは重要な情報から順に理解できます。
レベル1（KPI）を大きく、レベル2（グラフ）を中程度、レベル3（詳細）を小さく配置することで、視覚的なメリハリが生まれます。
グリッドシステムで整然とレイアウトすれば、美しく使いやすいダッシュボードが完成します！
📝 実践演習
演習 1
基礎
売上ダッシュボードの情報を3レベルに分類してください。
【解答】
情報の重要度に応じて分類します。
【情報の分類】
レベル1（最重要 – 5秒で理解）:
✓ 月間売上目標達成率
レベル2（重要 – 30秒で分析）:
✓ 売上推移グラフ（月次）
✓ 商品別売上ランキング
✓ 地域別売上比較
レベル3（詳細 – 必要に応じて確認）:
✓ 商品別詳細テーブル
✓ 顧客別購入履歴
✓ 日次売上データ
✓ 更新時刻、データソース
【配置比率】
上部40%: レベル1
中部50%: レベル2
下部10%: レベル3
演習 2
応用
12列グリッドを使って、4つのグラフを配置してください。デスクトップとモバイルの両方を考えてください。
【解答】
【デスクトップ（1200px以上）】2×2配置
┌───┬───┬───┬───┬───┬───┼───┬───┬───┬───┬───┬───┐
│1 │2 │3 │4 │5 │6 │7 │8 │9 │10 │11 │12 │
├───┴───┴───┴───┴───┴───┼───┴───┴───┴───┴───┴───┤
│ グラフ1（6列） │ グラフ2（6列） │
├───────────────────────┼───────────────────────┤
│ グラフ3（6列） │ グラフ4（6列） │
└───────────────────────┴───────────────────────┘
【モバイル（768px未満）】1列配置
┌───────────────────────┐
│ グラフ1（12列 = 全幅） │
├───────────────────────┤
│ グラフ2（12列） │
├───────────────────────┤
│ グラフ3（12列） │
├───────────────────────┤
│ グラフ4（12列） │
└───────────────────────┘
演習 3
発展
あなたの業務（または架空の業務）のダッシュボードを設計してください。3レベルの階層とグリッドを意識してください。
【解答例: ECサイト運営ダッシュボード】
┌─────────────────────────────────────┐
│ レベル1: KPI（3つ、各4列） │
│ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │売上 │ │注文数 │ │客単価 │ │
│ │450万円│ │ 850 │ │5,294円│ │
│ └──────┘ └──────┘ └──────┘ │
├─────────────────────────────────────┤
│ レベル2: グラフ（4つ、2×2配置） │
│ ┌──────────┐ ┌──────────┐ 各6列 │
│ │売上推移 │ │商品カテゴリ│ │
│ │[折れ線] │ │[円グラフ] │ │
│ └──────────┘ └──────────┘ │
│ ┌──────────┐ ┌──────────┐ │
│ │CVRファネル│ │時間帯別 │ │
│ │[ファネル] │ │[ヒート] │ │
│ └──────────┘ └──────────┘ │
├─────────────────────────────────────┤
│ レベル3: 詳細（折りたたみ可能） │
│ ▼ [商品別売上詳細テーブル] │
│ ▼ [在庫アラート] │
│ 更新: 2024/12/15 10:00 │
└─────────────────────────────────────┘
❓ よくある質問
Q1: レベル1のKPIはいくつまで配置できますか?
3つまでが理想、最大でも5つです。それ以上になると「最重要」の意味が薄れ、ユーザーが混乱します。本当に重要なKPIだけに絞りましょう。もし多くのKPIが必要な場合は、複数のダッシュボードに分割するか、レベル2に配置することを検討してください。
Q2: グリッドシステムは必須ですか?
必須ではありませんが、強く推奨します。グリッドを使うと、要素が整然と配置され、プロフェッショナルな見た目になります。また、レスポンシブ対応（画面サイズに応じた調整）も簡単になります。Bootstrap、Tailwind CSSなどのフレームワークを使えば、簡単にグリッドレイアウトが作れます。
Q3: レベル3の詳細情報は省略してもいいですか?
ターゲットユーザーによります。
経営層向け: レベル3は最小限でOK（サマリーが重要）
分析担当者向け: レベル3が重要（詳細データが必要）
現場担当者向け: レベル3でアクション項目を表示
ユーザーのニーズに合わせて調整してください。
経営層向け: レベル3は最小限でOK（サマリーが重要）
分析担当者向け: レベル3が重要（詳細データが必要）
現場担当者向け: レベル3でアクション項目を表示
ユーザーのニーズに合わせて調整してください。
Q4: Plotlyでグリッドレイアウトは作れますか?
はい、make_subplotsを使えば作れます。
make_subplots(rows=2, cols=2)のように行と列を指定することで、グリッドレイアウトが作成できます。ただし、本格的なダッシュボードを作る場合は、Dash（Plotlyのダッシュボードフレームワーク）の使用をおすすめします。
学習メモ
データ可視化マスター - Step 30
📋 過去のメモ一覧
▼