atom.web-builder.analytics-setup
アクセス解析を導入して数字を見る
アクセス解析を導入して数字を見る お店をオープンしたら、「今日は何人お客さんが来たかな？」と気になりますよね。Webサイトでも同じです。あなたのサイトに アクセス解析（＝サイトに誰が、いつ、どれくらい訪れたかを自動...
成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。
証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。
メディアメディアレッスン内に出てくる図や動画のスロットです。実際の画面やイメージで理解を補助します。
レッスン本文
アクセス解析を導入して数字を見る
お店をオープンしたら、「今日は何人お客さんが来たかな？」と気になりますよね。Webサイトでも同じです。あなたのサイトに**アクセス解析（＝サイトに誰が、いつ、どれくらい訪れたかを自動で記録する仕組み）**を導入して、数字を一目で確認できるようにしましょう。
すでにVercel（＝サイトをインターネットに公開するサービス）を使っているあなたなら、10〜15分で完了します。
前提を確認する
このレッスンを始める前に、次の2つを確認してください。
- あなたのサイトが Vercel に公開済み であること
- 自分のパソコンで プロジェクトのフォルダ を開けること
まだサイトを公開していない場合は、先に「Vercelにサイトを公開する」のレッスンを終えてから戻ってきてください。
解析ツールを選ぶ
アクセス解析にはいくつかツールがありますが、ここでは Vercel Analytics を使います。
| ツール名 | 特徴 | このレッスンでの採否 |
|---|---|---|
| Vercel Analytics | Vercelを使っているなら設定が一番簡単 | ✅ 採用 |
| Google Analytics 4 | 高機能だが設定項目が多く、初めてだと15分では難しい | ❌ 別の機会に |
良い例: すでにVercelを使っているなら、Vercel Analyticsが最短ルートです。
悪い例: 「本格的にやりたいから」と最初からGoogle Analyticsを選ぶと、設定画面の多さに圧倒されて挫折しがちです。
まずは一番シンプルなVercel Analyticsで「数字が見える喜び」を体験しましょう。
AIに作業を依頼する（おすすめの方法）
ここからの作業は、AIツールに任せるのが最も簡単です。以下のプロンプト（＝AIへの指示文）をそのままコピーして使ってください。
Claude Code / Codex CLI を使う場合
ターミナル（＝コンピュータに文字で指示を送る画面）でプロジェクトのフォルダを開き、次のように入力します。
@vercel/analytics パッケージをインストールして、app/layout.tsx の <body> 閉じタグの直前に <Analytics /> コンポーネントを追加してください。import文も忘れずに入れてください。
AIがファイルの編集を提案してくれるので、内容を確認して承認するだけです。
Cursor / ChatGPT を使う場合
Cursorのチャット欄、またはChatGPTに次のように伝えます。
私のNext.jsプロジェクトにVercel Analyticsを導入したいです。
以下をやってください：
1. @vercel/analytics パッケージをインストールするコマンドを教えて
2. app/layout.tsx に追加すべきコードを、変更前と変更後の形で見せて
ChatGPTの場合はコードを自分でコピー＆ペーストする必要がありますが、どこに何を書けばいいか明確に教えてもらえます。
手動で作業する場合の手順
AIを使わない場合や、AIの出力を確認したい場合のために、手動の手順も載せておきます。
パッケージ（＝追加機能のまとまり）をインストールする
プロジェクトフォルダでターミナルを開き、次の1行をコピーして貼り付け、Enterキーを押してください。
pnpm add @vercel/analytics
これは「Vercelのアクセス解析機能を使うためのプログラム」をプロジェクトに追加するコマンド（＝コンピュータへの指示文）です。数秒で完了します。
解析コンポーネント（＝画面の部品）を追加する
プロジェクトの中にある app/layout.tsx または app/layout.jsx というファイルを開きます。これはすべてのページの土台になるファイルです。
ファイルの先頭付近に、次の1行を追加します。
import { Analytics } from '@vercel/analytics/react';
そして、<body> タグの 閉じタグ </body> の直前 に、次の1行を追加します。
<Analytics />
変更後のファイルは、おおよそ次のような形になります。
import { Analytics } from '@vercel/analytics/react';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Analytics />
</body>
</html>
);
}
良い例: <Analytics /> を </body> の直前に置く。
悪い例: <Analytics /> を </html> の外に置く → エラーになります。
変更を公開する
ファイルを保存したら、変更をインターネット上のサイトに反映します。
AIツールを使っている場合は、次のように伝えてください。
変更を git commit して git push してください。コミットメッセージは「add vercel analytics」でお願いします。
手動で行う場合は、ターミナルで次の1行を実行します。
git add -A && git commit -m "add vercel analytics" && git push
これは「変更内容を保存して、インターネット上のサイトに送る」操作を3つまとめて実行する1行です。Vercelはコードが更新されると自動でサイトを再構築してくれるので、1〜2分後に反映されます。
ダッシュボードで数字を確認する
サイトが更新されたら、Vercelの管理画面で数字を確認しましょう。
- ブラウザで vercel.com を開き、ログインする
- あなたのプロジェクトをクリックする
- 上部の Analytics タブをクリックする
自分でサイトにアクセスしてからダッシュボードを見ると、数字が増えているのがわかりやすいです。スマホからもアクセスしてみてください。
確認のコツ: ブラウザのプライベートウィンドウ（＝履歴を残さない閲覧モード）からアクセスすると、新しい訪問者としてカウントされるので確認しやすいです。
つまずきポイントを知っておく
数字がすぐに表示されない
Vercel Analyticsは、データが反映されるまで数分〜最大24時間かかることがあります。設定直後に何も出なくても焦らないでください。翌日にもう一度確認してみましょう。
AIに聞いてみるプロンプト例:
Vercel Analyticsを導入したけど数字が表示されません。原因を調べるにはどうしたらいいですか？
<Analytics /> を追加する場所がわからない
ファイルの構造が見慣れない場合は、AIに聞くのが一番早いです。
AIに聞いてみるプロンプト例:
app/layout.tsx の中身を見せて。<Analytics /> をどこに追加すればいいか教えて。
「Analyticsタブが見つからない」とき
Vercelの無料プラン（Hobby）でもAnalyticsは使えます。見つからない場合は以下を試してください。
- Vercelのページをブラウザで再読み込みする
- プロジェクトの Settings → General でプランを確認する
- デプロイ（＝公開処理）が完了しているか確認する — Vercelのプロジェクトページで最新のデプロイ状態が「Ready」になっていればOKです
pnpm コマンドがエラーになる
ターミナルで pnpm add @vercel/analytics を実行してエラーが出た場合、プロジェクトのフォルダにいない可能性があります。
AIに聞いてみるプロンプト例:
pnpm add @vercel/analytics を実行したらエラーが出ました。[エラーメッセージをここに貼り付け] 原因と対処法を教えてください。
完了を確認する
次の3つがすべてできていれば、このレッスンは完了です。
-
@vercel/analyticsパッケージがインストールされている（package.jsonに記載がある） -
app/layout.tsxに<Analytics />が追加されている - Vercelダッシュボードの Analytics タブを開いて、画面が表示される（データはまだ0でもOK）
最後に、Analyticsタブの画面をスクリーンショットで保存しておきましょう。これがあなたの成果物です。
まとめ
これであなたのサイトにアクセス解析が入りました。
- Vercel Analyticsを選んで導入した
- AIツールまたは手動でコードを追加した
- 変更をVercelに公開した
- ダッシュボードで数字を確認した
次は実際に何人かの訪問者を集めて、数字の変化を観察してみてください。「どのページがよく見られているか」「どこからの訪問者が多いか」など、Vercel Analyticsが見せてくれる情報は意外と面白いですよ。
種類: code_snippet
検証: basic_manual_check_v1
証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。
メディア