レスポンシブウェブデザインにしたいと思ったら ― コラムーベイクロスマーケティング株式会社

よく、お客様から受けるご相談のなかに、
「レスポンシブにしたい」というご相談があります。
スマホやタブレットがすっかり普及した現在、Webサイトもそれに対応することが求められますが、
「そもそもレスポンシブウェブデザインって何？」
「スマホサイト作るのとは違うの？」
という問題についてお話します。

レスポンシブウェブデザインって？

「レスポンシブウェブデザイン」というのは、パソコン、スマートフォン、タブレットなど、それぞれの画面サイズを元に、レイアウトを調整して表示させるデザインのことを指します。
今までのWebサイトでは、パソコンはパソコン用、スマホはスマホ用、とデバイス毎に異なるHTMLファイルを作成していました。
「レスポンシブウェブデザイン」の場合、用意するHTMLファイルは1つ。
その1つのファイルに対して、異なる画面サイズに適用できるように表示側のデザインを調整します。

レスポンシブウェブデザインの何がいいの？

「レスポンシブウェブデザイン」のメリットはいくつかあります。
例えば、

1つのファイルを修正するだけなのでメンテナンスがしやすい。
パソコンでもスマホでも、同じURLで表示される

などがわかりやすい例ですが、一番大きなメリットは

SEO効果が期待できる

という事です。

Googleが推奨している「モバイルフレンドリー」という、
「このサイトはスマホ対応していますよ！」という基準があるのですが、
Googleではこの「モバイルフレンドリー」が検索結果に影響を及ぼすのです。
そして、「モバイルフレンドリー」では「レスポンシブウェブデザイン」を推奨しています。
理由としては、

URLを同一にできるのでユーザーがページをシェアやリンクしやすくなる
デバイス判別が必要ないので、リダイレクトせず、ページ読み込み時間が短縮される
URLが同一になるのでアクセス解析がしやすい
対応するPC用ページ、スマホ用ページが存在することをGoogleのアルゴリズムに伝える必要がないので正確に登録処理される
Googlebotがサイトをクロールするために必要なリソースを節約できる

などが挙げられます。
「じゃ、レスポンシブウェブデザインで作ってよ！」
と思うかもしれませんが、
必ずしも、「レスポンシブウェブデザイン」が良いとは限らないのです。

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

パソコンでも、スマホでも、同じファイルを読み込むということは、1ページの中で画像を多用していた場合、スマホでも同じものを読み込むので表示速度が遅くなってしまいます。
読み込みが遅いということは、それだけサイトからの離脱にもつながります。

また、
「スマホでパソコン用のデザインが見たい！」
と思った場合でも、パソコン用の表示に変更できなかったり、
パソコンでは見せたい情報を全部詰め込んでも問題なく表示されるけれども、スマホやタブレットだと、小さい画面になるため、見せたいコンテンツをどう見せるのか、という情報の精査や、スマホ、タブレットに適した回遊導線の作り方など、細かい調整が必要となります。

さらに、「1つのファイルなら安くなるんじゃないの？」という事も良く聞かれますが、
先述のように細かな調整が必要だったり、各デバイスでの確認が必要だったりするので、コストはあまり変わらない可能性があります。

レスポンシブウェブデザインにする？しない？

レスポンシブウェブデザインのメリット、デメリットをお伝えしたところで、
レスポンシブウェブデザインを採用しなかった場合はSEOで不利なんじゃないか？と思われることもあるでしょう。
しかし、パソコン用、スマホ用、別々のページで作成していても、Webサイト内にきちんとした設定を施せば「モバイルフレンドリー」対応はできます。
ですので、
流行っているから何となく…
ではなく