キレイに見えるWebデザインのサイズとは?最適な縦・横サイズを考察

Webデザイン

Webデザインを学び、いざクライアントワーク! と意気込んではみたものの、縦と横のサイズに迷ってしまって頭を抱えている……。そんな方はいませんか?

どのような基準で決めるべきなのか、本当にこのサイズで良いのか。とくに初心者のうちは悩みますよね。

そこで今回は、縦横の幅は何pxが最適なのか考察してみます。

最適な縦・横幅の考え方

最初に、最適な縦(ファーストビュー)幅と横幅の考え方についてお伝えします。

そもそもファーストビューとは、「Webサイトに訪問したユーザーが1番はじめに見るページの表示範囲」を指します。

SHEsharesのサイトでいえば、以下の画面ですね。

ファーストビューのサイズ、そして横幅を設定するうえでは、まずユーザーがどれくらいのディスプレイ解像度で見ているかを調べる必要があります。

ユーザーが使う端末によって解像度は違うため、適当に決めるよりも、どの解像度で見ているユーザーが多いかを調べてから決めたほうがマッチしやすいんですね。

その際に使えるのが、「StatCounter」です。

まずは、赤い四角で囲んである「Screen Resolution Stats」を選択します。

すると、以下の画面が表示されます。

しかしこれは全世界の結果のため、日本に絞りたい場合は「Edir Chart Data」から

  • StatisticはScreen Resolution(4項目すべてを選択)
  • RegionはJapan
  • Chart TypeはBar

を選択しましょう。すると、日本における解像度シェア率が表示されます。

解像度シェア率は日々刻刻と変わっていくため、Webデザインをする際は、それらを確認したうえで縦(ファーストビュー)幅と横幅のサイズを決める必要があります。

最新2019年版PC・スマホでの縦・横幅の理想とは?

それでは、先ほどの日本における解像度シェア率を見てみましょう。2017年1月から2018年12月までの結果は以下となります。

パソコンは幅1366~1920px、高さ763~1080pxが主流のようですね。一方スマートフォンは幅360~375px、高さ640~667pxが主流となっています。

これまでは上位3位までにパソコンが2つ入っていたのですが、スマートフォンの普及により結果が変動していました。

Webブラウザを画面いっぱいにして使う人ばかりではないこと、そして以上の結果から、パソコンのファーストビューの高さは550px・横幅は1000pxが良いといえるでしょう。

スマートフォンの場合は、AndroidやiPhoneなど機種によってさまざまな違いがみられますので一概には言えません。

しかし、結果から推測するにファーストビューの高さは600px・横幅は360pxが良いといえるでしょう。

まとめ

ファーストビューはユーザーが「このページを読むか?」を判断する基準になります。だからこそ、Webデザインに慣れないうちは、「本当にこのサイズでいいのだろうか……」と頭を抱えてしまいますよね。

そんな方は、ぜひStatCounterを使ってみてくださいね。また、今回の記事を読んでも決めきれない時は、大手会社のサイトや理想とするサイトの幅を調べてみるのも良いと思います。

関連記事一覧

ライター育成します