レスポンシブ・ウェブデザインって何？

先日、レスポンシブ・ウェブデザインのウェブサイトを集めた「mediaquri.es」を紹介しましたが、周りの人からそもそも「レスポンシブ・ウェブデザイン」が何かということを説明して欲しいと言われました。

レスポンシブ・ウェブデザインとは

「レスポンシブ」は「反応型」とも解釈することができます。何に反応するのかというと、「スクリーンの幅」です。「レイアウト」がデバイスのスリーンの幅に反応して可変をしていくのが「レスポンシブ・ウェブデザイン」です。現在では、iPhone のみならず Android など多様なスクリーンサイズをもったデバイスが出現しています。特定のデバイスのスクリーンサイズに合わせてウェブサイトのレイアウトを作成すると、他のデバイスで上手く表示されない問題などが発生します。デバイスを基準に考えるのではなくて、スクリーンのサイズを元に考えようというのがレスポンシブ・ウェブデザインの考え方です。

いつ生まれたか

2010年に米国の「A List Apart」というブログで初めて紹介されました。しかし、実際にこのようなウェブサイトが出現しはじめたのは「W3C」のウェブサイトのリニューアルの2009年頃からです。これが最初の「Responsive Web Design」だと考えています。ちなみにallWebのリソースページで上記の記事の全文日本語訳も公開しています。

誰がつくったのか

元々、この考え方の素地になる部分をつくったのは、Ethan Marcotte という米国の開発者です。元は、彼のブログ「Unstoppable Ninja」で紹介されている「Fluid Grid」という記事が元になります。彼はこの記事の中で「Fluid Image」というテクニックを紹介していますが、これが恐らく「Responsive Web Design」の原型になるでしょう。

「レスポンシブ・ウェブデザイン」の作り方

レスポンシブウェブデザインの作り方は非常に簡単です。

1. ピクセルでスタイルシートを組む
2. ピクセルで指定された横幅を全て「%」に変換する
3. 画像を「Fluid image」にする
4. メディアクエリの指定をする
5. 「レスポンシブ・タイプセッティング」をする

という流れになります。

１、まず最初にデザインを普通にピクセルで組みます。

いわゆる「fixed」デザインをつくることになります。

２、ピクセルで指定された横幅を全て「%」にします。

「margin」「padding」の全てを「%」にします。960pxが全体の横幅でheader部分が900pxのウェブサイトがあったとしたら下記のような計算をします。
また、

900 / 960 x 100 = 93.75%

3、画像を「Fluid image」にする。

「レスポンシブ・ウェブデザイン」では画像に width="" height="" は指定をしません。
そのかわり、下記の指定をします。この指定をすると画像はウィンドウサイズに合わせて自動的に大小をします。

img,
object {
     max-width: 100%;
}

Internet Exprolerの場合は、max-widthをサポートしていないので、下記の記述を IE用のスタイルシートに記述します。

img {
     width: 100%;
}

４、メディアクエリを指定します。

「mediaqui.es」のウェブサイトをみてみると４種類ぐらいのウィンドウサイズを対象にしていることがわかりました。
調査をしたところ、「480px」, 「768px」,「1024px」 というのが自然と多くつかわれていることに気づきます。また、メディアクエリの調査作業中に、CSSを全て１行で記述しているウェブサイトに4/25の割合で出会いました。約20％のウェブサイトがパフォーマンスの為にCSSを圧縮していました。また、１つはHTML自体を圧縮して1行で記述していました。また、コンディショナルクラスネームを利用しているウェブサイトを多くみかけました。

記述場所、スタイルシートをにまとめて記述をします。link要素をつかい head要素に記述もできますが、 httpリクエストを少なくするために スタイルシートに@mediaルールを利用して記述しましょう。

@media screen and (min-width:480px) {
/*ウィンドウサイズ 480px 以下の スタイルシート */

｝

@media screen and (min-width:768px) {
/*ウィンドウサイズ 768px 以下の スタイルシート */
}

@media screen and (min-width:1024px) {
/*ウィンドウサイズ 1024px 以下の スタイルシート */
}

５，レスポンシブ・タイプセッティング

最後に、各ウィンドウサイズでのタイポグラフィのセッテイングをおこないます。画面サイズが小さくになるにつれて、「文字のサイズ」を小さくする必要があります。特に 480px 以下になったら、「font-size」をデスクトップの 80%ぐらいのサイズに指定をしましょう。

まとめ

非常に簡単に「Responsive WebDesign 」は作成することができます。この手法は、iPhone や Android といったOSや 各デバイスのウィンドウサイズに振り回されることもありませんので、非常に有効なアプローチです。是非とも身につけたいテクニックの１つです。しかしクライアントには jQuery Mobile のアニメーションを希望するクライアントがいます。そのようなクライアントにはこの手法は向いていないかもしれませんので、実際の案件に利用する際は、クライアントとクライアントのユーザーの細かい分析を行うことをオススメします。

今度レスポンシブ・ウェブデザインについて講演します。
もっと細かい部分までノウハウを公開します