IDIA.JP

ひとつのHTMLですべてのデバイスに対応可能な「レスポンシブWebデザイン」の考え方と基本となる手法をまとめた。

レスポンシブWebデザインとは

レスポンシブWebデザイン（Responsive Web Design）とは、PC、タブレット、スマートフォンなど、多様な画面サイズのデバイスに最適化したWebサイトを「単一のHTML」で実現する方法。Webサイトをデバイス毎に制作する「振り分け」に変わる手法として積極的に使われている。

PCサイトしか準備しない場合の問題点

容量が大きい

ブロードバンド接続、PCでの閲覧を前提としているサイトでは、読み込みに時間がかかる。

横幅が大きい

多くのWebサイトが横幅1000px前後で制作されており、多くのスマートフォンが採用している540px以下のディスプレイでは文字などの可読性が低くなる。

閲覧できないことがある

動画や音声などの特殊なコンテンツ、Flashなどのインタラクティブなコンテンツなど、対応するプラグインが必要なコンテンツがPC以外ではうまく表示できないことがある。

振り分けによる対応の問題点

開発コストや開発期間の増加

デバイス毎にデザインやHTMLを作る必要があるため、開発期間も長くなり、開発コストも増大する。

更新作業の煩雑化

開発中だけではなく、公開後も手を入れる箇所が多くなり、更新作業が煩雑になりがちである。

周辺環境の変化に対する対応

CMSなど使用しているプログラムなどの更新や開発終了などに大きく影響を受ける。

URLの分散

振り分けによりURLが分散すると、検索エンジン対策として不利なだけではなく、アクセス解析も煩雑になる。

ユーザーエージェントの取得

多くの場合、ユーザーエージェントの情報をもとに振り分けが行われる。このユーザーエージェントが正しく取得できず、デバイスを正しく識別できない場合がある。

レスポンシブWebデザインの技術的要素

レスポンシブWebデザインは次の3つの技術によって実現している。

• フルードグリッド（Fluid Grid）
• フルードイメージ（Fluid Image）
• メディアクエリー（Media Query）

Fluid＝流動的な

フルードグリッド（Fluid Grid）

要素を罫線や升目に沿って配置する「グリッドデザイン」と、ブラウザーの横幅が変化してもレイアウトを維持する「フルードデザイン」を合わせた手法。

フルードイメージ（Fluid Image）

表示エリアの大きさに追随して画像のサイズを変更する。

メディアクエリー（Media Query）

画像の解像度、ウィンドウの幅、デバイスの向きなどにあわせて適用するCSSを変更する。

レスポンシブWebデザインの実践

レスポンシブWebデザインを実装する際は、コーディングしながらブラウザー上で直接デザインする「デザイニングインザブラウザー」を実践すると効率が良い。

ワークフロー

従来のワークフロー

1. 調査と分析
2. 情報設計
3. ワイヤーフレームの作成
4. PCサイトのデザイン
5. PCサイトコーディング
6. スマートフォンサイトのデザイン
7. スマートフォンサイトコーディング
8. テスト
9. 公開

レスポンシブWebデザインのワークフロー

1. 調査と分析
2. 情報設計
3. おおまかなワイヤーフレームの作成
4. デザイン
5. スマートフォンサイトコーディング（モバイルファースト）
6. PCサイトコーディング
7. 調整と修正
8. テスト
9. 公開

従来のワークフローよりも分業、進捗管理が難しくなるので、手戻りなどの無駄を発生させないためにも「調査と分析」「情報設計」に時間をかけ、精度を高める必要がある。

viewportの指定

viewportを使うと仮想のウインドウサイズを指定することができる。スマートフォンに最適化されていないサイトで文字や画像が小さく表示されるのはviewportによって擬似的に表示しているためである。

レスポンシブWebデザインでのviewport

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

「デバイスのスクリーンの幅に合わせて、表示倍率は等倍で表示する」の意。

フルードイメージの対応

画像サイズをブラウザーのウインドウ幅に合わせる。

img {
max-width:100%;
}

フルードグリットの指定

まずはグリッドデザインで各要素をレイアウトし、レイアウトが確定した段階で「px単位」を「%単位」に変換する。

メディアクエリーの設定

CSSの「メディアクエリー」機能によって、スクリーン幅に応じて適用するCSSを切り替える。

ブレイクポイント

CSSを切り替える条件となるポイント。

@media screen and (min-width:768px){
/* 画面幅768px以上で適用するCSSを記述 */
}

