今回は 2020 年 9 月時点でウェブサイトのメインコンテンツの横幅はどのくらいが主流なのかを調査したので、その結果をご紹介します。

調査

実施内容

日本国内で最も人気の約 40 サイト ¹ においてメインコンテンツエリアの横幅を調べました。

• いずれも対象はデスクトップ（パソコン）向けのレイアウトです
• ページによって横幅が異なるサイトの場合は代表的なページを対象としました

結果

結果は以下のとおりになりました。

数字の単位は px （ピクセル）です。 たとえば「 900px - 950px 」は「 900px 以上 950px 未満」という意味です。 一番下の「なし」はコンテンツ幅が設定されていない場合を意味します。

「なし」を除外すると、最頻値は 975 でした。 約半数が 950px 〜 1050px の範囲に収まりました。 残りのうち半数は 1150px 〜 1350px に収まりました。

コメント

以下コメントです。

標本誤差と信頼性について

今回はサンプル数が約 40 と非常に少なく、「国内のすべてのウェブサイト」を母集団と考えると非常に大きな標本誤差があるはずです。 そのため、厳密にはこの調査結果をもとに「いま主流のコンテンツ幅はこれくらいです」と言うことはできません。 これはあくまでもひとつの参考値にすぎないのでその点に注意してください。

なぜ横幅が 950px 〜 1050px のサイトが多いのか

なぜ横幅が 950px 〜 1050px のサイトが多いのかについては大きく 3 つの理由があると考えます。

1. スクリーンサイズ
2. スマホファースト
3. 見やすさ

スクリーンサイズ: 横幅 950px 〜 1050px というのは、ちょうど XGA と呼ばれる規格の「幅 1024px x 縦 768px 」のスクリーンサイズと同じぐらいで、多くのパソコン・タブレット端末でそのままのサイズで見れる大きさです。

スマホファースト: 一昔前は「パソコン向けのレイアウトをメインに作って、スマートフォンやタブレット向けのレイアウトはついでに作る」というのがサイト制作の主流でしたが、近年はスマートフォンやタブレットをパソコンと同等に重視する形が主流です。 そのときにパソコン向けレイアウトをあまりに広い横幅で作ってしまうとスマートフォン・タブレットとの UX の一貫性を保つのが難しかったりメンテナンス性が下がったりするため、パソコン向けレイアウトもある程度の横幅に抑えるインセンティブが働きます。

見やすさ: 人間が読み物を読むときに快適に読める視野角はある程度決まっているため、コンテンツの横幅をあまり広くしすぎると UX が下がってしまいます。

これらの要因からウェブサイト（ホームページ）の横幅を 950px 〜 1050px にするのが近年の主流になっていると考えます。

まとめ

今回調査したかぎり 2020 年時点におけるウェブサイトのメインコンテンツの横幅の主流は 950px 〜 1050px でした。

ご参考になれば幸いです。

参考

• Top Websites Ranking | SimilarWeb