レスポンシブWebデザインとは？同じURLとHTMLを画面幅に合わせて表示する方法

レスポンシブWebデザインは、パソコンとスマートフォンへ同じURL、同じHTMLを返し、CSSで表示を変える制作方法です。画面を一律に縮小することでも、スマートフォン専用ページへ転送することでもありません。

同じURLを使うだけでは、レスポンシブWebデザインとはいえません。利用者の端末によって異なるHTMLを返す方法もあるからです。URL、HTML、表示方法の三つを分けて考えます。

レスポンシブWebデザインは同じHTMLの見せ方をCSSで変える

Googleのスマートフォン向けサイト構成の説明では、レスポンシブWebデザインを、すべての端末へ同じURLとHTMLを提供し、CSSだけで表示を変える構成としています。Googleは、この構成をスマートフォン向けサイトの推奨方法としています。

一つのURLを共有するため、パソコン用とスマートフォン用のURLを利用者が意識する必要はありません。リンクや共有先も一つにそろいます。Googleも、端末別のページを別々に取得せず、一つの内容を処理できます。

ただし、URLを一つにすれば作業も一つになるとは限りません。狭い画面で読みやすい並びへ変え、画像やフォームを収め、指でも操作できるか確かめる作業は残ります。更新する本文を一つにする利点と、複数の画面幅を検査する責任を分けて見積もります。

スマートフォン対応には三つの構成がある

Googleは、スマートフォン向けサイトについて三つの構成を示しています。

動的配信は、URLだけを見るとレスポンシブWebデザインと同じです。しかし、サーバーが端末を判定し、異なるHTMLを返します。Googleは、内容がユーザーエージェントによって変わることを伝えるため、動的配信でVary HTTPヘッダーを使うよう強く勧めています。

別URLの構成では、パソコン用とスマートフォン用のページを対応させます。転送先の間違い、片方だけの更新、端末判定の失敗も管理対象です。

レスポンシブWebデザインが常に最小費用になるわけではありません。端末ごとに提供する機能や内容を大きく変える必要があるなら、動的配信や別URLが候補になります。まず、同じ内容を同じHTMLで提供できるかを決めます。

画面幅への対応はMedia Queriesで決める

Media Queriesは、表示先の条件に応じて適用するCSSを選ぶ仕組みです。W3CのMedia Queries勧告は、width、height、colorなどを条件に使い、内容を変えずに表示を調整できると定義しています。

ページの表示領域を端末幅に合わせるには、HTMLのhead要素へviewportを指定します。

<meta name="viewport" content="width=device-width, initial-scale=1">

画像が親要素の幅を超えないようにし、狭い画面では二列を一列へ変える例は次のようになります。

img {
  max-width: 100%;
}

@media screen and (max-width: 479px) {
  .content,
  .sidebar {
    float: none;
    width: auto;
  }
}

479pxは、この例で表示を切り替える幅です。すべてのサイトへ共通する決まりではありません。また、viewportを指定しただけでは、固定幅の段組みや画像は直りません。HTMLの構造、通常のCSS、Media Queriesを一緒に設計します。

ブレークポイントは端末名ではなくレイアウトから決める

CSSを切り替える画面幅を、ブレークポイントと呼びます。ブレークポイントを決めるときは、特定のスマートフォンの幅を一覧にして追いかけるより、内容が読みにくくなる幅を確認します。

GoogleのMedia Queries実装例も、サイトの流れと見え方に応じて、必要なブレークポイントは異なると説明しています。文字が小さくなる、画像が列を押し広げる、横スクロールが出る、ナビゲーションを押しにくい、といった変化が切り替えの基準です。

たとえば、会社案内の本文と補足メニューをパソコンでは二列にし、狭い画面では本文、補足メニューの順に一列へ並べるとします。これは説明用の仮例です。掲載内容とURLは変えず、CSSの表示規則だけを変えます。

並びを変えた結果、問い合わせ先が本文から遠くなる場合もあります。画面へ収まったかだけでなく、利用者が読む順序と次の操作まで確認します。

一ページを実機で確認してから全体へ広げる

全ページのCSSを書き換える前に、文章、画像、ナビゲーション、フォームを含む一ページを選びます。パソコン、スマートフォン、タブレットで開き、次の点を確認します。

1. 横スクロールを出さずに本文を読めるか
2. 画像と表が表示領域からはみ出さないか
3. ナビゲーションとフォームを指で操作できるか
4. 画面幅を変えても、読む順序と必要な内容を保てるか

問題が出た幅を記録し、その幅に必要なCSSを追加します。先に端末別の数字を大量に並べても、実際の本文や画像が崩れる位置とは一致しないことがあります。

最初に決めるのは、スマートフォン用の見た目ではありません。同じURLとHTMLで提供する内容を決め、その内容が読めなくなる幅から表示を組み替えてください。