ダッシュボードを全面リニューアル — ライト/ダーク対応＆情報密度の改善
ヒートマップエックス エンジニアチーム5分で読了
- dashboard
2026-06-05、HeatMapX のダッシュボード（heatmapx.com/dashboard）を全面リニューアルしました。視認性・操作性の両面で大幅に改善されています。
主な変更点
☀ ライト/ダーク/システム連動 の3択テーマ
ヘッダー右側に「☀ ライト」「💻 システム連動」「🌙 ダーク」の3択トグルを追加。
- システム連動（デフォルト）: OS の外観設定に自動追随。Mac で「自動」にしていれば夜は自動でダーク化。
- 手動切替: いつでも明示的にライト/ダークを固定可能。設定はブラウザに保存されます。
- 初回ロード時のチラつき (FOUC) を防ぐ実装で、リロードしてもスムーズに表示されます。
▤ 登録サイトを「タブラーリスト」に再設計
従来は2列のカード grid でしたが、複数サイト登録時のスキャナビリティを大幅に向上させるため、横一行のテーブル形式に変更しました。
- 全行で列の左端が縦に揃うので、ステータスや当日イベント数を一目で比較可能
- サイト名・URL・API キー・トラッカータグの全てが同じ行にコンパクト表示
- セットアップ情報は「▸ セットアップ情報」で折り畳み (展開で API キー＋設置タグをコピー可能)
- 長い名前・URL は自動で「…」省略され、レイアウトが崩れない
＋ 見出し横「＋ サイトを追加」ボタン
「登録サイト」見出しの右側に、新規サイト追加用の小型ボタンを追加。スクロールせずにすぐにサイト追加できます (リスト下部の従来ボタンも併存)。
◐ GitHub 風フラットデザイン全体統一
カラー設計をシンプル化し、視覚ノイズを大幅削減。
- ページ背景: 中性灰 (
#f5f5f5) で Linear / Supabase 等の最新 SaaS と同等のトーン - カード: 白ベース + 細い境界線、影なし、角丸 6px
- ブランド軸はオレンジ で統一（旧: 青/緑/紫/琥珀混在）
- 状態色は意味別 に維持: 緑 (active) / 琥珀 (warning) / 赤 (error)
Before / After
| 観点 | Before | After |
|---|---|---|
| カラーテーマ | 黒地ダッシュボード固定 | ライト/ダーク/システム の3択 |
| 構造 | 2列カード grid (情報密度低い) | 1列タブラーリスト (列が縦に整列) |
| サイト表示 | 縦に積まれて占有面積大 | 1サイト = 1行 + 折り畳み可能 |
| 追加ボタン | 最下部のみ | 見出し横＋下部の両方 |
| ブランドカラー | 青/緑/紫/琥珀 混在 | オレンジ単色軸で統一 |
その他の改善
- サイト名・URL の文字数制限: 名前60文字 / URL 512文字。表示の破綻を防止します。
- 追加プレースホルダ更新: 旧
e.g. in-gol/https://in-gol.comをe.g. My site/https://example.comに汎用化 (15言語すべて)。 - オンボーディングモーダル: ダッシュボード到達後1秒待ってからフェードイン表示。「いきなりバン！」感を緩和。
- コードスニペット: トラッカータグとCLIコマンドの表示を黒地→light gray pill に統一。light theme と調和。
影響範囲
今回の変更は UI/UX のみ で、計測ロジック・データ構造・API には影響しません。既存の埋め込みトラッカータグはそのまま動作します。