レスポンシブ・ウェブデザインの功罪とモバイルファースト

しかし、レスポンシブ・ウェブデザインには大きな弱点があります。誤解を恐れずわかりやすく表現すると、「スマホなどでページの表示がかなり遅くなる可能性がある」ということです。

どういうことかというと、たとえばPC向けでは表示しているメニューやサイドバーをスマホ向けでは非表示にしたとします。画面では消えて見えるのですが、実際にはデバイスごとのデザイン変更はCSSで変えているだけなので、HTML内にはメニューもサイドバーも存在しています。

そしてブラウザは、CSSで非表示にされている部分であっても、そこに書かれているHTMLを処理します。つまり、非表示にしたつもりのサイドバーのHTMLに画像が配置されていればその画像ファイルをサーバーに読みに行ってしまいますし、非表示エリアに書かれていたものでもJavaScriptは実行されてしまいます。

そう。レスポンシブ・ウェブデザインで作ったスマホ向けページは重くなるのです。ブラウザがサーバーとやりとりするデータ量という意味では、フル表示版のPC向けページと同じぐらい重いページになっています。いや、それどころか、各デバイス用に追加されたCSSのぶんだけ何もしないときよりも重くなっています。

スマホ向けにできるだけ軽くしたいなら……

いま、LTEやWiFiやと、スマホの通信速度は向上しつつあります。しかし実際のところスマホの通信は、多くの場合やはり遅いものです（ドコモの回線であっても）。ということは、スマホで見ている人に少しでも快適に見てもらうには、ページを表示するために必要なデータ転送量は減らしたいところです。

「うちのサイトをスマホで直接見に来る人なんていないよ」と思っていても、スマホでソーシャルメディアを見ていて、そこで紹介されたリンク経由で来る人はいるものですからね。

ちなみに、こうした問題点は早いうちから指摘されていたようで、今回の記事を書くために調べたところ、2011年1月に書かれたCSS Radarさんのブログ記事で、ここで挙げた以上の問題点が指摘されていました。

・レスポンシブウェブデザイン（CSS Radar）

上記記事ではそれぞれの問題点についての対処法も示されています。

とはいえ、実際のところ現状では、スマホ向けにはレスポンシブ・ウェブデザインを採用せずに、専用のHTMLテンプレートを用意し、不要なHTMLをできるだけ減らした軽いページにするべきだと、私は考えています。それが「軽くする」には最適な方法だからです（サイドバーなどPC向けとモバイル向けで大きく構成が変わるサイトを想定しています）。