Tech BlogAWSツール & 技術ブログ
メニュー

カテゴリ

AWS & AI ツール

タグ

AI24Claude Code23AWS12セキュリティ11Claude9効率化8開発ツール6プラグイン5S35CloudFront5Next.js4Opus 4.83すべて見る →

Next.jsサイトの無料PV計測、どれを選ぶ？CloudFrontログ・自前API・Web Analytics比較【SSGホスティング向け】

AWSCloudflareNext.jsCloudFrontアクセス解析意思決定コスト最適化

結論：用途が「PV把握」なら、無料の選択肢は実質3つに絞れる

SSGホスティング（S3/Vercel/Cloudflare Pagesなど）とNext.jsで個人ブログを運営すると、 意外と悩むのが「PVの計測方法」です。

無料で実現する選択肢は、大きく次の3つに整理できます。

  • CloudFrontのアクセスログを集計する
  • 自前の計測API（JS + API Gateway + Lambda + DynamoDB など）を構築する
  • Cloudflare Web Analytics のような外部の無料サービスを使う

このうち「とにかくシンプルにPV数が分かればよい」という用途であれば、 コスト・管理負荷・精度のバランスから Cloudflare Web Analytics が有力な選択肢になります。 本記事では、それぞれのトレードオフと「なぜその方法を選ぶのか」という判断軸を整理します。

この記事で分かること

この記事は、次のようなシーンの方を想定したリファレンスです。

  • S3 + CloudFront / Vercel / Cloudflare Pages など、さまざまなSSGホスティング構成でブログを運営している
  • 立ち上げ直後で、最初のPV計測手段をどう設計するかを検討している
  • GA4が高機能すぎて持て余しており、より軽量な代替を探している

読み終えると、以下が分かります。

  • 無料でPVを計測する3つの選択肢（CloudFrontログ / 自前API / Web Analytics）のトレードオフ
  • それぞれを採用する／見送る判断軸（コスト・管理負荷・精度）
  • Cloudflare Web Analyticsのメリット・注意点と、Next.js（App Router）での導入手順
  • 自分の用途にWeb Analyticsが向いているかを判断するチェックリスト

なぜ個人ブログでもPV計測が必要なのか

そもそも、なぜ個人ブログでPVを計測する意味があるのでしょうか。一般論として、次のような理由が挙げられます。

  • SEO改善のため：どの記事が読まれているかが分かれば、伸ばすべきテーマやリライト対象が見えてくる
  • 内部リンク設計のため：流入の多い記事から関連記事へ誘導するなど、サイト内の導線を改善できる
  • 無料で始める意義：個人ブログでは収益が立つ前の段階が長い。だからこそ、追加コストをかけずに運用状況を把握できる手段が重要になる

逆に言えば、これらを満たす範囲であれば「高機能なユーザー行動分析」までは必要ないケースが多い、ということです。 そこで、

  • アクセス解析のために追加料金が発生する
  • 設定が複雑で管理コストが増える

といった状態を避け、「完全無料」「構成がシンプル」「管理が楽」という条件で選択肢を比較していきます。

検討したものの、採用しなかった方法

1. CloudFrontのログを利用する方法

CloudFrontのアクセスログをS3に出力して集計する方法です。

一見すると無料で実現できそうですが、

  • 標準ログでは情報が限定的
  • リアルタイムログなどを使うと追加コストが発生する可能性
  • 集計・可視化の仕組みを自作する必要がある

といった理由から、
「PV数を知るだけ」にしてはオーバーエンジニアリングだと判断しました。

2. 自前で計測APIを構築する方法

（JS + API Gateway + Lambda + DynamoDB）

JavaScriptからAPIを叩き、DynamoDBにPV数を書き込む構成です。

この方法には以下の懸念がありました。

  • 従量課金のリスク
    アクセス増加により、リクエスト数や転送料で無料枠を超える可能性がある
  • 管理コストの増加
    管理画面や可視化ロジックを自作する必要がある

今回は
「とにかくシンプルにPV数が分かればOK」
という要件だったため、この構成も見送りました。

解決策：Cloudflare Web Analytics

最終的に採用したのが Cloudflare Web Analytics です。

このツールは、今回の要件に非常にマッチしていました。

Cloudflare Web Analyticsを選んだ理由

  • 完全無料
    トラフィック量に関係なく、無料プランで利用可能
  • プライバシー重視
    Cookieを使用せず、ユーザーを追跡しない
  • 導入が非常に簡単
    軽量なJavaScriptを1行追加するだけ
  • CloudFront構成でも問題なく利用可能

個人ブログのアクセス把握用途としては、十分すぎる機能です。

想定する構成（SSGホスティング）

この記事で前提とする構成は以下の通りです。

  • フロントエンド：Next.js（SSG）
  • ホスティング：SSGホスティング（S3 + CloudFront / Vercel / Cloudflare Pages など）
  • アクセス解析：Cloudflare Web Analytics

Web Analyticsはホスティング先を問わず、計測スクリプトを1行追加するだけで利用できます。 そのため、S3 + CloudFront でも、Vercel でも、Cloudflare Pages でも、同じ手順で導入できます1。

実際に運用してみてどうだったか

選択肢を比較するだけでなく、当ブログ（Next.js）で実際にCloudflare Web Analyticsを運用してみた所感を先に共有します。導入手順を試す前の判断材料にしてください。

このブログで実装してみた実績

公式ドキュメントの「数分〜数時間」は控えめな表現で、自分のブログで実装した際は 数分で反映 されました。スクリプトをデプロイして少し待つだけで、動作確認用のテストアクセスが即座にダッシュボードに現れます。

GA4との併用による検証

