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

2012/5/17

topic

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

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

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

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

元のエクセルファイルはこちらです。
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

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

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

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

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

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

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

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

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

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

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

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

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

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

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