ホームページをレスポンシブWebデザインで制作するメリットとデメリット

最近は、レスポンシブデザインで制作されたホームページが増えてきました。

レスポンシブWebデザインとうのは、1つのWebページであるにもかかわらず、PC・スマホ・タブレットなど違うサイズの画面で見たときに、それぞれで最適な表示をしてくれる形式になります。

そのため、レスポンシブWebデザインのホームページには、PC用サイトとかスマホ用サイトといった概念がありません。

最近はレスポンシブWebデザインのサイトが非常に多くなっている背景には、ホームページ運営者が得られるさまざまなメリットがあるのです。

ここでは、ホームページをレスポンシブWebデザインで制作することのメリットについて解説をしてみたいと思います。

もちろんレスポンシブWebデザインにもデメリットもありますので、合わせてそちらも解説をしていきます。

レスポンシブWebデザインならMFIでSEO的に有利？

これからのGoogleはPC用サイトではなく、モバイル用サイトから収集したデータをもとに、検索順位を決めるようになります。

いわゆるモバイルファーストインデックス（MFI）と呼ばれるものです。

PCサイトとモバイルサイトを別々のページで作成していた場合、モバイルファーストインデックスに切り替わったタイミングで、検索順位が大きく変わってしまう可能性があります。

しかも、PCサイトとモバイルサイトの形式やコンテンツが大きく違えば違うほど、その影響は大きくなります。

PCサイトとは別にモバイルサイトを制作する場合、どうしても見やすさを最優先させるために、よりシンプルなデザインになり、コンテンツもかなり省略されたりします。

そのため、どうしてもコンテンツの中味が浅くなり、MFIに切り替わったとたんに検索順位が下がる可能性があるわけです。

ところが、レスポンシブWebデザインのサイトであれば、PC用サイトもモバイル用サイトもHTML的にはまったく同じページですから、基本的にはPC用サイトのときの検索順位がそのままMFI後も引き継がれることになります。

SEO的に、PC用サイトのデータをそのままモバイルファーストインデックス後も引き継ぐことができるという点が、レスポンシブWebデザインの大きなメリットの１つとえいます。

ちなみにGoogleも、レスポンシブWebデザインでホームページを制作することを推奨しています。

参考：レスポンシブ ウェブ デザイン～Google 検索デベロッパー ガイド

どの端末で閲覧してもデザインが不自然にならないというメリット

レスポンシブWebデザインのホームページは、さまざまな画面サイズの端末に柔軟に対応できるというメリットがあります。

たとえば、PC用サイトとモバイル用サイトを別々に制作した場合、タブレットで見たときに不自然な表示になってしまったりします。

タブレットにPC用サイトを表示させると文字や画像が小さくて見づらくなってしまいますし、かといってモバイル用サイトを表示させると、画面サイズに対して文字や画像が不自然に大きくなってしまったりします。

また、タブレットだけではなく、PCやスマホにもさまざまな画面サイズのものが存在します。

レスポンシブWebデザインであれば、CSSを変えることによって端末ごとの横幅を自由に設定できますので、どのような画面サイズの端末で見ても違和感の少ない見え方にすることができます。

レスポンシブWebデザインならホームページの製作費が安い

レスポンシブWebデザインでホームページを制作することの大きなメリットの1つに、制作費用が安く済むという点があげられます。

なぜなら、1つのサイトを制作することで、それがPC用とモバイル用の両方を兼ねることができるからです。

レスポンシブWebデザインだと、PC用のホームページを制作するときにくらべて、デザインやコーディングによけいな費用掛かりますが、PC用とスマホ用のサイトを別々に作成するのにくらべるとトータルの制作費が安くなります。

レスポンシブWebデザインがメジャーになる前は、PC用とモバイル用のサイトを別々に制作するのが一般的でした。

ユーザーがアクセスをしてきた端末のユーザーエージェントによってPCなのかモバイルなのかを判断して、それぞれに振り分けて表示させていたわけです。

しかし、最近ではPC用サイトとモバイルサイトを別々に制作するケースは非常に少なくなっています。

ちなみに現在では、世界中の主要企業サイトの4分の3が、レスポンシブWebデザインで制作されています。

参考：世界・国内主要企業サイトの7割以上がレスポンシブデザインを使用

ホームページの更新が楽になるというメリット

レスポンシブWebデザインでは、ホームページの維持管理がとても楽になるというメリットがあります。

たとえば、ページを修正しなければならなくなったときでも、レスポンシブWebデザインであれば、1つのページを修正すればそれで済んでしまいます。

ところが、PC用とモバイル用を別々に管理しているケースだと、同時に両方を修正しなければなりません。

テキストだけの簡単な修正ならばそれほど手間はかからないかも知れませんが、PC用とスマホ用で別々の画像を使用していたいりすると、修正のたびに大変な手間がかかることになります。

また、新規にコンテンツを追加する場合にも、単純に2倍の手間がかかることになります。

レスポンシブWebデザインでホームページを制作することによって、制作時のコストが抑えられるだけではなく、サイトの維持管理費用も大幅に減らすことが可能になるわけです。

モバイルの表示速度が不利になるというデメリット

PC用サイトは表示エリアが広いですから、1つのページにたくさんのコンテンツを詰め込むことができます。

画像をふんだんに使った見栄えの良いページは、どうしても重いページになりがちです。

PCの場合であれば、Wi-Fi環境の整ったところでサイトを閲覧することが多いと思いますので、多少重いサイトであっても、極端に表示速度が遅くなるということはありません。

しかし、つねに持ち歩いてWi-Fi環境のないところで使うことの多いモバイルの場合には、重いサイトはどうしても不利になります。

回線速度の遅い場所で重いサイトを閲覧すると、どうしても表示速度が遅くなってしまいます。

モバイル専用のサイトであれば、コンテンツをすっきりさせて表示速度に支障がでないような作りにすることも可能ですが、レスポンシブWebデザインの場合はそうはいきません。

モバイルであっても基本的にPC用サイトと同じHTML構造のものを表示させることになりますので、しっかり作り込んだ重いサイトだと、どうしても表示速度に影響がでてしまいます。

4G回線であれば、レスポンシブWebデザインのサイトであっても、ストレスなく閲覧できることが多いですが、3G回線だと重いサイトは厳しくなります。

ただし、日本の4Gカバー率は95％を超えていますし、近い将来に5Gが主力回線になると思われます。

回線速度の速い5Gの時代になれば、コンテンツの充実したレスポンシブWebデザインのサイトであっても、表示速度のデメリットはまったくなくなるでしょう。

スマホで見るとやたら縦長のサイトになりがち

レスポンシブWebデザインのサイトは、スマホにPCとまったく同じコンテンツを表示させることになります。

そのため、スマホで見るとどうしても縦長の表示になってしまうというデメリットがあります。

最近はコンテンツが長文化していますので、スマホで閲覧する場合には延々とスクロールを続けることになります。

また、スマホにはサイドバーというものがありませんので、PCサイトのサイドバーの部分は、コンテンツの下に表示されることになります。

その結果、ますます縦長の表示になってしまいます。

最近では、あえてPCのサイドバーの部分をモバイルでは表示させないようなレスポンシブWebデザインのホームページもあります。

確かにデザイン的にはすっきりしますが、モバイルファーストインデックスが適用されたときにSEO上の不安が残ります。

また、サイドバーの部分を隠してしまうことによって、直帰率が高くなってしまう可能性もあります。

デザインや見やすさを優先させるのか、それともSEO的な部分を優先させるのかで、悩ましい選択を迫られることになります。