レスポンシブWebデザインのブレークポイント調査

レスポンシブWebデザインのポイントの一つにブレークポイント(レイアウト切り替えのポイント)があります。
この数値をいくつにするかは、これといった解がないのでレスポンシブWebデザインのサイトでどのようにしてるのか調査してみました。
不定期のごく一部の方しか興味ないであろうエントリー。

レスポンシブWebデザインのポイントの一つにブレークポイント(レイアウト切り替えのポイント)があります。
この数値をいくつにするかは、これといった解がないので
レスポンシブWebデザインのサイトでどのようにしてるのか調査してみました。
不定期のごく一部の方しか興味ないであろうエントリー。

調査概要

  • レスポンシブWebデザインのサイトのブレークポイントの数値を調べる
  • サイトはMedia Queriesより100サイトをピックアップ
  • 調べ方は各サイトのCSSで"@media"で検索をかけて目視で該当箇所をピックアップ
  • レイアウトの切り替え、一部コンテンツのみの切り替えに関わらず全てブレークポイントとして取得
  • ヒューマンエラーは想定範囲

調査結果

世にレスポンシブWebデザインのサイトがいくつあるのか分かりませんが、
100サイトは決して多い数ではないと思います。
なので今回の結果だけで安易に判断はできないのですが、
それでも大まかな流れが見えてきます。

まとめた結果をGoogle Docsに公開しました。

breakpoints on Google Docs
breakpoints

元のエクセルファイルはこちらです。
breakpoints.xlsx.zip

共通するブレークポイント

共通のブレークポイントに順位付けすると下記の様になります。

順位 ブレークポイント(px) サイト数 備考
1 480 60 iPhone ランドスケープ
1 768 60 iPad ポートレート
3 1024 23 iPadランドスケープ
4 600 22 Kindle Fire
5 1000 14  

iPhone、iPadを基準にした数値が目立ちます。
レイアウトをPC、タブレット、モバイルで変更すると考えた時に、
代表的なデバイスでありユーザー数も多いiPhone、iPadが基準になるのも自然な流れかも知れません。

しかし、例えばブレークポイントをiPad基準にした768pxにすると、
幾つかのAndroidタブレットは800pxなのでこれらのデバイスにはタブレット用のレイアウトが適用されません。

ブレークポイントの数

少ないサイトは1〜多いところでは十数のブレークポイントを設けてるサイトもあります。

ただし、多く設定してるサイトもその全てでレイアウトが大きく変化する訳ではなく、
ごく一部のコンテンツのみ調整するといった使い方をしています。

例えば下記のサイトでは1300pxを境に境界線(.splitter)のみスタイルが変わります。
Remodelista: Sourcebook for Considered Living
Remodelista

個人的見解

全体の統計としてブレークーポイントに480pxや782pxがよく使われてますが、
そこにこだわる必要はないと思います。

上記でも述べたようにこの数値はiPhone、iPadを基準にした数値であり、
他のスマートフォンやタブレットはこれに当てはまらないものもあります。

そもそもレスポンシブWebデザインはデバイスではなくウインドウサイズを基準に判断するので、
「このウインドウサイズではこのように見せたい」と言う考え方が自然な気がします。

例えば下記の記事はブレークポイントの提案をしています。
その数値は520pxや760px だったりとデバイスの境目を基準としてる訳ではありません。

A Simple Device Diagram for Responsive Design Planning
A Simple Device Diagram

この考えでいくと、スマートフォン、タブレットであっても機種によって異なるレイアウトが表示されます。
それでもそのウインドウサイズで見せたいと思ってるデザインなので問題はありません。

更にはもっとコンテンツ中心で設計してもいいと思います。
ブレークポイントの数値は下記のようなpx指定が一般に普及してますが、

@media only screen and (min-width: 400px)

最近ではem指定も見られるようになってきてます。

@media only screen and (min-width: 25em)

下記のサイトはem指定です。

James Chambers – Artificial Defence Mechanisms
Artificial Defence Mechanisms

テキスト量に最適なレイアウトを提供する考え方です。
またemベースのメリットは文字サイズを拡大した時にそれに応じてレイアウトも変更されます。

もちろんデバイスによって回線速度や使われる環境が異なってきます。
その点も考慮する必要はありますが、
例えばあまりにモバイルに特化したコンテンツを提供したいケースであるならば、
それはモバイル用の専用サイトを作る選択が最適となります。

レスポンシブWebデザインの設計以前に、
どのような構成にするか、まずはそこが重要だと思います。

毎度思いますがレスポンシブWebデザインの設計は簡単ではありません。
でもコンテンツを主において、デザイン・レイアウトには若干の緩さを許容できるのであれば、
それも大分解消されて制作側も気が楽になるのではないでしょうか。

Add Comment

本文

  1. […] レスポンシブWebデザインのブレークポイント調査 同じくDesign Spiceさんのエントリです。 […]

  2. […] レスポンシブWebデザインのブレークポイント調査 │ Design Spice […]

  3. […] イントはスマホ用スタイルの480px、タブレット用の768pxとの事です。(参考:http://design-spice.com/2012/05/17/break-point/) それプラスデフォルトのPC用と合計3つのスタイルを用意するケースが多 […]

  4. […] レスポンシブWebデザインのブレークポイント調査 (こちらも2012年の記事) […]

  5. […] 参考:レスポンシブWebデザインのブレークポイント調査 […]

PAGE TOP