人はサボりたい生き物なのでできるだけ対応する画面解像度は少ない方がいいと思う #Viewport

デザイン確認の際に「10個のデバイスサイズを確認してください！」
は実装する人もデザインする人も辛いですよね…。

確認するけど、1つ1つの精度は甘くなってしまうと思います…。
であればどうすればいいのか？の考え方について学んだので共有したいと思います！

viewportの対応範囲に悩んでいる人のお役に立てれば嬉しいです！

viewportを選定する時にまずやること

選定する時に初めにやることは「調査」です。
状況に応じて異なりますが、既存のサイトをリニューアルする場合は2つ行います。

新しくサイトを立ち上げる場合は1つ目だけで良いかと思いますが、既存サイトをリニューアルする場合は、現在の流入状況も加味してviewportを選定をする必要があると考えます。

下記のサイトで確認しました。

様々な絞り込み方ができるので制作するサイトのターゲットユーザーに合わせて確認してみてください！

流入しているユーザーや現在のシェアから90〜95％のユーザーを対象とすると画面解像度を5つか6つぐらいまでは決められます！

ただ、リリース時に確認したい解像度が5つもあるのは骨が折れます…。
そこでさらに絞り込んでいく方法を紹介します！

ここでいう「役割」というのは「スマホ最小サイズの確認用解像度」「PCサイズ最大の解像度」など選択してきた確認したい解像度に役割、ラベル付けのことです。

例えば下記の6つまで候補を絞り込んだとします。

さらに絞り込んでいく場合に問いたいのは以下の項目です！

上記を例にすると

のように役割を決められます。
ただ、一見無駄がないように見えますがさらに絞り込むこともできます。

絞り込むのはあくまでも考え方の一つであり、絶対に確認する解像度を減らせ。
という意図では全くありませんので改めてご認識ください。

PCのデザインは一定のサイズ以降「余白が増えるだけ」となるサイトもあると思います。
その場合どれほどシェアがあっても確認する意図はあまりないように感じます。

例の「1280px」と「1920px」はどちらか1つで良いのでは？と考えられます！

1280pxで確認すればよほど表示崩れ心配はないので1280pxをPCの確認サイズとします！
となるところですが…次に考えることは「1980px」の画面幅で確認する必要があるか？ということです。

〇〇px以上はただ余白が増えるだけ。ということであれば〇〇に当たる最小サイズで確認ができればPCでのデザイン確認は十分であると考えられます。

それなら「1280px」となりますが、日本のシェアは小さくなってきているので…
シェアがある程度大きく、サイトに流入してくるユーザーの一番のボリュームゾーンあたりを対象にできると良いのではと考えます！

スマホも同じ考え方で一定より大きいものはただ余白が増えるだけなら最小サイズかつボリュームゾーンを対象にできると1つに絞り込むことも可能だと思います！

デザインが崩れるのは小さくした時が多いかと思うので、大きいサイズの解像度を確認対象に入れる場合には取捨選択ができる可能性があると思っていただけると良いと思います！

タブレットはスマホの大きい版、PCの小さい版なので明確な意図がない限りはデザイン確認する対象の解像度から外しても良いと思います！

これで例にあげた6つの候補は下記の2つに絞れるかと思います！

対象の画面解像度を選定するときに注意したいのが「デザインデータの作りやすさ」です。
スマホのシェアは合算すると375pxが一番多いようです。

引用：https://gs.statcounter.com/screen-resolution-stats/mobile/japan#monthly-202310-202310-bar

375pxは割り切れないため、デザインデータ上真ん中寄せが困難です。

どの数字で割り切れるかはチームのルールによるところですが、8や4で割り切れる解像度に設定しておけるとみんな幸せになれると思います！

どの場所でも美しくは後のテストが大変になりますし、制作も気を付けることが多くなりすぎて開発工数が伸びてしまう原因になります。

必要最低限だけ決めておいて、必要に応じて増やす。
数ヶ月に1度広い範囲で確認するので良いと考えています!

人はサボりたくなる生き物だと思うので確認する解像度が増えすぎると確認がおざなりになったり、漏らしたりすると思います。

半年か1年に一度は解像度を見直すことも大切ではないかと思うのでチームで検討してみてください！