レスポンシブデザインとは？作り方・実装のコツ・費用相場【2026年版】

この記事の監修者

齊藤 真也

株式会社ファーストネットジャパン 代表取締役

1998 年創業時からアプリ開発・Web マーケティング・フルリモート SES・ホームページ制作・翻訳・グラフィックデザインなど幅広い IT／クリエイティブ領域を手がけ、4,000 件超のプロジェクトを統括。セキュリティ対策・SEO・システム開発から中小企業のWeb戦略支援まで、技術とデザインの両面でクライアントの課題解決を27年以上にわたり支援してきた。
大阪本社・東京オフィスの2拠点体制で、全国の企業のデジタル化をサポート。
高松市出身。座右の銘は「圧倒的努力」。

レスポンシブデザインとは、PC・スマートフォン・タブレットなど、画面幅が異なる端末でも見やすく操作しやすい表示に自動調整するWebデザイン手法です。現在のホームページ制作では標準的な対応ですが、単に画面を縮小するだけでは十分ではありません。

成果につながるレスポンシブ対応では、モバイルでの情報優先順位、ブレイクポイント、画像・表・フォームの調整、表示速度、実機確認まで設計する必要があります。既存サイトをレスポンシブ化する費用は、軽微なCSS修正で10万〜30万円程度、一部HTMLを含む改修で30万〜80万円程度、全面リニューアルでは100万円以上が目安です。実際の金額はページ数や既存コード、CMS、デザイン要件によって変動します。

この記事では、レスポンシブデザインの意味、作り方、CSS実装、ブレイクポイントの決め方、メリット・注意点、既存サイトの対応方法、費用相場まで、1998年創業・4,000件超の制作実績を持つファーストネットジャパンが実務目線で解説します。

• レスポンシブデザインの仕組みと他方式との違い
• HTML・CSSによる作り方と実装手順
• ブレイクポイントを決める基準
• 既存サイトをスマートフォン対応する方法
• 制作費用と制作会社へ依頼する判断基準

ホームページの新規制作・リニューアルを検討されていますか？

ファーストネットジャパンでは、1998年の創業から培ってきた知見・経験を基に、ホームページ作成・集客のお手伝いなど総合的にWebのお困りごとをサポートしています。
Webに関することならまずは当社にお問い合わせください。

実績豊富な
ホームページ制作会社なら
こちらをクリック

レスポンシブデザインとは

1つのURLとHTMLで画面幅に合わせて表示を変える仕組み

レスポンシブデザインは、同じWebページを閲覧していても、画面幅に応じてレイアウトや文字サイズ、画像サイズ、ナビゲーション、ボタン配置などを調整する設計手法です。

基本的には、ページの構造をHTMLで作り、CSSのメディアクエリで画面幅ごとの表示ルールを指定します。近年は、ブラウザ全体の幅だけでなく、部品を配置する親要素の幅に応じて表示を変えるコンテナークエリも活用されています。

PC用とスマートフォン用に別々のページを作る方式と比べ、URLとコンテンツを一本化しやすく、更新漏れや管理負担を抑えやすいことが特徴です。

モバイル対応には3つの方式がある

Webサイトをスマートフォンへ対応させる方法は、レスポンシブデザインだけではありません。主な方式は次の3つです。

一般的な企業サイトやサービスサイトでは、管理しやすさと将来の改修を考慮し、レスポンシブデザインを採用するケースが多くなっています。ただし、レスポンシブ対応にしただけで検索順位が上がるわけではありません。モバイル版のコンテンツ、表示速度、操作性、内部リンク、フォームの使いやすさまで整えることが重要です。

レスポンシブデザインは古い？2026年も基本だが実装方法は進化している

「レスポンシブデザインは古いのではないか」と検索されることがありますが、画面や表示領域に応じてWebページを最適化する考え方は、現在もホームページ制作の基本です。

ただし、以前のように「スマートフォンは767px以下、PCは768px以上」と端末幅だけで機械的に分ける設計から、次の技術を組み合わせた柔軟な設計へ変化しています。

• Flexboxによる横並びと折り返し
• CSS Gridによる可変グリッド
• rem・vw・clamp関数などの可変単位
• 画像のsrcset・picture要素による出し分け
• コンテナークエリによる部品単位の調整

