Webサイトへは、多くのユーザーがさまざまな端末(パソコン・スマホ・タブレットなど)からアクセスするため、ユーザビリティの向上・SEO対策などの観点からレスポンシブ対応を行うことが必要です。
今回は、レスポンシブ対応の概要や外注時の費用相場、費用を抑えるポイント、おすすめの外注先などを紹介します。
目次
レスポンシブ対応とは?
まずは、レスポンシブ対応とはどのようなものか紹介します。
レスポンシブの仕組み
レスポンシブとは、CSSを編集・追加したり、HTMLのmetaタグを変更したりすることで、画面の横幅に合わせてレイアウトを変える仕組みです。レスポンシブ対応は、端末に応じてWebページの横幅や倍率、文字サイズなどの調整を行い、Webサイトを見やすく表示する目的で行います。
横型の画面(パソコンなど)と、縦型の画面(スマホなど)では縦横の比率が異なるため、レスポンシブ未対応のWebサイトを閲覧すると文章や画像がズレたり、不自然なレイアウトで表示されたりするケースがあります。
スマホやタブレットの普及によってWebサイトへのアクセスに使う端末が多様化していることもあり、レスポンシブ対応の必要性はいっそう高まっています。
スマホ対応との違い
上述の通り、端末の種類に応じてWebサイトを見やすい表示形式にするために、縦横比や倍率、レイアウトを調整するのが「レスポンシブ対応」です。
一方、「スマホ対応」とは、スマホでWebサイトを閲覧する際に見やすく表示させるために行う施策のことを指します。すなわち、「レスポンシブ対応」には「スマホ対応」が含まれていることが多く、スマホのみに特化したレイアウト対応を「スマホ対応」と呼ぶケースが一般的です。
レスポンシブ対応の費用相場
レスポンシブ対応を外注する場合、Webサイトのページ数や種類によって費用相場は異なります。
シンプルな構成のWebサイトへレスポンシブ対応を行う場合や、既存サイトにレスポンシブ対応を施す場合は比較的費用を抑えることができますが、構成が複雑なWebサイトの新規作成とレスポンシブ対応を同時に依頼する場合などは高額な費用が見込まれます。
【レスポンシブ対応を外注する際の費用相場】
・10ページ以内の静的Webサイト:20万円~(※1)
・20~30ページ程度の動的Webサイト:80万円~(※2)
・100ページ以内の複雑なWebサイト:200万円~(※3)
(※1)静的Webサイトとは、アクセスするユーザー・時間・場所などにかかわらず常に同じ情報を表示するサイトのことです。一方、ユーザー・時間・場所などに応じて異なるHTMLを生成し、それぞれに合った情報を自動表示するのが「動的Webサイト」です。
(※2)WordPressなどのCMSを使用したサイトの場合は、プラグインを追加するだけでレスポンシブ対応になるため、相場よりもコストを抑えられることがあります。
(※3)EC機能を入れていたり、データベースと連携していたり、独自の機能を搭載しているWebサイトはレスポンシブ対応が必要な箇所も多いため費用が高額になります。
レスポンシブ対応の相場はどう決まる?
次に、レスポンシブ対応の料金の決まり方を紹介します。
ページ数
費用相場が決まる主なポイントは、Webサイトのページ数です。レスポンシブ対応においてはページ数が多いほど調整する箇所も増えるため、トータル費用がアップする傾向にあります。
外注先によっては、Webサイトのページ数が多いほど1ページあたりの単価を割引してくれるケースも見られます。
【費用の目安】
・既存サイトのレスポンシブ対応:1万円~3万円(1ページあたり)
・新規サイトの作成+レスポンシブ対応:1万5,000円~6万円(1ページあたり)
画像数
レスポンシブ対応を依頼する際は、文字サイズやレイアウトの変更だけでなく、各端末のサイズや縮尺に合わせて、画像の縦横比などを調整する作業も必要です。
【費用の目安】
・画像の調整:2,000円~6,000円(1枚あたり)
画像を多く掲載しているサイト(飲食店のホームページ・ECサイトなど)ほどレスポンシブ対応費用が高額になりやすいため、依頼時には注意しましょう。
ブレイクポイントの数
ブレイクポイントとは、レスポンシブ対応を行う際、パソコン・スマホ・タブレットなどの端末ごとにレイアウトが切り替わるポイントのことです。基本的に、各デバイスの横幅(スマホなら横幅600px以下など)に合わせてブレイクポイントを設定します。
パソコン・スマホ・タブレットの全てに対応させるなど、ブレイクポイントの数が多いほど調整が増える(CSSを追加する必要がある)ため、費用が高額になります。
【費用の目安】
・ブレイクポイント1つあたり:5,000円前後
サイトの種類
レスポンシブ対応の費用は、Webサイトの種類にも左右されます。Webサイトの種類によってページ数や構造が異なることから、レスポンシブ対応の作業対象箇所や難易度も変わってくるためです。
規模の大きなWebサイト・構造が複雑なWebサイトの新規作成やレスポンシブ対応を行いたい場合は、チーム編成・ディレクション・サイトデザインなどの関連作業も合わせて依頼するケースが多いため、まとまった予算を確保しておく必要があります。
【費用の目安】
・コーポレートサイト:20万円前後(10ページほどの場合)
・店舗のホームページ:30万円前後(10ページほどの場合)
・ECサイト:20万円前後(商品数20点ほどの場合)
・LP(ランディングページ):5~20万円(1ページあたり)
※新規のWebサイト作成+レスポンシブ対応を依頼する場合は、上記の費用の1.5~2倍ほどが相場になります。
レスポンシブ対応の費用を抑えるポイント
続いて、レスポンシブ対応の費用を抑えるポイントを紹介します。
アクセス数の多いページのみ対象とする
Webサイトの全ページをレスポンシブ対応にすると、ブレイクポイント数や画像数が多くなり、費用が高額になります。そのため、Webサイトのトップページやランディングページのようにアクセス数の多いページのみを対象とすることで、レスポンシブ対応費用を抑えることができます。
ブレイクポイント数を調整する
PC用のWebサイトへレスポンシブ対応を行う際、通常であればスマホ用とタブレット用のブレイクポイントを用意します。しかし、スマホ対応のみを行うことにすればブレイクポイントは半減するため、コストをカットすることができます。
レスポンシブ対応を検討しているWebサイトの閲覧状況を分析し、タブレットからアクセスするユーザーが少ないようであれば、スマホ対応に絞ってブレイクポイント数を減らすのも一つの方法です。
CMSへの移行を検討する
WordPressをはじめとするCMSへWebサイトを移行すれば、レスポンシブ関連のプラグインをインストール・有効化することでレスポンシブ対応ができます。
HTMLで制作した簡易的なサイトであればコピー&ペーストで移行することもできますが、移行に合わせて修正を行う場合・Webサイトの規模が大きい場合などについてはマークアップ言語の知識が必要になります。
CMSに詳しいリソースが不足している場合、移行自体を外注することもできます。
レスポンシブ対応におすすめの外注先
ここでは、レスポンシブ対応におすすめの外注先について、それぞれの特徴や費用の目安などを紹介します。
ビズサイ
株式会社アクセスジャパンが運営する「ビズサイ」は、WebサイトのレスポンシブデザインやSEO対策、セキュリティ設定などを請け負うサービスです。
4通りの料金プラン(シンプル・スタンダード・プレミアム・EC)があり、どのプランにもWebサイト制作とレスポンシブ対応が含まれています。
プランによってWebサイトのページ数や画像数が異なるため、制作・レスポンシブ対応を依頼したいサイトの規模に応じて検討すると良いでしょう。料金シミュレータや、プランごとのデモサイトも用意されているため、目安にすることもできます。
【プラン別料金(すべて税込)】
・シンプルプラン(1ページ・3画像が含まれる簡易的なWebサイト):月額5,478円~
・スタンダードプラン(6ページ・7画像が含まれるデザイン重視のWebサイト):月額8,778円~
・プレミアムプラン(7ページ・10画像が含まれるカスタマイズありの本格的Webサイト):月額10,978円~
・ECプラン(5ページ・10画像が含まれる法人向けのECサイトなど):月額14,278円~
※上記は月額基本料金であり、ドロップダウンメニュー・カレンダー機能・セクションなどの追加、SNS連携、OGD画像の設定、メールサーバー契約などにはすべてオプション料金・初回手数料などが必要です。また、上記のページ数・画像数を超えると1ページあたり10,978円、画像5枚あたり3,278円などの追加料金がかかります。
株式会社RGBデザイン
株式会社RGBデザインは、Webサイトの制作やカスタマイズ、レスポンシブ対応などを手掛ける会社です。新規のWebサイト制作とレスポンシブ対応を同時に依頼することもできますが、既存サイトのデザイン・構成を生かしてレスポンシブ対応のみ依頼することも可能です。
JavaScript・CGIなどを使用したWebサイトのレスポンシブ対応については通常プランの対応範囲外となるため、別途見積もりが必要です。
【レスポンシブ対応費用の目安】
・基本コーディング費:5万円〜
・トップページ:3万円〜
・ページ単価:1万円~
・画像再作成:大サイズ5,000円~、小サイズ2,000円~
有限会社デジタルファクトリー
有限会社デジタルファクトリーは、ホームページの開設・制作・リニューアルなどを請け負う会社です。所在地の大阪を中心に、さまざまな企業のホームページ作成・レスポンシブ対応の実績があります。
お得なパックプランも用意されていますが、申し込みには条件がある(レンタルサーバの契約が必要、スマホサイト制作には別途費用が必要など)ため、事前の相談・問い合わせがおすすめです。
【レスポンシブ対応費用の目安】
・デザイン案(1案):15万円~
・トップページ:10万円~
・下層ページ :2万5,000円~
・企画管理費:費用合計の10%
株式会社アント
株式会社アントは、Webサイトの企画・制作やメディアの活用支援などを幅広く手掛ける会社です。ブランディングサイト・プロモーションサイト・キャンペーンサイト・ECサイトなどさまざまなWebサイトに対応しており、新規サイトの立ち上げにともなうレスポンシブ対応の相談ができます。
ヒアリング・プランニングに数日間が必要であり、制作スタートまでには時間がかかる点、Webサイトの種類や規模によって料金が大きく異なる点などから、依頼前にはスケジュールや費用の相談をしておいた方が良いでしょう。
【費用の目安】
・Webサイトの制作費:40~300万円(レスポンシブ対応の内容・範囲などはWebサイトによって異なるため、問い合わせが必要)
クラウドワークス
レスポンシブ対応の依頼先はいくつかありますが、クラウドソーシング(仕事を外注したい人・受注したい人をマッチングするサービス)を利用することもできます。
なかでも、日本最大級の「クラウドワークス」は登録ワーカー数が400万人を超えており、レスポンシブ対応のスキル・経験が豊富な人材(エンジニア・コーダー・Webデザイナーなど)も多数登録しています。
▶レスポンシブ・ウェブデザインのスキルを持つワーカー一覧をチェックする
既存サイトのリニューアルや新規サイトの作成、WordPressへの移行など、希望に合った形式によるレスポンシブ対応を発注でき、どのようなかたちでレスポンシブ対応を進めるべきか決まっていない場合は提案・アドバイスをしてくれる人材を探すことも可能です。
また、発注前にはワーカーへ見積もりを依頼したり、さまざまな仕事の発注相場金額を確認することもできます。クラウドワークスへの登録料・システム利用料などの手数料は一切かからないため、他の依頼先よりもコストを抑えて依頼できる点もメリットです。
【費用例】
・ホームページ新規制作(レスポンシブ対応込み・5ページ前後・納期18日)55,000円
・LP新規作成(レスポンシブ対応込み・納期7日前後)10,000円~
・レスポンシブ対応コーディング(5ぺージ前後・納期14日)15,000円