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

2012.04.09

IT・WEB

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

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

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

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

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

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

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

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

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

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

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

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

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

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

次のページスマホ向けにできるだけ軽くしたいなら……

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

Ads by Google

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

安田 英久

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

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

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

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

ログイン

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

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

パスワードをお忘れの方

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

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