201 レスポンシブウェブデザインの需要が高まっています。弊社でもお話をいただくお客様が多くなってまいりました。
レスポンシブウェブデザインとは、Webサイトを表示する各デバイス(スマートフォン・フューチャーフォン・タブレットなど)によって、Webサイトの見た目が見やすくなるように、アクセスした際に自動的に見た目を調整するデザインのことです。
とても良い面が目立つように思えますが、そればかりではありません。新たに登場したこのレスポンシブウェブデザインを導入すべきなのか、またはスマートフォン版のWebサイトを別に用意するのが的確なのか。悩まれる方も多いかと思われます。
そこで今回は、レスポンシブウェブデザインのメリット・デメリットを以下にまとめてみました。迷っている方はぜひ参考にしてください。
レスポンシブウェブデザインのメリット・デメリット
メリット
・URLひとつで複数端末に対応
スマートフォン版のWebサイトを制作した場合、PC版とスマートフォン版とでURLが異なります。こうなった場合、PCからスマートフォン版のWebサイトを開いてしまうこともありますので、ユーザーが混乱する原因にもなります。
ところが、レスポンシブウェブデザインはスマートフォンだけでなくタブレット版なども単一のURLで運営できるので、上記のような問題は起こらずユーザーに優しいWebサイトになります。
・更新をPC版とスマートフォン版などで複数行わなくて良い
URLがひとつだけですので、PC版・スマートフォン版それぞれで更新作業をしなくて良いという面では運営が楽に行えます。同時に、それぞれで発信している情報の齟齬を防ぐこともできます。
・Googleが推奨している
スマートフォン向けウェブサイトの構築 – Webmasters － Google Developers
https://developers.google.com/webmasters/mobile-sites/mobile-seo/overview/select-config
上記のページにも記されている通り、Googleから公式に発表されました。
Googleが推奨する理由のひとつとして、クロールのしやすさを挙げています。
クローラーと呼ばれる検索エンジンのロボットがWebサイト内の情報を読み取り、それらを参考に検索結果を決定しています。レスポンシブウェブデザインの場合はクロール回数が1度で済みますが、PC版・スマートフォン版それぞれページが存在しているとクローラーが何度も読み取らないといけません。
レスポンシブウェブデザインはその手間が省ける上に、運営者も更新がしやすくなり、ユーザーにとって混乱もないので、三者共に使い勝手が良くなるという点で非常に合理的です。
デメリット
・導入する上で手間とコストがかかる
現在、PC版のWebサイトを運営されている方々にとっては、各デバイスの普及に伴いそれに準じたレスポンシブウェブデザインを導入していくことになります。多くの場合、PC版の現状を保ったままレスポンシブウェブデザインに変えていく必要があると思います。
しかし、これには多くのコストがかかります。特に通販のようなECサイトを運営している方は、既存のシステムを移行する必要があるので、一筋縄ではいかない部分があります。プロに依頼するとそれだけ料金も発生するということも考えておきましょう。
・複数のデバイスに対応するため、ソースの記述量が多く表示が遅くなる
Webサイトにアクセスした際、表示が完了するのが遅くなる可能性があります。Webサイトを制作する際に、そのページを構成するファイルにソース(htmlやcssなどの言語)を記述しています。しかし、スマートフォンやタブレット等の各端末に対応したレスポンシブウェブデザインを導入する場合、「スマートフォンでアクセスされたらこの記述を読み込む」などという具体的な指示をそれぞれ書かないといけないため、使用するファイルのソースがどんどん長くなってしまいます。
そのため読み込むスピードが落ち、表示に時間がかかってしまうのが難点であると言えます。ページスピードを速めるために講じる対策は様々あります。以下のページも参考にしてください。
ページの表示速度で悩まないための対策方法4つ
以上がレスポンシブウェブデザインを導入する上でのメリット・デメリットです。
他にも魅力的な部分や問題点はあるかと思います。様々な可能性を考えて、導入に踏み切るかどうかを検討してください。
もし、レスポンシブウェブデザインを導入したWebサイトを公開したら、以下からモバイルフレンドリーテストでチェックしてみましょう。きちんとモバイルに対応したWebサイトであるかどうか確認ができます。
モバイル フレンドリー テスト
https://www.google.com/webmasters/tools/mobile-friendly/
アクセスしたらURLをテキストボックスに入力後、「分析」ボタンをクリックすると問題ないかどうかがわかります。きちんと反映されているのかどうかが不安であれば、ぜひ一度こちらから確認してみてください。
