レスポンシブコーディングの確認は、PCとスマホの完成画面を一度ずつ見るだけでは終わりません。実際の閲覧環境には、その中間の幅、ブラウザの拡大、長い見出し、未入力の画像などがあります。端末名を増やすより、表示が変化する条件を意識して確認すると、公開後に起こる崩れを見つけやすくなります。
1. 完成画像ではなく、幅を連続して動かす
最初に、ブラウザ幅を広い状態から狭い状態までゆっくり動かします。PC用とスマホ用の指定幅では整っていても、その間でナビゲーションが重なる、カードが不自然に細くなる、ボタンだけ次の行へ落ちることがあります。ブレークポイントは特定の機種名に合わせるのではなく、レイアウトが保てなくなる位置を基準に決めます。
W3CのReflowでは、縦に読む一般的なコンテンツについて、320 CSS px相当の幅でも情報や機能を失わず、原則として横方向と縦方向の両方へスクロールさせない考え方が示されています。スマホ実機だけでなく、ブラウザを拡大した状態も確認対象です。
2. 見出しと文章を実際の長さで確認する
仮の短い文章では、文字組みの問題が隠れます。本番原稿を入れ、見出しの末尾一文字だけが次の行へ落ちないか、日本語の句読点が孤立しないか、英単語やURLが途中で不自然に切れないかを確認します。文字サイズを下げれば収まる場合でも、読みやすさを損なうなら、要素幅、余白、文言のいずれを調整するかをデザイン意図から判断します。
3. 画像の比率と切れ方を見る
画像は横幅だけでなく、トリミング位置と被写体の見え方を確認します。PCでは人物全体が見えていても、スマホで中央だけを切り出すと頭部や商品が欠けることがあります。画像が未登録の場合、縦長・横長の場合、代替テキストだけの場合も確認し、レイアウトが画像の有無に依存しすぎないようにします。
WordPressは画像に複数のサイズを生成し、srcsetとsizesを使ってブラウザが表示条件に合う画像を選べる仕組みを備えています。見た目が合っていても、スマホへ必要以上に大きな画像を送っていないかは別に確認します。
4. ボタンは見た目と操作を分けて確認する
リンクやボタンが折り返したとき、押せる範囲が文字の一部だけになっていないか、隣の操作と近すぎないかを見ます。W3CのTarget Size (Minimum)では、ポインター操作の対象を原則24×24 CSS px以上にするか、十分な間隔を確保する基準があります。指で押すだけでなく、キーボードで順番に移動し、フォーカス表示が隠れないことも確かめます。
5. 固定要素が本文を隠さないか確認する
固定ヘッダー、追従ボタン、Cookie表示、チャットなどは、それぞれ単独では問題がなくても重なると本文やフォームを隠します。縦幅の小さい画面、横向き、ブラウザ拡大時にも、閉じる操作や送信ボタンへ到達できるかを確認します。特にアンカーリンクでは、移動先の見出しが固定ヘッダーの下へ隠れないようにします。
6. WordPressで内容を変えて崩れないか試す
公開時の内容だけでなく、運用で起こる変更を試します。長いタイトル、項目数の増減、画像なし、改行を含む説明、カテゴリー名の追加などを管理画面から入力し、一覧と詳細の両方を確認します。固定の高さや文字数を前提にした実装は、更新した瞬間に崩れるためです。
7. 最後は優先順位を付けて記録する
見つかった差異は、すべてを同じ重さで扱いません。情報や機能が欠ける、操作できない、横スクロールが生じる問題を先に直し、余白や細かな見た目の差はデザイン意図を確認して判断します。確認した幅、入力内容、ブラウザ、再現手順を残すと、修正後の再確認を別の担当者でも行えます。
GreenCodingでは、Illustrator、Figma、Adobe XDなどの支給デザインを確認し、必要な書き出しや調整、スマホレイアウトの判断も含めて実装します。PC版しかない場合や、更新時の崩れまで確認したい場合も、コーディング・WordPress制作について相談するから、支給データと希望する運用をお知らせください。