デバイスごとの表示環境を考えたWebサイトの制作手法《レスポンシブWebデザイン》

Web制作テクニック

レスポンシブWebデザイン [Responsive Web Design]レスポンシブWebデザイン》[Responsive Web Design]とは、Webサイトの閲覧環境(パソコン・iPad・iPhone・Android などのスクリーンサイズ)に応じて、ページレイアウトを動的に変更させる手法です。

このレスポンシブWebデザインは、2010年に欧米のブログ《A List Apart》で Ethan Marcotte氏の記事にて初めて紹介されています。

» Responsive Web Design

また、モバイル主軸にWebデザインを考えることを《モバイルファースト》[Mobile First]と言い、スマートフォンのような小さなスクリーンサイズを優先してデザインするレスポンシWebブデザインも、その手段の一つとされます。このモバイルファーストという考え方は、スマートフォンの普及と共に多くのWebサイトで実践され初めているそうです。

今回はこのブログにもレスポンシブWebデザインを取り入れ、スマートフォンやスマートパッド向けにリデザインにしてみました。手早く実践できる内容でしたので、その手順をここで書きまとめておきます。

[adsense]

スクリーンサイズを基準に考える

レスポンシブWebデザインで作られたWebサイトは、閲覧環境に応じて、その環境に合わせたレイアウトに切り替えることが可能です。ここでいう閲覧環境とは、スクリーンサイズを基準に判断します。なので、正確にはPCやスマートフォン等のデバイス毎にというよりも、スクリーンサイズによってレイアウトを変化させるという認識で考えます。また下記サイトは、レスポンシブWebデザインのデモサイトとして初めて公開されたものです。スクリーンサイズ(ブラウザのウィンドウサイズ)によってレイアウトが変更されているのがわかります。

A Flexible Grid

» A Flexible Grid

デモサイトを開いた状態でブラウザのウィンドウ幅を徐々に狭めてみてください。スクリーンサイズによって、レイアウト構成が2カラムから1カラムへと、さらにはメニューの配置まで変化するのが確認できると思います。

レスポンシブWebデザインの手順

このような手順で、レスポンシブWebデザインを実現させていきます。

1.ピクセルで指定してある値をパーセントに変換

スクリーンサイズに合わせてレイアウト要素の幅が動的に変わるように、ピクセル単位で指定してある width, padding, margin などの値はパーセント単位に変換します。

例えば、Webページの全体幅である #wrapper 要素が 960px、その子要素である #container 要素が 940px の場合
940÷960×100 = 97.916667%
このように計算して、スタイルシートには #container {width:97.916667%} と記述します。これと同様に他の width, margin, padding もパーセント単位に換算していきます。

ただ、一からWebサイトを制作する場合は、いきなりパーセント単位でスタイルを組むのは難しいので、まずピクセル単位で組んでから、後でパーセント単位に変換するようにします。

2.画像サイズを Fluid Image にする

スクリーンサイズに合わせて画像のサイズも動的に変化するようにします。そのために《Fluid Image》と呼ばれる手法を採り、下記のようにスタイルシートへ width を追加します。

/*モダンブラウザ用*/
img,
iframe,
object {
    max-width:100%;
}
/*IE7用*/
.ie7 img,
.ie7 object/ {
    width:100%;
}
/*IE8用*/
.ie8 img,
.ie8 object {
    width:auto9
}

3.メディアクエリでスタイルを振り分ける

スクリーンサイズに応じてレイアウトを切り替えるための方法を説明します。まず、適用されるスタイル(CSS)を、それぞれのスクリーンサイズによって振り分ける指定をします。

これを実現させるためには《メディアクエリ》[Media Queries]という CSS3 の機能を使います。このメディアクエリはヘッダー、もしくはスタイルシートに記述して使います。メディアクエリの記述では、スクリーンサイズ以外にも、ウィンドウサイズ、ディスプレイの解像度や種類などが指定できるので、それに応じたスタイルを適用させることが可能です。

これをヘッダーに記述する場合は、以下のように設定します。

<link rel="stylesheet" type="text/css" media="screen and (max-device-width:480px)" href="iphone.css" />

例えば、iPhone のスクリーンサイズは 320px x 480px なので、max-device-width を 480px にします。すると、iPhone(正確には最大幅が480px 以下のスクリーンサイズ)で閲覧した場合は、iPhone用のスタイルが記述された iphone.css が読み込まれるようになります。

スタイルシートに直接記述する場合は、以下のように設定します。

@media screen and (max-width: 1024px) {
#wrapper {
    width:95%;
}
}
@media screen and (max-width: 768px) {...}
@media screen and (max-width: 480px) {...}

ここでは複数のスクリーンサイズ(PC, iPad, iPhone)を指定しています。max-width は“最大幅〜px 以下のスクリーンサイズ”という意味なので、上記例の場合、iPhone の横表示(幅 480px)で閲覧した場合は、その上に記述してあるスタイルが全て適用されることになります。このようにスタイルは、上の条件から順番に継承されていきます。

スタイルを設定する

メディアクエリによるスクリーンサイズの振り分けが出来たら、それぞれに適用させるスタイルを記述して、各メディア(スクリーンサイズ)に適したレイアウトを作っていきます。

