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

今や多くの企業さまが、ホームページを制作する際にレスポンシブwebデザインを希望されます。

特にスマートフォンからのアクセスが多いwebサイトにおいては、「レスポンシブWebデザインにするために、ホームページをリニューアルしたい」とご依頼をいただくほどになりました。

しかし、まだまだ明確にレスポンシブwebデザインのメリット・デメリットを把握している企業さまは少なく、多くが「スマートフォンユーザに対して、webサイトの見せ方を変え、スマホサイトを表示できる」という認識にとどまっています。

そこで今回は、レスポンシブWebデザインにはどういうメリットがあり、逆にどういったデメリットがあるのかをご紹介します。

レスポンシブWebデザインとは
スマホ対応が必要な理由
レスポンシブWebデザインのメリット
レスポンシブWebデザインのデメリット
レスポンシブWebデザインのチェックを行おう
多くのHPがレスポンシブWebデザインで作成
目的に合わせてレスポンシブWebデザインを採用

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

ユーザがホームページを閲覧する端末は、スマートフォン・タブレット・PCの3つになります。

従来のホームページ制作であれば、PC・タブレットで閲覧するユーザにはPC用サイト、スマートフォンで閲覧するユーザにはスマートフォンサイトを表示させていたために、PC用ホームページとスマホ用ホームページの2種類のホームページを制作しなくてはなりませんでした。

しかし、レスポンシブWebデザインを活用することで、PC用とスマートフォン用でホームページを分ける必要が無く、1つのホームページで、PC・タブレット・スマートフォンのそれぞれの端末に最適化されたホームページを表示させることができるようになりました。

このように、端末ごとにそれぞれのホームページを制作せずとも、1つのホームページで端末ごとに最適化されたwebデザインを表示できる手法をレスポンシブWebデザインと言います。

なお、レスポンシブWebデザインには、複数の呼び方があり、レスポンシブ対応やレスポンシブデザインなどと呼ばれることもあります。

スマホ対応が必要な理由

従来は、スマートフォンに最適化されたホームページをご希望の方であれば、スマートフォンサイトを制作していましたが、スマートフォン対応が不要な方であれば、特にスマートフォンサイトを制作せずに、PCサイトだけで問題はありませんでした。

しかし、現在多くのホームページがレスポンシブWebデザインでホームページを制作していますが、なぜ多くの会社さまではレスポンシブWebデザインでホームページを制作しているのでしょうか。

それは、スマートフォンの普及率と関係しており、現在多くの方がスマートフォンを利用してウェブサイトの閲覧を行っているのです。

このスマートフォンユーザの割合はホームページや業種によって異なるため、一概には言うことができませんが、実際に弊社のウェブサイトでも、30％程度のユーザがスマートフォンあるいはタブレットから訪問しているため、これらのユーザを放置することは難しくなっています。

さらに、現在多くのホームページがレスポンシブWebデザインで作成されており、スマートフォンからのユーザは、スマホサイトの操作に慣れているため、PCサイトが表示されてしまうと、操作がしづらいなどの理由からホームページから出ていってしまいます。

そうならないためにも、必ずホームページを作成したら、スマホサイトを制作、あるいはレスポンシブWebデザインでホームページを作成して、スマートフォンユーザを追い返さないホームページとしなくてはなりません。

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

レスポンシブWebデザインで制作されたホームページのメリットをご紹介します。

ホームページ制作費が安くなる

レスポンシブWebデザインでは、ホームページ制作費が、PC用ホームページとスマホ用ホームページの2サイトを作成するよりも安い価格で制作することが可能になります。

仮に、PCとスマホでまったく同じホームページを作成する場合、そのホームページ制作料金はPC用のホームページ制作の見積額の2倍の料金になっており、レスポンシブWebデザインでは、PC用のホームページのデザイン作成費とコーディング費の0.5から0.6倍の費用がPC用ホームページ制作費に上乗せされる計算になります。

そのため、PC用とスマホ用をそれぞれホームページ制作を行うよりも安い価格でスマートフォンユーザのために最適なホームページを制作することが可能になります。

ホームページ制作費のケーススタディーを見る

ホームページの更新が1度で良い

従来であればPC用とスマートフォン用で2サイトの運営を行わなくてはならなかったのですが、レスポンシブWebデザインでは1サイトの運用で対応可能というメリットがあります。

webサイトを更新する際に、従来であればPC用とスマートフォン用で2サイトの更新が必要でしたが、レスポンシブWebデザインでは、PC用とスマートフォン用で同一のソースコードとなるため、1サイトの更新で対応可能になります。

そのため、ホームページ運用のコスト削減を図ることが可能になりますし、更新時のミスの発生なども防ぐことも可能です。

今後発売される端末への対応が容易

レスポンシブWebデザインで作成されたホームページは、CSSと呼ばれる外部ファイルに、端末ごとの横幅を設定するだけで、レイアウト崩れが無く、ブラウザに表示させることが可能です。

そのため、新しい横幅の端末が発売されても、従来であれば、新しい端末での確認と細かな調整を行わなくてはなりませんでしたが、レスポンシブWebデザインでは、端末の横幅設定を追加するだけなので、ホームページ改修費のコストを大きく削減することが可能になります。

URLを1本化できるためSEO効果が高い

従来であれば、PC用とスマートフォン用で別々のウェブサイトを作成していたために、表示させている原稿や内容が全く同じでも、別のURLとなっていました。

しかし、これはグーグルの検索エンジンスパムである同じ原稿のページを量産することで、SEOの成果向上を図る検索エンジンスパム「重複コンテンツ」となってしまい、SEO対策において良い状態であるとは言えませんでした。

