「サイトの横幅って、どのくらいにすればいいの？」と悩んでいませんか？
現代のWeb制作において、ユーザーにとって読みやすく・使いやすい横幅設定はとても重要です。
この記事では、初心者の方にもわかりやすく「Webサイトの横幅サイズの考え方」や「よく使われる基準」、「注意点」などを丁寧に解説します。
これからWebサイトを作ろうとしている方、既存サイトを改善したい方のための完全ガイドです。
Webサイトの横幅サイズとは？
Webサイトの横幅サイズとは、ブラウザで表示されるコンテンツ部分の横方向の幅のことを指します。
デザインやユーザー体験に大きく関わる要素であり、パソコン・タブレット・スマートフォンといった端末の種類に合わせて最適化する必要があります。
なぜ横幅の設定が重要なのか
横幅が広すぎると視線の移動が疲れる原因になり、狭すぎると情報が詰まりすぎて読みにくくなります。
また、デザイン全体のバランスにも影響するため、ユーザーに「見やすい」「使いやすい」と感じてもらうには、適切な横幅設定が欠かせません。
一般的な横幅サイズの例と傾向（PC／タブレット／スマホ）
ここで言う「横幅」は、端末そのものの画面幅（viewport）と、実際に読みやすく整えるためのコンテンツ幅（container）を分けて考えるのがポイントです。
結論、デザインで大事なのは「端末の幅」よりも “中身（文章や画像）を置く幅＝コンテンツ幅”です。
PCの場合（デスクトップ／ノート）
よくある傾向
- 画面幅（viewport）は環境差が大きい（ノート〜大画面まで幅広い）
- なので多くのサイトは、画面いっぱいに広げず、中央に読みやすい幅で固定します
目安（よく使われる値）
- viewportの代表例：1366px / 1440px / 1920px
- コンテンツ幅（container）：1100〜1200px前後が定番
- それ以上広いと、文章の1行が長くなりすぎて読みにくくなりがち
設計の考え方
- 「最大幅（max-width）」で読みやすさを守る
- 余白（左右のマージン）を取って“上品に見せる”サイトが多い
現在は「1200px前後」が最もバランスの良い選択肢とされています。
私も、PCは、1000〜1200pxでデザインは行うようにしています。それ以上になるとコーディングしてから、実際にディスプレイで見たときに、はみ出てしまったりすることがあったり、横スクロールが出たりしますので気をつけましょう。
タブレットの場合（iPad等）
よくある傾向
- タブレットは「スマホ寄りにするか、PC寄りにするか」で迷いやすいゾーン
- 基本は 1カラム（縦並び）が安全。2カラムにすると情報量が増えて読みにくくなることも多い
目安（よくある幅）
- viewportの代表例：768px / 810px / 834px / 1024px（縦横で変動）
- コンテンツ幅：基本は“画面幅に対して余白を取る”
- 例）左右16〜24pxの余白を確保して本文を配置
設計の考え方
- 「PCと同じ横幅思想」を持ち込むと詰まりやすい
- タップ操作前提なので、ボタン・リンクは余白多め／間隔広めが正解
PCとスマホでのレスポンシブの作成はよく行いますが、タブレット対応はほとんどしていないのが、通例です。まれにタブレットもと言われたら、対応はしています。予算がたっぷりとある場合に限ります。
スマホの場合
よくある傾向
目安（よくある幅）
- viewportの代表例：360px / 375px / 390px / 414px / 430px
- コンテンツ幅：画面幅 − 左右余白（16〜20px×2）が基本
- 余白をケチると一気に素人っぽく見えます（ほんとこれ）
設計の考え方
- 画像や見出しを詰めすぎない（スクロール疲れの原因になる）
- ボタンは指で押せるサイズ感（小さいリンクは地獄）
私は、375pxか390pxでデザインは行うようにしています。
ざっくり早見表（例）
| デバイス | 画面幅（viewport）例 | コンテンツ幅（container）目安 |
|---|---|---|
| PC | 1366 / 1440 / 1920 | 1100〜1200px前後（max-width） |
| タブレット | 768 / 810 / 834 / 1024 | 左右16〜24px余白で可変 |
| スマホ | 360 / 375 / 390 / 414 / 430 | 左右16〜20px余白で可変 |
無料で“横幅・余白”だけ先に診断します
フルード（可変幅）と固定幅の違い
- 固定幅（Fixed layout）
横幅をピクセルで指定する方式。デザインの崩れが少なく管理しやすい。 - 可変幅（Fluid layout）
横幅を％で指定し、画面サイズに応じて変動。柔軟だが崩れやすい。 - レスポンシブ（Responsive）
現在の主流。メディアクエリを使ってデバイスごとに最適表示させる。
最もおすすめなのは「レスポンシブ対応の固定幅（例：max-width:1200px）」です。
推奨される横幅サイズの基準
初心者の方にとっては「max-width:1200px; width:100%;」のように、最大幅を指定して、それ以下は100％で可変にすると使いやすいです。
以下は具体的なガイドラインです。
- コンテンツ部分は 1000〜1280px以内 が目安
- ヘッダーやフッターは横幅いっぱいでもOK
- 余白（paddingやmargin）を適切に設ける
モバイル・タブレット対応は必須
スマートフォンユーザーが全体の9割以上を占める今、モバイルファーストの設計は必須です。以下のような対応が求められます。
- ビューポート設定
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″> - メディアクエリ（スマホ対応、タブレット対応）
@media (max-width: 768px)などで調整 - ハンバーガーメニューや縦スクロール主体のデザイン
横幅設定で注意すべきポイント
- テキストの行長（1行の文字数）は最大でも60〜75文字程度が読みやすい。
- 横幅を広げすぎると視線の移動が負担に。
- スクロールバーが出ないよう、ブラウザ幅以上のデザインにならないように。
実際のデザイン設計のヒント
- デザインツール（Adobe XDなど、Figma）では、1920pxを基準に設計し、中心に1100pxのガイドラインを置いて、デザインするとバランスがとりやすくなります。
こちらはいつもの私のやり方ですので、別の方法がやりやすければそちらでも構いません。 - 現在のPCなどはほとんどが1920px（フルHD）が主流になっているため、その画角に合わせてデザインをしています。ほとんとのユーザーがブラウザを画面いっぱいに広げて見ている場合を想定して、このサイズにしています。
- 文字サイズなどは、サイトを閲覧するターゲットに合わせて使用するフォントサイズは変えています。ベースは、PCなら16px〜18px以上、スマホなら14px〜16px以上。
- WordPressなどCMSを使う場合は、テーマによって既にレイアウトが決まっていることが多いため、テーマの最大コンテナ幅を確認しましょう。
無料で“横幅・余白”だけ先に診断します
初心者にも扱いやすいデザインツールおすすめ
横幅を意識したWebデザインには、専用のツールを使うと便利です。以下に、初心者でも扱いやすく、プロも使用している人気のツールをご紹介します。
Adobe XD（アドビ エックスディー）
- 特徴：シンプルなUIと軽快な動作が魅力。ワイヤーフレーム、プロトタイプ、デザイン一式を一つのツールで完結できます。
- おすすめポイント
- 初心者にも直感的に使えるインターフェース
- ブラウザプレビュー機能あり
- チームとの共有やフィードバックもスムーズ
- 公式サイト：https://www.adobe.com/jp/products/xd.html
Figma（フィグマ）
- 特徴：クラウドベースで、複数人が同時に編集可能。ブラウザで動作するためインストール不要。
- おすすめポイント：
- 無料プランでも十分高機能
- コミュニティのテンプレートが豊富
- Adobe XDと同様にレスポンシブ設計がしやすい
Canva（キャンバ）
- 特徴：バナーやサムネイル制作に特化したツールだが、簡単なWebレイアウト設計にも使える。
- おすすめポイント：
- 操作がドラッグ＆ドロップで簡単
- 豊富なテンプレートと無料素材
- 日本語対応で初心者も安心
まとめ：横幅はユーザー視点で考えよう
Webサイトの横幅は「美しさ」よりも「使いやすさ」「読みやすさ」を優先すべきです。
最大幅は1200px前後、レスポンシブ対応、ユーザーの視線移動を考えた設計がベストです。デザインの見栄えと実用性をバランスよく考えることが、よいサイトづくりの第一歩です。
無料で“横幅・余白”だけ先に診断します
この記事がおすすめな方