メインコンテンツへスキップ

PULSE — プロダクト分析ダッシュボード

プロダクト分析ダッシュボード

プロダクト分析のダッシュボード。五つの管理ビューを一画面に収め、すべてのカードを一つの期間フィルターで動かし、数字は等幅でレイアウトを一切揺らさない。

2026-03
  • フルスタック開発
  • データビジュアライゼーション
  • プロダクトUI設計
Next.jsTypeScriptTailwind CSSRechartsVercel
PULSE — プロダクト分析ダッシュボード のプレビュー
  1. 01

    五つの管理ビューを一つの画面に集約

  2. 02

    7 日・30 日・90 日の期間フィルター一つですべてのカードを制御

  3. 03

    数字はすべて等幅。どの値もレイアウトをずらさない

ブリーフ

サブスクリプション事業のためのプロダクト分析ダッシュボード。この種の道具の問題は、データではない。データが多すぎることだ。継続収益、稼働アカウント、コンバージョン率、解約、チャネル別の獲得、プランの内訳——どれも重要で、だからこそ何も重要でなくなる。

依頼は画面そのものだった。通常は五つのタブに分かれて読むものを、一画面で読めるようにすること。

制約

  • 高い密度を引き受ける。 ダッシュボードを開く人が求めるのは、すべてを見ることであって、クリックすることではない。
  • 色だけで情報を担わせない。 色覚に特性のある人が読んでも、グラフは読めなければならない。
  • 数字は絶えず変わる。 値が三桁から四桁になったとき、レイアウトが動いてはいけない。

判断

階層は六つではなく二つ。

すべては二つの入口に収まる。管理——全体、オーディエンス、収益、ファネル、リテンション——と、設定——連携、各種設定。区分はテーマではなく時間軸である。毎日見るものと、一度決めれば済むもの。この分け方だけで、行き来の半分が消える。

期間フィルターをすべての上に。

七日、三十日、九十日。ページ先頭のセレクター一つがすべてのビューを動かす。カードごとにフィルターを置けば、成り立たない比較が生まれてしまう——三十日の収益の隣に、七日の解約率が並ぶような。

数字はすべて等幅で。

値はすべて等幅で組んである。金額の列は小数点で揃い、更新される数値がレイアウトを跳ねさせることもない。スタイル三行の細部だが、道具の堅牢さの感じ方を変える。

結果

一画面に収まる全体像。期間比較つきの純継続収益、稼働アカウント、コンバージョン、解約、チャネル別の獲得、プランの内訳。アカウント表は並べ替えができ、データは書き出せ、動きはその場で見える。

いま作り直すなら

通知が足りない。開くことを思い出さなければならないダッシュボードは、思い出した日にしか役に立たない。次に着手するなら、解約率に対する可変のしきい値と、その電子メール通知だろう。データはすでにある。足りないのは使われ方だ。

Aureon