レスポンシブWebとは？画面サイズでレイアウトが変わる理由

レスポンシブWebは、ページを表示できる空間に合わせて、内容の配置や見せ方を調整する方法です。広い画面では横に並ぶ商品が、狭い画面では縦に並ぶ。開いた状態のメニューがボタンにまとまる。PC向けの画面を、そのまま小さくするだけの方法とは異なります。

基準になるのは、端末の名前よりも、実際に使える表示領域です。PCでもウィンドウを狭くすれば配置が変わることがあります。タブレットの分割画面や、横向きにしたスマートフォンでも、別の配置が必要になる場合があります。

同じ内容を、空間に合う順序で並べる

説明のために、小さなパン屋の架空のサイトを考えてみましょう。広いウィンドウでは、写真、商品名、価格を3列で並べ、その横に店の紹介を置きます。狭くなったら商品を1列にし、紹介文を下へ移すことができます。3列と1列は例であり、決まったルールではありません。

ここで必要なのは、すべてを同じ割合で縮めることではありません。説明文は読める大きさを保ち、画像は空間に合わせ、予約注文ボタンはほかの内容を隠さない場所に置く。各要素の役割を考えて調整します。

紹介文を下に移した結果、営業時間や注文締め切りの案内まで遠くなってしまうことも考えられます。配置を変える作業には、何を先に見せるかという判断も含まれます。小さな画面でも、選ぶために必要な情報を見つけられることが大切です。

Webを見る条件はさまざまです。ノートPCで二つのウィンドウを横に並べたり、タブレットでほかのアプリと画面を分けたり、拡大して文字を読んだりします。同じ端末でも、ページに使える空間や文字が占める広さは変わります。

制作時には、配置を切り替える基準点を決めます。これを「ブレークポイント」と呼びます。機種の一覧だけで決めるよりも、メニューが重なったり、商品カードが狭くなりすぎたりするなど、内容の見やすさが崩れる場所を見て判断します。

実装に使える仕組みの一つが「メディアクエリ」です。表示領域の幅などの条件に応じて、異なるスタイルを適用するCSSの機能です。原理を知るためにコードを覚える必要はありません。空間が変わったら何をどう変えるかを設計し、実装する、と理解すれば十分です。

PC向けのページ全体を縮めると、文字やボタンまで小さくなります。画面に収まることと、読みやすく操作しやすいことは別です。レスポンシブでは、列数、余白、メニューの見せ方などを調整できます。

PC用とモバイル用に別のURLを用意する方法もありますが、レスポンシブと同じ意味ではありません。Googleが説明するレスポンシブ構成では、同じURLと基本のHTMLを使い、画面サイズに応じて表示を変えます。各配置で何を見せるかは、別途考える必要があります。

パン屋のスマートフォン画面で、写真を優先するために価格や受け取り条件を削ってしまえば、訪問者は選択に必要な情報を失います。装飾をどこでも同じにする必要はありませんが、小さな画面だから重要な内容を省いてよいわけではありません。

配置が変わっても、キーボードでメニューを開けない、エラーの案内が読みにくい、固定ボタンが内容を隠すといった問題は残り得ます。レスポンシブは表示空間に対応する方法であり、アクセシビリティや操作のしやすさを自動的に保証するものではありません。

検索順位についても同様です。レスポンシブにした事実だけで、順位が保証されることはありません。制作を依頼するときは、対応の有無に加えて、どの画面や利用条件で何を確認するかも決めておくとよいでしょう。

完成したサイトでは、訪問者が行うことを最後までたどってみます。パン屋なら、商品を選び、価格と受け取り条件を読み、注文を始める流れです。依頼する側も、制作者と一緒に次の点を確認できます。

数台の端末できれいに見えても、すべての環境を確認したことにはなりません。よく使われる条件から確認し、中間の幅や拡大時に見つかった問題を具体的に伝えます。「モバイルがおかしい」よりも、「幅を狭めると注文ボタンが受け取り案内を隠す」のほうが、修正すべき場所を共有できます。

レスポンシブWebでは、空間が変わっても必要な情報を読み、次の操作ができるように配置を調整します。PCとスマートフォンのデザイン案を見るときも、その二つの間で内容がどうつながるかを一緒に確かめてみてください。