レスポンシブデザインをきちんと確認するには、3段階で進めます。まずビューポートの幅を約320pxから1920pxまでゆっくり変えてレイアウトが崩れる幅を探し、次に実際の機種のユーザーエージェントとピクセル比で確認し、最後に長いコンテンツや200%の拡大表示でレイアウトに負荷をかけます。レスポンシブの不具合の多くはブレイクポイントの間や想定外のコンテンツで起きるため、「スマホ・タブレット・PC」の3サイズを確認するだけでは見逃してしまいます。
3サイズの確認では足りない理由
レイアウトはいくつかの幅で設計されますが、実際にはあらゆる幅で使われます。375pxでは収まる見出しが、344px（一部の折りたたみスマホを閉じた状態）では不自然に折り返すことがあります。1024pxで収まるナビゲーションも、メニュー項目が長くなれば1100pxであふれるかもしれません。不具合が集中するのは次のような場所です。
- 各ブレイクポイントのすぐ下とすぐ上
- 600〜700px（小型タブレット、画面分割時のウィンドウ）など、誰も設計していない幅
- デザインカンプより長い実際のコンテンツ
ステップ1：幅のスイープ
- Chrome DevToolsを開き、デバイスツールバー（
Ctrl + Shift + M、MacはCmd + Shift + M）を表示してResponsiveを選びます。 - 幅を320pxにし、対応する最大幅まで右端をゆっくりドラッグします。
- 横スクロールバー、文字の重なり、2行に折り返すボタン、引き伸ばされた画像、1枚だけ取り残されたグリッドのカード、ブレイクポイントの切り替わりで跳ねる要素がないかを見ます。
- 崩れたら、ツールバーに表示される正確な幅をメモします。
デバイスツールバーのメニューでShow media queriesをオンにすると、ブレイクポイントがビューポート上に色付きのバーで表示され、クリックするとその幅に移動できます。デバイスモードの詳しい手順はChromeのモバイルエミュレータ解説をご覧ください。
各ブレイクポイントは、ちょうどその値と1px小さい値の両方で確認する習慣をつけましょう。max-width: 768pxとmin-width: 768pxの1pxのずれはよくあるミスです。
ステップ2：実機のプロファイルで確認
スマホが伝える情報は幅だけではありません。モバイルのユーザーエージェントを送り、デバイスピクセル比は2か3で、サーバーやJavaScriptで別の処理が動くこともあります。主要なページを、次のような機種のプロファイルで確認しましょう。
- 小型スマホ（幅約360〜375px）
- 最新のiPhone（393〜402px）と大型iPhone（430〜440px）。値はiPhoneの画面サイズとビューポート一覧を参照
- Androidスマホ（360〜412px）
- 縦横両方の向きのタブレット（iPadとタブレットの表示確認）
DevToolsのデバイスプリセットでも確認できます。多くのページを見て回るなら、Mobile View Extensionのようなレスポンシブ確認用の拡張機能のほうが速く済みます。端末のユーザーエージェント、画面サイズ、ピクセル比でタブを再読み込みし、ページを移動しても端末設定を保ち、同じページの表示を並べて比較できます。
ステップ3：コンテンツに負荷をかける
デザインカンプのコンテンツは理想的ですが、実際のサイトはそうではありません。次を試してみましょう。
- 長い単語や文字列：長い商品名、ドイツ語の翻訳、狭いカラム内のメールアドレスやURL。必要な箇所には
overflow-wrap: anywhereを追加します。 - 項目数の増減：5項目ではなく8項目のメニュー、6枚ではなく7枚のカードのグリッド。
- 画像がない場合：画像の読み込みに失敗したときや読み込み中に、カードがどう見えるか。
- 大きな文字：ブラウザの標準文字サイズを20px以上にします。
remで組んだレイアウトなら追従しますが、高さ固定のボックスは文字が切れます。 - PCでの200%・400%の拡大表示：拡大するとCSSのビューポートが狭くなるため、400%では幅1280pxのウィンドウが幅320pxの画面と同じように振る舞います。WCAG 2.2では、地図やデータテーブルなどを除き、このサイズで縦横両方向のスクロールなしにコンテンツが再配置されることを求めています。
ステップ4：スクリーンショットを自動化する
手作業の確認で見つかる不具合はその場限りですが、スマホ表示のスクリーンショットをチケットに添付すれば、崩れた正確な幅を共有できます。自動スクリーンショットなら、不具合の再発も捕まえられます。Playwrightなどのツールを使えば、主要なページを360、768、1024、1440pxなどの幅でChromium、Firefox、WebKitで開き、プルリクエストごとに前回のスクリーンショットと比較する短いスクリプトを書けます。このようなビジュアルリグレッションテストは、デザインシステムや頻繁に更新されるマーケティングページに向いています。
オンラインのレスポンシブチェックツール
URLを複数のフレームで同時に表示するサイトは、ざっと全体を見るには便利です。ただし制約があります。自社サーバーやiframeでページを読み込むため、localhostやログインが必要なページには届きません。多くのサイトはフレーム内での表示を禁止していますし、フレームが変えるのは通常幅だけで、ユーザーエージェントは変わりません。確認の目安にとどめ、最終判断には使わないでください。
レスポンシブデザインの確認チェックリスト
| 確認項目 | 方法 |
|---|---|
| 320px以上のどの幅でも横スクロールが出ない | 幅のスイープ |
| ブレイクポイントがちょうどの値と1px小さい値で正しく動く | Show media queries、幅を直接入力 |
| どの幅でもナビゲーションが使える | 幅のスイープ＋端末プロファイル |
| 2倍・3倍の画面で画像がくっきり表示される | ピクセル比付きの端末プロファイル |
| 400%の拡大でもコンテンツが再配置される | PCのブラウザで拡大 |
| 長いコンテンツでもコンポーネントが崩れない | コンテンツの負荷テスト |
| WebKitとGeckoで同じ結果になる | Safariまたはシミュレーター、Firefox |
| 変更後にデグレがない | スクリーンショットの自動化 |
フォーム、速度、SEOなど、レイアウト以外も含めた公開前の確認にはスマホサイトのテストチェックリストを使ってください。
よくある質問
Webサイトのレスポンシブ対応をすばやく確認するには？
Chrome DevToolsを開き、デバイスツールバーでResponsiveモードを選んで、幅を320pxから広げていきます。はみ出したり重なったりする箇所があれば、それがレスポンシブの不具合です。
レスポンシブデザインではどの画面サイズを確認すべきですか？
320pxからすべての幅をスイープしたうえで、スマホは360、375、390〜402、412、430〜440px、タブレットは約768〜834pxと1024px、PCは1280〜1920pxを確認します。
ブラウザのウィンドウサイズを変えるのは、レスポンシブの確認として有効ですか？
CSSのブレイクポイントの確認としては有効です。ただしPCのブラウザは500px前後より狭くできず、モバイルのユーザーエージェントも送りません。スマホの幅を確認するには、デバイスモードかスマホ表示の拡張機能を使いましょう。