• このエントリーをはてなブックマークに追加

WEMIE五回目。

今回はブレイクポイントについてのお話。

ブレイクポイントはメディアクエリのレイアウトが大きく変化するポイントのことで、そこよりも画面幅が小さいとAというレイアウト・大きいとBというレイアウトというふうに見た目を変化させることができる。

レスポンシブWebデザインにおいてメディアクエリのこのブレイクポイントの大きさというものはなかなか考え出すとキリがなく難しい。ただ、この発表を聞いて、どこをどのようにしたら効率的になるのか、どう考えたら楽になるのかということを再度認識できるようになった。

主な流れ

  • 12:30~13:00
    • 会場準備
    • テーブル・椅子の移動
    • 持参した電源タップの準備
    • Wi-Fiの準備・確認
    • プロジェクターの確認
  • 13:00~16:45
    • レスポンシブWebデザインにおけるブレイクポイントについて
  • 16:50
    • 現状復帰・片付け
  • 17:00
    • 退出

ブレイクポイントの幅

5段階のメディアクエリを設定して、4箇所レイアウトの変化するブレイクポイントの位置を設定すると、ずいぶんとスムーズにレイアウトされる。

一番簡単なのが、PCその他・スマートフォンのレイアウトの2段階。これはこれで、選択肢の一つではある。

3段階という選択肢もバランスが取れている。

デバイス幅が煩雑

次々登場するスマートフォンやタブレット。小さかったものが大きくなったり、大きかったものがよりコンパクトで、解像度が想像よりも小さいもの、あるいは解像度が大きいことにより設定したブレイクポイントが予想と違った表示になってしまって、スマートフォンなのにPCのような表示になってしまうといったケースが出てきてしまう。

プラットフォームの活用

デザインがプラットフォームに合わせされるのならば、有名なプラットフォームを使って構築するとコストが抑えられる。イチから準備するのも良いが、こういったプラットフォームを活用することで、クオリティと時間のバランスがうまく担保できる可能性も。

答えはない。案件ごとに柔軟に

答えはない。ブレイクポイントの適切な幅や考え方、あるいはデバイスの解像度は日々新しく登場するものにより変化していくので、それぞれの案件に合ったものを選択する。
予算が厳しい時はうまく2段階とすること。または、上手に3段階にして変化を単純にする。

退出

机・椅子を現状復帰しました。汚したときは、掃除などが必要みたいです。時間はきっかりです。17:00になったら退出しましょう。

開催した場所

松阪公民館:松阪ショッピングセンター マーム