レスポンシブ対応（スマホ対応）の費用相場は？ホームページの種類別に解説

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

レスポンシブ対応にかかる費用相場は下記のとおりです。

下記では費用相場や作業内容について具体的に解説します。

既存ページのレスポンシブ対応を行う場合

既存ページのレスポンシブ対応にかかる費用の目安は1ページあたり1万円〜3万円です。実際の費用は下記のような要素によって異なります。

たとえばコーポレートサイトのお問い合わせページのような簡潔なページであれば、1万円前後でレスポンシブ対応できるでしょう。

ただし、JavaScriptを実装している場合は別途料金が発生します。一度、制作会社に見積もりを出してもらうことをおすすめします。

画像をレスポンシブ対応を行う場合

画像のレスポンシブ対応にかかる費用の目安は1枚あたり2,000円〜6,000円です。ページのメインとなる大きい画像は費用が高くなり、ECサイトの商品画像のような小さく数が多い画像は費用が安く済みます。

画像の調整が必要なのは、ページ全体のレスポンシブ対応をしても画像がはみ出したり正しく表示されなかったりといった場合です。画像のCSSを編集する・画像自体のサイズを変更するといった方法で、画像がきちんと表示されるように修正しなくてはいけません。

画像のレスポンシブ対応では、「1ページあたり」ではなく「画像1枚あたり」の費用である点に注意しましょう。ECサイトのような多くの画像を使用しているホームページでは、1枚あたりの費用が安くても合計費用が予想以上に高くなってしまう可能性があります。

レスポンシブ対応の新規ページを作成する場合

レスポンシブ対応の新規ページを作成する費用の目安は、非レスポンシブ対応（パソコンもしくはスマートフォン専用）ページ作成費用の50%〜100%です。

パソコン専用ページの作成費用が、1ページあたり1万円だったとしましょう。この場合、レスポンシブ対応費用が5,000円〜1万円、合計の作成費用が1ページあたり1万5,000円〜2万円です。

作業内容は既存ページのレスポンシブ対応と大きく変わりません。

現在では、レスポンシブ対応およびその費用をデフォルトで組み込んでいる料金形態も一般的です。見積もりでは「レスポンシブ対応費」のような項目が設けられない場合もあるため、制作会社に対応可否を確認しましょう。

レスポンシブ対応にかかる費用の決まり方

レスポンシブ対応にかかる費用は、稼働したプログラマーの人件費で決まります。

一般に、レスポンシブ対応は高度な企画・設計が必要とされません。それでもプログラマーの人件費が高くなるのは、工数が大きい場合や、企画や設計といった単価の高い作業が多く発生する場合です。

レスポンシブ対応を依頼するとき、「管理費」「保守運用費」といった月額費用を含む年間契約を提案される場合がありますが、基本的にこれらの費用とレスポンシブ対応とは関係ありません。提案内容とかかる費用とを吟味し、必要だと感じた場合のみ提案を受け入れましょう。

実際に発注者がどのような見積もり依頼を出しているのか、レスポンシブWebデザインの制作案件一覧から確認できます。

レスポンシブ対応費用の具体例｜サイトの種類別に解説

下記のサイト種類別に、レスポンシブ対応にかかる費用の具体的なイメージを紹介します。

なお、ここで紹介するのはレスポンシブ対応ページを新規作成した場合の費用です。

コーポレートサイトのレスポンシブ対応費用

レスポンシブ対応のコーポレートサイトを新規作成する費用は、サイトの規模別に下記のとおりです。

費用はWeb制作会社の会社規模やサイトのクオリティなどによっても大きく異なります。

たとえば名刺代わりにするようなシンプルなサイトは作成費用が安く、集客のためのSEO対策から問い合わせの導線設計まで組み込んだ複雑なサイトは作成費用が高いです。

ECサイトのレスポンシブ対応費用

レスポンシブ対応のECサイトを新規作成する費用は、サイトの規模別に下記のとおりです。

