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

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

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

サイトのキャプチャ

A Simple Device Diagram for Responsive Design Planning

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

各デバイスのサイズ

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

レイアウトのサイズ

※クリックで拡大

ポイント

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

レイアウトを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
    最も広いレイアウトで、タブレットのほとんどのランドスケープ用、デスクトップ用です。

top of page

©2017 coliss