WEBデザインやスマホアプリを作成する際のサイズを調べてみました
特にスマホは年々サイズが高解像度になり求めらえるサイズが年々変わっており
いい機会だったので経験も踏まえてまとめてみました
制作の流れと各サイズまとめ
WEBサイトを作成する際
PCサイトとスマホ両方に対応する
レスポンシブを採用するのが一般的になっています
デザインの手順としてはPCサイズを作成後→スマホサイズにリサイズ
という流れになると思います
その際に基準となるサイズを調べてまとめてみました
（WEB上の表示物は解像度72dpiで作られます）
■フォントサイズ
PCサイト
・本文サイズ 16or18px（行間1.8em）
・タイトル 32px（行間1.3em）
・最小サイズは12px
・本文サイズ 16or18px（行間1.8em）
・タイトル 18px～28px（行間1.3em）
・最小サイズは12px
※em（エム）は相対値「フォントサイズ×em」で改行の高さ
※photosop上でスマホ画面を作る際はフォントサイズは２倍で作り偶数のpxで作ること
■PCサイズ
横幅を決めて縦はスクロールで自由にサイズを変更できるようにするのが一般的
ディスプレイのサイズはシェア率の高い
「1920px × 1080px」または「1366px × 768px」でそこを考慮して
制作するのがおすすめですが、
フル画面で表示する必要性がそれほど求められていないため
多くの企業サイトは横幅「950px〜1100px」で作成されている
※ファーストビューでどうしても見せたいものがある場合はファーストビューも考慮する必要がある
※横幅がこのサイズ以下になったらスマホ画面に切り替えるレスポンシブのブレイクポイントを定める
■スマホサイズ
スマートフォンの解像度は「Retinaディスプレイ」が使われており
制作したpxを1/2～に縮小して表示しているため制作時のサイズは大きい
アプリ制作時は縦サイズも重要です
キャンバスサイズは画面サイズ【縦/横 19.5:9】にして
画面サイズ
iPhone 14 Pro 2556 x 1179 px
iPhone 14 Plus 2778 x 1284 px
iPhone 14 2532 x 1170 px
iPhone SE(第3世代) 1334 x 750 px
さらにノッチやフッターのセーフゾーンを考慮しフルHDの【縦/横 16：9】を基準に作成する必要がある
iphone14を基準とする場合
キャンバスサイズは2556 x 1179pxにして
セーフゾーンを考慮して【縦/横 16：9】で作成する
画面中央から「2096 x 1179px」が望ましい
サイズの計算が必要な時はアスペクト比計算ツール
https://ocadweb.com/aspectratiotools
スマホサイズの詳しいサイトまとめ
■iphone
https://qiita.com/tomohisaota/items/f8857d01f328e34fb551
■Android
https://qiita.com/le_skamba/items/32c8fc1dcf2a9b153e07
■iphone Android
https://blog.digimerce.jp/2018/01/25/4028/#4028_02
・画面サイズメモ
iPhone 14 Pro 2556 x 1179
iPhone 14 Plus 2778 x 1284
iPhone 14 2532 x 1170
iPhone SE(第3世代) 1334 x 750
■2023年版 アプリのデザインサイズどうするよ？
https://bakenekonoseitai.com/engineering/20230501-devicesize/
・（ノッチやフッターを考慮した）セーフゾーンを考慮する
・フルHDの【横/縦 16:9】を基準
・キャンバスサイズは【横/縦 9:19.5】
・画面サイズ＝解像度ではない
■WEBデザインの横幅サイズはこれで決まり！基礎から徹底解説
https://japan-design.jp/design/0050/
・スマートフォンの解像度は「Retinaディスプレイ」が使われており
従来の解像度と比較すると解像度が倍以上になり高画素密度のディスプレイ
フォントサイズの詳しいサイトまとめ
■フォントサイズ
https://tane-be.co.jp/knowledge/web-design/2601/
・各サイズの早見表アリ
・スマホで表示してみるとよいかも
■スマートフォン・PCで読みやすいフォントサイズ＆行間とは？国内のメディアサイトを調べてみた。
https://www.asobou.co.jp/blog/web/fontsize
・em（エム）は相対値
→16pxのテキストに対して1.5emだと行の高さが
フォントサイズの1.5倍（24px）になる
・望ましいサイズ
本文サイズ（PC＆スマホ）16か18px（1.8em）
タイトル （PC）32px（1.3em）、(スマホ)18px～28px（1.3em）
最小サイズは12px
※photoshopでスマホのデザインする際は２倍サイズでデザインする
※スマホ版のフォントサイズはPC版の2倍サイズで作成し端数無し偶数にする
おまけアプリアイコンサイズ
■アプリアイコンサイズ
https://note.com/designswitch/n/n1d8e34c5ad8c
・最大サイズ1024x1024pxを作成し他サイズはリサイズ
