レスポンシブデザイン
Responsive Designれすぽんしぶ・でざいん
レスポンシブデザインとは、1つのHTMLとCSSを共通で使いながら、画面の幅に応じて要素の並び・大きさ・見せる順番を組み替える設計手法のこと。スマートフォン用に別のサイトを用意するのではなく、同じページが読む端末に合わせて形を変えます。中身が一箇所にまとまるため、更新の手間が増えず、「片方だけ情報が古い」という状態が起きにくくなります。
見られている画面と、作った画面がずれている
多くの中小企業のサイトで、アクセスの大半はスマートフォンから来ています。にもかかわらず、制作の打ち合わせはPCの大きな画面で行われ、確認もPCで済んでしまう。この非対称が問題です。PCで整って見えるページが、スマートフォンでは文字が小さく、表が横にはみ出し、電話番号が指で押しにくい位置にある。作った側は気づかず、来訪者だけがそれを見ています。アクセス解析の数字が悪い原因が、単に画面が小さいことだった——これは珍しい話ではありません。
技術的な背景も押さえておく価値があります。Googleは検索結果の評価にモバイル版のページを用いる方針（モバイルファーストインデックス）を取っており、スマートフォンで見たときのページが評価の対象になります。つまり、PC版だけ丁寧に作っても、検索での見え方には反映されにくい。加えて、端末の種類は年々増えています。小さなスマートフォン、大きなスマートフォン、タブレット、ノートPC、大型ディスプレイ。特定の1機種に合わせて作る発想では、もう追いつきません。幅がいくつであっても崩れない、という前提で設計する必要があります。
かつては「PC用サイト」と「スマホ用サイト」を別に作る方法が一般的でした。この方法の弱点は、制作費ではなく運用に出ます。営業時間を変えたとき、料金を改定したとき、2か所を直さなければならない。忙しい時期には片方だけ直して終わり、数か月後に「スマホで見たら古い料金が出ている」と気づく。専任のWeb担当がいない会社ほど、この二重管理は続きません。レスポンシブデザインの本当の利点は見た目ではなく、更新すべき場所が1つに保たれることです。
画面が小さいほど、来訪者は「読む」より「探す」。探し物が見つからなければ、戻るだけです。
顧客心理の視点で見ると、スマートフォンの来訪者は落ち着いて読んでいません。移動中、休憩中、別の作業の合間に、片手で画面をなぞっています。この状態の人が知りたいのは3つだけです。「自分が探しているものを扱っているか」「信用できそうか」「どうやって連絡すればいいか」。ここで文字が小さければ拡大の手間が生じ、その一手間で離脱します。表がはみ出せば、内容ではなく操作に意識が向きます。押しにくいボタンは、押す気を削ぎます。これは好みの問題ではなく、迷いや不安が一段増えるという意味です。だからレスポンシブ化の判断基準は「きれいに縮んでいるか」ではなく、スマートフォンの1画面目で、上の3つのうち少なくとも1つに答えが出ているかになります。とくに店舗や地域商圏のビジネスでは、電話・地図・営業時間が最短距離にあるかどうかが結果を大きく変えます。
仕組み化の視点では、レスポンシブを「作り方」ではなく運用のルールとして持つと効きます。型は4つです。①切り替える幅（ブレークポイント）を最初に決め、社内で共有する ②新しいページを追加するときは、必ず狭い幅から設計する ③表・PDF・埋め込み地図など、はみ出しやすい要素の扱い方をあらかじめ決めておく ④更新後の確認は、PCではなく自分のスマートフォンで行う。とくに④が抜けると、時間が経つにつれて崩れが溜まります。狭い幅から設計するのは、順番の問題です。広い画面から作ると要素を詰め込みたくなり、狭い画面ではそれを削る作業になります。逆に狭い幅から始めれば、最初に残った要素が「本当に必要なもの」です。一度この順番を決めてしまえば、担当者が替わっても判断がぶれません。
AI活用の視点では、確認と検証の部分を任せられます。HTMLやCSSを渡して「狭い幅で崩れる可能性がある箇所を挙げて」と聞く、テキスト量の多いページについて「スマートフォンで先に見せるべき順番の案」を複数出させる、テーブルをスマートフォン向けに縦積みへ組み替える書き方を尋ねる。いずれも人が全ページを目視するより速く当たりがつきます。さらにARGASのような追跡の仕組みを併用すれば、端末ごとの離脱位置が分かるため、「スマートフォンだけ特定の段で落ちている」という形で直す場所を特定できます。ただし、AIが出した構成をそのまま採用するのは避けたほうがよいでしょう。出てくるのは一般的な最適解で、自社の強みを先に出す順番とは別物です。崩れの検出と候補出しはAI、見せる順番の決定は人。この分担が実務に合います。
図解：1つの中身が、幅に合わせて並び替わる
下の図は、同じHTMLが画面幅によってどう組み替わるかと、別サイトを持つ場合との運用の違いを示したものです。要素そのものは変わらず、並び方と大きさだけが変わります。
事例で見る：国内・海外
Ethan Marcotte と The Boston Globe ── 「幅を決めない」という発想の出発点
レスポンシブデザインという言葉は、2010年にWebデザイナーのEthan Marcotteが「A List Apart」に寄せた記事で提唱したものとして広く知られています。当時の主流は、想定する画面幅を固定して作る方法か、携帯向けに別サイトを用意する方法でした。Marcotteの提案は、幅を決めずに、幅に応じて中身が流れ込むように作るという考え方の転換でした。この考えを大規模に実装した初期の代表例として、米国の新聞社The Boston Globeのサイトがしばしば挙げられます。ニュースサイトは記事量が多く、画面の大小で読ませ方を変える必要が大きい領域です。そこで実証されたことは技術というより設計の順番で、「何を最初に読ませるか」を決めておけば、画面幅が変わっても崩れないという点にあります。中小企業のサイトにも同じことが当てはまります。伝える順番が決まっていないページは、画面が狭くなった瞬間に何を残すべきか判断できません。なお、これらの取り組みによる具体的な数値成果は公開情報の範囲を超えるため、ここでは扱いません。
地域の店舗・BtoB企業 ── 1画面目に「連絡手段」を置き直す
たとえば、地域で施工や修理を請け負う企業のサイトを考えます。アクセスの大半はスマートフォンからで、来訪者の多くは「今すぐ相談したい」状態にあります。ところがPCを基準に作られたページでは、1画面目に大きな写真とキャッチコピーが占め、電話番号はページ最下部か、小さなヘッダーの中にあります。ここで行う改善は装飾ではありません。狭い幅のときだけ、画面下部に電話と問い合わせのボタンを固定表示する、対応エリアと営業時間を1画面目に文字で置く、料金表がはみ出さないよう縦積みに組み替える、この3点です。いずれもPC表示は変えず、狭い幅の表示だけを変えます。実務上のコツは、改善前に自社の解析で端末別の割合を確認しておくことです。スマートフォンが大半だと数字で分かれば、社内の合意が早く取れます。また公開後の確認は、担当者だけでなく現場の社員が自分の端末で行うと、機種ごとの崩れが早く見つかります。これは特定企業の実績ではなく、スマートフォン比率の高い中小企業サイトで取りやすい代表的な進め方です。
現場での使い方：5ステップ
- 端末別の割合を先に見る解析でスマートフォン・タブレット・PCの比率と、端末別の離脱位置を確認する。直す優先順位は、ここで自動的に決まる。
- 切り替える幅を決めて共有するブレークポイントは3つ程度で足りる。決めた値を社内文書に残し、ページを追加するときの前提にする。
- 狭い幅から設計するスマートフォンの1画面目に「自分向けか」「連絡手段」が入るかを最初に確認する。広い画面はそれを横に広げるだけ。
- はみ出しやすい要素の扱いを決める料金表・PDF・地図の埋め込み・長い英数字は崩れの常連。縦積みにするか、別ページに逃がすかを事前に決めておく。
- 更新後は自分のスマートフォンで確認するPCの画面を縮めた確認では気づけない差が出る。現場の社員数名に見てもらうと機種ごとの崩れが早く出る。
関連用語
まとめ：画面に合わせるのではなく、順番を決めておく
レスポンシブデザインは、1つのHTMLとCSSで画面幅ごとの見せ方を組み替える手法です。利点は見た目の統一よりも運用にあります。直す場所が1つに保たれるため、情報が古いまま残る箇所が生まれません。設計は狭い幅から始め、スマートフォンの1画面目で「自分向けか」と「どう連絡するか」に答えを出す。切り替える幅は社内で共有し、崩れやすい要素の扱いは事前に決めておく。崩れの検出や順番の候補出しはAIに任せ、何を先に見せるかは人が決める。伝える順番が決まっていれば、画面の大きさが変わっても来訪者は自分で次へ進みます。
