Next.js でブログやサイトを公開したあと、
「どれくらいアクセスがあるのか」「ページ表示は遅くないか」
気になりませんか？
Vercel を使っている場合、外部の解析サービスを使わなくても
公式の Web Analytics（アクセス解析） と
Speed Insights（速度解析） を 無料プランのまま 利用できます。
本記事では、Next.js（App Router）で作成したブログを対象に、
- ページビューや参照元が分かる アクセス解析
- Core Web Vitals を計測できる 速度解析
- 初心者がまず見るべき数値と判断ポイント
までを、設定から見方までまとめて解説します。
この記事でできること
この記事を読むことで、Vercel公式の解析機能を迷わず使い始められる状態になります。
- Vercel公式のアクセス解析を有効化できる
- Next.js の
layout.tsxに正しく設定できる - 初心者が「何を見ればいいか」分かる
- 無料プランの現実的な使いどころを理解できる
Vercelの解析機能は2種類ある
Vercelには、役割の異なる解析機能が2つ用意されています。
まずは「何を見るための機能なのか」を整理しておきましょう。
Web Analytics（アクセス解析）
Web Analytics は、人の動きを見るための機能です。
- ページビュー（PV）
- 訪問数（Visitors）
- 参照元
- 人気ページ
- 国・デバイス
「どの記事が読まれているか」「どこから来ているか」を把握するのが目的です。
Speed Insights（速度解析）
Speed Insights は、ページの速さや体感性能を見るための機能です。
- LCP（表示速度）
- INP（操作の反応）
- CLS（レイアウトずれ）
Google が重視する Core Web Vitals を、実ユーザーデータで確認できます。
Step1：Vercelのダッシュボードで有効化する
まずは、Vercel 側で解析機能を有効にします。
コードを書く前に必ず必要な設定です。
ダッシュボードでの操作手順
- Vercelにログイン
- 対象プロジェクトを選択
- 「Analytics」タブを開く
- Web Analytics を有効化
- Speed Insights を有効化
無料プランのままで利用でき、追加料金は発生しません。
Step2：パッケージをインストールする
次に、Next.js 側で公式パッケージを追加します。
npm i @vercel/analytics @vercel/speed-insights
@vercel/analytics：アクセス解析用@vercel/speed-insights：速度解析用
App Router を使っている場合、この2つを入れるだけで準備は完了です。
Step3：layout.tsx を修正する（完成形）
App Router では、解析用コンポーネントを layout.tsx に一度だけ 設定します。
全ページ共通で読み込まれるため、もっとも安全な方法です。
Next.js（App Router）の例
import {Analytics }from'@vercel/analytics/react'
import {SpeedInsights }from'@vercel/speed-insights/next'
exportdefaultfunctionRootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<htmllang="ja">
<body>
{children}
<Analytics />
<SpeedInsights />
</body>
</html>
)
}
✅ body の末尾に配置
✅ 1回だけでOK
✅ 環境変数の設定は不要
Step4：デプロイしてアクセスする
設定が終わったら、通常どおりデプロイします。
- GitHub に push
- Vercel が自動デプロイ
- 公開URLに 実際にアクセス
数分〜数時間後、ダッシュボードにデータが表示され始めます。
初心者がまず見るべき数値（ここが重要）
ここからが アクセス解析の本番です。
最初からすべてを理解する必要はありません。
まずは「この5つ」だけ見てください。
① ページビュー（PV）
何が分かる？
ページが 何回表示されたか が分かります。
初心者の見方
- 数字が 0 → 10 → 50 と増えていればOK
- 少なくても気にしすぎない
判断ポイント
- 記事が誰かに届いているかの確認
- 公開後も0が続く場合は導線を見直す
② ユニーク訪問数（Visitors）
何が分かる？
実際に訪れた 人数 が分かります。
初心者の見方
- PVより少なくて当たり前
- PV ÷ 訪問数 ≒ 1〜2なら正常
判断ポイント
- 同じ人が何度も見ているだけかの判断
- 増えてきたら認知され始めているサイン
③ 人気ページ（Top Pages）
何が分かる？
よく読まれている記事が分かります。
初心者の見方
- 上位3記事だけ見れば十分
判断ポイント
- 人気記事は「伸びる型」
- 構成・タイトル・テーマを他記事にも流用
④ 参照元（Referrers）
何が分かる？
どこから来たかが分かります。
- Google検索
- X（旧Twitter）
- 直接アクセス
初心者の見方
- 最初は Direct / Google が中心で正常
判断ポイント
- Googleが増えればSEOが効き始めている
- SNS流入は拡散力の指標
⑤ デバイス（Desktop / Mobile）
何が分かる？
PCかスマホかが分かります。
初心者の見方
- モバイルが多くても問題なし
判断ポイント
- モバイル比率が高い → スマホ表示重視
- 文字サイズや改行を見直す
速度解析（Speed Insights）はここだけ見ればOK
Speed Insights は数値が多く、初心者は迷いがちです。
良い・悪いの目安だけ押さえましょう。
LCP（表示速度）
- 2.5秒以下：良好
- 4秒超：改善検討
画像サイズや OGP 画像が原因になることが多いです。
INP（操作反応）
- 200ms以下：良好
個人ブログでは問題になりにくい指標です。
CLS（レイアウトずれ）
- 0.1以下：良好
画像サイズ未指定で悪化しやすいため注意します。
初心者がやらなくていいこと
最初は やらなくてOK です。
- 数字の微差で一喜一憂
- Core Web Vitals の暗記
- 高度なアクセス分析
目的は「改善の方向を知ること」です。
無料プランでの現実的な使い方
- 記事公開 → 数日後にPV確認
- 人気記事を把握
- 表示が遅くなっていないか確認
これだけで、無料プランでも十分に価値があります。
まとめ
- Vercelは 無料でアクセス解析ができる
- Web Analytics と Speed Insights は役割が違う
- 初心者は 5つの指標だけ見ればOK
- 数字は評価ではなく判断材料
まずは
書く → 出す → 数字を見る
このサイクルを回すことが、ブログ成長の最短ルートです。
コメント