本当に必要なブレイクポイントを見つけ出す!日々新しい規格が生まれては消えていく昨今。リニューアルなどでサイトデザインを起こす際、毎度悩まされるのがブレイクポイント設定ですね。レスポンシブデザインが常識となって久しいですが、UI/UXや表示速度の最適化を考慮すると、ブレイクポイントは適切に設定していきたい所です。設定するにしてもどこに基礎を置くのか、それが問題であります。目次ブレイクポイントは2通り存在するブラウザと解像度のシェアって参考になるの?Googleアナリティクスを用いたブレイクポイントの設定デザイナーにこそ勧めたいアナリティクスブレイクポイントは2通り存在するスマホが480px以下で、タブレットは1024px以下で...という考え方が「デバイスベース」のブレイクポイント、Googleがガイドラインで推奨しているのが「コンテンツベース」のブレイクポイントになります。なじみのないコンテンツベースですが、ざっくり言ってしまうと「コンテンツ自身にとって最適なブレイクポイントを設定すること」ということの様です。大変なことが分かります。デバイスベースは着手前に、工数的な意味でブレイクポイントの数を決められます。コンテンツベースは情報デザインをしながら、適宜独自のブレイクポイントを設定する必要があります。理想形はやはりコンテンツベースになるのですが、ブレイクポイント設定に時間を割ける案件ばかりではないのが現状です。ブラウザと解像度シェアって参考になるの?ブレイクポイントやデザイン幅、ファーストビューなどは一般的に[ブラウザ・解像度のシェア率情報]から設定されます。参考にデザインする手法は、ブラウザ対応設定でもよく用いられますね。最新の情報を元にする事は正しいのですが大きなデータであるが故、これから作るサイトのユーザの閲覧状況に、必ずしも合致するわけではありません。デバイスベースで進めるのであれば、なおさら最適なポイントを見つける必要があります。上記シェアデータと合わせて必要になるのが、アナリティクスによる「ユーザの閲覧環境データ」です。Analyticsのユーザー系メニューを見てみましょう。「ブラウザとOS」にて、閲覧ユーザの画面の解像度が参照できるはずです(2019年8月現在)。ターゲットとしているユーザが、多く利用しているサイズを主軸にどこまで対応するか、各サイズのユーザ割合を見て決めていきましょう。サイト作成後、間をあけて定期的に確認していき閲覧ユーザの利用状況に変化が無いか見ることも重要です。それぞれのサイズで、ユーザ成績に極端な差が無いかどうかも見ていきましょう。デザイナーにこそ勧めたいアナリティクス重要なことは、実際の閲覧データを見てユーザ像をつかむことです。ユーザ像が固まってくれば、おのずと何をどう見せるべきか決まってきます。作り手側としても、具体的な数字でクライアントに提案しそれをもとに検討頂くことが可能になります。Googleアナリティクスは、ちょっとしたデータでもデザイナーの言語を増やし、発言力を高めてくれるのです。今後も、こういったアナリティクスのTipsを書いていければと思います。