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

01はじめに｜この記事でわかること

要点：この記事は、制作会社から「レスポンシブで作ります」と言われて、そのまま話が進んでしまった発注側の方に向けたものです。コードの書き方ではなく、判断と確認のしかたを整理します。全体の進め方はホームページ制作の流れもあわせてご覧ください。

パソコンで見たときは、きれいに整っていました。ところが公開後、自分のスマホで開いてみると様子が違います。

料金表が画面からはみ出している。メニューが2段に折り返している。問い合わせボタンが指で押しにくい。これらはデザインの失敗ではなく、確認の抜けです。多くの場合、デザイン案の段階でスマホ版を見ていれば防げました。

この記事では、2000年創業のWeb制作会社ZenWeb Japanが、打ち合わせの場で発注側にお伝えしている内容をまとめました。用語の解説よりも、どこを見て何を聞けばよいかに重点を置いています。

本題に入る前に、仕組みを短時間でつかめる動画をご紹介します。

02レスポンシブデザインとは｜1つのHTMLで見え方を変える仕組み

要点：レスポンシブデザインとは、パソコンでもスマホでも同じHTMLを配り、画面の幅に応じて並べ方だけを変える方式です。中身は1つなので、更新も1回で済みます。ホームページ制作では、この方式が標準になっています。

言葉のイメージだけ先にお伝えします。レスポンシブとは「反応する」という意味です。画面の幅に反応して、要素の並びが変わります。

変わるのは主に3つです。

• 横並びが縦並びになる。パソコンで3列だった箱が、スマホでは1列に積み上がります。中身の文章は同じままです。
• 文字と画像の大きさが変わる。幅に合わせて自動で縮みます。画像が枠からはみ出さないのはこの仕組みのおかげです。
• メニューの出し方が変わる。横一列のメニューが、スマホでは折りたたみのボタンに変わります。

ここで大事なのは、ページが2つに増えるわけではないという点です。住所（URL）も中身も1つ。だから記事を1本足せば、パソコンでもスマホでも同時に増えます。運用の手間が増えないのが、この方式のいちばんの利点です。

03スマホ対応の3つの方式｜どれを選ぶべきか

要点：スマホ対応のやり方は3つあります。レスポンシブ、動的配信、別URLです。新しく作るなら、迷わずレスポンシブで問題ありません。スマホ対応そのものを先送りしている場合は、スマホ対応していないホームページのリスクを先にご確認ください。

Googleの検索セントラルでは、モバイル対応の構成として次の3つが挙げられています。

Googleは実装と維持がもっとも簡単な方式としてレスポンシブウェブデザインをすすめると明記しています。技術的な資料はweb.devのレスポンシブデザイン講座にまとまっています。

別URL方式のサイトを今も運用している会社は少なくありません。ただ、更新が2回必要になり、片方だけ古くなるのが実情です。統合する場合の注意点はリニューアルでSEO順位を落とさない移行チェックリストにまとめています。

04画面幅別・訪問者の割合

要点：企業サイトの訪問者を画面幅で分けると、半分以上がスマホの縦画面です。パソコンの広い画面で見ている人は、実は少数派になっています。だからこそホームページ制作では、スマホ側から設計を始めます。

総務省の令和7年通信利用動向調査では、世帯のスマートフォン保有割合が91.8%と公表されています。ほとんどの家庭に、スマホが1台はある状態です。

2行目と3行目を合わせても、タブレットの割合は2割に届きません。ここに時間をかけるより、スマホの縦画面を丁寧に作るほうが効きます。

05ブレイクポイントの決め方｜3段階が基本

要点：ブレイクポイントとは、並べ方を切り替える画面の幅のことです。企業サイトなら3段階で足ります。細かく刻むほど確認の手間が増え、崩れる場所も増えます。並び順そのものはワイヤーフレームの段階で決めておきます。

制作会社との打ち合わせで、この言葉が出たら次のように受け取ってください。「何ピクセルからレイアウトを変えますか」という話です。

1. スマホ表示。おおむね幅834px未満。1列に積み上げて、メニューは折りたたみます。
2. タブレット表示。おおむね幅834px以上1280px未満。2列まで戻します。
3. パソコン表示。おおむね幅1280px以上。設計どおりの列数で表示します。

