スマホ・レスポンシブ対応のホームページにする費用や料金相場は？

MFI導入の発表もあり、スマホ・レスポンシブ対応の必要性は感じているものの、実際にどのようなことが必要でどれくらいの費用がかかるのかと疑問をお持ちではないでしょうか。

＊MFI(モバイルファーストインデックス)とは、GoogleがPCサイトではなくスマホサイトの評価を主軸にしてインデックスするという方針の事

今回はそんなスマホ・レスポンシブ対応について、

を中心に、ご自身でスマホ・レスポンシブ対応サイトを作成したり既存のサイトを対応させたりすることができるかということまで解説していきます。

スマホ・レスポンシブ対応は多くの企業が対応を進めており前提になりつつあるものですので、乗り遅れないためにもぜひ最後までご覧ください。

まずはスマホ対応とレスポンシブ対応の違いから明らかにしておきましょう。

一言で言うと、スマホ対応がスマートフォンのみの対応を指す言葉である一方、レスポンシブ対応はスマートフォンを含むあらゆるデバイスへの対応を意味します。

そのため言葉としては、レスポンシブ対応であればそこにはスマホ対応も内包されていると言えます。

レスポンシブ対応の内容やそれぞれの違いについて、比較も交えてもう少し詳しく見ていきましょう。

レスポンシブ対応とは、パソコンやスマホだけでなく、タブレットなども含めた画面サイズの異なるあらゆるデバイスでのWebサイト表示を可能にすることを意味します。

こうしたWebサイトデザインをレスポンシブWebデザインと言い、デバイスごとにそれぞれのホームページを作成するのではなく1つのホームページであらゆるデバイスに対応することができます。

またこのレスポンシブWebデザインは、検索エンジンのGoogleによって推奨されているということも留意しておくべき点と言えるでしょう。

上記の内容を踏まえ、スマホ対応の方法としては「スマートフォン専用サイト」と「レスポンシブWebデザイン」の2種類が存在すると言えます。

1つのホームページであらゆるデバイスに対応できて非常に便利なレスポンシブウェブデザインですが、ホームページの運用方針によってはスマートフォン専用サイトを作成する方が良い場合もあるでしょう。

例えば、細かくターゲティングを行ってデバイスごとに異なるデザインや内容を表示したいという場合などがあげられます。

近年の企業の動向としてはレスポンシブWebデザインでの対応が一般的ですが、それぞれにメリット・デメリットがあるため運営するホームページの方針と照らし合わせて選ぶようにしましょう。

→参考記事：スマホ対応のホームページにする必要性は？スマホ非対応のデメリット

それぞれのメリット・デメリットについて、特徴的なものをまとめると以下のようになります。

スマホ対応・レスポンシブ対応についてお分かりいただけたところで、実際にそういったホームページを作成する際にかかる料金について見ていきましょう。

ホームページ作成を依頼する場合、以下のような費用が必要となります。

ディレクション・プランニング費とは、ホームページを作成する際にどういった目的でどのような内容のホームページにするかということを方針付けるためにかかる費用を指します。

実際にディレクターがついてヒアリングを行った上で方針を決定し、デザイナーやプログラマーに内容を伝達します。

相場としては基本的に全体の制作料金の20％程度と言われており、サイト規模によって変動しますが5万円～と考えられます。

デザイン費とは、それぞれのコンテンツの配置やボタンのデザインなど、レイアウトをはじめとしたホームページのデザイン全般にかかる費用を指します。

相場としてはディレクション費と同様5万円～と考えられますが、デザイン費に関しては有名なデザイナーなどに依頼すると高額になったり逆にテンプレートを利用することで価格を抑えられたりと、依頼先や依頼方法によって非常に大きな差が生じます。

なお、下層ページはトップページの半額かそれ以下で依頼できる場合が多いと言われています。

コンテンツ費とは、ホームページ内に掲載する記事や画像、動画といった各コンテンツの制作にかかる費用を指します。

相場としてはSEOライティングが1ページ1万円～、セールスライティングが1ページ3万円～程度とされています。記事作成に関しては文字数や作業内容によって価格が変動し、キーワード選定などから依頼する場合は高くなる傾向があります。

画像や動画に関してはフリー素材含め提供しているサイトが多数存在します。

モノによって価格は異なりますが、安価な写真であれば数十円というものもある一方、本格的な動画を制作したい場合は15秒で3万円～と言われています。

コーディング・プログラミング費とは、ホームページ作成の際に必要となるHTMLやCSS、JavaScriptなどのプログラミング言語による書き出しにかかる費用を指します。

相場としてはトップページ1万円～、下層ページ7,000円～程度と言われていますが、画像に動きをつけたりメールフォームなどを設置したりする場合には別途料金が追加されます。

ホームページを作成する場合には上記のような費用がかかってきますが、依頼先や依頼内容によって必要な費用には差が生じます。

先ほどご紹介したものは中規模の制作会社に依頼した場合の相場であり、大手制作会社に依頼する場合は約1.5倍、フリーランスに依頼する場合は逆に半額程度で依頼できる可能性もあります。

また上記は一般的にホームページを作成する場合にかかる費用であり、レスポンシブWebデザインのサイト作成をする場合は上記に加えてコーディング費の1.5倍ほどのレスポンシブ対応費が別途かかる場合があります。

スマホ対応のホームページ作成にかかる費用感についてはお分かりいただけたかと思いますが、「既に運用されているホームページをスマホ対応にできないものか」とお考えの方もいらっしゃるかと思います。