古いのはレスポンシブデザインそのものではなく、特定の端末だけを前提に固定値を並べる設計です。現在は、端末名ではなく「コンテンツが読みにくくなる幅」「ボタンが押しにくくなる幅」「表が崩れる幅」を基準に調整します。

レスポンシブデザインの作り方｜6つの実装手順

STEP1：目的・ユーザー・閲覧デバイスを整理する

最初に、ホームページの目的と主要ユーザーを整理します。BtoBサイトではPCから比較検討されるケースが多く、店舗・医療・採用・生活者向けサービスではスマートフォン利用が多くなる傾向があります。

ただし、PC中心かスマートフォン中心かを決めるだけでは不十分です。問い合わせ、資料請求、電話、予約、商品購入など、ユーザーにどの行動を取ってほしいかまで明確にします。

STEP2：コンテンツの優先順位を決める

スマートフォンでは一度に表示できる情報量が限られます。そのため、PC版の情報を単純に縦へ並べるのではなく、ユーザーが最初に知りたい内容から順番を決めます。

たとえばサービスサイトでは、主な課題、提供価値、費用、実績、問い合わせ導線を上部へ配置します。会社案内や詳細情報は後半に回し、重要なボタンがスクロールの途中でも見つかるように設計します。

STEP3：モバイルファーストでワイヤーフレームを作る

モバイルファーストとは、スマートフォンの狭い画面を基準に構成を考え、画面が広くなるにつれて情報や余白を追加する設計方法です。

情報を絞り込んでからPCへ展開できるため、スマートフォンでの情報過多や、重要な導線が下へ埋もれる問題を防ぎやすくなります。ただし、PC利用が多いBtoBサイトでは、比較表や仕様情報が見やすいPC表示も同時に検証します。

STEP4：HTML・CSSで基本設定を行う

レスポンシブデザインでは、viewport設定とCSSのメディアクエリが基本です。さらに、カードやサイドバーなど部品単位で最適化したい場合は、コンテナークエリを検討します。

CSSはページごとに場当たり的に追加せず、文字サイズ、余白、ボタン、カード、表、フォームなど共通部品のルールを決めておくと、修正しやすくなります。

STEP5：画像・表・フォームを個別に最適化する

レスポンシブ対応で崩れやすいのは、画像、横長の表、問い合わせフォーム、地図、動画、スライダーです。

• 画像は幅100％、高さ自動を基本にする
• 用途に応じてWebPやAVIFを使用する
• srcsetやpicture要素で適切な画像サイズを配信する
• 表は項目を減らす、カード化する、横スクロールを許可する
• フォームは入力欄を1列にし、入力補助を設定する
• 電話番号や問い合わせボタンは押しやすい大きさにする

表を無理に縮小すると文字が読めなくなります。スマートフォンでは情報をカード形式へ組み替える方法も含めて検討します。

STEP6：実機確認・表示速度改善・公開後計測を行う

公開前には、ブラウザの開発者ツールだけでなく、iPhone、Android、タブレット、PCなどの実機で確認します。OSやブラウザによって、フォント、フォーム、固定ボタン、スクロールの挙動が異なるためです。

表示速度は、LCP、INP、CLSなどのCore Web Vitalsを確認します。目安として、LCPは2.5秒以内、INPは200ミリ秒以内、CLSは0.1以下を意識します。公開後もアクセス解析や問い合わせデータを確認し、離脱が多い画面幅やページを改善します。

ブレイクポイントの決め方【2026年版】

ブレイクポイントとは、レイアウトを切り替える画面幅の境界です。次の数値は設計例であり、すべてのサイトに共通する標準値ではありません。

端末名ではなくコンテンツが崩れる場所で決める

ブレイクポイントは、特定機種の横幅に合わせるのではなく、次のような問題が発生する位置で設定します。

• ナビゲーションが2行になる
• 見出しが不自然に改行される
• カード内の文字が窮屈になる
• 表が読めなくなる
• 画像と文章のバランスが崩れる
• 問い合わせボタンが押しにくくなる

最初から多くのブレイクポイントを設定すると、CSSが複雑になり保守しにくくなります。まず2〜4段階で設計し、実機確認で必要な箇所だけ追加する方法が実務的です。

コンテナークエリで部品単位に調整する

コンテナークエリは、ブラウザ全体の幅ではなく、部品が置かれている領域の幅に応じて表示を変える方法です。