ECサイトは複雑な機能が必要であり画像が多く使われるため、コーポレートサイトと比べて作成費用が高くなります。「SI Web Shopping」のようなECサイト構築パッケージや、「Shopify」のようなプラットフォームを利用すれば、ECサイトの開発・レスポンシブ対応費用を抑えることが可能です。

飲食店ホームページのレスポンシブ対応費用

レスポンシブ対応のECサイトを新規作成する費用は、サイトの規模別に下記のとおりです。

飲食店をはじめとした店舗ホームページでは、他のホームページと比べてデザインが重要視されます。デザインにこだわったり画像を多く使ったりといったホームページではレスポンシブ対応費用が高くなるでしょう。予約や営業日のカレンダー表示といった機能の有無も、費用が変わる要素の1つです。

LP（ランディングページ）のレスポンシブ対応費用

レスポンシブ対応のLPを新規作成する費用は、サイトの規模別に下記のとおりです。

テンプレートを利用した簡易的なLPであれば作成費用が安く、SEO対策やセールスライティングを施した本格的なLPであれば作成費用が高いです。

レスポンシブ対応費用を抑える4つの方法

レスポンシブ対応費用を抑える方法は上記4つです。既存ページと新規ページのどちらの場合にも有効な方法です。

レスポンシブ対応のページ数を減らす

依頼するページ数を減らすことでレスポンシブ対応費用を抑えられます。ページ数を減らすことで工数も減り、プログラマーの人件費が少なく済むためです。

ページ数を絞る場合、トップページやサービス紹介ページといった重要なページを優先しましょう。すでにサイトを公開していれば、ユーザー数が多いページから順にレスポンシブ対応させる方法がおすすめです。

ブレイクポイント数を減らす

ブレイクポイント数を減らすことも、レスポンシブ対応費用を抑える有効な方法の1つです。

ブレイクポイントが増えるほどデザインのパターンが増えるため、工数がかさみます。ブレイクポイントを減らしプログラマーの工数を少なくすることで、レスポンシブ対応費用を抑えられるのです。

GENERAL RESEARCHの調査によると、インターネット利用時にパソコンを使う人が72.8%、スマートフォンを使う人が66.2%、タブレットを使う人が18.0%です。

引用元：GENERAL RESEARCH『Google・Yahoo! 検索サイト利用はどちらが人気？　アンケート調査』

ブレイクポイントを減らす場合、タブレット用のデザインをなくしてパソコン用とスマートフォン用のみに絞るのが適していると言えます。

WordPressを利用する

WordPressを利用してホームページを制作することでレスポンシブ対応費用を抑えられます。WordPressにはレスポンシブ対応機能がデフォルトで搭載されていて、追加でのコーディングが必要ない場合が多いためです。

トップページとお問い合わせページのみの簡素なサイトであれば、WordPressを用いて自分で作ることも可能でしょう。制作会社に依頼する場合でも、WordPressを利用したサイト制作のほうが費用は抑えられます。

制作会社ではなくフリーランスに依頼する

レスポンシブ対応費用を抑える方法の4つ目は、制作会社ではなくフリーランスに依頼することです。一般的に、同じ依頼内容でも「大手制作会社＞中小制作会社＞フリーランス（個人）」の順で制作費用が安くなります。

ただしフリーランスに依頼する場合は「安かろう悪かろう」にならないよう注意が必要です。修正に対応してくれない、納品後に連絡が取れなくなるといった可能性があります。依頼前にホームページの実績や口コミを確認しましょう。

レスポンシブ対応の費用でよくある質問

最後に、レスポンシブ対応についてのよくある質問にお答えします。

レスポンシブ対応はなぜ必要？

レスポンシブ対応が必要なのは、機会損失を防ぐためです。

パソコン専用のWebサイトをスマートフォンユーザーが閲覧すると、文字が小さい・画像が横幅に収まっていないといった状況が発生し、ストレスを感じます。使い勝手の悪さでWebサイトを離脱したユーザーが見込み客であれば、機会損失となるでしょう。

