【5秒ルールのチェックポイント】 ✓ ダッシュボードを初めて見る人でも5秒で理解できるか？ ✓ 最も重要な数値（KPI）が目立っているか？ ✓ 余計な装飾や情報で気が散らないか？ ✓ 色やサイズで優先度が明確に表現されているか？ ✓ 「良い状態」か「悪い状態」かが一目でわかるか？ 【売上ダッシュボードの場合、5秒以内にわかるべきこと】 1. 今月の売上目標を達成しているか？（達成率） 2. 売上は上昇傾向か？下降傾向か？（トレンド） 3. すぐに対処すべき問題はあるか？（アラート）

【悪い例：5秒では理解できない】 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 今月の売上: ¥4,523,891 (前月比: +3.2%, 前年比: +12.5%, 予算比: +8.3%, 市場平均比: +5.2%) 訪問者数: 15,234人 (前月比: -1.8%, 前年比: +5.3%, 目標比: -2.1%, 季節調整後: +0.5%) コンバージョン率: 2.97% (前月比: +0.15pt, 前年比: +0.42pt) 平均単価: ¥2,345 (前月比: +2.1%, 前年比: -0.8%) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 問題点： ✗ 数字が小さくて読みにくい ✗ 情報が多すぎて何が重要かわからない ✗ 比較指標が多すぎる（前月比、前年比、予算比…） ✗ 色分けがないので良いのか悪いのかわからない ✗ 5秒どころか30秒かけても全体像がつかめない

【良い例：5秒で理解できる】 ┌─────────────────────────────────────────┐ │ │ │ 📈 売上目標達成率 │ │ │ │ 112% ✓ │ │ （目標達成！） │ │ │ │ ───────────────────── │ │ 目標: 400万円 │ │ 実績: 450万円 │ │ │ │ 前月比: +12.5% ↑ │ │ │ └─────────────────────────────────────────┘ 改善点： ✓ 最重要KPI（達成率112%）が大きく目立つ ✓ 達成/未達成が一目瞭然（緑のチェックマーク） ✓ 情報を3つに絞っている（達成率、目標/実績、前月比） ✓ 余白があって読みやすい ✓ 5秒で「目標達成、順調」とわかる

【各レベルに含める情報の例】 ◆ レベル1: 最重要KPI 場所: 画面の最上部 個数: 1〜3個 例: 売上目標達成率、月間利益、顧客満足度 → ビジネスの成否を決める「一番見たい数字」 ◆ レベル2: 主要グラフ 場所: 中段 個数: 4〜6個 例: 売上推移（折れ線）、部門別比較（棒）、商品ランキング → トレンドや比較を示す「詳しく見たいグラフ」 ◆ レベル3: 詳細情報 場所: 下部またはサイドバー 個数: 必要に応じて 例: 商品別詳細テーブル、地域別内訳、注釈 → 深堀りしたいときの「補足データ」

【営業ダッシュボードの階層設計例】 ┌─────────────────────────────────────────────────┐ │ │ │ ◆ レベル1: 最重要KPI（最上部・大きく） │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ 月間売上 │ │ 受注件数 │ │ 成約率 │ │ │ │ │ │ │ │ │ │ │ │ 450万円 │ │ 38件 │ │ 12.5% │ │ │ │ ↑ +12% │ │ ↓ -5% │ │ ↑ +2pt │ │ │ │ （緑） │ │ （赤） │ │ （緑） │ │ │ └──────────┘ └──────────┘ └──────────┘ │ │ │ ├─────────────────────────────────────────────────┤ │ │ │ ◆ レベル2: 主要グラフ（中段・中サイズ） │ │ │ │ ┌─────────────────┐ ┌─────────────────┐ │ │ │ 売上推移 │ │ 商品別売上 │ │ │ │ [折れ線グラフ] │ │ [棒グラフ] │ │ │ │ │ │ │ │ │ └─────────────────┘ └─────────────────┘ │ │ │ │ ┌─────────────────┐ ┌─────────────────┐ │ │ │ 地域別比較 │ │ 営業担当別実績 │ │ │ │ [円グラフ] │ │ [ランキング] │ │ │ │ │ │ │ │ │ └─────────────────┘ └─────────────────┘ │ │ │ ├─────────────────────────────────────────────────┤ │ │ │ ◆ レベル3: 詳細情報（下部・小さめ） │ │ │ │ [商品別詳細テーブル] [月次推移データ] │ │ [注釈・データソース] [最終更新日時] │ │ │ └─────────────────────────────────────────────────┘

【余白が少ない悪い例】 ┌──────────────────────────────────┐ │売上450万円訪問者15,000人CVR2.9%利益120万円│ │目標達成率112%前月比+12%前年比+8%注意事項 │ │[グラフ1][グラフ2][グラフ3][グラフ4] │ │[グラフ5][グラフ6][グラフ7][グラフ8] │ │詳細データはこちら更新日2024/01/15備考欄 │ └──────────────────────────────────┘ 問題点： ✗ 情報が詰まりすぎて読みにくい ✗ どこを見ればいいかわからない ✗ 視覚的に圧迫感があり、疲れる ✗ 重要な情報が埋もれてしまう

