ブログBLOG

Tips

2019.08.02

author：サキWEBデザイナー

本当に必要なブレイクポイントを見つけ出す！

日々新しい規格が生まれては消えていく昨今。
リニューアルなどでサイトデザインを起こす際、毎度悩まされるのがブレイクポイント設定ですね。

レスポンシブデザインが常識となって久しいですが、UI/UXや
表示速度の最適化を考慮すると、ブレイクポイントは適切に設定していきたい所です。
ただ、設定するにしてもどこに基礎を置くのか、それが問題であります。

スマホが480px以下で、タブレットは1024px以下で…という考え方が
「デバイスベース」のブレイクポイント、
Googleがガイドラインで推奨しているのが
「コンテンツベース」のブレイクポイントになります。

あまりなじみのないコンテンツベースですが、ざっくり言ってしまうと
「コンテンツ自身にとって最適なブレイクポイントを設定すること」
ということの様です。ざっくりでもかなり大変なことが分かります。

デバイスベースは着手前に、工数的な意味でブレイクポイントの数を決められます。
コンテンツベースは情報デザインをしながら、適宜独自のブレイクポイントを設定する必要があります。
理想形はやはりコンテンツベースになるのですが、ブレイクポイント設定に時間を割ける
案件ばかりではないのが現状です。

ブレイクポイントやデザイン幅、ファーストビューなどは
一般的に[ブラウザ・解像度のシェア率情報]から設定されます。

その年のシェア率 *1 を参考にデザインする手法は、
ブラウザ対応設定でもよく用いられますね。

無論、最新の情報を元にする事は正しいのですが
大きなデータであるが故、これから作るサイトの
ユーザの閲覧状況に、必ずしも合致するわけではありません。
デバイスベースで進めるのであれば、なおさら最適なポイントを
見つける必要があります。

上記シェアデータと合わせて必要になるのが、
アナリティクスによる「ユーザの閲覧環境データ」です。

Google Analyticsのユーザー系メニューを見てみましょう。
「ブラウザとOS」にて、閲覧ユーザの画面の解像度が参照できるはずです（2019年8月現在）。
ターゲットとしているユーザが、多く利用しているサイズを主軸に
どこまで対応するか、各サイズのユーザ割合を見て決めていきましょう。

またサイト作成後、間をあけて定期的に確認していき
閲覧ユーザの利用状況に変化が無いか見ることも重要です。
それぞれのサイズで、ユーザ成績に極端な差が無いかどうかも見ていきましょう。

重要なことは、実際の閲覧データを見てユーザ像をつかむことです。
ユーザ像が固まってくれば、おのずと何をどう見せるべきか決まってきます。

作り手側としても、具体的な数字でクライアントに提案し
それをもとに検討頂くことが可能になります。

Googleアナリティクスは、ちょっとしたデータでも
デザイナーの言語を増やし、発言力を高めてくれるのです。
今後も、こういったアナリティクスのTipsを書いていければと思います。