ヒーロースライダーからSEO設定まで──サイト改修1日まるごと記録
サイトの見た目をガラッと変えたい。でも「どこから手をつけたらいいの？」ってなること、ありませんか？ 今日はヒーロースライダーの実装からSEOの基本設定まで、1日でサイトをまるごとブラッシュアップした作業の流れを、できるだけわかりやすくまとめてみます。
やりたかったこと
クライアントAのサイトリニューアルで、大きく分けて2つのミッションがありました。
ひとつは「見た目の改善」。トップページにヒーロースライダー（※）を入れて、サービス紹介やWORKSセクションのレスポンシブ（※）も整えたい。もうひとつは「SEOの土台づくり」。Yoast SEO（※）の導入からGoogle Search Console（※）の接続、GA4（※）との連携まで、計測まわりを一気に整備すること。
※ ヒーロースライダーとは、トップページの一番上にある大きな画像が自動で切り替わるパーツのこと。お店のショーウィンドウみたいなイメージです。
※ レスポンシブとは、パソコン・タブレット・スマホなど画面サイズに合わせてレイアウトが自動で変わる仕組みのこと。
※ Yoast SEOとは、WordPressでSEO対策をするための定番プラグイン。検索結果に表示されるタイトルや説明文を簡単に設定できます。
※ Google Search Consoleとは、自分のサイトがGoogleの検索でどう見えているかを確認・管理できる無料ツール。
※ GA4とは、Google Analytics 4の略。サイトに何人来て、どのページを見たか、などのアクセスデータを計測するツールです。
ヒーロースライダーの実装ポイント
今回のスライダーは3枚構成（AI・ゲーミング・3Dプリンターのイメージ）で、5秒ごとにフェードで切り替わる仕様にしました。
ここでハマったのが「テーマ切り替え時の文字の読みやすさ」です。背景画像が明るかったり暗かったりするので、スライドごとにテキストが読みにくくなることがあります。対策としてtext-shadowでテキストに影をつけて浮き上がらせ、ボタン部分にはbackdrop-filter: blur()で背景をぼかすことで、どのスライドでも文字がしっかり読めるようにしました。
地味だけど、こういう「可読性」の調整がユーザー体験をぐっと良くしてくれるんですよね。
インラインstyleからCSSクラスへの移行
WORKSセクションのレスポンシブ対応をしていて、HTMLのタグに直接style="..."と書かれている箇所がたくさんありました。これだとメディアクエリ（※）が効かないので、画面サイズによるレイアウト調整ができません。
※ メディアクエリとは、CSSで「画面幅が○○px以下のときはこのデザインにする」と条件をつけて切り替える仕組みのこと。
そこで、インラインstyleをすべてCSSクラスに移行しました。3段階のブレークポイント（PC・タブレット・スマホ）に対応できるようにして、WORKSの実績一覧がどの端末でもきれいに並ぶように調整。インラインstyleを使っている古いコードを見つけたら、まずCSSクラスへの置き換えを検討するのがおすすめです。
Yoast SEO導入 → Search Console → GA4連携の一気通貫
SEOまわりは一気にやると効率がいいです。今回の流れはこんな感じでした。
① Yoast SEOインストール・基本設定
サイト名、キャッチフレーズ、ロゴ、個人情報を設定。全5ページのSEOタイトル・メタディスクリプション（※）・フォーカスキーワードを一つずつ設定しました。
※ メタディスクリプションとは、検索結果でページタイトルの下に表示される説明文のこと。120〜160文字くらいで、ページの内容をわかりやすく伝えるのがコツ。
② Google Search Console接続・XMLサイトマップ送信
Search Consoleに登録して所有権を確認したら、Yoast SEOが自動生成するXMLサイトマップ（※）を送信。今回は11ページ分のURLが登録されました。
※ XMLサイトマップとは、サイトにあるページの一覧をGoogleに伝えるためのファイル。「うちのサイトにはこのページがありますよ」と教えてあげるリストのようなもの。
③ GA4の動作確認
リアルタイムレポートで実際にアクセスが計測されているかチェック。
④ Contact Form 7 × GA4イベント連携
お問い合わせフォームが送信されたときにGA4にイベントが飛ぶようプラグインを設置。contact_form_7というイベント名で送信されることを確認しました。翌日、このイベントをGA4のキーイベント（※）として設定すれば、「お問い合わせが何件あったか」をGA4のレポートで追えるようになります。
※ キーイベントとは、GA4で「これが起きたら成果とみなす」と設定する重要なアクション。例えば「お問い合わせ送信」や「購入完了」など。旧名は「コンバージョン」。
ハマりポイント・注意点
ヒーロースライダーの可読性：背景画像の上にテキストを載せるときは、必ずtext-shadowや半透明オーバーレイを検討しましょう。画像が変わるたびにテキストが読めなくなるのは、けっこうあるあるです。
インラインstyleの罠：HTMLに直書きされたstyleはメディアクエリで上書きできません。レスポンシブ対応が必要なサイトでは、早い段階でCSSクラスに移行しておくと後が楽です。
CF7 × GA4の設定順序：プラグインを入れてイベントが飛ぶことを確認してから、翌日以降にGA4でキーイベント設定をする流れがスムーズです。同日にやろうとすると、イベントがGA4側にまだ反映されていないことがあります。
mobile-float-navの余白：スマホでフローティングナビが画面下から浮きすぎていたので、bottom: 5remをbottom: 1remに修正。こういう小さな余白の調整が、実際に触ってみないと気づけないんですよね。
まとめ
今日は「見た目の改善」と「SEOの土台づくり」を1日で一気に進めました。ヒーロースライダーの可読性対策、インラインstyleからCSSクラスへの移行、そしてYoast SEO → Search Console → GA4 → CF7イベント連携という流れ。どれも単体では小さな作業ですが、積み重ねるとサイト全体の品質がグッと上がります。
特にSEO周りは「後からやろう」と思って後回しにしがちですが、サイトの立ち上げや改修のタイミングで一緒にやっておくのが一番効率的。明日はGA4のキーイベント設定とSearch Console連携を仕上げて、計測の基盤を完成させます。
※この記事はNPCの中の人azusaの実務経験をもとに書いています。