まず「乱れ」がどの層にあるか判断する
テンプレート調整時にレスポンシブページが乱れていると感じる場合、通常はコードの問題ではなく、作業前にページ構造が整理されていないことが原因です。まず次の3つのうちどれに当てはまるかを見極めます。
- コンテンツ階層の乱れ：同じ画面内にタイトル、本文、ボタン、画像が混在し、どれが先でどれが後か分からない。
- モジュール順序の乱れ：デスクトップではA-B-Cの順に並んでいるのに、スマートフォンではC-A-Bに折りたたまれ、読む順序が途切れている。
- ブレークポイントの表示乱れ：同じモジュールがワイド画面では正常でも、狭い画面では圧縮、改行、余白の不均一が起きる。
3つの問題では整理方法が異なります。まずテンプレートのプレビューモードを開き、ブラウザウィンドウを広い幅から狭い幅へゆっくりドラッグし、各モジュールがどの幅から問題を起こすかを記録してから、どの層を先に修正するか決めます。
ブレークポイントをチェックできる表に整理する
レスポンシブページはブレークポイント（ページ幅が特定の値に変化したときにレイアウトを切り替える仕組み）で表示を制御します。テンプレートに既存のブレークポイントがある場合、すぐに新規追加せず、まず現在のブレークポイントをリストアップして確認します。
整理する際は次の順序をおすすめします。
- テンプレートが現在使用しているブレークポイント幅を、1200、992、768、480のように一行で書き出す。
- 各ブレークポイントで、ナビゲーション、メインビジュアル、本文、ボタン、表、フッターがそれぞれどの状態かをスクリーンショットまたは記録する。
- 「コンテンツが切れている」「ボタンが改行している」「画像が引き伸ばされている」「文字が端に圧迫されている」箇所をマークする。
- 実際に問題が起きているブレークポイントのみ調整し、モジュールごとに個別のブレークポイントを追加しない。
判断基準はシンプルです。同じ種類のモジュール（例えばすべてのカード、すべてのボタン）は、同じブレークポイントで一貫した配置と間隔になるべきです。特定のカードだけが特殊な場合は、ブレークポイントを変更するのではなく、そのコンテンツの長さを優先的に確認します。
まずコンテンツ階層を整理し、それからスタイルを調整する
レスポンシブの乱れの多くは、本質的にコンテンツに主従関係がないことです。整理する際は「読者が最初に何を見るか」で並べ直します。
- 各モジュールにはメインタイトルを1つだけ残し、サブタイトルと説明文は同じグループにまとめる。
- ボタンとリンクは本文と混在させず、別グループにして、狭い画面でグループごと改行しやすくする。
- 画像と説明文はペアで配置し、画像が1画面、説明が次の画面にならないようにする。
- 長い表、幅の広い画像、コードブロックなどは、横スクロールにするか簡略表示にするかを事前に決める。
階層を整理した後、テンプレートに戻ってモジュール順序を調整します。デスクトップの左から右、上から下への読む順序は、狭い画面でもできるだけ上から下へ維持し、視覚的な順序とコンテンツの順序が逆にならないようにします。
モジュール順序と命名を一緒に整理する
テンプレート調整で最も制御しにくくなるのは、モジュールが繰り返しドラッグ、複製、非表示にされ、最終的にどれが使われているか誰も分からなくなることです。調整前に次の2つを行うことをおすすめします。
- 検索しやすい名前をモジュールに付ける：例えば「トップ-メインビジュアル-ブランド紹介」「製品ページ-仕様表-モバイル版」のようにし、「モジュール1」「コピー2」は使わない。
- モジュールの去就を記録する：残す、統合、非表示、削除をそれぞれ明確に書き、途中で元に戻さないようにする。
テンプレートがモジュールの非表示に対応している場合、削除よりも非表示を優先し、調整前後の効果を比較しやすくします。調整完了後に、不要になったモジュールをまとめて整理し、管理画面のリストの煩雑さを減らします。
調整後は順序に沿って再確認する
修正後は1ページだけを見て終わりにしないでください。次の順序で再確認すると、ほとんどのレスポンシブ問題を発見できます。
- トップページから始め、カテゴリページ、コンテンツページ、フォームページの順に開く。
- 各ページをワイド画面、タブレット、スマートフォンの3つの幅でそれぞれ確認する。
- 重点的に確認する：ナビゲーションが展開できるか、ボタンがクリックできるか、画像が変形していないか、文字がはみ出していないか、表が読めるか。
- 発見した問題を「ブレークポイント問題」と「コンテンツ問題」に分けて記録し、それぞれ対処する。
再確認時はすべての幅で完璧を目指す必要はなく、まず主要な読書経路が途切れず、主要な操作入口が見えることを確保します。その他の細部は優先度に応じて段階的に調整できます。
日々のメンテナンスでも整理習慣を保つ
レスポンシブページの整理は一度きりではありません。その後コンテンツを更新する際も、いくつかの習慣を続けましょう。新しいモジュールは既存の命名規則に従って名前を付ける。画像を差し替える際は狭い画面での表示効果を確認する。公開前にスマートフォンで実際にページを開く。こうすることで、テンプレートを再度調整するときもページ構造が明確なままで、毎回最初から整理し直す必要がありません。
