こんにちは、ブログ記事の執筆内容をいつも悩んでしまうSPCデザイナーAです。
今回はWebサイトを制作するうえでデザイナーとして大切なサイズ感の話を認めていこうと思います。
目次
１．コンテンツ幅について
まずこちらの図は、日本国内のモニターサイズの使用率（2019年2月調べ）となっております。※StatCounter調べ
最も多いのは1920px×1080pxのサイズと算出されております。
ただ、昨今1366px×768pxの使用率が増加傾向にもあるようですので、こちらのケアもできる事が望ましいと考えます。
◆一般的なベース1200pxまたは1080pxで制作 ※フルワイドでなければ
フルワイドでなければ1200pxまたは1080pxで作成する事が一般的とされますが、WXGA（1366×768px)の場合166pxしか余裕がありませんので場合によってはかなり窮屈な仕上がりになる可能性があります。
また、ウィンドウ表示の場合、大抵の場合が見切れる事が想定されるので、1200px以下はレスポンシブを考慮する必要があります。
◆スマートフォンは750px
iPhone XS Maxなどの端末は、縦幅がとても長く、414px×3倍（Retinaディスプレイ対応比/デバイスピクセル比）＝1242pxにもなります。
3倍のRetinaの場合、画像などが3で割り切れないサイズにしてしまうと、薄くぼやけたりりレイアウト崩れを起こす可能性があるので注意しましょう。
2．ファーストビューについて
コンテンツ幅の説明を考慮すると、LPやWebサイトファーストビューで必ず見せたい内容（見出しとなるコピーや重要なボタン、アテンションとなるデザイン等）がある場合、PCは縦幅550px程度、スマートフォンは1000px程度までに抑えるようにしましょう。
使用率が第2位のWXGA（1366×768px)が、ブラウザ全画面ではない状態かつブラウザのメニューなどの縦幅を考慮すると、200px程は余裕を持たせる事が望ましいです。
※画面の縦幅を取得し、要素を縦の真ん中に配置する手法はこれに限りません。
3．文字サイズについて
・スマートフォンの本文文字サイズの人気は16px 、行間は1.5倍の24px
Retina対応の750pxで制作する場合、フォントサイズは倍の32px、行間は48pxという事になります。
最低サイズは12px（PSD内24px）と指定される事もありますが、 14px（PSD内では28px）はある事が望ましいです。
◆16pxはPCでもスマートフォンでも読みやすい文字サイズ
画面サイズが異なり、１画面の情報量も大きく異なってきますが、情報を快適に伝えるサイズは同じになります。その点を考慮してデザインしていきましょう。
◆スマートフォンは文字のジャンプ率（大小の差）が低い
読みやすい16pxを最小サイズとして、タイトルの文字などをそのままPCサイズの感覚で大きくしてしまうと、画面サイズが小さいのでかなり大きくなってしまいます。
◆文字の改行タイミング
改行のタイミングを固定で入れた場合、レスポンシブデザイン（切り分けであれば関係ない）だと見栄えが悪くなる場合があります。
このような事が起こらないよう、最初から改行をしないで構成するか、PCとスマートフォンで改行のタイミングを変える（スマートフォンは改行を入れない）ようにしましょう。
４．スマートフォンのボタンサイズについて
マウスで正確にカーソルを合わせてクリックできるPCと違い、手元で画面が隠れ指先で正確に押さなければならないスマートフォンは、指で誤タッチをせずに苦もなく押せる大きさを確保する必要があります。一般的に”ボタンの標準サイズは44px”とされています。（PSD上だと88px）
いかがだったでしょうか。
的確な情報訴求、扱いやすいWebサイトを制作するときに考慮すべきサイズ感。
しっかり押さえていきたい事柄ですね。
