スマホサイトの解像度は機種によって違う！よく利用されている解像度も紹介

スマホサイトのデザインを担当していると、どの比率で画像を挿入すれば適切に表示されるのか迷ってしまうものです。

そこで、この記事ではスマホやPCでよく利用されている解像度などを紹介します。それぞれ端末ごとに異なりますので、Webサイト制作の参考にしてください。

まず前提として、スマホかPCかで画面の割合は異なります。

PCの画面割合は基本的に同じですが、スマホは機種によって異なりますので注意してください。ここではスマホとPCの画面の割合について紹介します。

PC画面の割合は基本的に16：9の割合で表示されます。PCを購入する際には縦と横の比率なんか気にする方は少ないでしょうが、サイトを構築する人間からすれば大切な要素です。

例えば、16：9の画面で表示されるはずのサイトに、3：2の比率で表示される画像が使われていたらどうでしょうか？もしかしたら、それほど違和感は感じないかもしれません。しかし、どこかむず痒さを感じてしまう方もいるでしょう。

大衆受けするサイトを構築するためには、画面の比率を意識したうえで画像を挿入する必要があります。ただし、すべてのPCの画面比率が16：9ではないことを意識しましょう。今や多くのプログラマー御用達のMacBook Proは16：10の画面比率です。

このように、すべてのPCの画面比率が16：9ではありませんが、16：9の画面比率が多いということを覚えておきましょう。

ではなぜ、16：9の規格が主流になっているか気になりませんか？先に正解を述べると、フルHDや無印HDの規格が由来しているからです。

フルHDは1,920×1,080、無印HDは1,280×720という規格でできています。約分すると、それぞれ16：9の比率になります。この黄金比をもとに多くのPCで16：9の画面比率が流行するようになりました。

続いてスマホの画面の割合を見てみましょう。まず知っておきたいのが、総務省が発表している「令和3年 情報通信白書」によると、インターネットを利用する端末の68.3％がスマホからだそうです。パソコンからの利用である50.4％より、17.9％も上回っています。このようにスマホが全盛の現代においては、スマホサイトのデザインに対応することは急務です。

しかし、今やスマホは大きく分けてiPhoneとAndroidの2つの端末が流通しています。両者とも異なる特徴を持っていますので、好みによって利用しているスマホは異なるでしょう。ここで大変なのが、スマホは機種によって画面比率がだいぶ異なることです。

すべてのスマホ画面比率を把握するのは大変ですが、せめてスマホの代表格であるiPhoneとAndroidの画面比率は把握しておきましょう。

iPhoneの画面比率は最新作のiPhone13で19.5：9です。これまでiPhoneは16：9の画面比率でリリースされていました。初期のiPhone4や4sなどの場合は3：2などの画面比率でもリリースされています。

しかし、16：9の画面比率が主流だったのも過去のことで、スマホ市場においては画面の縦長化が起きています。このトレンドが起きている背景として、スマホで検索することが増えたことがきっかけだと考えられるでしょう。スマホでの検索機会が増えたユーザーは、1つの画面でなるべく多くの情報量を求めるようになっています。

そのため、なるべく情報量が多く表示される縦長の画面がトレンドになったのでしょう。今後も縦長のスマホがシェアを伸ばしていく可能性があります。そのため、Apple社はいち早くiPhoneの画面比率を縦長画面に対応したのかもしれません。

Androidのスマホは、縦長化がさらに顕著に現れている機種が存在します。例えば、Androidのスマホといえば、arrowsやGalaxy、Xperiaなどを思い浮かべる方がいるでしょう。それぞれの最新作の画面比率は以下の通りです。

以上のようにAndroidスマホはiPhoneよりも縦長化が顕著です。さらに、なかには折り畳みできる形式のスマホが販売されていて、Androidスマホは今後縦長よりもPCに近い感覚で操作できるスマホをリリースすることが予想されます。

それぞれ端末によって画面比率が異なるため、どの程度のコンテンツ幅にしようかと悩まれることもあるでしょう。続いて、スマホとPCのコンテンツ幅でおすすめのサイズを紹介します。

PCサイトのコンテンツ幅は、1,000px前後〜1,000px以上がおすすめです。1,000px前後〜1,000px以上というコンテンツ幅がおすすめである理由は、多くのPC画面において、フルHDの1,920x1,080が採用されていることが影響していると言われています。フルHDを採用していなくても1,280×720程度の画面を採用していることが多いです。

