「レスポンシブデザインって何ですか？」「うちのホームページ、スマホで見ると小さくて読めないんだけど…」――WEB制作の打ち合わせで、こうした質問やお悩みをいただくことがよくあります。スマートフォンの普及に伴い、ホームページのスマホ対応は「あった方がいいもの」から「なくてはならないもの」へと変わりました。しかし、「レスポンシブデザイン」という専門用語が壁になって、なかなか理解が進まないという方も多いのではないでしょうか。この記事では、レスポンシブデザインとは何か、なぜスマホ対応が必須なのか、具体的にどう変わるのか、そして費用の目安まで、WEBに詳しくない方にもわかりやすく解説します。
レスポンシブデザインとは何か？
まずは、「レスポンシブデザイン」という言葉の意味を、できるだけわかりやすく説明しましょう。
画面サイズに合わせて自動で変わるデザイン
レスポンシブデザインとは、ホームページを閲覧するデバイス（端末）の画面サイズに応じて、レイアウトや文字の大きさ、画像の配置などが自動的に最適化されるデザインの手法です。「レスポンシブ」は英語で「反応する」という意味があり、画面サイズに「反応して」表示が変わることからこの名前がつけられています。
たとえるなら、レスポンシブデザインは「水」のようなものです。コップに水を入れればコップの形に、ペットボトルに入れればペットボトルの形になるように、レスポンシブデザインのホームページは、パソコンの大きな画面でもスマートフォンの小さな画面でも、それぞれの画面に合った形で表示されるのです。
具体的には、パソコンでは横に3列で並んでいたサービス紹介が、スマートフォンでは縦に1列になる。パソコンでは横に並んでいたメニューが、スマートフォンでは「ハンバーガーメニュー」（三本線のアイコンをタップすると開くメニュー）に変わる。こうした変化が自動的に行われます。
用語メモ
ハンバーガーメニューとは、スマートフォンのWEBサイトでよく見かける三本線（≡）のアイコンのことです。ハンバーガーの形に似ていることからこう呼ばれています。タップすると、ナビゲーションメニューが表示されます。
レスポンシブデザインが生まれた背景
レスポンシブデザインが広まる以前は、パソコン用のホームページとスマートフォン用のホームページを別々に作成するのが一般的でした。しかし、この方法では2つのサイトを管理する手間が倍になり、内容の更新漏れが発生しやすいという問題がありました。
レスポンシブデザインは、1つのホームページで複数のデバイスに対応できるため、管理の手間が大幅に削減されます。2010年代前半に提唱されて以来、現在ではWEB制作の標準的な手法となっています。新規で作成されるホームページのほとんどがレスポンシブデザインを採用していると言ってよいでしょう。
スマホ非対応のサイトとの違い
スマホ対応ができていないホームページをスマートフォンで開くと、パソコンで見たときと同じデザインがそのまま縮小表示されます。その結果、文字が非常に小さくなって読めない、ボタンが小さくてタップしにくい、横スクロールしないと全体が見えない、画像が大きすぎて読み込みに時間がかかる、といった問題が発生します。
試しに、御社のホームページをお手元のスマートフォンで開いてみてください。文字を拡大しなくても普通に読めますか？ボタンを指でタップしやすいですか？表示が崩れている箇所はありませんか？もしこれらの問題があれば、御社のホームページはスマホ対応ができていない可能性があります。
なぜスマホ対応が「必須」なのか
「うちのお客さまはパソコンで見ているから、スマホ対応は不要では？」と思われるかもしれません。しかし、データを見ると、スマホ対応を後回しにできない理由が見えてきます。
スマートフォンからのアクセスが過半数を超えている
総務省の調査によると、日本のインターネット利用者のうち、スマートフォンを利用してインターネットを閲覧する人の割合は年々増加しています。一般的に、多くの企業サイトでスマートフォンからのアクセスが全体の50〜70%を占めるようになっています。
「うちはBtoBだからパソコンが多いだろう」と考えがちですが、実際にはBtoBの企業サイトでもスマートフォンからのアクセスが40〜50%程度を占めることは珍しくありません。経営者や担当者が通勤中や外出先で情報収集をするケースが増えているためです。
つまり、スマホ対応ができていないホームページは、訪問者の半数以上に「見にくいサイト」を提供している可能性があるのです。これは、お店の入り口の半分をふさいでしまっているようなものです。
Googleのモバイルファーストインデックスの影響
Googleは、検索結果の順位を決める際に「モバイルファーストインデックス」という方針を採用しています。これは、ホームページのスマートフォン版の内容を優先的に評価するという方針です。
つまり、パソコン版のホームページがどんなに充実していても、スマートフォン版の表示が不十分であれば、Googleの評価が下がり、検索結果で上位に表示されにくくなる可能性があるのです。「スマホ対応していないこと」が、直接的に検索順位の低下につながりうるという点は、非常に重要なポイントです。
用語メモ
モバイルファーストインデックスとは、Googleが検索結果の順位を決める際に、スマートフォン版のホームページの内容を優先的に評価する仕組みのことです。以前はパソコン版が基準でしたが、スマートフォン利用者の増加に伴い、この方針に転換されました。
ユーザー体験と信頼性への影響
スマートフォンで見にくいホームページは、訪問者にストレスを与えるだけでなく、企業の信頼性にも影響します。「このホームページは古いな」「この会社は時代に対応していないのかも」という印象を持たれてしまう可能性があるのです。
とくに、初めて御社のことを知った方が検索してホームページを訪れた場合、最初の印象がスマホで見にくいサイトだったら、他の競合サイトに移ってしまうかもしれません。一般的に、スマートフォンで表示が最適化されていないサイトは、直帰率（1ページだけ見てすぐに離脱する割合）が高くなる傾向にあります。
スマホ対応は「やった方がいい」ではなく「やらないと損をする」時代になっています。後回しにしている間にも、ビジネスチャンスを逃しているかもしれません。
レスポンシブデザインで具体的に何が変わるのか
「レスポンシブデザインにすると、実際にどう変わるの？」という疑問にお答えします。ここでは、具体的な変化をいくつかご紹介します。
レイアウトの変化：横並びから縦並びへ
パソコンの広い画面では、コンテンツを横に並べて表示することが一般的です。たとえば、サービス紹介を3列で横に並べたり、メインの情報エリアとサイドバーを横に配置したりします。
スマートフォンでは画面が縦長で狭いため、これらの要素が縦一列に配置し直されます。3列のサービス紹介は1列ずつ縦に並び、サイドバーはメインコンテンツの下に移動します。訪問者は上から下にスクロールするだけで、すべての情報を見ることができます。
文字と画像の最適化
レスポンシブデザインでは、文字の大きさも画面に合わせて調整されます。パソコンではやや小さめの文字でも読めますが、スマートフォンでは16ピクセル以上の文字サイズが推奨されています。行間（行と行の間隔）も、スマートフォンでは広めに取る方が読みやすくなります。
画像も同様です。パソコン用の大きな画像をそのままスマートフォンで表示すると、データ量が多くて読み込みが遅くなります。レスポンシブデザインでは、デバイスに応じて画像のサイズを自動的に調整し、スマートフォンではより軽量な画像を表示することで、表示速度を確保します。
ナビゲーション（メニュー）の変化
パソコン版のホームページでは、ページ上部にメニューが横一列に並んでいることが一般的です。しかし、スマートフォンの画面幅では、すべてのメニュー項目を横に並べることができません。
そこで、スマートフォンでは前述の「ハンバーガーメニュー」が使われます。三本線のアイコンをタップすると、メニューが展開して表示される仕組みです。これにより、画面のスペースを有効に使いながら、すべてのメニューにアクセスできるようになります。
また、スマートフォンでは電話番号をタップするとそのまま発信できるようにする（タップ・トゥ・コール）機能も、レスポンシブデザインならではの工夫です。パソコンでは電話番号はただのテキストですが、スマートフォンではタップすると電話アプリが起動して簡単に電話をかけられるようになります。
スマホ対応の方法：3つの選択肢
ホームページをスマホ対応にする方法は、主に3つあります。それぞれのメリットとデメリットを理解して、御社に合った方法を選びましょう。
方法1：レスポンシブデザインでの新規制作・リニューアル
現在もっとも推奨される方法が、レスポンシブデザインでホームページをリニューアル（または新規制作）することです。1つのHTMLファイル（WEBページの元となるファイル）で、すべてのデバイスに対応できます。
メリット：管理が一元化できる。Googleが推奨する方法である。URLが統一されるためSEO（検索エンジン対策）に有利。
デメリット：既存のサイトがレスポンシブ非対応の場合、リニューアルが必要になり費用がかかる。
方法2：スマートフォン専用サイトの別途作成
パソコン用サイトとは別に、スマートフォン専用のサイトを作成する方法です。パソコンでアクセスするとPC用サイト、スマートフォンでアクセスするとスマホ用サイトが表示されます。
メリット：既存のパソコン用サイトを変更せずにスマホ対応できる。
デメリット：2つのサイトを管理する手間が発生する。更新漏れが起こりやすい。Googleはレスポンシブデザインの方を推奨している。
方法3：既存サイトへのレスポンシブ対応の追加
既存のパソコン用サイトのデザインを大きく変えずに、レスポンシブ対応のスタイル（CSS）を追加する方法です。フルリニューアルよりも費用を抑えられる場合があります。
メリット：フルリニューアルよりも費用と期間を抑えられる場合がある。
デメリット：既存サイトの構造によっては対応が難しい、または中途半端な仕上がりになることがある。
用語メモ
CSSとは「カスケーディング・スタイル・シート」の略で、ホームページの見た目（色・配置・文字の大きさなど）を制御するための言語です。SEOとは「サーチ・エンジン・オプティマイゼーション」の略で、Googleなどの検索エンジンで上位に表示されるようにサイトを最適化することです。
新規制作・リニューアルの場合は「方法1：レスポンシブデザイン」一択です。Googleも推奨する標準的な方法であり、長期的に見てもっとも効率的です。
費用と期間の目安
スマホ対応にかかる費用と期間の目安をお伝えします。あくまで一般的な相場ですので、具体的な金額は制作会社にお見積もりを依頼してください。
レスポンシブデザインでのリニューアル費用
既存のサイトをレスポンシブデザインでリニューアルする場合の費用は、サイトの規模によって大きく異なります。一般的な目安は以下のとおりです。
小規模サイト（5〜10ページ）：50万〜150万円程度
中規模サイト（10〜30ページ）：150万〜300万円程度
この費用には、デザインの刷新、レスポンシブ対応、CMS（WordPress等）の導入などが含まれます。制作期間は、小規模で2〜3か月、中規模で3〜5か月程度が一般的です。
既存サイトへのレスポンシブ追加対応の費用
既存サイトの構造を活かしてレスポンシブ対応を追加する場合は、フルリニューアルよりも費用を抑えられることがあります。一般的には、ページ数や既存サイトの構造の複雑さに応じて、20万〜80万円程度が目安です。ただし、既存サイトの構造によっては対応が難しく、結果的にリニューアルと同等の費用がかかるケースもあります。
費用対効果を考える
スマホ対応の費用を「コスト」として見ると高く感じるかもしれませんが、「投資」として考えてみてください。スマホ対応によって、訪問者の半数以上が快適にサイトを閲覧できるようになり、Googleからの評価も向上し、お問い合わせが増える可能性があります。
たとえば、スマホ対応前はスマートフォンからのお問い合わせがほぼゼロだった企業が、レスポンシブデザインにリニューアルした後、スマートフォン経由のお問い合わせが月に数件発生するようになった、というケースは珍しくありません。1件のお問い合わせが御社にとってどれだけの売上につながるかを考えれば、費用対効果は十分に見込めるのではないでしょうか。
まとめ：スマホ対応は今すぐ取り組むべき最優先課題
ここまでの内容を振り返りましょう。
- レスポンシブデザインとは：画面サイズに応じて表示が自動的に最適化されるデザイン手法
- スマホ対応が必須な理由：アクセスの過半数がスマートフォンから。Googleのモバイルファーストインデックスにも影響する
- 具体的な変化：レイアウト、文字サイズ、ナビゲーションが画面に合わせて変わる
- 推奨される方法：レスポンシブデザインでのリニューアルが最も効率的
- 費用の目安：小規模サイトで50万〜150万円程度（リニューアルの場合）
- 費用対効果：訪問者の半数以上の体験が改善され、お問い合わせ増加が期待できる
もし御社のホームページがまだスマホ対応できていないのであれば、これは最優先で取り組むべき課題です。スマホ対応は「いつかやろう」ではなく、「今すぐ検討を始めるべき」事項です。日を追うごとに、スマホ対応していないことによる機会損失は大きくなっていきます。
私たちmotiveは、群馬県を中心とした中小企業のお客さまのホームページ制作において、レスポンシブデザインを標準仕様としています。「うちのサイトはスマホ対応できているだろうか？」と不安な方は、まずはお気軽にご相談ください。御社のサイトの現状を確認し、最適な対応方法をご提案いたします。