@media screen and (min-width:1024px){
/* 画面幅1024px以上で適用するCSSを記述 */
}

実際にレスポンシブWebデザインを使う際に考えておくべき問題

既存のPCサイトからの移行

既存のPCサイトをそのままレスポンシブWebデザインに移行することは、新しく制作するよりも難しい場合が多い。

デザインやユーザビリティが見劣りする

専用サイトをつくって振り分けする場合に比べると、デザインや使い勝手が見劣りする場合もある。

掲載する情報の取捨選択

レスポンシブWebデザインを実装している多くのサイトで、PCサイトの掲載情報量はスマートフォンサイトの情報量よりも多い。スマートフォン用のサイトを「あれば良い」だけのモノにしないためにも、より精度の高い情報設計と、コンテンツの取捨選択が必要となる。

使用する単位について

従来のWeb制作では単位にpxを使い、厳密なサイズ指定をすることが多かったが、レスポンシブWebデザインでは親要素の文字サイズを基準とした「em」や、親要素を基準とした比率による「%」を使う必要がある。将来的には、ルートとなる要素の文字サイズを基準とした「rem」などの普及も期待される。

ブレイクポイントについて

現段階では画面サイズ（px）を基準にブレイクポイントを設定するのが一般的ではあるが、文字数を基準にすることもできる。これはWebサイトのコンテンツの大半を占めるテキストの可読性を高める意味で効果がある。ただし、アルファベットと異なり、日本語では文字数の計算に多少の誤差が生じるので注意したい。

文字の設定について

画面幅が小さい場合、文字も同様に小さい方が一度に表示できる情報量が多くなり、読みやすくなる。そのため、画像サイズだけではなく、文字サイズも適宜調整する必要がある。

表（table）の表示について

レスポンシブWebデザインで課題となる要素の一つが「表」である。表は情報を一覧比較するための方法なので、画面の小さいデバイスでも一覧性を損なわずに縦方向、横方向にスムーズに移動できる手段を用意しなくてはいけない。具体的には見出し部分を固定して、ボディ部分をスクロールさせる（CSSで「overflow:scroll」を指定する）などの方法がある。

リセットか、ノーマライズか

CSSの標準化において、従来のWeb制作ではリセットCSSの方が厳密なデザインを実装できた。しかしレスポンシブWebデザインでは、px単位ではなくem単位での表示制御が好ましいことや、処理能力がPCに比べると低めであるスマートフォンのブラウザに対する負担のことを考えると、ノーマライズCSSの方がメリットが多い。

画像の切り替えについて

フルードイメージを使って、小さな画面に大画面用の画像を表示することもできる。しかし、データ容量や表示精度の問題もあるので、それぞれの画面サイズに最適化した画像を準備し、CSSやJavaScriptで切り替える方が良い。

高解像度ディスプレイへの対応について

AppleのRetinaディスプレイなどは高解像度のため、用意した画像ではボケが生じることもある。ターゲットとなる利用者のIT環境と、必要と思われる画像のクオリティとのバランスを考えながら、よりきれいに表示できる画像を準備する。

グリッドデザイン、フルードグリッドについて

大画面用だけではなく、小さな画面でもグリッドデザインを意識してデザインする。単位を「px」から「%」に変換することで、なめらかに切り替わるレイアウトを実現できる。

デザイニングインザブラウザーについて

デザイニングインザブラウザーを実現するには、より早い段階で掲載すべきすべてのコンテンツを準備する必要がある。作業中、作業後のコンテンツの増減は工数を大きく増やすことになる。また、コーダーだけではなく、ディレクターやプログラマー、デザイナーもレスポンシブWebデザインの考え方や手法について、十分に理解する必要がある。

タッチデバイスへの対応

美しさだけではなく、ボタンのサイズや当たり判定など、タッチデバイスでの操作を想定したデザインをする必要がある。

フレームワークの使用について

「Less Framework」などのレスポンシブWebデザインに対応したフレームワークを使うと、より容易にレスポンシブWebデザインを実装できる。

軽量化について

使用するすべてのファイルや画像について、できる限りの軽量化が求められる。モバイルデバイスの回線状況やそのスペックを十分に意識する。

段階的な切り替え

現在は「スマートフォン」「タブレット」「PC」の3種類の画面サイズを想定して制作するのが一般的になっている。しかし、より多様な画面サイズのデバイスが登場することが予想されるため、段階的な切り替えでは十分とはいえない。すべての画面サイズで意図したように表示できる方法を追求したい。

参考

• レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック
• Media Queries
• VIEWPORT RESIZER