ブレークポイント
前提として、PCでタブレットデザインが見れてしまうのも、タブレットでPCのデザインが見れてしまうのも致命的な問題にはならないのでそこまで深刻に考える必要はない話ではあります。
その時々のシェア数などを含めてクライアントと相談しながら決めていけばよい数値になる。
SPとタブレット
768pxが多い。例外的に600pxなどのタブレットもあったりする。
タブレットとPC
1200pxが多い。例外的に1280pxのタブレットもあったりするが、1280pxに関してはPC版のシェアの方が高いので1280pxはPC版のデザインにすると言う考え方が多い。
statcouner
Webのトラフィックを観測しているサイトで日本のWebのトラフィックなども見ることもできる。
選ばれやすい解像度
他の解像度で見れないと言うことではなくあくまでクライアントに提出する場合の「デザインカンプのサイズ」になる。
PC
SPやタブレットに比べたら幅のバリエーションが多い。
ただよく使われるのは1440。FigmaのFrameのデスクトップのデフォルトの幅もこの幅になっている。
statcounterで見るとそこまで日本のシェアは多くない。
ただ、シェアが多い1920でアクセスされたとしてもそこまでチープにはならない見た目になる。
1440より小さい解像度だとでかい画面で見た時に少しチープなサイトに見えてしまう。
「余白の扱い」はデザイナーとの調整が必要
なお、1440pxよりも広がるケースも多々あるので、1440px以上の余白部分をどのように扱うかはデザイナーさんと調整が必要になります。
よくある対処法
- 背景色を入れる。
- 白で統一する。
- 画面幅いっぱいに広げてしまう。
タブレット
768px。単純に一番シェアが高い。ただ、Figmaでは現在768pxのFrame幅はデフォルトでは出てこないのでデザインカンプを作る際は気を付ける。
スマホ
360px。そこまでシェアは高くないがデザインは作りやすい。
Figmaでは一時期Androidが360pxで出てきたが今は出てこないので注意すること。
グリッド線
8の倍数で設定するとサイトが作りやすくなる。ただ、全て8の場合数で作れるわけではない。（スマホの余白の28px、タブレットの余白の44pxなどは8の倍数になっていない。）
スマホ
4列にするグリッドの場合
タブレット
8列の場合
PC
12列
8の倍数がよく使われる理由
多くのデバイスの画面解像度が8の倍数で設定されている。
8の倍数で設計すると端数が発生しにくい。
デザインに規則性があることで品質が向上する。
サイズにルールがあることで作業がスムーズになる。
Figmaの制約
縦横どちらかが4096pxを超えるFrameを設定できないようになっている。
無理やり配置しようとするとサイズが自動で縮小されて4096px上限でアスペクト比を維持したままではあるがリサイズされてしまう。
Insert Big Image
これを使えば、画像を半分に自動で分割して配置してくれる。Figmaにでかいサイズの画像を取り込む場合などには使える。
この記事へのコメントはありません。