CWAのボットフィルタリングが気になっていたため、現在は CWAとGoogle Analytics 4を併用 しています。数ヶ月運用してみた実感として、両者の計測数値はほぼ同じ でした。CWAが極端に数値を少なく表示するようなことはなく、個人ブログのPV把握用途であれば「CWA単体でも問題ない」と判断できる精度でした。

なお、CloudFrontのアクセスログとの照合は行っていません。ログ分析は別環境（Athena等）のコストが発生するため、現時点では「ダッシュボードで十分」と割り切っています。

Cloudflare Web Analyticsの導入手順

導入は数分で完了します。大まかな流れは次の通りです。

  1. Cloudflareにサインアップする
  2. ダッシュボードのサイドバーから Web分析（Web Analytics）を選択する
  3. PVを計測したいドメインを登録する
  4. 発行された JS Snippet を、Next.js の全ページで読み込まれる場所に追加する

サインアップ〜ドメイン登録までの画面操作は更新されることがあるため、最新の手順はCloudflare Web Analytics 公式ドキュメントを参照してください。 ここでは、記事独自の論点である Next.js での計測スクリプトの組み込み方 を中心に解説します。

Next.jsへの組み込み（App Router / layout.tsx の例）

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="ja">
      <head>
        <Script
          src="https://static.cloudflareinsights.com/beacon.min.js"
          data-cf-beacon='{"token": "あなたのトークン"}'
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

<head> 内に <script> タグを直接記述する方法でも動作しますが、 Next.js では next/script の Script コンポーネントを使うのが推奨です。理由は一般的に次の点にあります。

  • 読み込みタイミングを制御できる：strategy プロパティで読み込み戦略を指定でき、計測のような後回しでよいスクリプトは afterInteractive（既定）や lazyOnload でページ表示を妨げにくくできる
  • 重複読み込みを防げる：Next.jsがスクリプトの読み込みを一元管理するため、クライアントサイド遷移をまたいでも同じスクリプトが二重に挿入されにくい
  • パフォーマンス上の利点：計測スクリプトをレンダリングのクリティカルパスから外しやすく、初期表示（First Paint）への影響を抑えられる

計測スクリプトは「表示を速くしたいページに、表示を遅くする要素を足す」という性質を持つため、読み込みタイミングを意識できる next/script が扱いやすい、というのがポイントです。

導入後の確認

スクリプトを追加してデプロイしたら、 Cloudflareのダッシュボードで Web Analytics を開いてください。

数分〜数時間後にデータが反映され始めます。

確認できる主な指標は以下の通りです。

  • ページビュー数（PV）
  • ユニークビジター数
  • 参照元（リファラー）
  • ページごとのアクセス数
  • 国・地域別のアクセス

注意点・制限事項

Cloudflare Web Analytics は万能ではありません。以下の点に留意してください。

  • リアルタイム性：データ反映には数分〜数時間のタイムラグがあります（体感では数分）
  • 詳細なユーザー分析：GA4のようなイベントトラッキングやコンバージョン計測はできません
  • データ保持期間：無料プランでは直近のデータのみ閲覧可能です
  • ボットフィルタリング：基本的なフィルタはありますが、完全ではありません

自分の用途にWeb Analyticsが向いているか（判定の目安）

ここまでの比較を踏まえ、Web Analyticsが向いているかを判断する目安を挙げます。あくまで推奨ベースの考え方なので、自分の運用に合わせて取捨選択してください。

次の項目に多く当てはまるほど、Web Analyticsが適している可能性が高いと考えられます。

  • 知りたいのは主に PV数・アクセス傾向 で、詳細なユーザー行動分析までは求めていない
  • 追加コストをかけたくない（無料で完結させたい）
  • 集計基盤やダッシュボードを 自前で運用したくない（管理負荷を抑えたい）
  • リアルタイム性（秒単位の即時反映）は必須ではない
  • Cookieを使わない計測など、プライバシー配慮を重視している

逆に、以下に当てはまる場合は別の選択肢を検討するのが無難です。

  • コンバージョンやイベント単位の 詳細な行動分析が必要 → GA4などのフル機能ツール
  • 生のアクセスログを 自分で自由に集計・保管したい → CloudFrontログ + Athena等
  • 計測データを 自社のDBやBIに取り込みたい → 自前の計測API

おおまかな選び方としては、「まずは無料・低管理負荷でPVを把握したい」なら Web Analytics から始め、要件が増えた段階で上記の選択肢へ移行・併用を検討する、という進め方が現実的でしょう。

まとめ

項目 内容
ツール Cloudflare Web Analytics
費用 完全無料
導入工数 JSタグ1行追加のみ
主な用途 PV数・アクセス傾向の把握
不向きな用途 詳細なユーザー行動分析

SSGホスティング（S3 + CloudFront / Vercel / Cloudflare Pagesなど）でNext.jsの個人ブログを運営している方にとって、 「とにかくシンプルにPV数を把握したい」という用途であれば、 Cloudflare Web Analytics は 最小コスト・最小工数でPVを把握できる有力な選択肢 です。

高度な分析が必要になった段階で GA4 等への移行・併用を検討すれば十分でしょう。

なお、当ブログ自体のホスティング移行の経緯は「AWSからCloudflare Pagesへの移行記」にまとめています。Cloudflare Pagesへ移行すると、ホスティングとWeb Analyticsを同じプラットフォームで完結できるため、構成をよりシンプルにできます。

Footnotes

  1. 当ブログは記事公開時点ではS3 + CloudFront構成でしたが、2026年5月にCloudflare Pagesへ移行しました。移行の詳細は別記事「AWSからCloudflare Pagesへの移行記」にまとめています。なお、Cloudflare PagesはホスティングとWeb Analyticsを同一プラットフォームで完結できる点が利点です。 ↩

関連記事

← 記事一覧に戻る