ブログ

ブレークポイントのまとめ

レスポンシブデザインを成功させるにはブレークポイントへの理解が欠かせません。それはウェブでもネイティブアプリ(特にAndroid)でも同じであると思います。

日々変化する環境ですし、ケースバイケースで設定は異なると思うので、完璧はありませんが、ここではプロジェクトに合わせて的確なブレークポイントを設定できるように

  • Android Material Design Guideline
  • Bootstrap
  • ZURB Foundation
  • 以前の私のポートフォリオサイト

のブレークポイントをまとめてみました。

Material Design Guidelineブレークポイント

Androidネイティブアプリに関わる人にはお馴染みMaterial Design Guideline。下記表は引用です。非公式な翻訳なので正確には元の表をご覧ください。

ブレークポイント(dp) デバイス 段組 ガター
0 ハンドセット小(ポ*) 4 16
360 ハンドセット中(ポ) 4 16
400 ハンドセット大(ポ) 4 16
480 ハンドセット大(ポ)/ ハンドセット小(ラ**) 4 16
600 タブレット小(ポ*)/ ハンドセット中(ラ) 8 16/24***
720 タブレット大(ポ*)/ ハンドセット大(ラ) 8 16/24***
840 タブレット大(ポ*)/ ハンドセット大(ラ) 12 16/24***
960 タブレット小(ラ) 12 24
1024 タブレット大(ラ) 12 24
1280 タブレット大(ラ) / パソコン 12 24
1440  パソコン 12 24
1600  パソコン 12 24
1920  パソコン 12 24

*ポートレート **ランドスケープ *** 最小幅600dp未満のデバイスでは16

Bootstrapのブレークポイント

ブレークポイント(px) 対象デバイス
768未満 スマートフォン
768以上 タブレット
992以上 パソコン
1200以上 大きいパソコン

私は使ったことがありませんが、世界中大好きbootstrap。シングルカラムでモバイル端末はなんとかしてしまおう!って感じですね。

ZURB Foundationブレークポイント

こちらもシンプル。

ブレークポイント(px) 対象デバイス
640未満 小デバイス
640以上 中デバイス
1024以上 大デバイス

私が最初使っていたブレークポイント

4年くらい前に作ったポートフォリオでは、下記のようにブレークポイントを打ちました。

ブレークポイント 対象デバイス
320px スマホ ポートレート
480px スマホ ランドスケープ
768px タブレット ポートレート
1024px タブレット ランドスケープ
1280px パソコン
1440px パソコン
1920px パソコン

同業者は大きなスクリーンで見ることがあるので巨大スクリーンまで想定してます。この時点では知見がなかったため、実験を兼ねて、とにかく全てに対応してみるという荒業に。大変でした。

最後に

ブレイクポイントの決め方は定番はモバイルファーストかと思います。

今のところは最小の320px幅と1024px幅の二つを拡縮のイメージをしながらデザイン。自分で実装するときはHTML/CSSプロトタイプを作りながら、その他サイズも必要に合わせてデザインする。ORブラウザ内で完結させてしまいます。

フロントエンドエンジニアさんが一緒にやってくださるときは、実装中に確認させてもらいながら、間はおかしいところだけ対応してもらうというやり方でやったこともあります。

モバイルファーストはおかしい。コンテンツファーストだと言う話もありますね。私としては結局、誰がどんな文脈で何を達成したいのかを先に考えるのが良いと思います。サイトにしてもアプリにしても。ストーリーファーストって感じでしょうか。重要なシーンをせいぜい2つくらいに絞るのがいいと思ってます。あれもこれも、だと結局モノ自体も中途半端になるし工数もかさむので。

デザインに取り掛かる前にそこが明らかになっていれば、おのずとどこを「最適化」して、どこは「対応」に止めるのかを決められるかと思います。

ちなみに、安全なやり方は幅固定センタリングしてしまうデザインですね。完全リキッドだとパーツや部分によってブレイクポイントの数が変わることもあります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です