Google検索においてスマートフォンからの検索数がパソコンからの検索数を上回っている状況で、スマートフォンに対応していないWebサイトは時代遅れと言っても過言ではありません。

参考：Google Inside Adwords「Building for the next moment」

レスポンシブデザインの仕組みとは？

レスポンシブデザインではHTML・CSSを用いてユーザーが利用しているデバイスの横幅を読み込み、その横幅に合わせてコンテンツの配置や表示・非表示、文字サイズなどを変える設定を行います。

横幅960px以上ではパソコン用のデザイン、横幅520px以上960px未満ではタブレット用のデザイン、横幅520px未満ではスマートフォン用のデザイン、といった分け方が一般的です。

レスポンシブデザインの実装には、デバイスごとにURLを用意する方法と、同一のURLを複数のデバイスに対応させる方法の2つがあります。現在、一般的なのは後者の同一URLで複数のデバイスに対応させる方法です。

デバイスの横幅に合わせたデザインをCSSで記述することで実装します。

レスポンシブデザインとは？作成方法とおすすめのテンプレートを紹介！

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

レスポンシブデザインのメリットは下記の3つです。

検索順位の向上とサイト運営の手間削減は、デバイスごとにURLを用意する方法から、同じURLで複数のデバイスに対応させる方法に変更した場合のメリットです。URLの正規化によってGoogleのサイト評価が高まるだけでなく、サイトを更新する際に複数のHTMLを編集しなくてよくなります。

ユーザビリティや検索順位の向上は売上増加に、運営の簡略化は経費削減につながり、どれも会社の利益拡大に影響する要素です。

まとめ｜レスポンシブ対応の費用相場は1ページあたり1万円〜3万円

この記事ではホームページのレスポンシブ対応にかかる費用について解説しました。

• 既存ページのレスポンシブ対応費用：1ページあたり1万円〜3万円
• 画像のレスポンシブ対応費用：1枚あたり2,000円〜6,000円
• レスポンシブ対応の新規ページ作成費用：非レスポンシブ対応のページ作成費用の50%〜100%

ホームページを効果的に運用するために、レスポンシブ対応は欠かせません。ページ数やブレイクポイント数を減らす、WordPressを利用するといった方法で費用を抑えつつ、レスポンシブ対応を実装して売上アップに貢献できるホームページを作りましょう。

監修者のコメント

株式会社KOKOROMI

代表取締役　高井正人

お客様の強みを引き出す集客に強いホームページやECサイトを制作。SEO対策からSNS、広告運用など、成果を確実に出すための継続的なWEBマーケティング・運用サポートも行い、クライアントのWEBを使った事業展開を手厚くサポート。経済産業省認定の情報処理支援機関として、よりお客様に沿った形でのIT導入も行っている。

詳しく見る

ホームページのレスポンシブ対応は、Googleの評価基準がモバイルファーストインデックスに移行した現在では、SEO対策として必須となります。（「モバイルファーストインデックス」とは、PCサイトではなくスマートフォンサイトを基準に順位決定やWebサイトの評価を行う仕組みのことです）

また、実際にホームページに訪れるユーザーもPCよりスマートフォンが多いので、ユーザーの満足度向上のためにもレスポンシブ対応をしましょう。

外注するときの料金相場としては、本文中にもあるとおり1ページ1万円から2万円程度を見込んでおけば良いですが、画像を新たに切り出す必要があったり、元のサイトのレイアウト、HTML、CSSコードの複雑性により、追加の費用がかかる場合もあるかもしれません。見積もりをもらった際には、作業内容についてもしっかりと説明を受けるようにしましょう。

執筆者

比較ビズ編集部では、BtoB向けに様々な業種の発注に役立つ情報を発信。「発注先の選び方を知りたい」「外注する際の費用相場を知りたい」といった疑問を編集部のメンバーが分かりやすく解説しています。