スマートフォン、タブレット、デスクトップのためにレイアウトの幅をどのように設計すればよいか

iPhoneやAndroidなどのスマートフォン、「新しいiPad」などのタブレット、そしてデスクトップなど、さまざまなデバイスの幅に対応させるResponsive Web Designのために、どのようにレイアウトの幅を設計し、いくつレイアウトを用意するのか3つの方法を紹介します。

各デバイスの幅は、2012年3月のデータです。

A Simple Device Diagram for Responsive Design Planning

[ad#ad-2]

下記は各ポイントを意訳したものです。
キャプチャに使用している画像は元記事よりPSDファイルでダウンロードできます。

• 各デバイスのサイズ
• レイアウトを3つ
• レイアウトを4つ
• レイアウトを6つ

各デバイスのサイズ

まずは、2012年3月現在の各デバイスの幅です。

※クリックで拡大

ポイント

• 上段：ポートレイト（縦置き）、下段：ランドスケープ（横置き）です。当初は各デバイスの高さ/幅のダイアグラムを作成することを考えましたが、Responsive Web Designで大切なのは幅であるため、幅を軸に作成しました。

[ad#ad-2]

レイアウトを3つ

レイアウトを3つにするのは少し慎重になる必要があります。それはなぜなら対応するデバイスが、スマートフォンのポートレイト、ランドスケープ、タブレットのポートレイト、デスクトップ・ラブレットのランドスケープがあるからです。
レイアウトを3つにする解決方法は、この中のスマートフォンとタブレットのポートレイトをスマートフォンのランドスケープにまとめてしまうことです。

※クリックで拡大

レイアウトのサイズ

• 0-519px

  ほとんどのスマートフォンのポートレイトはこのサイズで見るでしょう。

• 520-959px

  iPadやAndroidタブレットなどのポートレイト用です。また、Androidのランドスケープもこのサイズで見ます。

• 960+px

  iPadのランドスケープをはじめとする、もっとも大きいサイズ用です。
  これはデスクトップ用でもあります。

レイアウトを4つ

レイアウトを4つにするのは元記事のサイトでも採用している方法です。
ここ一年の間に発売されたデバイスを考えた上で、最も効果的な方法だと思います。

※クリックで拡大

レイアウトのサイズ

• 0-519px

  全てのスマートフォンのポートレイト用です。iPhoneのランドスケープもここです。

• 520-759px

  解像度の大きいスマートフォンや小さいタブレットのポートレイト用です。

• 760-959px

  iPadやたいていのAndroidタブレットのポートレイト用です。

• 960+px

  もっとも大きいサイズのAndroidのスマートフォン、iPad, Androidタブレットのランドスケープ用で、同様にデスクトップ用です。

レイアウトを6つ

プロジェクトの予算が底なしで、最大限のカスタマイズを望むのであれば、6つのレイアウトにするのもよいでしょう。

※クリックで拡大

レイアウトのサイズ

• 0-240px

  ウェブを利用できる最も古いケータイ用です。

• 241-399px

  iPhoneのポートレイト用で、一部の古い電話でも見ることができるかもしれません。

• 400-540px

  iPhoneのランドスケープとAndroidのポートレイト用です。

• 541-767px

  Kindle Fireのポートレイトだけのためのレイアウトです。

• 768-959px

  iPadなどのタブレットのポートレイト用で、Androidのランドスケープもここです。

• 960+px

  最も広いレイアウトで、タブレットのほとんどのランドスケープ用、デスクトップ用です。