1. Responsive Web Design（レスポンシブウェブデザイン）

スクリーンサイズに応じて、コンテンツの並び替えや表示／非表示、レイアウトの変更、画像やテキストをリサイズする手法の総称で、Ethan Marcotte 氏が 2010年に A List Apart に寄稿した「Responsive Web Design」で紹介されました。

スクリーンサイズの判定は、おもに CSS3 の「Media Queries（メディアクエリ）」を用いるので、HTML がワンソースで済むのが最大の特長です。

レスポンシブ Web デザインのメリット／デメリットを以下に記述します。

メリット

• デバイスごとに HTML ファイルを用意しなくて済むので、開発コストが抑えられる
• 将来のデバイス（家電など）にも対応できる
• URL がひとつなので、SEO の観点からも望ましい

デメリット

• ファイルサイズが大きくなりがち（パフォーマンス面に難あり）
• デザインカンプが起こしづらい（制作フローの転換が求められる）
• IE6 から IE8 は Media Queries に対応していない（Respond.js などで Polyfill する）
• モバイル特有のバグを考慮しなければならない（position: fixed; など）

2. Media Queries（メディアクエリ）

Media Queries を使うことで、スクリーンサイズやデバイスサイズに応じて、スタイルの適用を振り分けることができます。

CSS

/* スクリーン幅が 480px より小さいときに適用されるスタイル */
@media screen and (max-width: 480px) {
  #container {
    height: auto;
  }
}

/* スクリーン幅が 480px より大きいときに適用されるスタイル */
@media screen and (min-width: 480px) {
  #container {
    height: 100%;
  }
}

そのほかにも、メディアタイプ（print や screen）や、デバイスの向き（orientation）など、さまざまなデバイス特性と組み合わせることも可能です。

詳しくは Media Queries（W3C） をご参照ください。

3. Break Point（ブレイクポイント）

Media Queries でスタイルを切り替えるときの幅（高さ）のポイントです。いくつでも設定することはできますが、「モバイル」「ミディアムスクリーン（タブレット）」「ラージスクリーン（デスクトップ）」の3つをベースに指定するケースが多いです。

4. Mobile First（モバイルファースト）

Luke Wroblewski 氏が 2009年に提唱した、モバイルを起点にコンテンツを設計する考え方です。モバイルのネットワーク帯域や小さなスクリーンサイズといったモバイルの特性を考慮したうえで、コンテンツ戦略を考え、サイトやアプリを設計します。例えば、パフォーマンス向上のために、画像ファイル数を少なくしたり、モバイルでの操作性を考えて、リンク領域の最小サイズなどを決めていきます。

Mobile First の考え方に立つことで、これまでよりコンテンツにフォーカスした企画、制作フローが重要になります。このような考え方を「Content First（コンテンツファースト）」とも呼びます。

5. Progressive Enhansement（プログレッシブエンハンスメント）

最低限の情報やサービスの取得（アクセシビリティ）は確保するが、先進的なブラウザでは、より高次のユーザ体験を提供するといった考え方です。

例えば、CSS3 のプロパティは一部のブラウザではサポートさせていませんが、スタイルが無効であってもアクセシビリティの観点から問題がなければ、積極的に採用していきます。

「どのブラウザでもデザインカンプと同じ見え方にする」といったピクセルパーフェクトに基づく考え方は変わりつつあります。

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

可変グリッドレイアウトのことで、ピクセル（px）ベースで作成したグリッドレイアウトを、パーセント（%）に置き換えることで実装可能です。

例えば、コンテンツ幅が 950px で、h1 の幅が 710px であれば、CSS はこのような指定になります。

CSS

h1 {
  width: 74.737%;   /* 710 ÷ 950 = 0.74737 */
}

この計算を要素ごとにするのは大変なので、SASS や LESS で mixin を作るなど、自動で値を算出できる仕組みを用意したほうがよいでしょう。

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

画像サイズをスクリーンサイズに応じて変化させる手法で、以下の指定で実装できます。その際、HTML 内の img要素には、width属性、height属性は指定してはいけません。

CSS

img {
  max-width: 100%;
}

スクリーンサイズに応じて変化させられるのはサイズのみで、画角は変えられません。スクリーンサイズに応じて画像をトリミングするには、JavaScript やサーバサイド・プログラミングの力を借りる必要があるでしょう。

8. devicePixelRatio（デバイスピクセル比）

Apple 製品で採用されている、Retina ディスプレイで見ると画像がぼやけて見えるときがありますが、このデバイスピクセル比が異なることが原因です。Retina ディスプレイでは、デバイスピクセル比が「2」、Android では、デバイスピクセル比が「1.5」の端末が多いようです。

これら、高解像度ディスプレイでもきれいな画像を表示させる場合、あらかじめ解像度の大きい画像を用意するか、スクリーンサイズに応じて数パターンの画像を振り分けるかを考慮しなければなりません。

JavaScript でデバイスピクセル比を取得する

Webkit 系のブラウザでは「window.devicePixelRatio」で値を取得できます。以下の記述で値を出力できます。

JavaScript

document.write(window.devicePixelRatio);

CSS で画像を振り分ける

Webkit 系のブラウザでは、Media Queries を使ってデバイスピクセル比による振り分けが可能です

CSS

.selector {
  background-image: url('image.png');
}

/* devicePixelRatio = 1.5 以上 */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
  .selector {
    background-image: url('image_2x.png');
  }
}

9. Responsive Typesetting（レスポンシブタイプセッティング）

em（エム）や rem（レム）といった相対的な単位で指定することで、スクリーンサイズに応じてフォントサイズや行間などを調整する手法です。

em（エム）

em は1文字分のサイズを 1 とする単位です。親要素の値が子要素に継承される点を考慮しなければならないので、子要素での font-size の指定にわずらわしさを感じます。

CSS: via Snook.ca

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */
li li, li p /* etc */ { font-size: 1em; }

rem（レム）

rem とは root em の略で、ルート（または html要素）からの相対になります。親要素の値は継承されないため、em と比較するとシンプルな記述で済みます。

ただし rem は、一部の古いブラウザではサポートされていません。各サポートの詳細は When can I use をご確認ください。

CSS: via Snook.ca

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

rem 未サポートブラウザへの対応として px 指定と組み合わせます。

CSS: via Snook.ca

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

10. Designing in the browser（デザイニングインブラウザ）

レスポンシブ Web デザインでは、早い段階からプロトタイプを作っていく、アジャイル型 + 反復型なアプローチが求められます。

これまでの制作フロー

1. 調査・分析
2. 計画・戦略
3. 設計
4. デザイン
5. 開発
6. テスト
7. ローンチ
8. 運用・保守

レスポンシブ Web デザインで求められる制作フロー

1. 調査・分析
2. 計画・戦略
3. 設計
4. デザイン・開発・テスト
5. ローンチ
6. 運用・保守

制作の初期段階でプロトタイプを作り、オンライン（ブラウザ上）での検証とフィードバックを繰り返してデザインをしていきます。