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

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

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

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

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

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

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

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

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

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

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

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