同じカード部品でも、メインカラムでは横並び、サイドバーでは縦並びにするといった調整ができます。ページ全体のブレイクポイントを増やさず、再利用できる部品を作りやすい点がメリットです。

レスポンシブデザイン実装のコツ7つ

コツ1：横スクロールの原因を要素ごとに確認する

横スクロールは、固定幅の画像、長いURL、表、iframe、position指定、余白計算の誤りなどで発生します。ページ全体にoverflowを指定して隠すだけでは根本解決にならないため、はみ出している要素を特定して修正します。

コツ2：文字サイズを画面幅だけで極端に変えない

本文はスマートフォンで16px前後を基準とし、行間は1.7程度を目安にします。見出しはclamp関数などを使い、画面幅に応じて滑らかに変化させる方法もあります。

文字を小さくして情報を詰め込むのではなく、文章を分ける、余白を取る、情報を折りたたむなど、読みやすさを優先します。

コツ3：ボタンとリンクの押しやすさを確保する

スマートフォンでは指で操作するため、ボタンやリンクのタップ領域を44〜48px程度確保し、隣接する要素との間隔を空けます。

問い合わせ、電話、資料請求、予約など重要な導線は、画面下部への固定表示も有効です。ただし、本文を隠すほど大きな固定ボタンは避けます。

コツ4：PCとスマートフォンで情報を削りすぎない

スマートフォン表示で重要な本文を非表示にすると、ユーザーが必要な情報を得られず、検索エンジンからも内容の差が大きいページと判断される可能性があります。

情報を削除するより、見出しの整理、アコーディオン、カード化、優先順位の変更などで読みやすくします。

コツ5：画像を画面サイズに合わせて配信する

PC用の大きな画像をスマートフォンでも読み込むと、表示速度が低下します。画像形式の最適化に加え、表示領域に適したサイズを配信し、ファーストビュー以外の画像には遅延読み込みを設定します。

コツ6：表とフォームはスマートフォン専用の見せ方を用意する

料金表や比較表は、列数が多いほどスマートフォンで読みにくくなります。重要項目だけを残す、カード形式へ変更する、横スクロールを明示するなど、表ごとに対応方法を決めます。

フォームは入力欄を縦一列にし、郵便番号、電話番号、メールアドレスなどに適切な入力形式を設定します。エラーは入力欄の近くに表示し、修正箇所がすぐ分かるようにします。

コツ7：公開後も画面幅別に検証する

公開時に問題がなくても、記事追加、プラグイン更新、バナー差し替え、フォーム変更によって表示が崩れることがあります。

アクセス解析でデバイス別の離脱率やCVRを確認し、主要ページを定期的に実機チェックします。更新担当者向けに、画像サイズや表の作り方のルールを用意すると再発防止につながります。

レスポンシブデザインのメリットとデメリット

SEO面のメリットは「管理しやすさ」にある

レスポンシブデザインは、同じURLでPCとスマートフォンへ情報を提供できるため、内部リンク、被リンク、canonical、リダイレクトなどの管理を一本化しやすくなります。

ただし、レスポンシブ対応そのものが検索順位を直接引き上げるわけではありません。スマートフォンで本文が欠けていないか、表示速度が遅くないか、操作しにくくないかを含めて評価します。

初期費用より公開後の運用コストで判断する

レスポンシブデザインは複数画面の設計とテストが必要なため、初期工数が増えます。一方、PC版とスマートフォン版を別々に管理する方式より、公開後の更新や改善を一本化しやすくなります。

制作費だけでなく、更新担当者の工数、保守、表示確認、将来のリニューアルまで含めて判断することが重要です。

既存サイトをレスポンシブ化する3つの方法

CSS修正で対応しやすいサイト

• HTMLとCSSが分離されている
• テンプレート構造が統一されている
• 固定幅の要素が少ない
• WordPressテーマやCMSが継続利用できる
• ページごとの独自レイアウトが少ない

全面リニューアルを検討した方がよいサイト

• tableタグをページレイアウトに使用している
• HTML内へ大量のスタイルを直接記述している
• PC版とスマートフォン版でURLが分かれている
• 古いJavaScriptや終了した技術に依存している
• 表示速度、導線、コンテンツ、CMSにも問題がある
• レスポンシブ化の改修費が新規制作費に近い

