レスポンシブデザインとは？スマホ対応の仕組みと確認方法

画面設計を相談する準備を表すAI生成イメージです。実在の顧客資料や制作実績ではありません。

レスポンシブデザインとは、同じURL・同じHTMLで作ったページの並び方や大きさを、表示できる幅に合わせて調整する設計です。PCの画面をそのまま小さくする方法とは異なります。スマホ対応を進めるときは、方式の名前だけでなく、狭い画面でも必要な情報を読めて操作できるかを確認します。本記事では、仕組みと切り替え幅の考え方を整理し、制作担当に渡せる確認メモまで紹介します。

レスポンシブデザインとは、同じページの表示を幅に合わせる設計

たとえば、PCでは横に2つ並んでいる製品カードが、スマホでは縦に1つずつ並ぶ。写真も本文の幅に収まり、メニューの表示方法も変わる。このように、閲覧できる領域に合わせて同じページの見せ方を調整するのが、レスポンシブデザインの基本です。英語ではResponsive Web Designと呼ばれます。

出典：Responsive web design – Learn web development | MDN

ここでいう「同じページ」は、PCとスマホで見た目まで同一という意味ではありません。HTMLは見出し、文章、画像などの内容と構造を表し、CSSは配置や余白などの見た目を指定します。共通の内容を使い、CSSなどの仕組みで表示を変えます。CSSファイルが必ず1個でなければならない、という意味でもありません。

「スマホ対応」は、スマホで読んだり操作したりしやすくする取り組みを広く指します。レスポンシブはそれを実現する方式の一つです。Googleの公式資料は、モバイル向けサイトの構成を次の3つに分けています。「スマホで表示が違う」という観察だけでは、どの方式かまでは決まりません。

出典：モバイルファースト インデックスに関するおすすめの方法 | Google 検索セントラル  |  Documentation  |  Google for Developers

出典：モバイルファースト インデックスに関するおすすめの方法 | Google 検索セントラル  |  Documentation  |  Google for Developers

企業サイトを新しく作る場合は、共通の情報を更新しやすいレスポンシブを検討の出発点にできます。既存サイトの改修では、現在どの方式か、スマホ向けの別ページや専用機能があるかを先に確認します。URLが同じという理由だけでレスポンシブと判断して、CSSだけを変更すると、調査すべき仕組みを見落とすおそれがあります。

スマホ対応を支える、表示領域・レイアウト・画像の仕組み

仕組みは、「どの幅として表示するか」「その幅でどう並べるか」「画像をどう収め、配信するか」の3つに分けると理解しやすくなります。Web担当者がすべてのコードを書く必要はありませんが、問題が起きたときにどの部分を確認するかが分かると、制作担当との会話が具体的になります。

表示領域：スマホの幅をブラウザに伝える

ブラウザでページを表示する領域を「ビューポート」と呼びます。スマホのブラウザがPC向けの広い幅としてページを描き、その全体を縮小すると、文字もボタンも小さく見えます。HTMLのviewport設定は、端末の表示幅に合わせてページを扱うための指定です。MDNの例では、width=device-widthを使っています。

出典：Responsive web design – Learn web development | MDN

ただし、viewportの指定を追加するだけで、固定幅の表や画像まで自動的に使いやすくなるわけではありません。表示領域の設定と、内容の大きさ・並び方の設定を合わせて確認します。「スマホでページ全体が縮んでいる」のか、「一つの部品だけがはみ出している」のかを分けると、原因を絞りやすくなります。

レイアウト：伸縮する幅と、並びを変える条件を組み合わせる

幅に余裕があるときは複数列、狭いときは1列にする、といった指定にはCSSのメディアクエリが使えます。これは、表示領域の幅などが指定した条件に合うときに、特定の見た目を適用する仕組みです。切り替える境目の幅を「ブレークポイント」と呼びます。

出典：Media query fundamentals – Learn web development | MDN

一方で、列の幅や画像の幅が、利用できる領域に合わせてなめらかに伸縮する設定もあります。たとえば横並びの2列が少しずつ狭くなり、読みにくくなる手前で縦並びへ変わる設計です。伸縮するレイアウトと条件による切り替えは、どちらか一方を選ぶものではなく、組み合わせて使えます。

