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

63693
Pocket

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ferret 1,200ピクセル

ferretFerret [フェレット]|webマーケティングがわかる・できる・がんばれる

 

LIG 1,200ピクセル

LIG株式会社LIG | 台東区上野にあるウェブ制作会社

 

バズ部 1,142ピクセル

バズ部バズ部

 

LISKUL 1,040ピクセル

LISKULLISKUL – リスティング広告を活用して費用対効果を劇的にアップする方法

 

WEBマーケティング ブログ 1,000ピクセル

webマーケティングブログWEBマーケティング ブログ-WEB担当者に有益な世界の情報を-

 

markelog 980ピクセル

markelogmarkelog(マーケログ)|WEBマーケティングブログ

 

誠ブログ 970ピクセル

誠ブログニュースを考える、ビジネスモデルを知る – Business Media 誠

 

コリス 960ピクセル

コリスコリス | サイト制作に関する最新の情報をご紹介

 

Webデザインレシピ 940ピクセル

web design recipesWebデザインレシピ

 

調査結果

プロモニスタのような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

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

Pocket

無料ebook

今すぐ見直すべきサイト内部リンク4つのポイント
姓(必須)
名(必須)
会社名(必須)
電話(必須)
メールアドレス(必須)
個人情報のお取り扱いについて

競合比較ができるSEOツール SEOカウンセラー

最大10項目(順位/被リンク数など)の競合調査が無料でできます。

児玉 茜
2014年7月中途入社。 京都出身のWebデザイナーです。プロモニスタがすべてのWeb担当者の方にとって見やすく、使いやすいサイトになるよう日々進化させ続けます!