既存デザインを残すことにこだわると、古いコードへ修正を重ねるだけになり、保守性が悪化することがあります。現状調査後に「部分改修」と「全面リニューアル」の両方を比較することが重要です。

ホームページの新規制作・リニューアルを検討されていますか？

ファーストネットジャパンでは、1998年の創業から培ってきた知見・経験を基に、ホームページ作成・集客のお手伝いなど総合的にWebのお困りごとをサポートしています。
Webに関することならまずは当社にお問い合わせください。

実績豊富な
ホームページ制作会社なら
こちらをクリック

レスポンシブデザインの費用相場

新規ホームページ制作の費用

新規制作では、レスポンシブ対応を基本費用に含める制作会社が一般的です。ただし、複数画面のデザインカンプ、複雑なアニメーション、大量の比較表、EC機能、会員機能、外部システム連携などがある場合は工数が増えます。

既存サイトをレスポンシブ化する費用

上記は目安であり、案件規模や要件によって変動します。特に、ページ数だけでなく、テンプレート数、フォーム数、表やシステム画面の数、CMS、既存コードの品質、対応ブラウザ、実機テスト範囲が費用へ影響します。

見積もりで確認すべき項目

• 対象ページと対象テンプレート
• PC・スマートフォン・タブレットのデザイン範囲
• フォーム、表、地図、動画、スライダーの対応
• WordPressやCMSの修正範囲
• 実機テストを行う端末とブラウザ
• 表示速度改善を含むか
• 公開後の不具合修正期間
• 保守・更新サポートの有無

レスポンシブ対応を制作会社へ依頼する判断基準

自社で対応できるのは、HTML・CSSの構造が分かり、ステージング環境と複数端末で検証できる場合です。次の条件に当てはまる場合は、制作会社へ依頼した方が安全です。

• 既存コードの構造が分からない
• WordPressテーマやプラグインに独自改修がある
• 問い合わせフォームや会員機能がある
• URL変更やリダイレクトが発生する
• 検索流入を落とさずにリニューアルしたい
• 表示速度やCore Web Vitalsも改善したい
• 公開後の保守担当者がいない

制作会社へ確認する7項目

1. レスポンシブサイトの制作・改修実績
2. 現状調査と要件定義の範囲
3. デザインカンプを作成する画面幅
4. 実機テストの端末とブラウザ
5. URL維持とリダイレクト設計
6. 表示速度改善とアクセス解析
7. 公開後の保守・改善体制

レスポンシブ化と問い合わせ導線を同時に改善する

スマートフォンで見やすくしても、サービス内容が分かりにくい、問い合わせボタンが見つからない、フォーム項目が多いといった問題が残れば、成果にはつながりません。

レスポンシブ化の際は、電話・問い合わせ・資料請求の導線、フォーム入力項目、ファーストビュー、実績、料金、よくある質問まで見直します。ファーストネットジャパンでは、訪問者の質問に応じてサービス案内や問い合わせを支援するAI接客機能も、案件規模や要件に応じて提案しています。

ファーストネットジャパンのレスポンシブ対応

ファーストネットジャパンは、1998年創業・大阪市中央区に拠点を置くWeb制作会社です。4,000件超の制作実績をもとに、企画・設計・デザイン・コーディング・WordPress構築から公開後の運用改善まで一貫してサポートします。

• 新規ホームページのレスポンシブ制作
• 既存サイトのCSS・HTML改修
• WordPressテーマの構築・改修
• ホームページリニューアル
• 表示速度とCore Web Vitalsの改善
• フォーム・問い合わせ導線の改善
• 公開後の保守・更新サポート

「スマートフォンで表示が崩れている」「部分改修とリニューアルのどちらがよいか分からない」「WordPressも含めて見直したい」という段階でも構いません。まずはお気軽にご相談ください。

会社概要

【関連記事】
ホームページ制作費用の相場と内訳
ホームページリニューアルの手順と費用相場
PageSpeed Insightsの見方と改善方法

よくある質問

Q. レスポンシブデザインとは何ですか？

レスポンシブデザインとは、PC・スマートフォン・タブレットなどの画面幅に応じて、文字・画像・メニュー・ボタンなどの配置を自動調整するWebデザイン手法です。基本的には1つのURLとHTMLを使用し、CSSのメディアクエリやコンテナークエリで表示を切り替えます。