そのため、1,280の画面幅に合わせて、少なくともコンテンツ幅を1,000pxにするようにしているWebサイトが多いです。この際よくありがちな間違いなのが、コンテンツ幅とアートボードの概念を同じだと思うことです。

コンテンツ幅はアートボード内に入れるデザインの横幅のことですので、アートボード＝コンテンツ幅ではありません。もし「コンテンツ幅を1,000pxにしといて」と指示されたとして、アートボード幅を1,000pxに設定してしまってはかなりビジュアルが異なってきますので注意が必要です。

では、なぜコンテンツ幅を考える必要があるのでしょうか？コンテンツ幅を考える理由としては、アートボード上のデザインに上限を持たせないと文章が間延びしてしまう恐れがあるからです。横に伸びている文章はユーザーが読みにくいため、そもそも適切なデザインとはいえません。そこで、コンテンツ幅を設定する必要があります。

これはPCサイトでもスマホサイトでも同じですので、この際に覚えておきましょう。

スマホサイトのコンテンツ幅でおすすめなのは約300~500pxです。この300~500pxという数値は、統計情報を載せているWebサイト「StatCounter」の「Mobile Screen Resolution Stats Japan」にて記載されている情報を参考にしています。

StatCounterが掲載している統計によると、375x667サイズの画面が19.02％、414x896サイズの画面が13.79％のシェアを獲得しています。他にも横幅が300〜500pxの画面サイズだけで、ほとんどのシェア率を占めています。そのため、スマホサイトのコンテンツ幅を決める際には、300〜500pxの数値にとどめておけば問題ないでしょう。

ただし、注意していただきたいのがiPhoneはRetinaディスプレイを採用しているということです。RetinaディスプレイとはApple製品に搭載されているディスプレイのことで、通常のピクセルより2倍のピクセルで表示されています。そのため、Retinaディスプレイを採用することで、細かな表現を可能にしています。

通常より2倍のピクセルで表現されているということは、デザインやフォントの要素も2倍でデザインする必要があるということです。例えば、横幅300pxのデザインを作成する際には、600pxのデザインを作成しなくてはいけませんので注意してください。

Webサイトにおける解像度とは、画面上にあるピクセルの数を表すものです。PCやスマホ、タブレットによってそれぞれ解像度は異なります。ここでは、それぞれの端末別に解像度を紹介しますのでデザインの参考にしてください。

デスクトップPCの解像度で多いのは1,920×1,080pxです。統計情報を載せている「StatCounter」によると、2020年12月から2021年12月の間で利用されたPCの解像度で一番多かったのが1,920x1,080pxという数値でした。次いで利用されていたのが1,366x768pxです。

上記の解像度が多かった原因として、フルHDのモニターの利用者が多いことが考えられます。やはりPCのデスクトップでは上記のようなフルHDで16：9の比率の画面が人気なようです。

スマホの解像度で一番多く利用されているのは375x667pxの比率です。こちらの「StatCounter」に掲載されていて、375x667pxの比率は市場シェアの19.0％を占めています。

また、同統計を参照してみると、市場シェアのトップ5を占めている横幅の解像度は350〜450pxのあいだに分布しています。そのため、もしスマホサイトを作成するのであれば、300〜500pxの横幅に設定しておけば問題ないでしょう。

ただし、先述した通りiPhoneはRetinaディスプレイを採用していますので、上記の解像度の2倍の設定でデザインしなくてはいけません。iPhone製品だけで市場シェアのおよそ30％を獲得しているともいわれていますので、iPhoneのことも考慮したうえでスマホサイトを作成するようにしてください。

タブレットで最も多く利用されている解像度は768x1,024pxというデータがあります。タブレットで注目してほしい点が768×1,024pxの市場シェア率です。2020年12月から1年間におけるタブレットで最も利用されている768×1,024の解像度は、市場シェアの47.3％を占めています。

市場の約半分を768×1,024の解像度が占めていることになりますが、これはApple製品の初代iPad miniと同じ解像度です。つまり、タブレットを利用している方はiPad miniを基本的に利用しているといえるでしょう。そのため、タブレット向けのサイトであれば768×1,024の解像度を設定することで、市場のおよそ半分はカバーできることになります。

ここまでスマホサイトやPCサイトの解像度の情報を記載しました。

それぞれWebサイトを閲覧する端末によって解像度は異なるものです。自社サイトに訪れてくるユーザーの属性に合わせて、適切なサイズの画像を挿入できるようにしてください。