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

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

結論としては、レスポンシブ・ウェブデザインはすごいと思いますが、現状では、スマホ向けにはレスポンシブ・ウェブデザインを採用せずに専用の軽いHTMLを用意して対応するべきだと私は考えます。そうでなければ、完全にモバイル・ファーストでのデザインで進めることです。その理由を解説していきます。

3分でわかる？ レスポンシブ・ウェブデザイン

「レスポンシブ・ウェブデザイン」のことを耳にしたことはあるでしょうか？ 2011年に日本でも注目された、Webページのデザイン手法で、PC向け・スマホ向け・タブレット向けなど、さまざまな画面サイズのデバイスに対応したWebデザインを柔軟に実現できるようにするものです。わかりやすく言うと、次のような仕組みで実現しています。

• CSS3の「Media Queries（メディアクエリ）」という仕組みを使い、「画面の横幅が○○ピクセル以上のときはこのCSSで表示、○○ピクセル以下の場合はこのCSSで表示」というように、画面のサイズや向きや縦横比や色数などによって適用するスタイルを切り替える。

• スタイルの作り方によって、小さな画面ではサイドバーを非表示にしたり、大きな画面では画像の横キャプションを表示するが小さな画面では画像の下にキャプションを表示するといったように変える。

• ページ内の画像も、CSS3の「max-width」プロパティを使うことで画面サイズに合わせて表示する大きさが自動的に変わるようにもできる。

一昔前に「リキッド・デザイン」と呼ばれていたデザイン手法がありましたが、その延長といった感じでしょうか。レスポンシブ・ウェブデザインを採用しているサイトでは、ブラウザの横幅を縮めていくと、ある幅を境にデザインががらっと変わるのがわかります。

この記事はレスポンシブ・ウェブデザインについて詳しく解説することは目的としていませんおで、初めて聞いたという方は、比較的わかりやすい解説が次のブログにありますので、参考にしてください。

• レスポンシブwebデザインで制作する時のポイント（デザインスパイス）
• CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き（Webデザインレシピ）

レスポンシブ・ウェブデザインの弱点： 非表示なだけで存在している

さて、ここまで聞くと「レスポンシブ・ウェブデザインってすごい！」と考えると思います。PC向けページもスマホ向けページも、メディアクエリに対応したCSSを作るだけで同じHTMLで実現できるのですから。

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

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

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

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

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

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

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

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

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

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

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

そうでなければ、「モバイルファースト」ですべてを進めることです。つまり、サイトの構成もデザインも、モバイル（スマホ）向けをまず作り、それをベースにPC向けを作るというように、考え方や進め方を変えてしまうのです。

レスポンシブ・ウェブデザインは、うまく使えば素晴らしい効果を発揮する手法です。しかし、あくまでも魔法のツールではなく、場合によってはサイト訪問者にとって最も良い手法だとは限りません。ユーザーにとって良い状態と、運営側の管理工数のバランスをうまく考えて、スマホ対応を進めましょう。

あ、もちろん、デバイスごとに変えるのはちょっとしたスタイルだけで、専用のHTMLを用意しなくてもページの重さがほとんど変わらない場合は、レスポンシブ・ウェブデザインの便利さを最大限活用するのはいいと思いますよ。

また、同じモバイル向けでもスマホのデバイスごとの画面サイズに対応して微調整したり、PC向けとタブレット向けには同じHTMLを使っていてもスタイルを少し変えたり、または、スマホで縦表示と横表示でスタイルを変えたり、そういった目的でレスポンシブ・ウェブデザインを使うのは大いにアリだと思います。