Webサイトの横幅サイズはどう決める？初心者でもわかる最適な設計ガイド

「サイトの横幅って、どのくらいにすればいいの？」と悩んでいませんか？

現代のWeb制作において、ユーザーにとって読みやすく・使いやすい横幅設定はとても重要です。

この記事では、初心者の方にもわかりやすく「Webサイトの横幅サイズの考え方」や「よく使われる基準」、「注意点」などを丁寧に解説します。

これからWebサイトを作ろうとしている方、既存サイトを改善したい方のための完全ガイドです。

この記事がおすすめな方

INDEX

Webサイトの横幅サイズとは？

Webサイトの横幅サイズとは、ブラウザで表示されるコンテンツ部分の横方向の幅のことを指します。

デザインやユーザー体験に大きく関わる要素であり、パソコン・タブレット・スマートフォンといった端末の種類に合わせて最適化する必要があります。

横幅が広すぎると視線の移動が疲れる原因になり、狭すぎると情報が詰まりすぎて読みにくくなります。

また、デザイン全体のバランスにも影響するため、ユーザーに「見やすい」「使いやすい」と感じてもらうには、適切な横幅設定が欠かせません。

以下は現在よく使われている代表的な横幅のパターンです。

現在は「1200px前後」が最もバランスの良い選択肢とされています。

私も、1000〜1200pxでデザインは行うようにしています。それ以上になるとコーディングしてから、実際にディスプレイで見たときに、はみ出てしまったりすることがあったり、横スクロールが出たりしますので気をつけましょう。

最もおすすめなのは「レスポンシブ対応の固定幅（例：max-width:1200px）」です。

初心者の方にとっては「max-width:1200px; width:100%;」のように、最大幅を指定して、それ以下は100％で可変にすると使いやすいです。

以下は具体的なガイドラインです。

スマートフォンユーザーが全体の9割以上を占める今、モバイルファーストの設計は必須です。以下のような対応が求められます。

ビューポート設定
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
メディアクエリ（スマホ対応、タブレット対応）
@media (max-width: 768px)などで調整
ハンバーガーメニューや縦スクロール主体のデザイン

デザインツール（Adobe XDなど、Figma）では、1920pxを基準に設計し、中心に1100pxのガイドラインを置いて、デザインするとバランスがとりやすくなります。
こちらはいつもの私のやり方ですので、別の方法がやりやすければそちらでも構いません。
現在のPCなどはほとんどが1920px（フルHD）が主流になっているため、その画角に合わせてデザインをしています。ほとんとのユーザーがブラウザを画面いっぱいに広げて見ている場合を想定して、このサイズにしています。
文字サイズなどは、サイトを閲覧するターゲットに合わせて使用するフォントサイズは変えています。ベースは、PCなら16px〜18px以上、スマホなら14px〜16px以上。
WordPressなどCMSを使う場合は、テーマによって既にレイアウトが決まっていることが多いため、テーマの最大コンテナ幅を確認しましょう。