Webデザイン制作をする時に、まず初めに画面サイズを考えなければなりません。
PCやスマホ、タブレットなどといった画面サイズが異なるため、それぞれの画面サイズ比に合わせて制作すると、とても時間を要してしまいます！
そこで今回は基礎的な画面サイズについてと最も活用されている画面サイズ比について解説していきますので、是非参考にしてください！
画面サイズの基礎知識
ファーストビュー
ファーストビューとは、「Webサイトに訪問したユーザーが最初に見るページの表示範囲」のことです。
ページを開いたときに見える範囲のことを指しており、ユーザーが「このページを見続けるか否か」を決める重要なものと言えるでしょう。
パソコンの液晶ディスプレイには、ドットと呼ばれる小さな点が縦と横に並び、それぞれを点灯させることで画面を表示させる仕組みです。画像を構成する点の最小単位が「ピクセル」(px)です。
モニターのサイズは、「横幅のピクセル数[px]×縦幅のピクセル数[px]」で表されます。
例えば、「1920px×1080px」は、横に点が1920個、縦に点が1080個で構成された画像サイズになります。
Retinaディスプレイ
Retinaディスプレイとは、AppleがiPhone 4で初めて採用した独自の高精細ディスプレイの名称で「Retina」とは英語で「網膜」を意味します。
Retinaディスプレイの搭載によって解像度は320×480ピクセルから960×640ピクセルの4倍になっており、今までの解像度よりも鮮明に見えるディスプレイになりました。
Retinaディスプレイの考え方
375px(iPhone7のディスプレイの横幅の大きさ・インチ数) × 2倍(Retinaディスプレイ対応比/デバイスピクセル比)
＝ 750px(iPhone7でブラウザに表示される大きさ)
Stat Counter
Stat Counterとは、世界200万以上のサイトから163億ページビューの統計データを基に、各国のブラウザやOSのシェア率をグラフ化しているシェア分析に特化したサービスです。
下の画像をご覧ください！
こちらの画像は2021年から2022年までの日本で最も利用されている画面比率です！
１位は『1920×1080』全体の14.84%を占めています。
これはデスクトップ型パソコンのサイズであり、iMacなどデスクトップ型パソコンの多くはこの画面サイズになっています。
２位は『375×667』全体の8.48%
こちらはモバイルの画面サイズとなっており、主にiPhone6〜iPhone8（第二世代）といった画面サイズ比になっています。
日本は特にiPhoneユーザーが多く、iPhone大国とも言われているぐらい4.7インチスマホを利用しています。
しかし今後はiPhone11〜iPhone13のような６.１インチが増え、『390×844』と少し大きなサイズで制作した方が良いと個人的には思っています。
３位は『1366×768』全体の7.14%
こちらはノートパソコンの画面サイズになっており、macbookAirなどはこの画面サイズ比になっております。
大手企業のWebサイトは主に横幅1000〜1300で制作されていることが多いです！
この様にWebサイト制作の画面サイズはPCなら『1920×1080』又は『1366×768』が一般的に多くのユーザーが利用しており、モバイルなら『375×667』で制作がお勧めです！
またモバイルの場合、日本で多くのユーザーがiPhoneを利用している為、Retinaディスプレイの仕組みについて理解しておく必要があります。
375px(iPhone7のディスプレイの横幅の大きさ・インチ数) × 2倍(Retinaディスプレイ対応比/デバイスピクセル比)
＝ 750px(iPhone7でブラウザに表示される大きさ)
＜まとめ＞
ファーストビューで印象が決まるのでレイアウトが崩れない為にも画面サイズ比は初めに決めておきましょう！
Webデザイン制作の画面比に関しては定期的に現在のシェア率をStat Counterを利用して確認すると良いでしょう。
Macの場合は開発からレスポンシブデザインモードで画面サイズのレイアウトを確認することもできるので知らないという方は是非活用してみてください。