数値そのものは制作会社によって多少ちがいます。覚えていただきたいのは数値ではなく、3段階で足りるという点です。「機種ごとに合わせます」と言われたら、確認の回数がどれだけ増えるかを聞いてください。

特定の機種に合わせた設計には、もう1つ弱点があります。数年後に主流の端末が変わったとき、作り直しが必要になることです。幅の区分で考えておけば、この心配はありません。

06スマホで崩れやすい箇所と発生率

要点：崩れる場所はほぼ決まっています。もっとも多いのが横長の表で、次が固定幅の画像です。この2つを先に確認するだけで、指摘の半分以上は消えます。写真の準備段階の注意点はホームページ写真の撮り方にまとめています。

1位が表である理由ははっきりしています。表は幅を縮められないからです。文章は折り返せますが、5列の料金表を幅390pxに収めることはできません。

07崩れを防ぐ5つの確認ポイント

要点：崩れやすい5箇所には、それぞれ決まった対処があります。発注側が把握しておけば、指摘が具体的になり、修正が1回で終わります。文字の見え方に不安がある場合はWebフォントの選び方もあわせてご覧ください。

順番に見ていきます。どれも、打ち合わせの場で口に出せる内容です。

• 横長の表。スマホでは横スクロールにするか、1行ずつのカード型に組み替えます。どちらにするかを先に決めてください。
• 固定幅の画像。幅に合わせて縮む設定になっているかを確認します。文字が入った画像は、縮むと読めなくなるので要注意です。
• 項目の多いメニュー。折りたたみボタンに入れます。それでも多い場合は、階層そのものを見直してください。整理にはサイト構成図が役立ちます。
• お問い合わせフォーム。入力欄を縦1列にそろえます。姓と名を横に並べると、スマホでは押し間違いが増えます。
• ボタンと電話番号。指で押せる大きさを確保し、電話番号はタップで発信できるようにします。

もうひとつ、見落とされがちな点があります。画像が重いと、スマホでは表示そのものが遅くなります。崩れていなくても、読まれる前に離脱します。原因の切り分けは表示が遅い原因と高速化の方法で解説しています。

08スマホ表示を見直した前後の変化

要点：スマホ表示を整えると、まず読まれる量が変わります。1回の訪問で見るページ数が増え、問い合わせに占めるスマホの比率も上がります。効果の出方は業種で変わるため、ホームページリニューアルでは現状の数値から確認します。

数字よりも大切なのは、変化の順番です。先に「読まれる」が変わり、あとから「問い合わせ」が動きます。公開直後に問い合わせが増えなくても、閲覧ページ数が伸びていれば方向は合っています。

09費用はどこで変わるのか

要点：レスポンシブ対応そのものを別料金にする会社は、いまはほとんどありません。費用が動くのは、ページの種類の多さと、表や図版の作り替えの量です。ZenWeb Japanは案件ごとにお見積りをお出ししています。詳しくはホームページ制作サービスをご覧ください。

見積書に「レスポンシブ対応費」という行があったら、中身を確認してください。何を指しているのかで意味が変わります。

費用が上がりやすいのは、次のような場合です。

• レイアウトの種類が多い。ページごとに構成が違うと、そのぶん確認と調整が増えます。
• 表や図版が多い。スマホ用に組み替える作業が、点数分だけ発生します。
• 既存サイトの改修である。作りが古いと、直すより組み直したほうが早い場合があります。

逆に、ページの型を最初にそろえておくと費用は安定します。全体の相場感はホームページ制作の費用相場にまとめています。

10工程別・スマホ表示を確認するタイミング

要点：スマホ表示の確認は、実装が終わってからでは遅すぎます。設計とデザインの段階で見ておけば、直しは紙の上で済みます。デザイン段階での見方はデザインカンプの確認と修正依頼のコツで解説しています。

表を上から下へ見ていくと、時期が遅くなるほど手直しが大きくなるのがわかります。3〜4週目までに気づけば、直すのはデザイン案だけです。

11制作会社に聞く5つの質問

要点：専門知識がなくても、質問の型さえあれば判断できます。答え方を見れば、その会社の進め方も見えてきます。ホームページ制作のご相談では、この5点を最初にご説明しています。

