• Tweet
• 

レスポンシブWebデザインは、画面幅に合わせてレイアウトが変化することで、様々な画面サイズにワンソース(一つのhtml)で対応させることができる制作手法です。Media Queryという技術でCSSを切り替えることでレイアウトが変化します。CSSが切り替わる画面幅を『ブレークポイント』と呼びます。

今回はレスポンシブWebデザインのサイト制作時に、特に気になるブレークポイントの設定について、考え方と注意したい点をご紹介したいと思います。

CSSが切り替わりレイアウトが変化するポイントを「ブレークポイント」と呼びます。

ブレークポイントの考え方
ブレークポイントはどの画面幅でも見やすいレイアウトになるように設定するものです。
レスポンシブWebデザインは「どんな画面幅で見ても、適切に表示させるための制作手法」です。どんな画面幅でも見やすいようにデザインし、どんな画面幅でも見やすいレイアウトになるようにブレークポイントを設定する、というのが重要です。後ほどご説明しますが、普及している端末の画面幅を調べて、そこからブレークポイントを割り出そうとすると、ミスを犯すことになるのでご注意ください。

ブレークポイントはレイアウトによって、望ましい設定が変わります。
下の例を見てみましょう。「１」は500pxになったとき、テキストがすごく読みにくい。なので、「２」のように768～500pxの間のどこかにブレークポイントを設定します。ではどこに設定するか？600pxか？700pxか？650pxか？それを決めるのは、「その幅で見たときにどちらのレイアウトが見やすいか」です。600pxのときに小さい画面用のレイアウトが読みやすいのであれば、それ以上の幅でブレークポイントを設定すべきです。650pxのときに大きい画面用のレイアウトが読みやすければ、ブレークポイントはそれ以下に設定すべきです。

また、「３」のレイアウトの場合、ブレークポイントはありません。ただ幅が縮まっただけです。つまりレスポンシブWebデザインは、作るレイアウトによってブレークするポイントが変わるわけです。幅480pxの端末が多いからといって、そこでブレークさせればいいという単純なものではありません。

ピクセル密度の問題
時々、下記のような質問をもらうことがあります。
「iPhone3Gは320×480だし、Galaxy-Sは480×800だし、iPhone4Sは640×960だし・・・さらにGalaxy Tab 7”は600×1024で、iPadは768×1024で・・・一体どこにブレークポイントを設定するのがいいのだろう？」

この質問には、実は大きな間違いがあります。
そもそもブレークポイントは「その画面幅で見たときに見やすいレイアウト」を検討して決めるものなので、特定の端末を意識する必要はあまりありません。しかしそれ以上に大きな間違いがあります。

実は、スマートフォン端末は期待通りのピクセルでブレークしてくれません。
仮にブレークポイントを400pxに設定した場合、iPhone4Sは幅640なので大きい画面用のレイアウトで見られると思ってしまいます。でも実際のところは小さい画面用のレイアウトで表示されます。iPhone4Sは640幅ですが、実際は320幅として計算されているのです。

これはどういうことか。
実は「ピクセル密度」というものが関係しています。iPhone4Sも3GSも端末は同じ大きさですが、ピクセル数が倍違います。4Sのほうは一つひとつのピクセルが小さいためです。そのため640幅が320幅になります。詳しくはこちらのサイトをご参照ください。また、端末のピクセル密度一覧はこちらのサイトでも紹介されています。

このように端末の画面サイズもピクセル密度もバラバラの現状では、もはや普及端末の画面幅を調べて、それをターゲットにブレークポイントを決めるというのがあまり意味をなさないのです。なので、デザインからブレークポイントを考える、というのが重要です。

※期待通りブレークしないこの現象はiPhoneだけでなく、Xperiaでも、Optimus vu等の機種で実際に確認しています。タブレットは今後検証してみたいと思います。