@media screen and (max-width: 480px){
#main,
#sidebar {
    float:none;
    width:auto;
}
#menu-y {
    display:none;
}
}

例えば、3カラムのレイアウトを2カラム、または1カラムへと変化させるためには、並列配置してある各要素のフロートを無効にしておきます。また、スマートフォンでの閲覧に支障となる要素がある場合は、非表示にしておきます。

メディアクエリをIEにも対応させる

メディアクエリに対応していない IE8 以下のブラウザーでも、メディアクエリを利用できるようにするには《css3-mediaqueries.js》というスクリプトを読み込ませます。Google で公開されているコードなので、下記のようにヘッダー内に記述するだけでOKです◎

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/
svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

これで IE8 以下でも簡単にメディアクエリーに対応させられます。

4.metaタグで Viewport を制御する

ここまでの行程で、スクリーンサイズに応じてレイアウトが切り替わるように設定しましたが、それをスマートフォンで正しく表示させる上で、忘れてはならないのは《Viewport(ビューポート)》に関する記述です。

Viewport とはデスクトップでいうところのブラウザーウィンドウ上の表示サイズです。スマートフォンでは、デスクトップのようにウィンドウをリサイズする概念が無いため、その機種のスクリーンサイズ=ブラウザーウィンドウのサイズとなり、iPhone ではこれが 980px と設定されています。この事により、メディアクエリで設定してあるスクリーンサイズ幅 480px のスタイルは採用されず、スクリーンサイズ幅 980px のレイアウト、つまりデスクトップ用のレイアウトが擬似的に表示されてしまいます。

このようになる理由は、デスクトップ向けサイトを閲覧できるスマートフォンブラウザーでは、既存のウェブサイトを画面ちょうどに収めるため、デフォルトでは Viewport のサイズをデスクトップ相当にしてあるからです。

iPhone, Android いずれの場合も、このデフォルトの状態では文字や画像がとても小さく表示されます。これをちょうど良いサイズ、つまりスマートフォン用にメディアクエリで設定したレイアウトで表示するために、metaタグの記述で Viewport を制御します。

<meta name="viewport" content="width=device-width,initial-scale=1.0">

width=device-width
この記述で Viewport の横幅をデバイスの幅にすることができます。これで iPhone であれば、横幅 320px でコンテンツが表示されるようになります。この指定により Android でも、殆どの場合が横幅 320px として表示されるようになります。今回メディアクエリでは、max-width: 480px(スクリーンサイズの最大幅 480px 以下)の条件でレイアウトスタイルを指定してあるので、iPhone の縦表示(横幅 320px)で見ても、そのスタイルが採用されます。

initial-scale=1.0
表示の初期倍率を指定します。つまりこの値が 1.0 の場合は等倍サイズで表示させるという指定になります。iPhone だと縦向きの横幅が 320px、横向きだと横幅 480px なのですが、この記述がないとページを横向きで表示したとき、320px のレイアウトが維持され、それが1.5倍に拡大された状態で表示されてしまいます。

但し、これはページを読み込んだ時点での倍率なので、縦向き→横向き(横幅 480px)にしても、320px × 1.0 の倍率で表示されます。これは画面を指でタップすることによって、480px × 1.0 にフィットしますが、どうしても自動的に画面にフィットさせたい場合は、Vewport を以下のように記述します。

<meta name="viewport" content="width=device-width, maximum-scale=1.0" />

maximum-scale=1.0 と指定します。これは拡大/縮小操作自体を禁止する記述なので、等倍以上は拡大されません。ただ、ユーザによる拡大/縮小操作もできなくなってしまいます。Yahoo! JAPAN などの有名サイトでも、この機能を使っている場合もありますが、ユーザビィリティの観点からは、この指定は避けた方が良いそうです。

レスポンシブWebデザインは最善策ではない

モバイルファーストの考え方としては、ただ見た目をスマートフォンに合わせるだけでは、十分な対応とは言えず、むしろ裏目にでる可能性すらあるようです。詳しい理由としては、以下の記事を読んで頂ければ解り易いです。

Unformed Building
» [翻訳]モバイル向けの CSS Media Queries は見掛け倒しである

メディアクエリによって、スタイルシートに余分な記述が増えたり、画像にしても表示が縮小されるだけであって、実際には大きいサイズのものが読み込まれています。スマートフォン向けということは、殆どの場合は外出先で見られるので、通信速度を考慮した構造にしなければなりません。このことから、レスポンシブWebデザインを施せば、必ずしもスマートフォンに“最適化”されるということにはなりません。

今回は、レスポンシブWebデザインという制作手法をご紹介しましたが、ユーザーエージェントによる振分けなど、Webサイトをスマートフォンに対応させ手法は他にもあります。特に WordPress で構築したサイトであれば、プラグインによって手軽にスマートフォンに対応させることが可能です。※このブログでは、WPtouch というプラグインを使っていました。

ただ、モバイルファーストを目指す上でもっと大事になってくるのは、コンテンツ内容も含め、モバイルならではの独自性の活用、ユーザー体験まで考えられた Webサイトの展開ではないかと思います。その辺り、下記リンク先の記事にて考察されていますので、興味がある方は是非。

AQ
» レスポンシブWeb DesignからレスポンシブWeb Publishingへ

この記事を書いた人

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です