はじめに
前回の記事ではポートフォリオサイトをより魅力的に見せるためのデザインの基本原則を解説しました。今回はGoogleアナリティクスをポートフォリオサイトにGA4を導入してアクセス解析を始める方法を解説します。サイトを公開しただけでは誰がどのページを見ているか・どこからアクセスしているかがわかりません。GA4を導入することでユーザーの行動を数値で把握できるようになり、サイトの改善に活かせます。アカウントの作成からトラッキングコードの設置・基本的なレポートの見方まで一から解説します。
1. Google Analytics 4（GA4）とは
1.1 GA4の概要
**Google Analytics 4（GA4）**はGoogleが提供する無料のアクセス解析ツールです。2023年7月にUA（ユニバーサルアナリティクス）からGA4への完全移行が完了し、現在はGA4が標準のアクセス解析ツールです。
| 機能 | 内容 |
|---|---|
| ユーザー数・セッション数の計測 | どのくらいの人がサイトを訪問しているか |
| ページビュー数 | どのページが何回見られているか |
| 流入経路の分析 | 検索・SNS・直接アクセスなどどこから来ているか |
| 滞在時間・直帰率 | ユーザーがどのくらいサイトに関与しているか |
| デバイス分析 | PC・スマートフォン・タブレットの割合 |
| コンバージョン計測 | お問い合わせ完了などの目標達成を計測 |
1.2 GA4の基本用語
| 用語 | 意味 |
|---|---|
| ユーザー数 | サイトを訪問したユニークなユーザーの数 |
| セッション | ユーザーがサイトを訪問してから離脱するまでの一連のアクション |
| エンゲージメント率 | 10秒以上滞在・2ページ以上閲覧・コンバージョン達成のいずれかを満たしたセッションの割合 |
| イベント | ページビュー・スクロール・クリックなどユーザーの操作 |
| コンバージョン | お問い合わせ完了・資料ダウンロードなど目標となるイベント |
2. Googleアナリティクスのアカウントを作成する
2.1 Googleアカウントでサインインする
- analytics.google.com にアクセスします。
- Googleアカウントでサインインします（持っていない場合は作成します）。
2.2 アナリティクスアカウントを作成する
- 「測定を開始」をクリックします。
- アカウント名を入力します（例：「My Portfolio」）。
- データ共有設定はデフォルトのまま「次へ」をクリックします。
2.3 プロパティを作成する
| 項目 | 設定内容 |
|---|---|
| プロパティ名 | サイト名（例：「Portfolio Site」） |
| レポートのタイムゾーン | 日本 |
| 通貨 | 日本円（JPY） |
「次へ」をクリックして、ビジネスの説明（個人・小規模を選択）と目標（基本的なレポートを確認する）を選択して「作成」をクリックします。
2.4 データストリームを設定する
- 「ウェブ」を選択します。
- 以下を入力します。
| 項目 | 入力内容 |
|---|---|
| ウェブサイトのURL | https://yourusername.github.io |
| ストリーム名 | サイト名（例：「Portfolio」） |
- 「ストリームを作成」をクリックします。
- 測定ID（
G-XXXXXXXXXXという形式）が表示されます。この値をコピーしておきます。
3. トラッキングコードをサイトに設置する
3.1 グローバルサイトタグを設置する
コピーした測定IDを使ってHTMLにトラッキングコードを追加します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<!-- Google Analytics 4 トラッキングコード -->
<!-- G-XXXXXXXXXXの部分を自分の測定IDに変更する -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){ dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- ページのコンテンツ -->
</body>
</html>
⚠️ G-XXXXXXXXXX の部分を必ず自分の測定IDに変更してください： コードをそのままコピーしても計測されません。GA4のダッシュボードで確認した G- から始まる測定IDに書き換えてください。
3.2 全ページに設置する
サイトに複数のHTMLファイルがある場合はすべてのページの <head> 内にトラッキングコードを設置します。
portfolio/
├── index.html ← <head>にコードを追加
├── works.html ← <head>にコードを追加
└── contact.html ← <head>にコードを追加
💡 WordPressサイトの場合は header.php に1回設置するだけでOKです： header.php はすべてのページで共通して読み込まれるテンプレートファイルです。第十四弾で解説した子テーマの header.php に設置しましょう。
3.3 設置を確認する
トラッキングコードが正しく設置されているかを確認します。
- GA4のダッシュボードで「管理」→「データストリーム」→「ウェブストリームの詳細」を開きます。
- 「タグの実装手順を表示する」をクリックします。
- ページ下部の「接続テスト」で自分のサイトURLを入力して確認します。
またはリアルタイムレポートを使う方法が手軽です。
- GA4のダッシュボードで「レポート」→「リアルタイム」を開きます。
- 自分のサイトをブラウザで開きます。
- リアルタイムレポートに「1人のユーザー」と表示されれば設置完了です。
4. GoogleアナリティクスとSearch Consoleを連携する
4.1 連携するメリット
GA4とSearch Consoleを連携するとGA4のダッシュボード内でSearch Consoleの検索パフォーマンスデータ（検索キーワード・表示回数・クリック率）も確認できるようになります。
連携手順：
- GA4の「管理」→「プロパティの設定」→「Search Consoleのリンク」を開きます。
- 「リンク」をクリックします。
- Search Consoleのプロパティを選択して「次へ」→「送信」をクリックします。
💡 Search Consoleの設定がまだの方は第十一弾を参照してください： Search ConsoleへのサイトURL登録とサイトマップの送信方法を解説しています。
5. 基本レポートの見方
5.1 ホーム画面（概要）
GA4を開いたときに表示されるホーム画面には直近のアクセス概要が表示されます。
| 指標 | 確認ポイント |
|---|---|
| ユーザー数 | 前週・前月比でトレンドを確認する |
| 新規ユーザー数 | 初めてサイトを訪問したユーザー数 |
| エンゲージメント率 | 60%以上を目標にする |
| イベント数 | ページビューやスクロールの総数 |
5.2 レポート → ライフサイクル → 集客
どこからユーザーがサイトに来たかを確認できます。
| チャネル | 意味 |
|---|---|
| Organic Search | Google・Yahooなどの検索エンジン経由 |
| Direct | URLを直接入力・ブックマーク経由 |
| Organic Social | X（Twitter）・Instagram・FacebookなどのSNS経由 |
| Referral | 他のサイトのリンク経由 |
💡 ポートフォリオサイトではOrganic SearchとReferralを特に注目しましょう： 検索エンジンからの流入が増えてきたらSEO対策が効いているサインです。Referralは他のサイト（転職サービスや技術ブログなど）からのリンクを意味します。
5.3 レポート → ライフサイクル → エンゲージメント
ページごとのアクセス数を確認できます。
- 「レポート」→「エンゲージメント」→「ページとスクリーン」を開きます。
- 各ページの閲覧数・ユーザー数・エンゲージメント時間を確認します。
| 確認ポイント | 改善のヒント |
|---|---|
| アクセスが多いページ | 人気コンテンツを把握して同様の内容を増やす |
| エンゲージメント時間が短いページ | コンテンツの質・デザインを見直す |
| アクセスが少ないページ | 内部リンクを増やして流入を促す |
5.4 リアルタイムレポート
現在サイトを見ているユーザーをリアルタイムで確認できます。SNSでサイトを紹介した直後などに確認すると効果的です。
6. 探索レポートで詳細を分析する
6.1 自由形式レポートを作成する
GA4の「探索」機能を使うとカスタムレポートを作成できます。
ページ別のエンゲージメント率を確認する手順：
- 「探索」→「空白」をクリックします。
- ディメンションに「ページタイトル」を追加します。
- 指標に「エンゲージメント率」「セッション」「エンゲージメント時間（平均）」を追加します。
- 「ページタイトル」を行にドラッグします。
- 指標を値にドラッグします。
6.2 デバイス別の分析
PC・スマートフォン・タブレットの割合を確認してレスポンシブデザインの最適化に役立てます。
- 「探索」→「空白」で新規レポートを作成します。
- ディメンションに「デバイスカテゴリ」を追加します。
- 指標に「セッション」「エンゲージメント率」を追加します。
⚠️ スマートフォンからのアクセスが半数を超えている場合は特にモバイル表示を重視しましょう： スマートフォンユーザーのエンゲージメント率が低い場合はレスポンシブデザインの見直しが必要なサインです。
7. コンバージョンを設定する
7.1 コンバージョンとは
コンバージョンとはサイトの目的を達成したときに計測されるイベントです。ポートフォリオサイトでは「お問い合わせを送信した」「GitHubリンクをクリックした」などが目標になります。
7.2 お問い合わせ完了をコンバージョンとして計測する
前回の記事で実装したお問い合わせフォームの送信完了時にコンバージョンを計測します。
JavaScriptでイベントを送信する：
// フォーム送信完了時にGA4にイベントを送信する
function sendForm() {
// 送信処理（省略）
// GA4にコンバージョンイベントを送信
gtag( 'event', 'contact_submit', {
'event_category' : 'contact',
'event_label' : 'contact_form_complete',
} );
// 完了メッセージを表示
form.hidden = true;
successMsg.hidden = false;
}
GA4でコンバージョンとして登録する：
- GA4の「管理」→「イベント」を開きます。
- イベント一覧に
contact_submitが表示されていることを確認します（フォーム送信後に表示されます）。 - イベント名の右にある「コンバージョンとしてマークを付ける」をオンにします。
8. プライバシーへの配慮
8.1 プライバシーポリシーを設置する
Googleアナリティクスを使用している場合はプライバシーポリシーページの設置が必要です。
プライバシーポリシーに記載すべき主な内容：
| 項目 | 内容 |
|---|---|
| Googleアナリティクスの使用 | アクセス解析のためGoogleアナリティクスを使用していること |
| Cookieの使用 | Cookieを使ってデータを収集していること |
| データの利用目的 | サイト改善のためにアクセスデータを分析すること |
| オプトアウトの方法 | ユーザーが計測を拒否できる方法を記載する |
💡 プライバシーポリシー生成ツールを活用しましょう： 個人サイト向けのプライバシーポリシーは「プライバシーポリシー 生成」で検索するとひな形を生成できるサービスが複数あります。
8.2 IPアドレスの匿名化（GA4はデフォルトで対応済み）
UA（旧バージョン）ではIPアドレスの匿名化設定が必要でしたが、GA4はデフォルトでIPアドレスの収集を行わない仕様になっています。追加設定は不要です。
9. 導入チェックリスト
✓ GA4のアカウント・プロパティ・データストリームを作成したか
✓ 測定ID（G-XXXXXXXXXX）をすべてのページの <head> 内に設置したか
✓ リアルタイムレポートで計測できていることを確認したか
✓ Search ConsoleとGA4を連携したか
✓ コンバージョンイベントを設定したか
✓ プライバシーポリシーページを設置したか
✓ 自分のアクセスが計測されないようにしているか（ブラウザ拡張機能で除外可能）
まとめ
今回はGoogleアナリティクス（GA4）をポートフォリオサイトに導入してアクセス解析を始める方法を解説しました。ポイントをまとめると：
- GA4のアカウント作成→データストリーム設定→測定IDの取得の順で進める
- トラッキングコードはすべてのページの
<head>内に設置する - リアルタイムレポートで設置が正しく完了しているか確認できる
- Search Consoleと連携するとGA4の画面内で検索パフォーマンスも確認できる
- 「集客」レポートでどこからユーザーが来ているかを把握する
- 「ページとスクリーン」レポートでどのページがよく読まれているかを確認する
- お問い合わせ完了時に
gtag('event')でコンバージョンイベントを送信する - GA4を使用している旨をプライバシーポリシーに記載する
次の記事では、ポートフォリオサイトのSEO対策を解説します。metaタグの設定・OGP（SNSシェア時のカード表示）の実装・サイトマップの作成まで、検索エンジンとSNSの両方で正しく表示されるための設定方法をお届けします。お楽しみに！
コメント