レスポンシブ対応の平均費用と料金相場【2022年完全版】

HTMLファイルをCSS（スタイルシート）によって制御することで、スマートフォンやタブレットの画面サイズに合わせて表示を最適化するレスポンシブデザイン。

ネットユーザーの80％以上がスマートフォンを利用する今、自社ホームページを持つ多くの企業がレスポンシブ対応（レスポンシブ化）に取り組んでいます。
1つのHTMLファイルで複数の端末に表示できるため、修正・更新作業の手間が省けるうえ、Googleも推奨しており、スマホからの検索順位アップが見込めるなど、運用面のメリットも少なくありません。

そこでこの記事では、レスポンシブ対応にかかる費用の相場や依頼先を選ぶ際のポイントについて詳しくご紹介していきます。自社ホームページのレスポンシブ対応がまだの方、これからスマホ対応のホームページを制作したい方はぜひ参考にしてみてください。

目次

• 1.レスポンシブ対応の費用の算出方法
• 2.ホームページの種類・規模・制作方法に見る費用の相場
• 3.なぜ価格が違う？価格差の出る理由
• 4.実際にレスポンシブ対応の料金表を調べてみた
• 5.失敗しないホームページ制作会社選びのためには

1.レスポンシブ対応の費用の算出方法

レスポンシブ対応にかかる費用のメインとなるのはプログラマーの人件費。基本的に対応するページの数に応じて料金も増していきます。
また、レスポンシブ仕様のホームページを新規制作する場合は、企画・ディレクション費、デザイン費なども加わります。

ちなみに、前述のとおり多くの利点をもたらすレスポンシブデザインですが、少なからずデメリットもあるので注意しましょう。

その1つがホームページの表示スピード。レスポンシブデザインは単一のHTMLファイルで管理できる反面、ワンソースにPC・スマートフォン・タブレット用のスクリプト（記述）を盛り込むため、読み込みに時間がかかり、ページの表示が遅れることがあります。

また、もともとPC用に作成されたwebサイトに容量の大きい画像が含まれていると、やはりスマートフォンなどで表示が遅くなることがあるようです。

ネットユーザーの8割以上がスマートフォンを利用するといわれる今、こうしたデメリットを考慮してレスポンシブ仕様を避け、スマートフォン専用のwebサイトを制作する企業も増えてきました。レスポンシブ対応を依頼する際は運用にも目を向け、慎重に検討しましょう。

レスポンシブ対応の費用の相場

ここからはより具体的に、費目、作業内容別の費用相場についてご紹介していきます。

既存ホームページのレスポンシブ化

既存のホームページにレスポンシブ対応を施す場合、ソースコードに「viewport（ビューポート）」というmetaタグを記述し、さらに対応させたい端末それぞれのCSSを用意します。

これによってユーザーの端末ディスプレイの横幅サイズを読み込んで表示サイズを一致させ、端末によって画像・テキストの表示方法を変えたり、表示/非表示を指定したりすることが可能になります。

費用の相場としては、下層ページのレスポンシブ対応が1ページあたり1万円～1万5,000円前後、トップページが2万円～3万5,000円前後。近年はレスポンシブデザインが一般化して、以前よりは相場が下がりつつあるようです。
ただし、ブレイクポイント（※）を増やすと料金が増すこともあります。

画像調整

レスポンシブ対応をしても、スマートフォンの小さなディスプレイで横幅が極端に大きい画像を表示すると、画像が画面から飛び出したり、縦横のバランスが崩れて歪んでしまったりすることがあります。

これを防ぐためにはCSSの記述を変更して調整する、もしくは画像自体のサイズを変更する必要があり、画像調整の場合、制作会社によって追加費用がかかります。

一般的な費用の目安としては、トップページのメイン画像などの大サイズが1点あたり4,000円～6,000円前後、商品画像などの小サイズが1点あたり2,000円～3,000円前後。

画像の点数が多いホームページだと思わぬ高額になることもあるので、レスポンシブ対応の費用と別に画像調整の費用が発生するのか、事前にきちんと詰めておきましょう。

レスポンシブサイトの新規制作

レスポンシブ仕様のwebサイトを新規制作する場合も、基本的な工程は通常のホームページと変わりません。
料金については1ページあたりの単価を設定している制作会社は少なく、コーディング費に加算されるのが一般的です。

目安としては、PC単体用（あるいはスマホ単体用）のサイトのコーディング費用×1.5倍～2倍前後。

たとえば、全10ページのホームページでコーディング費用が1ページ1万円なら、レスポンシブ対応の費用としてトータル15万円～20万円前後がかかります。そうした一方、最近ではレスポンシブデザインを標準仕様とし、対応費を個別に設定していない制作会社も増えてきました。

※ブレイクポイントとは
CSSの適用スタイルを区切る位置のこと。たとえば、ディスプレイの横幅720px以上/720px未満で適用スタイルを分けるなら、境目となる720pxがブレイクポイントです。ブレイクポイントが多いほど画面サイズに応じてより細かな出し分けができます。

見落としがちな費用にも注意