Q. レスポンシブデザインのブレイクポイントは何pxが最適ですか？

すべてのサイトに共通する最適値はありません。599px以下、600〜767px、768〜1023px、1024px以上などは設計例として使えますが、実際には文章・画像・表・ナビゲーションが崩れ始める幅を基準に決めます。必要以上に細かく区切らず、主要な2〜4段階から検証する方法が実務的です。

Q. レスポンシブデザインは古い技術ですか？

レスポンシブデザインの考え方は現在もWeb制作の基本です。ただし、端末ごとの固定幅だけで設計する方法から、Flexbox・CSS Grid・可変単位・コンテナークエリを組み合わせ、コンテンツに応じて調整する方法へ進化しています。古いのはレスポンシブデザインそのものではなく、特定端末だけを前提にした決め打ちの設計です。

Q. レスポンシブ対応の費用相場はいくらですか？

既存サイトの軽微なCSS修正は10万〜30万円程度、一部HTMLを含む改修は30万〜80万円程度、WordPressテーマの変更や大幅な調整は50万〜150万円程度が目安です。サイト全体をリニューアルする場合は100万円以上になることがあります。ページ数、既存コード、デザイン、CMS、テスト範囲によって費用は変動します。

Q. WordPressサイトをレスポンシブ化する方法は？

現在のテーマがレスポンシブ対応かを確認し、対応済みであれば子テーマや追加CSSで崩れている箇所を修正します。非対応テーマの場合は、テーマ変更またはオリジナルテーマの改修を検討します。テーマ変更ではデザインやプラグインの動作が変わる可能性があるため、バックアップとステージング環境での検証が必要です。

Q. 既存サイトのレスポンシブ化にはどのくらいの期間がかかりますか？

小規模なCSS修正であれば1〜3週間、一部HTMLやテンプレートを含む改修は1〜2か月、サイト全体のリニューアルは3〜6か月程度が目安です。調査対象ページ数、CMS、フォーム、表、アニメーション、実機テストの範囲によって期間は変動します。

まとめ｜レスポンシブデザインは見た目だけでなく運用と成果まで設計する

レスポンシブデザインとは、画面幅に合わせてレイアウトを変えるだけの技術ではありません。情報の優先順位、文字・画像・表・フォームの見せ方、表示速度、更新しやすさ、問い合わせ導線まで含めて設計することが重要です。

実装時は、次の3点を優先してください。

• コンテンツが崩れる幅を基準にブレイクポイントを決める
• 画像・表・フォーム・ボタンを個別に最適化する
• 公開後も端末別の離脱率や問い合わせ状況を確認する

既存サイトでは、CSS修正で対応できる場合と、全面リニューアルした方が費用対効果の高い場合があります。現状のコード、CMS、ページ数、表示速度、更新体制を確認したうえで、部分改修とリニューアルを比較することが失敗を防ぐポイントです。

ファーストネットジャパンは、1998年創業・4,000件超の制作実績をもとに、レスポンシブ対応からホームページ全体の改善、WordPress構築、公開後の保守まで一貫して支援します。まだ要件が固まっていない段階でも構いません。まずはお気軽にご相談ください。

ホームページの新規制作・リニューアルを検討されていますか？

ファーストネットジャパンでは、1998年の創業から培ってきた知見・経験を基に、ホームページ作成・集客のお手伝いなど総合的にWebのお困りごとをサポートしています。
Webに関することならまずは当社にお問い合わせください。

実績豊富な
ホームページ制作会社なら
こちらをクリック

• #デザイン
• #マークアップ

この記事の監修者

齊藤 真也

株式会社ファーストネットジャパン 代表取締役

1998 年創業時からアプリ開発・Web マーケティング・フルリモート SES・ホームページ制作・翻訳・グラフィックデザインなど幅広い IT／クリエイティブ領域を手がけ、4,000 件超のプロジェクトを統括。セキュリティ対策・SEO・システム開発から中小企業のWeb戦略支援まで、技術とデザインの両面でクライアントの課題解決を27年以上にわたり支援してきた。
大阪本社・東京オフィスの2拠点体制で、全国の企業のデジタル化をサポート。
高松市出身。座右の銘は「圧倒的努力」。