【2021年版】スマホ用Webデザインの最適なアートボードサイズ

現在、Webサイトはパソコンで見るよりもスマホで見られることが多くなってきました。

そのため、BtoB（対企業）ではない、BtoC（対顧客）をターゲットにするWebサイト作成では、モバイルファーストでWebデザインを作ることが必要です。

スマホユーザをターゲットにしたWebサイトを作成する場合に、WebデザインをするうえでWebデザイナーが知っておくべき、アートボードサイズ（画面解像度）をご紹介！

【2021年版】スマホ用Webデザインの最適なアートボードサイズ

まずは結論から。2021年現在のスマホ用Webデザインの最適なアートボードサイズは、【375px×667px】です。

ただし前提として、このアートボードサイズは、日本をターゲットにしたスマホ用の画面サイズです。
実は誰をターゲットとするかによって、最適なアートボードサイズは変わります。

ではどうして【375px×667px】が良しとされるのか、日本国内のシェア率を元に見ていきましょう。

スマホ端末のシェア率

スマホ用のWebサイトのアートボードサイズを決めるのには、誰をターゲットにするかが重要になってきます。

日本なのか、海外なのか。
女性なのか、男性なのか。
子供なのか、大人なのか。

海外はAndroidのシェアが多いですが、日本ではiPhoneのシェアが多いという結果があります。（※1）
また、女性と男性では、女性はiPhoneの割合が高く、男性はAndroidの割合が高いです。
さらに、年代を絞ると10代から30代はiPhone、40代から60代はAndroidを持っている方が多いです。（※2）

Android端末は日本の大手メーカー企業各社が年配者向けにパッケージングしたAndroid端末を作っていて、
見やすく、使いやすいものが出ていること事が要因としてと考えられます。

参照元：
スマートフォン・シェアランキングTOP10
https://webrage.jp/techblog/sp_share/

（※1）[2021年]日本のiPhone・Androidシェア率調査結果｜世界と比べたスマホシェア
https://simchange.jp/post-164095/

（※2）日本国内の性別・年代別スマートフォン端末シェア率
https://mmdlabo.jp/investigation/detail_1941.html

シェア率からみる、モバイルファーストなWebデザインに最適な画面サイズ

調査結果から対象を日本に限った場合、iPhone7、iPhone8、iPhoneSE（第二世代）がiPhoneの中でも特に持っている人が多い端末になります。
現在の上位で使用されている端末や今後の傾向から、最適なアートボードサイズは【375px×667px】としてよいのではと考えられます。
ただ、iPhone内の最小の横幅が320pxの為、多少小さい画面で見ても問題ないように作成しておくとさらに多くの端末を網羅できます。

参照元：

Mobile Screen Resolution Stats Japan（日本国内のスマホ画面サイズ別シェア率）
https://gs.statcounter.com/screen-resolution-stats/mobile/japan

Desktop Screen Resolution Stats Japan（日本国内のモニタ画面サイズ別シェア率）
https://gs.statcounter.com/screen-resolution-stats/desktop/japan

 

iPhone　画面解像度

iPhoneの画面解像度について

ポイント：表示解像度（1インチの72分の1）
倍率：ポイントを何倍してピクセル表示するか。
ピクセル：実解像度

Android　画面解像度

Androidの画面解像度で一番シェアが高いのは現状「414×896」です。
世界的にみるとAndroid のシェア率の方が高くなるため、海外を視野に入れるサイト作成では「414×896」をお勧めいたします。
ただ、Android端末の横幅最小値が「360px」のため、横幅を「360px」で作成しておくと画面の崩れなどがなくすみます。

パソコン　画面解像度

パソコンの画面解像度で一番シェアが高いのは現状「1920px」です。
基本的にはWebサイトを作る場合、パソコンのWebデザインも考え、CSSのメディアクエリを用いて、レスポンシブな対応が必要になってきます。

パソコン側のデザインは、コンテンツ幅が固定される”ソリッドレイアウト”で構成され、スマートフォン側のデザインは、表示される画面サイズによってコンテンツの幅が拡大縮小される”リキッドレイアウト”で構成されることが多いようです。

ファーストビューを考える

アートボードの横幅はターゲットを絞ってシェア率から最適なサイズを選択しましたが、縦幅はどうでしょうか。

アートボードの縦幅は作成するWebサイトのコンテンツの多さによって変わってくる部分にはなるため、可変な部分になりますが、ファーストビュー（ユーザがページを開いたときにスクロールせずにみられる範囲）は、ユーザの離脱率にもかかわる部分でもあるため、どこまでの範囲がファーストビューになるのかは意識して作成する必要があります。

Webデザインにおける、retinaディスプレイの注意点

iPhone4から採用されたRetinaディスプレイは、実は今までのディスプレイとは違って、1ドット、1ピクセル（ドットバイドット）での考え方ではありません。1ドットを複数のピクセルで表現（スケーリング）しています。

Webデザインするうえでの注意点にポイントを置いて、oled(有機EL)ディスプレイの説明も踏まえつつ、ご紹介します。

Retinaディスプレイ

先に述べた通り、今までのディスプレイは画面の1ドットを1ピクセルで表現してきました。
Retinaディスプレイ（レティナディスプレイ）は、画面の1ドットを複数ピクセルで表現出来る、高画質・高解像度なディスプレイです。

Webデザインを進めるにあたって、CSSやSVG(ベクトル表現)で画像やデザインをするのであれば、基本的に375pxとして考えて問題ないのですが、画像（PNG、jpag等）は引き延しが起こるため、写真などの画像を用意する場合は、ターゲットとする端末の画面サイズ×倍率で作成しておくときれいな画質を保つことが出来ます。

現状採用されているディスプレイの最大倍率が3倍なので、現状は3倍を目安に画像を作成しておけば問題ないでしょう。

これからもっと倍率が高い高画質なディスプレイが出ることを考えると、基本的にはCSS、SVGでデザインを作成することが求められると考えられます。
また、画像を大きく作るより、文字ベースのCSS、SVGのデザインの方がサイト自体の読み込みの軽さにもつながります。

oled（有機EL）ディスプレイ

Retinaの後継として、oled（有機EL）ディスプレイを採用した、「Super Retina ディスプレイ」と「 Super Retina XDR ディスプレイ」があります。今まで主流となっていた液晶とは違い、ディスプレイ自体が発光する物で、バックライトを使用しないため、より自然な色合いの再現や消費電力を抑えることが出来るディスプレイです。
焼き付きなどのデメリットはあるものの、これからは、oled（有機EL）ディスプレイを採用した端末が増えると予想されます。

まとめ

• 日本をターゲットにした、Webサイトの最適なアートボードサイズは「357×667」
• iPhone端末の採用ディスプレイ「Retina」を見据えて、Webデザインに使用する画像サイズは現状3倍で作成がおすすめ