前述のとおり、画像調整を行なう場合は、オプション料金が発生することがあるので注意しましょう。
また、レスポンシブ対応にともない、動的コンテンツ（スライドショーなど）を制御しているJavaScriptに編集を加えると、制作会社によっては別途料金がかかることもあるようです。

2.ホームページの種類・規模・制作方法に見る費用の相場

ホームページの種類や規模、制作方法によって、レスポンシブ対応の費用は具体的にどう変わってくるのでしょうか？

コーポレートサイト（全15ページ前後）のレスポンシブ化

会社概要や事業内容が記載された一般的なコーポレートサイト（会社案内サイト）であれば、10ページ～15ページ前後に収まることがほとんど。既存ホームページのレスポンシブ化の費用はシンプルに単価×ページ数で決まるため、それほど費用がかさむことはありません。

たとえば全15ページのコーポレートサイトにレスポンシブ対応を施す場合、一般的な費用の相場は16万円～24万円前後（内訳：トップページ：2万円～3万5,000円、下層ページ：1万円～1万5,000円）前後となります。

さらにコストを下げたい場合は、トップページや会社概要など、アクセス数の多いページに限ってレスポンシブ化するのも1つの方法です。

サービスサイト（全20ページ前後・レスポンシブ仕様）の新規制作

レスポンシブ仕様のホームページを新規制作する場合、レスポンシブ対応の費用に加えて、企画・ディレクション費、コーディング費などがかかります。

仮に全20ページのサービスサイトをレスポンシブデザインでゼロから構築する場合、一般的な相場は60万円～75万円（内訳：企画・ディレクション費：15万円～20万円前後、コーディング・デザイン費：30万円前後、レスポンシブ対応費：15万円～24万円）前後です。

3.なぜ価格が違う？価格差の出る理由

レスポンシブデザインが一般的になった今、制作会社ごとの料金差は小さくなってきているものの、一部の会社は「管理費」、「メンテナンス費」などの名目で費用を上乗せしようとするケースがあるようなので注意しましょう。

そもそもレスポンシブ仕様そのものに管理費やメンテナンス費はかかりません。次世代のスマートフォン端末に対応するためにCSSを追加したりすることはありますが、その際にかかるのは、あくまでプログラマーの作業費（＝人件費）です。

一概には言えないものの、管理費やメンテナンス費を設けている会社は何らかの思惑（「毎月顧客から一定の売上をあげたい」など）があると考えられるので、避けた方がいいでしょう。

できるだけ費用を抑えるためには

予算が限られる場合、できるだけ費用を抑えたい場合は、アクセス数が多いページ（トップページなど）に限定してレスポンシブ対応するのがおすすめです。

あるいは、「shutto」などのスマホ変換サービスを利用するのも1つ。webサイトの構成などによって表示崩れとなる可能性はゼロではありませんが、安価なうえ、ドラッグ＆ドロップ操作で手軽にスマホ対応サイトを形にできます。

4.実際にレスポンシブ対応の料金表を調べてみた

この記事を書くにあたっていくつかのwebサイトをチェックしたところ、レスポンシブ対応の料金を公開しているホームページ制作会社を見つけました。
参考までにご紹介します。

5.失敗しないホームページ制作会社選びのためには

最後にホームページ制作会社選びで失敗しないためのポイントについてご紹介します。
レスポンシブ対応の依頼先を決める際は、どんな点に気をつけるべきなのでしょうか？

制作実績に着目する

レスポンシブ対応はCSSの知識さえあればできると思われがちですが、見やすく使いやすいwebサイトに仕上げるためには、デザインやレイアウトのノウハウが欠かせません。

そういった意味では通常のホームページ制作と同様、実績はとても大切な要素です。制作会社各社のホームページをしっかりチェックし、レスポンシブサイトの制作実績が豊富な会社、レスポンシブ対応のBefore/Afterの事例などを載せている会社を選びましょう。

安さだけにとらわれないようにする

ホームページで不自然な格安料金をうたっている会社はのちのちオプション料金がかさむことがあるので注意しましょう。
また前述のとおり、実体のない管理費やメンテナンス費を設けている会社も避けることをおすすめします。

高望みしすぎない

レスポンシブ対応はすべての端末をカバーする万能の施策ではありません。端末の種類やwebサイトの構造によってはレスポンシブ化の過程でメニューやボタンの位置が変わったり、コンテンツのサイズが不自然に縮小されたりしまうこともあります。

そういった意味では、高望みしすぎない、完璧を求めないのも大事。「ここだけは必ず」という要件をきちんと伝えたうえで、制作会社側の説明・対応に特に不満がないのであれば、あとは予算との兼ね合いで決めるのも1つの手です。

今回はレスポンシブ対応の費用相場や内訳、依頼先を決める際の注意点などについてご紹介しました。
レスポンシブ対応を検討している方の参考になれば幸いです。

レスポンシブデザインに強いホームページ制作会社を知りたい方は、こちらをどうぞ！

なお、アイミツではレスポンシブ対応に関するご相談を無料で承っています。
web制作に精通したコンシェルジュがご予算にあわせて複数の制作会社をピックアップし、まとめて見積もりをとることも可能です。レスポンシブ対応やホームページ制作の依頼先を探している方はお気軽にご連絡ください。