そのまま使っていただける形にしました。

• 「スマホ版のデザイン案は、いつ見せてもらえますか」期日が答えとして返ってくるかを見ます。
• 「切り替える幅は何段階ですか」3段階という答えなら十分です。
• 「料金表は横スクロールですか、カード型ですか」崩れやすい箇所を先回りで確認できます。
• 「検収では、どの端末で確認しますか」実機で確認する運用かどうかがわかります。
• 「公開後にページを足したとき、崩れは誰が確認しますか」運用の分担を、契約前に決めておきます。

最後の質問がいちばん抜けやすい項目です。公開後に追加したページで崩れるのは、よくある話です。担当を先に決めておけば、放置は防げます。

12公開前の実機チェック｜5つの手順

要点：検収は、会社のパソコンではなく自分のスマホで行います。手順は5つ。順番どおりに進めれば、30分ほどで主要な問題は見つかります。公開後の作業は公開後のチェックリストにまとめています。

スマホでレスポンシブ表示を確認する手順

発注側だけで進められる範囲をまとめました。特別な道具は必要ありません。

1. 自分のスマホで開く。会社のパソコンではなく、ふだん使っている端末で見ます。通信環境も社外で試してください。
2. トップから問い合わせまで通す。実際のお客様と同じ順路をたどります。途中で指が止まった箇所を記録します。
3. 横にはみ出す箇所を探す。画面を左右に動かしてみて、動くページがあれば表か画像が原因です。
4. フォームを最後まで入力する。送信までを試します。入力欄の切り替えでつまずく箇所を確認します。
5. 画面を横向きにする。スマホを寝かせた状態でも崩れないかを見ます。ここが抜けている案件は多いです。

3番目が、いちばん見つかりやすい確認方法です。指で左右に動くページは、必ずどこかがはみ出しています。原因の特定は制作会社に任せて構いません。

13まとめ｜大事なのは「読めるか」

要点：レスポンシブデザインとは、1つのページの並べ方を画面幅で切り替える方式です。判断すべきは3点。切り替えは3段階、崩れやすいのは表と画像、確認は自分のスマホ。詳しくはホームページ制作のページもご覧ください。

要点を振り返ります。

• レスポンシブは1つのHTMLで並べ方を変える方式です。ページが2つに増えるわけではありません。
• Googleは実装と維持のしやすさから、この方式をすすめています。
• 訪問者の半分以上はスマホの縦画面です。確認もそこから始めます。
• 切り替えの幅は3段階で足ります。機種ごとに刻む必要はありません。
• 崩れる場所は横長の表と固定幅の画像に集中しています。
• スマホ版のデザイン案は、実装が始まる前に見せてもらってください。

判断に迷ったときの基準は1つです。そのページは、自分のスマホで最後まで読めるか。読めるなら、細かい数値まで気にする必要はありません。

14よくある質問

要点：レスポンシブデザインについて、よくいただく質問をまとめました。配色との関係が気になる場合はWebデザインの配色の決め方もあわせてご覧ください。

1. レスポンシブにすると制作費は高くなりますか？

いまはレスポンシブが標準なので、対応そのもので大きく変わることはありません。費用が動くのはレイアウトの種類数と、表や図版を組み替える量です。見積書に専用の項目がある場合は、中身を確認してください。

2. スマホ専用サイトを別に作るのとどちらがいいですか？

新規で作るならレスポンシブをおすすめします。別に作ると更新が2回必要になり、片方だけ古くなりがちです。Googleも実装と維持のしやすさからレスポンシブをすすめています。

3. ブレイクポイントは何箇所必要ですか？

企業サイトなら3段階で十分です。スマホ、タブレット、パソコンの3つに分けます。機種ごとに細かく刻むと確認の手間が増え、数年後に作り直しが必要になります。

4. 既存サイトを後からレスポンシブにできますか？

できます。ただし作りが古い場合は、部分的に直すより組み直したほうが早く、費用も抑えられることがあります。まずは現状を確認したうえで、範囲をお決めください。

5. タブレットは確認しなくても大丈夫ですか？

優先度は下げて構いません。訪問者に占める割合は多くないためです。ただし検収では1度だけ確認してください。スマホとパソコンの中間で崩れる箇所が見つかることがあります。