ヒーロースライダー・Yoast SEO・GA4を同時に仕上げたWebサイト公開前の最終作業

自サイトのリニューアルで、ビジュアル面の実装とSEO・計測まわりを一気に仕上げました。ヒーロースライダーからGA4のリアルタイム確認まで、公開前に必要な作業を振り返ります。

※ GA4（Google Analytics 4）とは、サイトに何人来て、どのページを見たかなどのアクセスデータを計測するGoogleの無料ツール。Google Search Consoleは検索結果での表示状況を確認・管理するツール。XMLサイトマップはサイトのページ一覧をGoogleに伝えるためのファイルです。

ヒーロースライダーの実装

AI・ゲーミングをテーマにした2枚の画像で、5秒フェード切り替えのヒーロースライダーを実装。テーマA/B/C切り替えに対応していたので、切り替え時の文字可読性を確保するため text-shadow とボタンの blur も調整しました。

※ ヒーロースライダーとは、トップページの一番上にある大きな画像が自動で切り替わるパーツのこと。お店のショーウィンドウのように、一番伝えたい情報を大きく見せる役割があります。

UIの細かい調整

サービスカードのアイコンと番号を横並びに変更して視認性を改善。AI活用・自動化支援のサービス項目をフルワイドで追加しました。制作実績も1件追加し、WORKSセクションはインラインstyleをCSSクラス管理に移行して3段階のレスポンシブ（※）対応を整えました。

※ レスポンシブとは、パソコン・タブレット・スマホなど画面サイズに合わせてレイアウトが自動で変わる仕組みのこと。インラインstyleではこの切り替えができないため、CSSクラスに移行する必要があります。

SEOまわりの設定

Yoast SEOをインストールして基本設定（サイト名・キャッチフレーズ・ロゴ・個人情報）を完了。全5ページのSEOタイトル・メタディスクリプション・フォーカスキーワードを設定しました。

※ Yoast SEOとは、WordPressでSEO対策をするための定番プラグイン。メタディスクリプション（検索結果でタイトルの下に表示される説明文）やフォーカスキーワードを管理画面から簡単に設定できます。

Google計測ツールの整備

Google Search Consoleに接続し、XMLサイトマップ（※1）（11ページ分）を送信。GA4の動作確認はリアルタイムレポートで確認し、CF7 → GA4連携プラグインを設置して contact_form_7 イベントの送信も確認しました。これをすると、contact form7での送信を検知しデータとして持ってくれるのです。

プライバシーポリシーの作成

AIツール利用の明記を含めたプライバシーポリシーページを作成し、フッターにリンクを追加。コピーライトの上に配置する小さなこだわりもあります。

まとめ・残タスク

公開前の最終仕上げとして必要な要素はほぼ揃いました。残タスクとしては、CF7イベントのGA4キーイベント設定、GA4×Search Console連携、ヒーローの追加あたりを継続していきます。AdSenseは記事を充実させてから申請予定です。

※この記事はNPCの中の人の実務経験をもとに書いています。