出典：Responsive web design – Learn web development | MDN

そのため、スマホ・タブレット・PCの代表的な3種類にだけ、ぴったり合う絵を用意して終わりにはできません。PCでもウィンドウを半分にしたり、表示を拡大したりすれば、利用できる幅は変わります。端末の名前より、実際にその幅で内容が成立するかを見ます。

画像：見える大きさと、読み込むデータを分ける

画像を本文幅に収めるCSSは、横へのはみ出しを抑えるために役立ちます。ただし、大きい画像ファイルを読み込んだ後で小さく見せるだけでは、通信するデータ量まで減るとは限りません。MDNは、表示に使う領域や画面の条件に応じた画像候補を、srcsetやsizesというHTMLの属性で伝える方法を説明しています。

出典：Using responsive images in HTML – HTML | MDN

また、広い画面向けの横長写真を小さくすると、商品の細部が分からなくなる場合があります。同じ写真の解像度を変える対応と、狭い画面では被写体が伝わる切り取りに変える対応は別です。後者にはpicture要素などの方法があります。担当者には「小さく収まるか」だけでなく、「何が写っているか分かるか」「過大なファイルを配っていないか」を確認してもらいます。

出典：Using responsive images in HTML – HTML | MDN

メリットと注意点を、管理・制作・SEOに分けて考える

レスポンシブにすると、PC用とスマホ用で別々のページを更新する運用を減らしやすくなります。同じ製品説明や条件を共通の内容として管理でき、案内するURLもそろえられます。ただし、共通に更新できることと、すべての表示を確認しなくてよいことは別です。長い製品名へ変更しただけでも、狭い幅で折り返し方が変わることがあります。

Googleは、スマートフォン向けに取得したコンテンツをインデックス登録やランキングに使う「モバイルファーストインデックス」を説明しています。また、実装と維持が簡単な方式としてレスポンシブを推奨しています。したがって、スマホで主要な説明や条件が欠けていないかは確認すべき点です。方式の名前をSEOの成果と同一視しないようにしましょう。

出典：モバイルファースト インデックスに関するおすすめの方法 | Google 検索セントラル  |  Documentation  |  Google for Developers

制作費や期間も、方式だけでは決まりません。現在のページの作り、独自の機能、表やフォームの種類、確認する対象範囲によって作業が変わります。「レスポンシブだから必ず安い」「必ず高い」と決めず、既存の仕組みを使える部分と、個別に作り直す部分を見積もりで分けてもらうと比較しやすくなります。

WordPressなどで対応済みのテーマを使う場合も、自社の内容を入れた状態で確認します。テーマの見本では短い見出しと少ないカードでも、実際には長い名称や複雑な料金表を載せるかもしれません。追加した部品や外部フォームまで、同じように幅へ対応しているとは限りません。

切り替える幅は、機種名ではなく内容から決める

「何pxでスマホ表示へ切り替えればよいか」は、よく迷う点です。すべてのサイトに共通する一つの正解があるわけではありません。MDNは、特定の機種のサイズを狙うよりも、文章の行が長すぎる、横の領域が窮屈になるなど、内容の表示に問題が出る幅を基準に調整する考え方を示しています。

出典：Media query fundamentals – Learn web development | MDN

次は、架空の工具メーカーが、製品カード2件を横に並べる場合の説明例です。実在の顧客サイトや検証結果ではありません。各カードには、写真、製品名、用途、詳細ページへのリンクがあるとします。担当者は最初に狭い幅で内容の順番を決め、その後で横並びにできる余裕があるかを確かめます。

仮に、この教材のデザイン案で「表示幅が720 CSS px以上なら2列、それ未満なら1列」と決めたとします。CSS pxは、レイアウトに使う幅の単位です。端末の仕様にある画面の物理的な画素数を、そのまま指定するわけではありません。720という数値は説明用の仮定で、推奨値やスマホとPCの共通境界ではありません。

ここで製品名が詰まるなら、文字を小さくして無理に2列を維持する前に、切り替える幅、カードの余白、名称の扱いを見直します。反対に、1列の写真が大きくなりすぎるなら、画像や内容領域の最大幅を設ける案もあります。端末一覧に数値を当てはめる作業ではなく、実際に載せる内容から表示条件を決める作業です。