結論から言うと、既存のホームページをスマホ対応にすることは可能です。

ここでは既存のホームページをレスポンシブ化させる場合について、必要な手順と費用、そして自分で修正を行えるかどうかについて見ていきましょう。

■HTMLでビューポートを設定する

レスポンシブ化に必須なのが、HTMLのhead内にviewport(ビューポート)というmetaタグを記述することです。

この手順によって、まずはデバイスごとに表示を調節するようHTML上で指示を出します。

■CSSでメディアクエリを設定する

次にCSSのメディアクエリで、「この画面幅の場合はこのCSSを使用する」という条件分岐を設定します。この際、それぞれの表示の切り替えポイントとなるブレイクポイントを設定する必要があります。

具体的には

などの設定を行っていく必要がありますが、いずれのデバイスも機種などの環境によって画面幅が異なるためリサーチが必要な部分になります。

■各デバイスのデザイン設定を行う

ビューポートとメディアクエリを設定したら、文字サイズや行間、画像サイズなどそれぞれのデバイスに合わせて見やすいデザインにする必要があります。

CSSの記述を編集して調整したり、場合によっては各デバイスで見やすいように別途画像を用意したりする必要などが出てくるでしょう。

レスポンシブ化には上記のような手順が必要になりますが、既存ホームページのレスポンシブ化にかかる費用相場は以下のようになっています。

サイト作成にかかる費用でお話したことと同様に、依頼先や依頼内容によっても費用に差が生じます。

元のホームページの環境によっては作業内容が複雑になり費用が膨らむことも考えられるため、そういった場合は改めてサイトの運営方針から見直して新規でレスポンシブ対応のホームページを作成することも視野に入れると良いでしょう。

またトップページや人気ページなどの主要ページのみをレスポンシブ化することで、費用を抑えつつ最低限のSEO対策を行うことも可能と言えます。

ここで、「依頼ではなく自分でホームページをスマホ対応化できないものか」と思われた方もいらっしゃるかと思います。

結論から言うと、ご自身でホームページをレスポンシブ化してスマホ対応させることは可能です。ただし、あくまでも「ホームページ作成、プログラミング言語の知識がある場合は可能」だということは先にお伝えしておく必要があります。

先ほど見ていただいたように、レスポンシブ化にはHTMLやCSSの編集をはじめ各デバイスに合ったデザインなど専門的な知識や技術が必要となります。

ご自身で問題なくこれらができるようであれば細かくデザインされたスマホ対応サイトを作成することができますが、それらの知識や技術が無い場合は適切にブレイクポイントを設定できなかったり表示が崩れてしまったりするリスクが考えられます。

また「Mobify」や「スマートフォンコンバーター」、「shutto」といった「自動変換サービス」でスマホ対応化を行うことも可能ですが、依頼する場合に比べてクオリティの面ではどうしても及ばない点があったり、そもそも依頼と相違無い費用がかかってしまったりする場合があるというのが現状です。

このため、相応の知識や技術がある場合を除いてスマホ対応化を行う際は依頼するのが無難と言えるでしょう。

既存ホームページのスマホ対応化は依頼が必要というお話をしましたが、小規模ホームページであればホームページ作成ツールを使って新規で作成してしまうということも十分選択肢になり得ます。

最後に、「レスポンシブ対応」で「簡単にホームページ作成が可能」、そして「無料で利用できる」ホームページ作成ツールを2つご紹介します。

ジンドゥーはドイツのJimdo GmbH社によって運営・提供されているホームページ作成サービスで、デフォルトでレスポンシブに対応していることはもちろん、フォントや編集画面など日本語にも完全対応しています。

AIによる自動ホームページ作成などホームページ作成サービスの中でも特に簡単にページ作成ができますが、カスタマイズ性の高いツールを選択することももちろん可能です。

また多くのプランが用意されており、ジンドゥークリエイタープランではSEOやページデザインのアドバイスを受けることも可能です。(※PLATINUMの場合)

画像引用：https://ja.wix.com/

WixはイスラエルのWix.com社によって運営・提供されているホームページ作成サービスで、こちらもデフォルトでレスポンシブ対応していることに加えて、900種類以上の多様なテンプレートが用意されています。

ドラック＆ドロップによる直感的操作によりデザイン性の高いホームページを簡単に作成できますが、ジンドゥー同様よりカスタマイズ性の高いツールもありユーザーのレベルに合わせてホームページを作成することが可能になっています。

またプランについても多数用意されており、ビジネス＆Ｅコマースプランでは決済やサブスクリプションなどの機能を組み込むことも可能です。(※ビジネスプラス、ビジネスVIPの場合)

ホームページ作成サービスに興味がある方は、下記の記事も参考にしていただければと思います。

→参考記事：『（有料vs無料）どれがおすすめ？簡単ホームページ作成サービス比較』)

今回はスマホ・レスポンシブ対応のホームページについて、スマホ対応・レスポンシブ対応それぞれの違いから対応サイトを作成・修正する場合の費用相場をメインに解説してきました。

これからのホームページ運営には欠かせないスマホ・レスポンシブ対応ですが、既存のホームページでもレスポンシブ化できたり簡単にレスポンシブ対応ページが作れたりと、十分に対応できるものだということがお分かりいただけたかと思います。

まだスマホ・レスポンシブ対応されていないという方は、今回の記事を参考にあらゆるデバイスのユーザーから選ばれるホームページ作りを行っていただければと思います。