マーケターがAIコーディングで分析ダッシュボードを内製した話｜Claude Code活用事例

OPTEMOでは、マーケティング数値の確認に使っていた時間を減らすために、社内用の分析ダッシュボードを自分たちで作りました。使ったのはClaude Code（AnthropicのAIコーディングアシスタント）で、エンジニアに依頼せず、マーケター側で組み上げた事例です。

この記事では、その「作るまでの考え方と進め方」を、これからAIコーディングを使ってみたいマーケターに向けてまとめました。細かい実装コードは扱わず、判断のポイントに絞ってお伝えします。

なぜ作ったか：数字を「見に行く」だけの工数を減らす

きっかけは、見たい数字が複数のサービスにバラバラに置かれていたことでした。

• Google Analytics 4（GA4） … セッションやコンバージョンなどのアクセス状況
• Google Search Console（GSC） … 検索流入・掲載順位
• スプレッドシート … 記事のリライト状況などの手入力データ

週次で数字を追うたびに、それぞれの管理画面を開き、期間を合わせ、必要な指標を目で拾って、頭の中でつなぎ合わせる ―― この「データを見に行くだけ」の時間が、じわじわ効いていました。

集計や画面遷移のような定型作業は、本来ヒトが時間をかけるところではありません。そこを効率化して浮いた時間を、顧客のことを考えたり戦略を練ったりという「ヒトにしかできないこと」に回したい。ダッシュボードはそのための手段であり、その開発自体もAIコーディングで効率化した、というのが今回の話です。

ゴール：ログインすれば必要な数字が全部1画面に

最初に決めたのは「ログインすれば必要な数字が全部1画面で見られる状態にする」というシンプルなゴールでした。作り込みたい機能を並べる前に、”完成した状態”の一枚絵を先に決めています。

最終的に集約したデータソースは次の4つに広がりました。

• GA4 … セッション・キーイベント（CV）・ページ別パフォーマンス・広告流入・見込み顧客
• GSC … 検索クエリ・掲載順位・CTR
• Google Sheets … リライト状況などの手入力データ
• AI Visibility … 生成AI上でのOPTEMO言及状況（別途構築した監視データ）

管理画面をハシゴする手間をなくし、横断的に比較できる1枚にまとめる。マーケター側で「これが見たい」を明文化してから作り始めたことが、後の意思決定を速くしました。

AIコーディングでの進め方：最小単位から積み上げる

作業はClaude Codeに指示を出しながら進めました。ここで効いたのは、いきなり全部を作ろうとせず、「動く最小単位」を1つずつ増やす進め方をとったことです。

1. まず「ログインできるだけ」のページを作る

最初に着手したのは、認証だけが動く空のページ。社内ドメイン（@optemo.co.jp）のGoogleアカウントでログインした人だけが入れる状態を作りました。中身は空で構いません。「入口」と「入れる人の制限」だけが動いた状態を先に確認します。

2. GA4を「1指標だけ」表示する

次に、GA4からセッション数だけを取ってきて、1つのグラフとして画面に表示。この時点でグラフの見た目は素っ気ないのですが、「外部のデータをAPIで取ってきて画面に出す」という一連の配管が通ったことが確認できます。

配管が通ったかどうかを、早い段階で目で見て確かめる ―― ここが後の作業の土台になります。

3. 同じ型で指標を横展開する

配管が1本通れば、あとは同じ型の繰り返しです。キーイベント（CV）、ページ別パフォーマンス、広告流入、見込み顧客と、指標を1つずつ足していきます。「1指標＝1グラフ」を積み木のように増やすだけなので、AIへの指示もほぼコピペで済みます。

4. データソースを増やす（GSC → Sheets → AI Visibility）

GA4が一通り揃った段階で、GSC、Google Sheets、AI Visibilityの順にデータソースを追加しました。ここでも「1データソース＝まず1指標だけ表示」で配管を通してから、指標を増やす。同じ手順を繰り返すだけなので、迷いなく進みます。

5. 「見やすさ」を後から整える

土台が動いたあとに、期間の切り替え（今週／今月／任意の日付範囲）、タブでのカテゴリ分け、KPIカードなど、実用性を上げるパーツを足していきました。「見たい期間で、見たい指標を、すぐ切り替えられる」状態にして、ようやく日常運用に載せられる形になります。

仕上げにやったこと

日常運用に載せてみて、「もう一歩ほしい」と感じた部分を後から追加しました。

• 前期間比較 … 各指標に「前の期間と比べてどう変化したか」の列を追加。数字を単体でなく推移で見られる。
• ドリルダウン … サマリから個別データへ掘り下げる導線。
• SEO専用タブ … オウンドメディア（knowhowコラム）のSEO実績をタブ化し、こちらにも前期間比を並べた。

こうした「あったらもっと便利」の追加も、最初の土台が素直に組んであれば数十分で足せます。先に全部盛り込もうとせず、使いながら足していく方が結果的に早いです。

セキュリティの線引き

AIコーディングを業務に使う以上、データの扱いは最初に明確に線引きしました。マーケターがAI活用を進めるうえで、ここを曖昧にしないことは重要です。

• 開発時 … ソースコードはAIに渡しますが、認証情報（APIキー等）はAIに触らせない運用にしています。
• 本番運用時 … AIは一切関与しません。クライアントデータやアクセス数値がAIに送られることはありません。
• APIアクセス … Googleの各APIへのアクセスはすべてサーバ側で行い、ブラウザに認証情報が出ない構成にしました。

「開発にはAIを使ったが、動いているサービス自体にはAIは入っていない」という状態を、はっきり分けて設計する ―― この線引きが、社内でも対外的にも安心して使える前提になります。

使った技術スタック（参考）

参考までに、採用した技術構成を残しておきます。マーケターが真似する場合、この選定自体もAIに相談すれば妥当な答えが返ってきます。

領域	採用
フレームワーク	Next.js 16
認証	next-auth v5（Googleログイン＋ドメイン制限）
グラフ	recharts 3
スタイル	Tailwind CSS v4
データ取得	GA4 Data API／Search Console API／Sheets API

「新しめで、情報がAIの学習範囲に入っていて、後から拡張しやすい」ものを、AIに相談しながら選びました。マーケター単独で技術選定するのは難しいですが、AIに「用途と規模」を伝えれば十分候補を絞ってくれます。

マーケターがAIコーディングで内製する意味

このダッシュボード自体は特別なものではありません。世の中にはBIツールもいくつもあります。それでも自分たちで作った理由は、「見たい形に近づけるまでの往復回数」を圧倒的に減らせるからです。

• 「この指標の並びを変えたい」→ その場でAIに指示して数分で反映
• 「このデータソースも足したい」→ 1本配管を通してから横展開
• 「前期間比を出したい」→ 既存の型に足すだけ

エンジニアに依頼するときのように、要件を書き起こし、優先度を並べ替え、順番待ちを待つ、というサイクルがありません。マーケターが「見たい」と思ってから、実際に見られるまでの距離が短い。これはBIツールでも代替しにくい体験だと感じています。

そして繰り返しになりますが、こうして浮いた時間は、顧客のことを考える時間や、次の一手を練る時間に回します。効率化はゴールではなく、時間を作るための手段です。

OPTEMOについて

OPTEMOは、Webサイトに訪れている見込み顧客とリアルタイムでチャット・通話ができるインサイドセールス支援ツールです。「Webサイトを営業現場に」というコンセプトで、離脱していた見込み顧客との接点を、その場で商談に変えます。

サービスの詳細は、下記ボタンから資料をご覧ください。