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

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

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

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

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

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

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

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


続きはこちら