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

2012.04.09

IT・WEB

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

安田 英久
株式会社インプレスビジネスメディア Web担当者Forum編集長

今日は、スマホ対応で注目を集める「レスポンシブ・ウェブデザイン」の良い点と悪い点を述べていきます。

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

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

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

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

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

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

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

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

レスポンシブウェブデザイン(CSS Radar)

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

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

続きは会員限定です。無料の読者会員に登録すると続きをお読みいただけます。

Ads by Google

この記事が気に入ったらいいね!しよう
INSIGHT NOW!の最新記事をお届けします

安田 英久

株式会社インプレスビジネスメディア Web担当者Forum編集長

企業のウェブサイト活用やウェブマーケティングに関するメディア「Web担当者Forum」(http://web-tan.forum.impressrd.jp/)を運営しています。

フォロー フォローして安田 英久の新着記事を受け取る

一歩先を行く最新ビジネス記事を受け取る

ログイン

この機能をご利用いただくにはログインが必要です。

ご登録いただいたメールアドレス、パスワードを入力してログインしてください。

パスワードをお忘れの方

フェイスブックのアカウントでもログインできます。

INSIGHT NOW!のご利用規約プライバシーポリシーーが適用されます。
INSIGHT NOW!が無断でタイムラインに投稿することはありません。