ダッシュボードに左サイドバー＋マルチページ構成を導入
ヒートマップエックス エンジニアチーム9分で読了
- dashboard
- navigation
2026-06-05、heatmapx.com/dashboard を Supabase/Vercel 系 SaaS と同等の本格サイドバー型ダッシュボードに再設計しました（同日リリースのダッシュボード全面リニューアルに続く構造変更）。
新しい画面構成
┌──────────────────────────────────────────────────────┐
│ [icon] HeatMapX [☀💻🌙] [JA/EN] │ ← sticky header
├──────────────┬───────────────────────────────────────┤
│ MENU │ │
│ ▸ ⌂ ホーム │ ホーム │
│ ▤ ヒートマップ│ │
│ 一覧 │ サイト数 / 今日のイベント / プラン │
│ ⌘ CLI&スキル │ │
│ $ プラン&請求│ AI 解析使用量 [████░] │
│ ⚙ 設定 │ PV 使用量 [██░░░] │
│ │ │
│ COMING SOON │ クイックアクション │
│ 🧪 A/B テスト │ [▤ ヒートマップを見る] [＋追加] │
│ ✨ ダイナミック│ │
├──────────────┤ │
│ ログアウト │ │
└──────────────┴───────────────────────────────────────┘
5つのページに分割
| ルート | ページ | 内容 |
|---|---|---|
/dashboard |
⌂ ホーム | 統計カード（サイト数/今日のイベント/プラン）、使用量バー（AI解析/PV）、クイックアクション |
/dashboard/sites |
▤ ヒートマップ一覧 | 登録済みサイトのタブラーリスト。サイト追加もここから |
/dashboard/cli |
⌘ CLI & スキル | ターミナル CLI と Claude Code Skill のインストール手順を2列で並列表示 |
/dashboard/billing |
$ プラン & 請求 | 現在のご利用状況 + 全プラン比較表 (Free/Pro/Team/Enterprise) |
/dashboard/settings |
⚙ 設定 | 言語選択 (English/日本語) ほか、今後設定項目を追加予定 |
主な変更点
▤ Supabase 風の左サイドバー
主要メニュー5項目を左サイドバーに常時表示。スクロールしても固定で、どの画面からでも即座に移動できます。
- 現在地のハイライト: 今いるページがメニュー上で強調表示
- アイコン付き: 各メニューに視覚識別アイコン
- ログアウト: サイドバー下部に常時表示で誤操作のリスク低減
⌂ ホーム画面のオーバービュー化
ログイン後に最初に到達する /dashboard は、ダッシュボード全体の「現状把握」が一目で完了する設計に変更しました。
- サイト数・今日のイベント数・現在のプランを統計カードで表示
- AI 解析回数 / 月間 PV の使用量を進捗バーで可視化（80%超は琥珀、100%超は赤に色変化）
- 「ヒートマップを見る」「サイトを追加」「アップグレード」「CLIセットアップ」のクイックアクション
⌘ CLI & スキルの並列案内
HeatMapX の2つの使い方（ターミナル CLI / Claude Code Skill）を1ページで並列に紹介。
- CLI:
npm install -g heatmapxからheatmapx analyzeまでのインストール手順 - Claude Code Skill:
/plugin install heatmapx-skill@xtv-llc/heatmapx-cliでインストールして会話から直接 HeatMapX を呼べる - 日英2例のサンプルコマンドも併記
$ 全プラン比較を内包
プラン＆請求ページで、Free/Pro/Team/Enterprise の全プラン比較表を直接確認・即アップグレード可能になりました。
- 月額 / 年額切替（年額デフォルト、年額契約は月額比で大幅割引）。最新の金額は料金プランを参照
- 現在のプランは緑「現在」バッジで識別
- Pro はオレンジハイライトで推奨表示
- Enterprise は
heatmapx@xtv.co.jpへのお問い合わせリンク
⚙ 設定ページで言語選択
従来ヘッダーの2値トグルだけだった言語切替を、設定ページでもラジオ式で明示的に選択できるようにしました。English / 日本語の選択は即時反映＋ブラウザ保存。
今後実装予定 (COMING SOON)
サイドバー下部に「今後実装予定」セクションを設置し、近日リリース予定の機能を可視化しました：
| 機能 | 内容 |
|---|---|
| 🧪 A/B テスト | ヒートマップから得たインサイトを元に、コピー・レイアウト変更をワンクリックでA/Bテスト |
| ✨ ダイナミック UI | ユーザー属性や行動パターンに応じて UI を動的に切り替えるパーソナライゼーション機能 |
その他の改善
- ヘッダーの sticky 固定: スクロールしてもロゴ・テーマ切替・言語切替が常に上部に表示
- サイドバーも sticky 固定: スクロール時もメニューが常時アクセス可能
- ログアウトの配置改善: ヘッダー右端 → サイドバー左下に移動（重要だが頻度の低いアクションを下に）
- 後方互換性: 既存の
/dashboardブックマークはホーム画面が表示されるので、リダイレクトは不要
影響範囲
今回の変更は UI/UX のみ で、計測ロジック・データ構造・API には影響しません。既存の埋め込みトラッカータグはそのまま動作します。既存の /dashboard ブックマークは新しいホーム画面に着地するためリダイレクト不要。