ブレークポイントの慣習を見直して、現代にマッチさせよう！【従来の方法を見直すと…】

2,725 views

読了時間 : 約2分1秒

ウェブデザインの基盤は、UXデザインの発展とともにアップデートされています。かなり多くの変更が生まれましたが、これから変更すべき点も数多く残っています。命名における慣習にも、そろそろ目を向けるべきでしょう。

最近、さまざまなブレークポイントをどのように命名すべきか話し合いを行い、この問題がBootstrapに由来していることを発見しました。以前にBootstrapのLESSファイルを触ったことのある方は、次のような変数を見たことがあるでしょう。

@screen-sm, @screen-md, @screen-lg

Dellのチームと行った別の話し合いでは、サポートリスト内に延々増え続けるブレークポイントに、新しいTシャツのサイズを追加するよう要請を受けました。こうした経験を通して、現代においてもBootstrap時代の古い慣習が色濃く残っていることに懸念を抱くこととなりました。

レスポンシブフレームワーク作成の際には、数々の設定を行います。そのどれも、間違ってはいません。しかし、よりユーザーを念頭に置いた形で拡張できるはずです。

レスポンシブブレークポイントとオブジェクトのリフロー

レスポンシブデザインにおいて、ブレークポイントとはリフローのポイントです。ページ内でオブジェクトが折り返され、デバイスやその向きに最適な形で表示されます。リフローは単純なビューポイントの広さを意味するだけでなく、ユーザーの振る舞いとアフォーダンスをページの表示方法に合致させることなのです。

理論的には、リフローポイントは7つ存在します。

・スマートフォン：mobile-portrait、mobile-landscape

・タブレット：tablet-portrait、tablet-landscape

・PC：small-monitor、large-monitor、omg-wow（主にレターボックス表示向け）

スムーズなリサイズ

ブレークポイントがコンテンツを折り返すときには、さまざまなアスペクト比とピクセル深度に対応する必要があります。たとえば、13インチMacBook Airでブラウザを最大化した場合、ブレークポイントは24インチディスプレイのローエンドデスクトップPCと同じです。メンタルモデルと全体のレイアウトはそれほど変わりません。それでも、ブラウザのウィンドウサイズはユーザーごとに異なるため、それに対応する必要があるのです。

この対応は、オブジェクトサイズをピクセル単位ではなくパーセント単位で指定することで実現できます。画面上に、大きさ25％の四角形が4つ並んでいるところを想像してください。どれだけブラウザサイズを変更しても、リフローポイントを超えない限り、4つの四角形の大きさが調節されながら表示されます。