レスポンシブWebデザインでは、PC用とスマートフォン用で同一のURLとなるため、SEO効果としても非常に効果的であると言えます。

スマホ検索での順位が上がる

多くの企業がレスポンシブWebデザインでホームページを制作を採用する要因の一つになると思いますが、レスポンシブWebデザインで制作されたホームページでは、グーグルのスマホ検索で優遇されるようになります。

これはスマホ検索に限定しているものではありますが、現在BtoB企業であったとしても、スマートフォンからの訪問者は多くいるため、非常に重要な要素になってきます。

また、多くの企業がレスポンシブWebデザインでのホームページ制作を行っているため、もし自社のHPがレスポンシブWebデザインでの制作を行っていない場合は、検索順位を落としてしまう可能性もあります。

そのため、検索エンジンからの訪問者の集客をご検討の方は、必ずレスポンシブWebデザインでのホームページ作成を行い、多くのスマホ検索からのユーザを集客できるホームページとすることが重要です。

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

レスポンシブWebデザインで制作されたホームページのデメリットをご紹介します。

端末ごとの細かなデザイン変更ができない

レスポンシブWebデザインでは、端末ごとに表示方法を変えているだけなので、例えば「PCで見たユーザにはこういう風に見せたいけど、アイフォンで見た人にはまったく別の見せ方をしたい」などの細かなご要望を実現できないこともあります。

ある程度の制限の中でしか、デザインの変更を行えない仕様となっています。

スマホファーストでの制作

従来のホームページは、PCファーストで制作されていました。

PCファーストとは、PCで見ることを前提にwebサイトを作成し、その後その他の端末でも正しく表示されるように最適化していくことになりますが、レスポンシブWebデザインで作成されたウェブサイトは、スマホファーストでの作成になり、スマートフォンありきでPCサイトを制作しなくてはなりません。

そのため、PCサイトとスマートフォンサイトで、スマホサイトのデザイン次第で、PCサイトのホームページレイアウトが決定していくと認識することが重要になってきます。

ホームページの表示が重くなってしまう可能性がある

レスポンシブWebデザインで制作されたホームページは、PCサイトだけに表示させる内容や画像であっても、スマートフォンでの閲覧時に、スマートフォンの画面上には表示されていませんが、画面外で表示されています。

そのため、容量の大きな画像を多く使ってしまうと、読み込みに時間がかかってしまうwebサイトとなってしまいます。

現在グーグルは、webサイトの表示速度も検索順位に反映させている可能性があるため、画像を多く使ったレスポンシブwebデザインでのホームページ制作を行う場合には、必ず画像の圧縮を行いながら制作しなくてはなりません。

ホームページ制作の納期が長くなる

レスポンシブWebデザインでは、PCだけのホームページ作成よりも、ホームページの制作期間が長くなってしまいます。

ホームページの制作期間が長くなるのは、主にWebデザインの作成とコーディング時間になっており、デザイン作成ではPCだけではなくスマートフォンでの表示についても制作していかなくてはなりません。

また、コーディングにおいては、CSSで横幅だけ指定すれば良いというわけではなく、コンテンツごとに例えば画像の下にテキストを配置させるか、画像の横にテキストを表示させるかなどの、細かな設定を実施しなくてはなりません。

そのため、ホームページ制作全体で、弊社では平均半月ほど納期が延びてしまいます。

レスポンシブWebデザインのチェックを行おう

ホームページ制作会社にレスポンシブWebデザインでのウェブサイト作成を依頼した後、必ずグーグルサーチコンソールを利用して、しっかりとレスポンシブWebデザインに対応しているかのチェックを行わなくてはなりません。

このチェックには、グーグルサーチコンソールを利用して行うことが一般的で、グーグルサーチコンソールを利用することで、一目でホームページ内でレスポンシブWebデザインができていないページを発見することが可能です。

ワードプレスなどで制作されているホームページでは、ビューポートが設定されていないなどの問題はないと思いますが、固定ページで作成されているページ、あるいはHTMLで制作されているホームページにおいては、しっかりとすべてのページがレスポンシブWebデザインに対応しているかのチェックを実施して、できていないページは改善していかなくてはなりません。

こちらの調査に利用できるデータは、グーグルサーチコンソールにログインして、モバイルユーザビリティーを確認すると、対応しているページと対応していないページの一覧が表示されます。

グーグルサーチコンソールの詳細を見る

多くのHPがレスポンシブWebデザインで作成

現在、弊社で新規ホームページ作成やリニューアルをお申し込みされる方の多くが、レスポンシブWebデザインでのホームページ制作を希望されます。

従来であれば、BtoB企業においてはそこまで意識をする必要がなかったのですが、SEOに影響を与えるとなった段階から多くの企業では、レスポンシブWebデザイン作成を希望されます。

そのため、実際に弊社の新規ホームページ制作では、100％と言ってもいいくらいの割合でレスポンシブWebデザインでのHP作成を行っており、多くのBtoC企業さまはもちろん、BtoC企業さまにおいても、スマホユーザを意識してホームページ作成を行っております。

レスポンシブWebデザインでのホームページ作成は、検索順位を少しでも意識されるのであれば、ライバルがレスポンシブWebデザインでのホームページ作成を行っていたら、グーグルのスマホ検索時の検索順位を落としてしまうことに繋がるため、これからホームページを作成される方は、必ずレスポンシブWebデザインでのホームページ制作を行うことがお薦めになります。