【余白がある良い例】 ┌──────────────────────────────────────────┐ │ │ │ 売上: 450万円 目標達成率: 112% │ │ │ │ 訪問者: 15,000人 前月比: +12% │ │ │ │ ─────────────────────────────── │ │ │ │ ┌───────────┐ ┌───────────┐ │ │ │ │ │ │ │ │ │ グラフ1 │ │ グラフ2 │ │ │ │ │ │ │ │ │ └───────────┘ └───────────┘ │ │ │ │ 更新日: 2024/01/15 │ │ │ └──────────────────────────────────────────┘ 改善点： ✓ 情報が整理されて読みやすい ✓ 重要な情報が目立つ ✓ 視覚的にすっきりしていて疲れない ✓ グラフ間の関係性がわかりやすい

【一貫性のある要素の詳細】 ◆ 1. 色の使い方 ✓ 成功/良好 : 常に緑系（#4CAF50など） ✓ 警告/注意 : 常に黄色系（#FFC107など） ✓ エラー/悪化 : 常に赤系（#F44336など） ✓ 中立/情報 : 常に青系（#2196F3など） ✓ 背景/補助 : 常にグレー系 ◆ 2. フォントサイズ ✓ ダッシュボードタイトル : 24〜28pt、太字 ✓ KPI数値 : 32〜48pt、太字 ✓ セクションタイトル : 18〜20pt、太字 ✓ 本文/説明文 : 12〜14pt、標準 ✓ 注釈/補足 : 10〜11pt、グレー ◆ 3. グラフの種類 ✓ 時系列の推移 → 折れ線グラフ ✓ カテゴリ比較 → 棒グラフ ✓ 構成比 → 円グラフ/ドーナツ ✓ 関係性 → 散布図 ✓ 進捗 → ゲージ/プログレスバー ◆ 4. アイコンと矢印 ✓ 増加 : ↑（緑） ✓ 減少 : ↓（赤） ✓ 横ばい: →（グレー） ✓ 達成 : ✓（緑） ✓ 未達成: ✗（赤） ✓ 警告 : ⚠️（黄）

【一貫性がない悪い例】 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 売上: 450万円 ✓（緑） 目標達成! 訪問者: 15,000人 ✗（赤） 前月比-5% CVR: 2.9% ↑（青） 改善中 利益: 80万円（黒） 前月比+3% ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 問題点： ✗ 売上は緑✓、でも訪問者は赤✗…どちらが重要？ ✗ CVRの矢印が青…増加は緑じゃないの？ ✗ 利益は黒…良いの？悪いの？ ✗ チェックとバツの基準が不明確 ✗ ユーザーは「何を見て判断すればいいか」混乱する

【一貫性がある良い例】 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 売上 : 450万円 前月比 ↑ 12%（緑） 訪問者 : 15,000人 前月比 ↓ 5%（赤） CVR : 2.9% 前月比 ↑ 0.2pt（緑） 利益 : 80万円 前月比 ↑ 3%（緑） ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 改善点： ✓ 増加=緑の↑、減少=赤の↓で完全に統一 ✓ 数値と矢印の配置が統一されている ✓ 色の意味が明確（緑=前月より良い、赤=前月より悪い） ✓ ユーザーは瞬時に「訪問者だけ要注意」とわかる

【悪いダッシュボード「あるある」5選】 ◆ 1. 情報過多（Information Overload） ✗ 20個以上のグラフを1画面に詰め込む ✗ スクロールしないと全体が見えない ✗ 何が重要かわからない → 解決策: グラフは5〜8個に絞る ◆ 2. 装飾過剰（Over-Decoration） ✗ 3Dグラフ、アニメーション、グラデーション多用 ✗ 影、枠線、背景画像だらけ ✗ 情報より装飾が目立つ → 解決策: 2Dでシンプルに、装飾は最小限 ◆ 3. 色の乱用（Color Chaos） ✗ 虹色のグラフ（7色以上） ✗ 意味のない色分け ✗ 視覚的に疲れる、目がチカチカする → 解決策: 3〜5色に制限、意味のある色分け ◆ 4. フォントバラバラ（Font Mess） ✗ ゴシック体、明朝体、手書き風が混在 ✗ サイズが不規則（12pt, 18pt, 9pt, 24pt…） ✗ 読みにくい、統一感がない → 解決策: フォントは1〜2種類、サイズルールを決める ◆ 5. 更新されない（Stale Data） ✗ 古いデータが表示されている ✗ 「最終更新日」の表示がない ✗ リアルタイム性がなく、信頼されない → 解決策: 自動更新、更新日時を明記

【良いダッシュボードの5つの特徴】 ◆ 1. シンプルで明確 ✓ グラフは5〜8個に厳選 ✓ 1画面（スクロールなし）で完結 ✓ 最重要情報が一目瞭然 → 効果: 5秒ルールをクリア ◆ 2. 視覚的階層がある ✓ 大・中・小のメリハリがある ✓ 余白でセクションが区切られている ✓ 情報の優先度が明確 → 効果: どこを見るべきかすぐわかる ◆ 3. 適切な色使い ✓ 使用色は3〜5色に制限 ✓ 色に意味がある（緑=良い、赤=悪い） ✓ 視覚的に心地よい → 効果: 状態を瞬時に判断できる ◆ 4. 統一されたデザイン ✓ フォントは1〜2種類のみ ✓ サイズルールが守られている ✓ 一貫性があって読みやすい → 効果: 認知負荷が低い ◆ 5. リアルタイム更新 ✓ 最新データが表示されている ✓ 更新日時が明記されている ✓ 信頼性が高い → 効果: 意思決定に使える