レスポンシブWebデザイン対応サイトの代表的な5つの制作方法
レスポンシブWebデザイン対応サイトの代表的な制作方法として次の5つが挙げられます。
- WordPressの対応テーマや表示方法を見直す
- レスポンシブ対応のCMS導入
- Web制作会社に制作を依頼する
- レスポンシブ変換ツールの使用
- HTML・CSSの使用
それぞれ詳しくみていきましょう。
1.WordPressの対応テーマや表示方法を見直す
WordPressでは、レスポンシブ対応のテーマを選ぶ方法があります。ただし、テーマやプラグインを有効にするだけで、既存の表・独自の部品・フォームまで使いやすくなるとは限りません。現在の内容を残した状態で表示と操作を確認します。
WordPressのテーマは、見た目だけでなく、更新方法、必要な機能、サポート、既存機能との組み合わせも比べます。「SEO対応」という表示だけで検索順位が上がるとは判断しないようにしましょう。
例えばWPtouchの提供ページでは、モバイル向けのテーマを追加し、パソコン用の通常テーマは残す方式が説明されています。同じHTMLの並びを画面幅で変えるレスポンシブデザインと、端末ごとに別の表示を用意する方式は区別します。
インストールして不具合が起きる可能性があるため、必ずバックアップを取ってから実施するようにしましょう。
2.レスポンシブに対応しているCMS導入
CMSを選ぶ場合は、利用するテーマやテンプレートが狭い画面に対応するか、必要な内容を社内で更新できるかを確認します。CMSの導入だけで、画像や表、外部の入力画面まで一律に整うわけではありません。
ただし、CMSによって特徴が異なるため、目的や今後の運用方法を見越したうえで、自社に合ったものを選ぶことが大切です。
3.Web制作会社に制作を依頼する
Webの知識や確認に使える人員が足りない場合は、制作会社へ対応を相談できます。費用対効果が必ず高くなるとは決めず、修正する部分、確認する端末、公開後の更新と管理を含めて、依頼範囲を比べましょう。
また、会社によっては改善サポートや競合分析といったコンサルティングや、保守・運用・管理などを代行してくれる場合もあります。これらも一元的に依頼すれば、企業の運用負担も軽減できるでしょう。
4.レスポンシブ変換ツールの使用
自動変換をうたうツールを検討する場合は、同じページの表示を調整するのか、別のモバイル用表示を作るのかを確認します。自動で表示を変えられても、原稿や導線、フォームの使いにくさまで解消できるとは限りません。
継続利用料の有無、対応できる部品、利用をやめた際に残るものは、製品や契約で異なります。自社の実際のページで表示と操作を確認し、必要な改善を行える範囲と費用を比較しましょう。
5.HTML・CSSの使用
HTMLはサイト内容に関するファイル、CSSはデザインを関するファイルです。WebサイトはHTMLやCSSなどのファイルを組み合わせることで制作されるため、HTMLやCSSを使用すれば、サイトをレスポンシブ対応にできます。
ただし、HTML・CSSはプログラミングスキルが必須です。そのため、Webの専門知識がない場合、この方法はおすすめしません。
HTML・CSSを使用したレスポンシブ対応サイトの制作ステップ
HTML・CSSを使用したレスポンシブ対応サイトの制作ステップは次の3ステップです。
- HTMLファイルにmeta viewportタグを追加
- CSSファイルで指定
- 正しく表示されているか確認
上記が一連の流れとなります。meta viewportタグを追加する場所は次のとおりです。
- HTMLファイルで制作されたサイト：既存の指定を確認し、各ページの<head>内でviewportメタタグが適切に出力されるようにする
- WordPressで制作されたサイト：使用テーマや出力元を確認する。header.phpを直接編集する前提にせず、既存のviewport指定や管理方法を制作担当者と確かめる
ブラウザーの表示幅を変える確認と、実際のスマートフォンでの操作確認を組み合わせます。診断サービスは補助にできますが、旧モバイルフレンドリーテストは提供終了です。メニューやフォームを使えるか、主要な内容が欠けていないかまで確認しましょう。
レスポンシブ対応における2つの注意点
レスポンシブ対応における注意点として次の2つが挙げられます。
- 画像ファイルは軽くする
- スマホ要素を意識してサイト制作する
それぞれ詳しくみていきましょう。
1.画像ファイルは軽くする
表示速度を確認するときは、実際に読み込む画像の寸法・容量や、使っていない処理を調べます。パソコンと同じHTMLを使うことだけで、必ず遅くなるとは限りません。表示幅などに合う画像をブラウザーが選べる仕組みもあります。
画像は、必要な画質と表示サイズを保ちながら軽量化することを検討します。診断の点数やファイルサイズだけを優先して、仕様や説明が読めなくならないかも確かめましょう。速度の改善だけで検索順位が上がると保証されるわけではありません。
2.スマホ要素を意識してサイト制作する
スマホはパソコンと違って、画面領域が小さいです。そのため、パソコンの感覚でデザインを作ってしまうと、ユーザビリティを損なう原因となります。
文字の大きさと行間は、実際の内容をスマホに表示して確認します。一律に14〜16pxへ設定すれば十分、あるいは必ずパソコンより大きくする、とは決めず、拡大操作も妨げないかを含めて読みやすさを確かめます。ボタンやリンクの押し間違いにも注意します。
不安であれば無理してHTML・CSSをいじらない
デザインを調整する必要はありますが、Webの専門知識などがあれば、HTML・CSSをいじって、サイトをレスポンシブ対応にするのはそれほど難しいことではありません。一方、HTML・CSSの知識のない方がいじる場合、デザイン調整・対応に時間がかかる他、デザインが崩れたり、サイトがバグったりするリスクがあります。
コストを抑えようとした結果、機会損失をしてしまったり、修正などに手間や費用がかさんだりする事態になりかねません。したがって、不安な場合は無理にHTML・CSSはいじらないようにしましょう。
そもそもレスポンシブデザインとは？
レスポンシブ（responsive）とは、レスポンスの派生語で、「敏感に反応する」という意味を持つ言葉です。Web業界におけるレスポンスデザインは、ユーザーが閲覧しているデバイスに合わせて、サイトレイアウトを最適化させるデザインのことを指します。
スマホが登場した当初は、パソコンのデザインをスマホに表示させたり、パソコンとスマホで別々のサイトを用意したりするのが一般的でした。しかし、スマホでパソコンのデザインを表示すると見えにくい、デバイス別にサイトを用意するのはコストも運用の手間もかかるといったデメリットがあります。
そこで登場したのがレスポンシブデザインです。レスポンシブデザインであれば、1つのサイトでパソコン用、スマホ用の表示が行えます。
同じURLで内容を案内でき、端末別に同じ情報を更新する負担を減らせるのは利点です。ただし、採用した方式だけで費用や集客の成果が決まるわけではありません。自社の更新と、読む人の操作に合うかを確認しましょう。
レスポンシブデザインのメリット
レスポンシブデザインのメリットとしては以下が挙げられます。
- パソコンとスマホで主要な内容をそろえやすい
- URLが統一されユーザーはシェアしやすい
- 同じページの内容を共通で管理しやすい
- ユーザーの仕様端末に合わせてレイアウト変更できるため、ユーザビリティを向上させやすい
Googleは、実装と維持がしやすい方式としてレスポンシブデザインを勧めています。ただし、別の構成方法も説明しており、レスポンシブ方式だけが登録や上位表示の条件ではありません。主要な内容と操作をモバイル側でも保つことが大切です。
レスポンシブデザインのデメリット
レスポンシブデザインのデメリットは次のとおりです。
- コーディングが従来のデザインよりも複雑なため、知識・スキルが必要となる
- スマホをベースに使いやすいデザインを制作しなければならないため、デザインに制約がある
また、レスポンシブデザインはパソコン・スマホで共通のHTMLを使用します。
共通のHTMLでも、画像の配信方法や読み込む処理は設計できます。常にパソコン用の大きい画像を読み込むとは決めつけず、端末に合う画像が選ばれるか、実際の転送量と表示を確認しましょう。
レスポンシブで使うレイアウトの考え方
以下は、画面幅に合わせた配置を考える際の用語です。互いに組み合わせて使えるため、公式に分かれた4種類のどれか一つだけを選ぶ、という分類ではありません。
- レスポンシブレイアウト
- グリッドレイアウト
- フレキシブルレイアウト
- リキッドレイアウト
それぞれ詳しくみていきましょう。
1.レスポンシブレイアウト
レスポンシブレイアウトとは、表示の有無や要素の配置場所をデバイスの画面領域に合わせて変化させるデザイン方法です。レイアウトの変更基準である画面幅（px数）はブレイクポイントと呼ばれ、このポイントの設定により、デバイスごとにサイドバーの表示・非表示といった対応を行えます。
並びやメニューの開き方を変える場合も、画面が狭いという理由だけで主要な説明や条件を消さないようにします。折り返しや開閉式の案内など、内容を保てる見せ方を確認しましょう。
2.グリッドレイアウト
グリッドレイアウトは、行や列の格子を使って内容を配置する方法です。CSSのグリッドなどを使い、画面幅に合わせて列や余白を調整できます。新しく登場した手法だから選ぶ、という必要はありません。
例えば、余裕がある画面では複数列、狭い画面では一列にするなど、内容に応じて指定します。制作担当者の経歴から表示品質を推測するのではなく、実際の文字・写真・表を入れて読めるかを確認しましょう。
3.フレキシブルレイアウト
フレキシブルレイアウトとは、デバイスに合わせたレイアウト表示が行えるデザイン方法です。後述するリキッドレイアウトと似ているデザイン方法ですが、表示可能な最小幅および最大幅を指定できるといった特徴があります。
最小幅や最大幅を設ける場合も、狭い画面で部品がはみ出さないかを確認します。長い名称やURL、画像、表が入った状態を見て、設定するだけで崩れなくなるとは考えないようにしましょう。
4.リキッドレイアウト
リキッドレイアウトは、幅などを割合で指定し、表示領域に応じて伸び縮みさせる考え方です。画面幅に応じて並びを切り替える方法などと組み合わせられます。
割合で幅を指定しても、固定幅の画像や広い表、長い文字列などが原因で横にはみ出す場合があります。横スクロールが必ずなくなるとは決めず、狭い画面と広い画面の両方で、情報を読み取れるかを確かめます。
レスポンシブなどのモバイル対応を考える2つの理由
モバイル対応を考える際は、次の2点を確認します。レスポンシブという方式を採用するだけで、検索や集客の成果が決まるわけではありません。
- スマホのサイト閲覧数の増加
- SEOに大きな影響を与える
それぞれ詳しくみていきましょう。
1.スマホのサイト閲覧数の増加
スマートフォンから訪れる読者にも、仕様や条件、相談先を分かるようにすることが大切です。自社サイトで使われている端末と、商品・サービスの案内をどの場面で読んでもらうかを確認します。
過去の参考として、LINEの2022年上期調査には、スマホを週1回以上利用する割合が96％と示されています。この図は2022年4月の15〜59歳・799人の調査によるもので、職場や学校での利用も含みます。現在の全国民や、自社サイトの訪問者全体の割合として、そのまま使う数値ではありません。
スマホで読みづらい箇所がある場合は、表示や操作の改善を検討します。過去の利用率だけから、離脱率・閲覧数・問い合わせ数がどの程度変わるかを断定せず、現在の自社の状況を確認しましょう。
2.SEOに大きな影響を与える
Googleのモバイルファーストインデックスは、スマートフォン用クローラーが取得した内容を、登録とランキングに使う仕組みです。モバイル対応のページを優先的に登録する、という意味ではありません。
Googleは2023年10月にモバイルファーストインデックスへの移行完了を発表しています。現在は、モバイル側でも主要な本文・画像・リンクなどを取得できるかを確認します。対応した方式だけで、登録の早さや検索順位が保証されるわけではありません。
レスポンシブデザインはGoogleが勧める構成方法ですが、ほかの方法もあります。方式の名前だけで判断せず、読む人が情報を得て操作でき、検索エンジンも必要な内容を取得できるかを確かめましょう。
レスポンシブデザイン対応サイト制作のまとめ
レスポンシブデザインは、同じページの表示を画面幅などに合わせて調整する方法です。WordPressやCMSを使う場合も、採用するテーマや部品、既存内容に合うかを確認します。別のモバイル向けテーマを使う方式とは区別して検討しましょう。
どの方法でも一定の成果が出るとは限りません。現在のページを確認し、表示の調整、画像、フォーム、更新や管理のどこまでが必要かを整理します。社内で確認や修正を行うのが難しい場合は、分かる範囲から制作会社へ相談し、必要な対応と費用を確かめましょう。
参考資料（2026年10月30日確認）：Google：モバイル向けの3つの構成／Google：移行完了の発表／web.dev：レスポンシブの基本／web.dev：レスポンシブ画像／MDN：レスポンシブとレイアウト／WordPress：WPtouchの提供ページ／W3C：狭い画面でのリフロー／LINE：2022年上期の調査PDF（対象・時期に注意）。
