デザインツールを開いてまず悩むこと、それは「アートボードのサイズをいくつにすれば良いのか？」ですよね。
デザインツールのプリセット（初期設定）も複数ありますし、検索すれば「アレがいい」「コレがいい」が無限に出てきます。
当然ですが、Webデザインの横幅サイズにコレ！という絶対的な正解はありません。
使用しているデバイスは人によって違いますし、サイズの使用率も日々変わってきています。
そこで今回はデバイス使用率を集計しているstatcounterのデータを元に、Webデザインの最適横幅サイズをお伝えしていきます。
結論：この横幅アートボードサイズを作りましょう
PCは「1920px幅」で作る
こちらはstatcounterが出している2022年9月～2023年9月の日本におけるデスクトップ端末の画面サイズ使用率です。
PCでは「1920×1080(黒い線)」が最も上位になっており、日本においてデスクトップ端末で最も高シェアであることがわかります。
この「1920px幅」は『フルHD』と呼ばれるサイズで、いわゆるデスクトップPC端末でよく使われる解像度になります。
その下にある「1536px」や「1366px」で作るケースもありますが、基本的に「1920×1080」で作れば間違いないでしょう。
ちなみに「2560×1440」がMacBook Pro 13インチのサイズ感です。Apple製PCが日本であまり普及していないことがわかりますね。
スマホは「390px幅」または「375px幅」(＆その2倍サイズ)
こちらはSPになります。SPは「390px幅」と「375px幅（2種類）」がかなり拮抗しています。
この2画面サイズの使用端末としては
| 横幅サイズ | よく利用されるデバイス |
|---|---|
| 390px | iPhone12, iPhone13, iPhone14 etc… |
| 375px | iPhoneX, iPhone SE(第2世代,第3世代) |
があります。
ご存知の方も多いかと思いますが日本はiPhoneのシェア率が高いので、iPhone端末に対する基準がそのままアートボードのサイズになる…という考え方で良いかと思います。
こちらのデータは2023年までのものですが、390pxサイズの端末の方が新しいことを踏まえると2024年以降は390pxサイズが基準になってくるのかと思います。
（&その2倍サイズ）については後述します
アートボードサイズは「2倍」で作るべき？
先ほど「2倍サイズ」という話が出ました。
Webデザインをしているとよく「アートボードサイズは2倍にする」と聞きますよね。
この内容を詳しくお伝えしていきたいと思います。
なぜ「2倍」で作るのか
「アートボードサイズを2倍で作ると良い」と言われる理由、それはApple製品に搭載されているRetinaディスプレイに対応するためにあります。
Retinaディスプレイをカンタンに説明すると「画像を2倍の密度で表示させる技術」です。
もう少し具体的な例えをすると「750pxの画像を375pxのディスプレイに表示する技術」と考えていただいて構いません。
当然ながら375px幅の端末に対して375pxの画像を当て込むだけでは、Retinaディスプレイでは高精度で表示されません。
そのため、一般的に2倍のサイズの画像を書き出して表示させることが大切だと言われています。
PCは2倍にしなくてもOK
PCの場合、そのまま1920px幅のアートボードを作成すれば問題ありません。
もちろん、厳密に言えばPCでもRetinaディスプレイの端末は存在するので「2倍サイズ(3840px幅)」を作る意味はあります。
しかし、MacBookを始めとするRetina HDディスプレイに対応したPC端末のシェアはそこまで多くないのでケアしなくても大きな支障は出ません。
そのため、PC向けアートボードサイズは1920px幅で作れば問題ないといえるでしょう。
SPは「2倍サイズで書き出し」又は「2倍サイズのアートボード」
SP画面では同じようにいきません。その理由が日本で特にシェアが多い「iPhone端末」へのケアにあります。
iPhone端末のシェア率が高いが故に、Retinaディスプレイの対応を前提として2倍サイズの書き出しが必要になります。
つまり書き出された画像が「780px(390×2)」または「750px(375×2)」になっていればとりあえずOKということです。
2倍サイズで書き出す方法はいくつかあります。代表的な方法を2つ紹介します。
2倍サイズのアートボードにする際の注意点
通常375px幅の端末に対して750px幅のアートボードを作る…といった場合です。
この場合、
- フォントや余白等の全サイズが実際には1/2になることを考えながら作る必要がある
- 偶数値のケア（小数点以下のサイズ）をする必要がある
- 3倍サイズへの対応時に面倒が増える
に注意する必要があります。
特に「実際には1/2になる」部分は盲点になりがちで、特にPhotoShopやIllustratorをそのままコーディング用のデザインカンプにするケースでは問題になる事が多いです。
これらのデザインツールはWebサイトのカンプとしてではなく「（画像）素材を作るツール」のため、初期設定で2倍サイズが用意されています。あくまで本来の用途ではない「Webサイトのカンプ」として使う場合の注意点になります。
2倍サイズで書き出しする際の注意点
アートボードサイズは基準通り作成し、書き出し時に2倍サイズで出力する場合です。
この場合、
- 2倍サイズに対応している画像素材か確認する
が必要になります。
例えば元々400pxの写真素材を200px程度の表示で使用していた場合、375pxの画面では正しく表示されます。
しかし、2倍サイズ（750px）で書き出しすると引き伸ばされるので荒くなることになります。
元のアートボードサイズを2倍にしている場合は「編集時点で荒く見える」のでこの引き伸ばしに気づきやすいですが、書き出し時に2倍にする方法の場合は最後まで気づかないことがあります。
「（素材の）サイズが小さい写真」等を使ったりしない限りは起こらない現象ですが、稀にあるので注意しましょう。
今後は3倍サイズが必要？
先程お伝えした”2倍サイズ”ですが、実は時代とともに変化する可能性があります。
iPhone13以降、Retina ディスプレイではなくSuper Retina XDRというディスプレイが出始めており、こちらは2倍ではなく3倍の解像度になっています。
例えばiPhone 13 miniの場合、CSS等で扱うサイズは360px幅ですが、表示される解像度では1080px幅(3倍)になります。
より高精度に表示される端末であるため、これらの端末をケアするのであれば2倍ではなく3倍で書き出しする必要が出てきます。
2023年時点で3倍サイズの対応が必要かどうかはデザイナーやマーケッターの判断によるところが大きいと思います。対応端末または書き出しサイズは確認した方が良いでしょう。
チームの制作環境によっても変わる
色々とお伝えしましたが、最終的な制作環境によって変わるが答えになります。
“理想”の話をするならば
- デザインツールではアートボードサイズ2倍で制作して1・1.5倍で共有
- プロトタイプツールでアートボードサイズ1倍で制作
になるかと思います。
しかし、全ての制作環境が理想通りとはなりません。状況や制作チームに応じて変わります。
プロトタイプを制作しない環境も多いですし、コーダー側が2倍サイズをケアする環境もあります。
チームメンバーの慣習やスキルセットによって使い分けていただくのが良いかと思います。
結論：状況によって使い分けてください
Webデザインの横幅サイズについて解説しました。
色々とお伝えしましたが、結局は「チーム内でどのような設定で進めるのかを共有すること」が一番大切になります。
ぜひコミュニケーションを取りながら進めてください。
Web制作フリーランスがよく見るカテゴリを中心に19万社以上
1日16円~で使える営業支援・技術支援ツールはこちら
