レスポンシブデザインとブレークポイントからこれからのウェブを考える

ブレークポイントについて

ざっくり言うと、どのサイズでどの表示をするかというのをピクセル幅で切り替えていくポイントのことです。
320, 480, 600, 768, 1024 あたりで区切ります。
googleのドキュメントにもあるように

@media only screen and (max-width: 640px) {...}

のようなカタチでCSSを切り分けていきます。

1024と320のみのPCビューとスマホ系で表示できるだけのものでも
320, 480, 600, 768, 1024 のすべてを表示切り替えしているものでも
すべて「レスポンシブ」と呼ばれているようです。
様々なビューに対応する際には、wordpressの無料テンプレートを利用する場合などに注意が必要です。
確認は、Demoページでブラウザサイズを拡大したり縮小したりすればすぐにわかります。

MPMU.orgのブログを例に、レスポンシブ表示での可能性を考えていきます

今回は例として、とってもステキにレスポンシブ化していると思うMPMU.orgを例にして、どんなふう表示を変えていっているかを見ていきます。
※ブレークポイントの数値については、firefoxで計算させたので少しズレがあるかもしれません。

1280<1660以上

カテゴリーや、広告や、すべてのデータが展開されている状態となっています。
27インチ等、大きめのPCでの表示を意識しているのだとおもいます。
エリア全体が中央揃えになっていて、右と左のマージンが広くなっていきます。

1200<1280

ブラウザの端と、サイドバーとの空間数ピクセルを残して、
中央のコンテンツエリアがrelativeに拡大・縮小していきます。

968<1200

右側のカテゴリーが表示されなくなりました。

750<957

左側のナビゲーションが表示されなくなり、ナビゲーションはボタンによって吸収されました。
画像は、ナビゲーションを展開したときの表示です。
facebookのアプリなどでよく使われるUIになっています。

380<697

右側にあった日付デザインが、記事タイトルの下へ吸収されました。

380以下

記事エリアが横幅に合わせて変更されていくようになっています。
記事のみのシンプルな表示と、ナビゲーションのみ。内容的には697pxからは、変化はありません。

今までの技術の複合体

画面が小さくなればなるほど、ミニマムなデザインクオリティと、デバイスに対応したリンクナビゲーションが必要になり、画面のサイズによってコンテンツエリアが遷移していくのは、ちょっと前に流行ったリキッドデザインの応用で、サイズが大きくなれば、PCサイドビュー用の最近のスタンダードな技術＋どうやって見せていくかのギミックが大事になっていきます。
これらは、すべて新しい技術ではなく、今までの技術を複合させて応用したものだと考え、アタマを柔らかくして展開していくことが必要ではないかと思っています。

表示領域が狭くなるほど、大事なものが見えるようにする

表示領域が狭くなればなるほど、情報量が減ります。
例えば、ブログなら新着記事、店舗サイトなら店舗の情報やアクセス方法、ネットショップならカテゴリーや買い物カゴや、おすすめの商品がすぐに見えるようにすることが必要です。
チーム等、複数の担当者でウェブ制作する際にも、「一番伝えたいものは何なのか」ということを明確にし、共有していくことが今後ますます必要になってくるのではないでしょうか。