アナリティクスダッシュボード

SaaS プロダクトの KPI をリアルタイムに可視化するダッシュボード。BigQuery からデータを集計し、Recharts でグラフ表示。PM としての経験を活かしてメトリクス設計から関わり、エンジニアとして実装まで一貫して担当しました。

概要

SaaS プロダクトの事業指標をリアルタイムで把握するための社内ダッシュボードです。PM としてメトリクス設計に携わり、エンジニアとして実装まで一貫して担当しました。

背景と課題

以前はスプレッドシートで手動集計していたため：

データが毎朝1時間かけて手動更新
担当者が休むと数字が古いままになる
グラフの作成が毎回手作業

これらを自動化し、常に最新の数字を誰でも確認できる環境を作ることが目標でした。

メトリクス設計

PM の経験から、ダッシュボードに載せる指標を3層に整理しました：

North Star Metric: 週次アクティブユーザー数
Input Metrics: 新規登録数・機能利用率・継続率
Health Metrics: エラー率・レイテンシ・チャーン率

「何でも見られる」ではなく「意思決定に必要なものだけ見られる」設計にすることで、ダッシュボードの利用率が上がりました。

技術構成

BigQuery → Python → API

from google.cloud import bigquery
from datetime import datetime, timedelta

def get_weekly_active_users(project_id: str) -> list[dict]:
    client = bigquery.Client(project=project_id)
    query = """
        SELECT
          DATE_TRUNC(event_date, WEEK) AS week,
          COUNT(DISTINCT user_id) AS wau
        FROM `events.user_activity`
        WHERE event_date >= DATE_SUB(CURRENT_DATE(), INTERVAL 12 WEEK)
        GROUP BY 1
        ORDER BY 1
    """
    return [dict(row) for row in client.query(query).result()]

Recharts によるグラフ

<ResponsiveContainer width="100%" height={300}>
  <LineChart data={wauData}>
    <XAxis dataKey="week" />
    <YAxis />
    <Tooltip />
    <Line type="monotone" dataKey="wau" stroke="#1F5C00" strokeWidth={2} />
  </LineChart>
</ResponsiveContainer>

成果

データ更新の手動作業を完全に廃止（週5時間の削減）
意思決定のスピードが向上（「数字どこ？」という質問がなくなった）
週次定例でのデータ共有がダッシュボードを開くだけで完結