サイトデザインの横幅の基準はこれだ！お役立ち記事まとめ＆事例9選で何ピクセルかもう迷わない

サイト制作をする時、Webサイトの横幅は何を基準にされていますか？

デザインをはじめる時にアプリケーションを開いてまず思う事、
「横幅何ピクセルにしようかな？」
地味に困ることありませんか？

ディレクターに、渡される指示書にはサイトの横幅の記載がない
デザイナーにサイトの横幅を聞かれたけど決めてなかった！

今回はそんな時に役立つサイトと、参考にするために実際にいくつかのサイトの幅を調べてまとめました。

1 デザインの横幅を決める際に参考になる記事
2 大手サイトの横幅を参考にする
3 ブログ系サイトの横幅調査
4 調査結果
5 最終的に横幅はどうするべきか
6 おまけ

デザインの横幅を決める際に参考になる記事

Webサイトの横幅を決める時、何を参考にすればいいかわからない！
そんなときにまず参考にしたいサイトはこちら。
1Picekl デザインは8の倍数でできている｜1 pixel｜サイバーエージェント公式クリエイターズブログ

Webサイトを作成する時には、いろいろな種類のサイズのボックスや余白などを作ると思います。その時に、多くのサイズに対応できるのが8の倍数であり、8の倍数でデザインすると作りやすくなる、という主旨の事が書いてあります。

■SEO課題を自動抽出する上位表示支援SEOツール

大手サイトの横幅を参考にする

2014年7月までの大手サイトの横幅をまとめたサイトです。190の企業や組織のサイトの横幅が業種ごとに一覧になっています。小さいサイズは720ピクセルから大きいサイズで1,600ピクセル超えのものまで様々です。

レスポンシブデザインのサイトに関してはブレイクポイントも書いてあるので、スマホ対応サイトを作る時にも参考になります。

Webサイト、特にBtoBサイトではまだまだPCで閲覧される事も多いので近い業種を参考に決めてみるのもいいかもしれません。
Webサイトの横幅まとめ｜ULTRAZONE

ブログ系サイトの横幅調査

先ほどの横幅まとめサイトのIT通信/WEBの業種で絞ってみると、950ピクセル～1020ピクセルが多いようです。

私たちのサイト、プロモニスタの横幅はちょうど1,000ピクセルですが同じ業界のブログサイトは、一体何ピクセルが多いのでしょうか？
9つのサイトに関して横幅を調査してみました。

※横幅の大きいものから並べています

調査結果

プロモニスタのような2カラムデザインのサイトは、横幅まとめサイトのIT通信/WEBの業種と同じ950ピクセル～1,020ピクセルが主流のようです。また、結果として3カラムデザイン採用の”ferret”と”LIG”以外は同じサイズのものがありませんでした。

今回はブログ系のサイトを対象として調査しましたが、おそらく違うジャンルに特化して調査しても同じような結果になるのではないかと思います。「これが正解！」という幅がないために、サイトによって細かな差はでるものの、大体は1,000ピクセル当たりを中心に分布するイメージです。

最終的に横幅はどうするべきか

「結局デザインの横幅はどうしたらいいの？」という方のために、いくつか参考になる情報をご提供できればと思います。

ディスプレイの解像度は1,366×768が最も多い

2012年のデータになりますが、デスクトップの場合画面の解像度は1,366×768が最もシェアが高いそうです。

大型化するコンピュータ画面－ U-Site

記事内では、この画面サイズの大型化はさらに続くとも言及しています。確かにこのプロモニスタのユーザーも、1,000ピクセル以下の解像度のディスプレイは少ないです。
2015/3/3 18:45時点のYahoo!アクセス解析では、最大で1,920 x 1,080ピクセル、最小でも1219 x 975ピクセルでした(モバイルは除く）。

このデータから考えると、1,000ピクセル程度であれば必ずしもブラウザを画面いっぱいに開かないとしても、横スクロールなしでサイトのコンテンツを見せることができると考えられます。

様々な幅での閲覧を想定する場合、8の倍数にしておくのが無難かも

冒頭でご紹介した「デザインは8の倍数でできている」では、8の倍数による画面サイズが多いということが言われていましたので、8の倍数をベースにしておくことで、画面サイズが違う環境でも見やすいデザインを実現しやすくなるかもしれません。
ちなみに950ピクセル～1,020ピクセルの間で8の倍数だと960、1,000などが切りのいい数字でしょうか（もちろん切りがよくなくてもいいと思います）。

最終的には自分がしっくりくるものを

ご紹介した調査対象サイトをタブで開いて見ていくと、デザインの幅によってだいぶ印象が違うと思います。

1,200ピクセルだと全体に大きくコンテンツが表示されている印象を受けますし、940ピクセルだとだいぶ余裕があるように見えます。
後者の方が小さめの画面で見ても見やすいかもしれませんし、コンテンツが広く表示される前者のほうが見やすいと感じられるかもしれません。最終的には自分がいいと思うものを選ぶのが正解でしょう。

おまけ

最後にブラウザ上で、簡単にピクセルを測れるアドオンをご紹介します。

Firefox用
pixelzoomer

Google Chrom用
http://blarg.co.uk/tools/page-ruler

気になった時にキャプチャを取らずに測れるのでとてもおすすめです。
是非試してみてください。

「TACT SEO」は、キーワード調査や日々の順位計測、サイト内のSEO課題の発見などSEO対策を行うために必要な機能が一つになったツールです。自社サイトが上位表示できていない要因を網羅的に分析することが可能です。入力時間は30秒！無料版をぜひお試しください。

SEOに関して、何から着手すべきかわからない、なかなか成果がでないなどのお悩みがございましたら SEO無料相談も受け付けておりますので、お気軽にお問合せください。

▼この記事を読んだあなたにおすすめ！

[サイトタイプ別40事例]スマホサイトのメニューデザインに困ったときに役立つサイトまとめ

スマホ最適化はモバイルファーストよりユーザーファースト！参考8サイト付、レスポンシブサイト、専用サイト、あなたはどちらを選びますか？

グローバルナビがユーザビリティを左右する！あなたのサイトが”使いやすい”と思われるために必要な4つのこと