WEBサイトの横幅のサイズはいくつが良い？何pxが最適なのかを徹底解説！

WEBサイトを作ろうと思った時に、サイトの横幅をどの位にすれば良いか悩む事はありませんか？

できれば最適なサイズをしっかりと把握しておきたいものですよね。

サイトの構成に合わせて、後からサイズを変更する事も可能ですが、大抵のサイトの場合はヘッダー画像を使用するので、サイトの横幅に合わせて画像も事前に準備をしなければなりません。

そのため、サイトを設計する際には早い段階でサイトの幅を決めておくケースが多いです。そんな時にサイトの適切な横幅を決める基準を知っておくと非常に便利です。

今回は、WEBサイトの横幅のサイズはどの位にすべきか？について考察してみたいと思います。

リーベル

WEBサイトの横幅の考え方は意外と分かりにくいものです。
ただ、自分でサイトをデザインしたり設計する際には重要な考え方になりますので、ここでしっかりと押さえておきましょう！

サイトの画面を設計する上での基本

横幅を決める前に画素（ピクセル）、解像度（dpi）というWEB画面を設計する上での基本をおさらいしておきましょう。

画素・px（ピクセル）の考え方

ディスプレイというのはドット（小さな点）が集まって表示されています。この点に様々な色が塗られていて、この点が集まり、画面全体として画像・映像などを表示します。

この小さな点の集まりを「画素」、もしくは「px：ピクセル」と呼びます。どちらも同じ意味ですが、WEBの世界ではpxで呼ばれる事が多いです。

横幅を決める時に900pxとか1200pxというワードを聞いた事があると思います。

これは１行に表示できる点の数（画素数）を指します。この点の数が多ければ多い程、より細かい部分まで綺麗な表示が可能になります。900pxの画像であれば、1行に900個分のドット（小さな点）が表示されます。

解像度・dpiの考え方

ここでもう一つ覚えておきたい考え方が解像度（単位はdpi）です。

dpiは、dots per inch（ドット・パー・インチ）を表わす言葉で、１インチ当たりのドットの数を指します。
※ちなみに1インチが約2.54cm

解像度の単位であるdpiの値が大きい程、高解像度と呼ばれます。

最近のスマホは小さな画面に非常に綺麗に表にされますよね。これはまさに高解像度の例です。デジカメの小さな画面なども非常に高解像度です。

物理的な幅ではなく画素で決める

画素とWEBサイトの物理的な横幅は異なるというお話をしました。

WEBサイトの横幅は「物理的な横幅ではなく、画素数で決める」という事をしっかりと覚えておきましょう。

そのため、使用するデバイスの画面サイズによって物理的な大きさは変わってＯＫという考え方になります。とはいえ、現在は大抵のデバイスの画面サイズ、画素数は似通っているので、おおよそは同じくらいの幅になる事が多いです。

ちなみに、WEBサイトを作成する場合はサイトの横幅を「width」で設定します。

■CSSのwidthの設定例

どの位の画素数が良いのかは、この後で詳しくご紹介します。

WEBサイトの横幅の考え方

WEBサイトの横幅ですが、現在はPCの場合とスマホの場合で分かれます。

当然の様にレスポンシブデザインが叫ばれる様になっていますから、サイトを一つ作る場合でも、PCとスマホのそれぞれに対応したサイズを決める必要があります。
※CSSフレームワークなどを活用すれば両方に対応したサイトを作成する事もできます。

ですので、ここからはPCとスマホに分けて順番に見ていきましょう。

どの位の画素（ピクセル）数が最適かを考察していきます。
※画像を事前に用意する場合などは、この画素数に合わせて作成する様にしましょう。

PCの場合

PC用に表示する場合のサイトの横幅はどの様に考えれば良いでしょうか。

最近は2560px×1440pxなどの高解像度のディスプレイがたっくさん増えています。年々そのサイズに合わせて、サイト幅も広げるべきなのでしょうか？

いえ、そこまでする必要はありません。高解像度のディスプレイを使用する方であっても、全画面表示でサイトを閲覧する訳ではないからです。

有名サイトを見てみても、最新のディスプレイの大きさに合わせてサイトの幅を変えてはいません。サイト幅を広げるという事は必然的に画面に表示するデータ量も増えますから、転送速度も考慮して、サイトの幅はドラスティックには増やしません。

となると、有名サイトのサイト幅とおよそ同じ位にしておくのがベターです。例えば販売されているサイトのテンプレート等も、おそらくこの位で設定されているはずです。

有名サイトの横幅はどの位？

有名サイトの横幅を調べて見ると、900px～1100pxくらいが多いです。後は自分レイアウトのデザイン幅に合わせて調整すると良いです。

ちなみに、綺麗に割り切れる値にした方が後々デザインが便利なため、920px、960px、1000pxなどでデザインされたサイトをよく見かけます。
※特にグリッドデザインの場合は960pxとするケースが多いです。960という数字は多くの数字の公倍数となるため、グリッドデザインに対応がしやすいのです。

なので、この辺りから選択するのがベターかと思います。

※尚、サイトの横幅をパーセンテージ（％）でコントロールする場合などは、画素にはあまりこだわらずに、1000px以上の幅で設定している事も珍しくありません。

スマホの場合

次にスマホの場合の横幅を考えてみましょう。スマホの場合はそもそものデバイスの横幅が狭いものの、解像度が非常に高いのが特徴です。一つ注意点なのは、Retinaディスプレイの場合は、基本的に２倍のpx数でサイトの横幅を決めなければならないという事です。そうしないと画面が荒くなってしまいます。

実際の横幅の決め方としては、こちらも有名サイトの横幅を基準にして考えてみると分かりやすいかもしれません。大抵の有名サイトの場合は横幅は700px～800pxとなっていますので、特にこだわりが無ければこの辺りで決めるのが良いと思います。

特にiphoneのディスプレイサイズが375pxだった時代に合わせて、その２倍の「750px」を採用しているケースが非常に多いです。（Retinaなので２倍で指定します）

スマホにはいくつかのデバイスが存在しますが、もしも迷う場合は現状は750pxとしておいて良いかもしれません。より高解像度になったら変更をすればOKだと思います。

※スマホの場合も、%（パーセンテージ）で横幅を指定する場合は、この値にこだわる必要はありません。

まとめ

今回は、サイトを設計する際の横幅の決め方についてご紹介をしてきました。

デバイス毎にサイズを変えなければならないのは、少し面倒ですが、それでも時代の流れに合わせて、この様なカスタマイズも必要になります。

とりあえず、現時点ではPCは迷ったら960pxくらい、スマホは750pxくらいにしておいても良いかもしれません。また、出てきたpxやdpiについては、非常に重要な考え方になりますので、しっかりと覚えておいて下さいね。

WEBデザイン全般について本格的な学習をしたい場合はオンラインでも受講可能なスクールに通うのも良い手です。転職サポートもあるので、プロを目指すならうってつけです。スクールについては以下の記事で詳しくまとめています。

デバイスの画面性能はすごいスピードで改良されていきますので、時代に合わせて最適なサイト設計ができる様にしましょう。