2列と1列の完成図だけでは、719から720へ変わる途中の問題は分かりません。確認するときは幅を連続して動かし、切り替え点の前後も止めて見ます。カードの説明を長くした場合や、写真の縦横比が異なる場合も、同じ部品を使う実際のページから選ぶと、見本だけでは見つからない問題を調べられます。

対応済みかを確認するときは、縮小・並べ替え・操作を見分ける

最初の確認は、PCのブラウザ幅を狭めることから始められます。文字や写真が全部同じ比率で縮むだけなのか、カードが縦になり、文章が幅に合わせて折り返すのかを見ます。ただし、この動きだけで実装方式を断定しません。同じHTMLを配っているか、viewportやCSSの設定がどうなっているかは、制作担当に確認してもらいます。

次に、ブラウザの開発者ツールにある画面幅のシミュレーションを使うと、確認した幅を数値で記録できます。先ほどの教材なら、390、719、720、721、1280のように条件を決めます。自社で採用した境界が違う場合は、その境界の前後に置き換えます。代表的な幅と、切り替え幅の両方を確認対象にするのがポイントです。

シミュレーションだけで確認を終えず、実際のスマホでもページを開きます。メニューを開いて閉じる、製品の詳細へ移る、フォームの項目を選ぶなど、利用者が行う操作を試します。画面上のキーボードで入力欄が隠れるといった問題は、静止した画面の画像だけでは判断できません。確認用のフォーム送信が必要なときは、運用担当と試験環境や通知先を先に決めます。

狭い幅や拡大表示では、文字を読むために毎行左右へ動かす必要がないかも見ます。W3Cのリフローの解説は、縦に読む内容について320 CSS px相当の幅で情報や機能を失わずに表示できることを扱い、意味の理解に二次元の配置が必要な表などには例外を設けています。本記事の確認例だけで、サイト全体のアクセシビリティ適合を判定するものではありません。

出典：Understanding Success Criterion 1.4.10: Reflow | WAI | W3C

たとえば横に長い比較表は、表の領域だけを横スクロールする設計が考えられます。その場合も、表の前後の本文まで横にはみ出さないようにし、隠れている列があると分かること、右端の条件まで見られることを確かめます。表に例外があることを理由に、通常の説明文の読みづらさを放置しないようにします。

出典：Understanding Success Criterion 1.4.10: Reflow | WAI | W3C

画像については、スマホで商品が見切れないかを目で確認し、ファイルの配信は担当者が別に調べます。見た目が小さくなったことを、軽量化の証拠にはしません。文字・配色・ボタンなどの総合的な見やすさは、関連記事の「見やすいホームページの作り方」でまとめて点検できます。画像の説明文を整える場合は「alt属性とは？」も参考になります。

改修を依頼する前に、対象と完了条件をそろえる

制作会社へ「レスポンシブにしてください」とだけ伝えると、対象がサイト全体なのか、一つの表なのかが伝わりません。まず問題があるURL、画面幅や端末、起きていることを記録します。そのうえで、対応方式の確認、影響するページの範囲、完成後に確かめる操作を相談します。

これは依頼内容を具体化するための架空例です。最初から全ページの作り直しを決める必要はありません。既存の対応があり一つの部品だけに問題があるなら、その部品の改修を検討します。固定幅の作りが全体に広がっているなら、共通レイアウトから直す案を比較します。見積もり前に代表ページで原因と影響範囲を確認してもらうと、作業内容をそろえやすくなります。

変更前の状態を残し、確認用の環境で代表ページを直してから、同じ部品を使う範囲へ広げます。公開後も、製品名の変更、写真の差し替え、カード追加などの更新時には、狭い幅での表示を確認します。共通化は更新を助けますが、載せる内容が変わった後の検証を代わりに行うものではありません。

情報の配置から相談したい場合は、関連記事の「ワイヤーフレームとは？」を使って、PCとスマホで何をどう並べるかを共有できます。更新作業の依頼範囲をまとめる場合は「ホームページ更新を外注する前に」へ進めます。方式の理解、画面の設計、実際の更新依頼を順に分けると、次に決めることが明確になります。

よくあるご質問