この記事の対象: デザインの基準幅を 1440px にするか迷っているデザイナー・制作ディレクター
読了時間: 約9分
結論から書きます。1440px はデザインを起こすキャンバス幅として妥当で、中身の幅は 1120〜1240px に止めます。 1440 が間違っているという話ではありません。崩れるのは、1440 を「何の 1440 なのか」決めずに使ったときです。デザイン幅・コンテンツ幅・ブレイクポイントは別の数字で、決める順番もあります。この3つを分けて押さえれば、1920 のモニタでスカスカに見える事故も、1280 のノートPCで詰まる事故も止まります。
webサイトのサイズを決める3つの数字
最初に全体像を置きます。決めるのは3つだけで、順番を変えると後から全部やり直しになります。
| 決めるもの | 値 | 役割 |
|---|---|---|
| デザイン幅 | 1440px | Figmaのフレーム幅。カンプは1枚だけ |
| コンテンツ幅 | 1120〜1240px | 中身の最大幅。CSSの max-width になる |
| ブレイクポイント | 実物で決める | 縮めて最初に崩れた幅で切る |
ブレイクポイントを最後に回すのが要点です。先に「768 と 1024 で切る」と決めると、その数字に合わせて不自然なレイアウトを作ることになります。
1440と「中身の幅」を混同しない
一番つまずくのがここです。1440 はキャンバスの幅で、中身を 1440 いっぱいに置くという意味ではありません。1440 のフレームの中にコンテンツを 1120〜1240 で置き、左右に 100〜160 の余白を取ります。CSS で max-width として書かれるのは内側の数字です。
デザイン幅 1440px（キャンバス）
- 左余白 100〜160px
- コンテンツ幅 1120〜1240px
- 右余白 100〜160px
全幅で抜く要素（背景・写真帯・フッター地）
下段が抜けると、横スクロールが出たり、ワイドモニタで写真の帯が途中で切れます。背景は全幅、文字はコンテンツ幅。この二層で考えると実装への指示が一行で済みます。
コンテンツ幅の選び方
| コンテンツ幅 | 向くサイト | 理由 |
|---|---|---|
| 1120px | コーポレート・採用・サービス紹介 | 文章が主役。行長が伸びすぎない |
| 1200px | 一般的な企業サイト全般 | 12カラム×余白の割り切りが良い |
| 1240px | ギャラリー・事例一覧・EC | カードを3〜4列並べたときに窮屈にならない |
| 全幅＋内側1240 | 写真が主役のブランドサイト | 背景は抜き、文字だけ止める |
迷ったら 1200px を選び、カードの列数が苦しいときだけ 1240 に広げます。判断を一度で終わらせたいなら、デザインを起こす前に一覧ページのカードを何列並べるか数えておくのが早いです。
1440pxがwebサイトのサイズの基準になる理由
1440は「多くの人が見ている幅の下寄り」
1440px が定番化した背景はシンプルで、ノートPCの実効的な表示幅に近いからです。13〜16インチのノートPCは物理ピクセル数が多くても、OS 側のスケーリングで CSS ピクセルに換算すると 1440〜1680 程度に落ち着きます。つまり 1440 は多くの人が実際に見ている幅の下寄りで、ここで成立させておけば広い画面では余白が増えるだけで壊れません。
逆に 1920 でデザインを始めると、1440 のノートPCで要素が詰まり、文字が小さく感じられます。狭いほうで成立させて広いほうへ伸ばすのが崩れにくい順番です。
1280・1440・1920の使い分け
| 幅 | 役割 | 使うとき |
|---|---|---|
| 1280px | 下限の確認用 | 小さめのノートPC・社内PCが多い業態で検証する |
| 1440px | デザインの基準キャンバス | 標準。ここで余白と階層を決める |
| 1920px | 伸びしろの確認用 | 全画面背景・大きな写真を使うサイトで破綻を見る |
3枚とも描く必要はありません。1440 で組んで、1280 と 1920 は実装後にブラウザ幅を変えて目で確認するだけで足ります。カンプを3枚作ると、どれが正か分からなくなって指示が割れます。
文章だけは器とは別に止める
コンテンツ幅が 1200 でも、本文の段落をそのまま 1200 で流すと1行が長すぎて読めません。日本語の本文は1行 36〜45 文字あたりが上限です。
/* 器の幅と、文章の幅は別に決める */
.container {
width: 100%;
max-width: 1200px; /* 器 */
margin-inline: auto;
padding-inline: 24px; /* スマホでの左右の逃げ */
}
.prose {
max-width: 42em; /* 本文だけ別に止める = 約36〜42文字 */
}
/* 見出しは少し広くてよい */
.prose h2 {
max-width: 28em;
}
実装のポイント: padding-inline を器側に持たせると、スマホで文字が画面端に貼り付く事故が消えます。margin-inline: auto は Chrome / Edge / Safari / Firefox すべてで使えます（Safari は 14.1 以降）。
つまずきやすい点: 文章側の max-width を px で書くと、ユーザーがブラウザの文字サイズを大きくしたときに行長が伸びます。em で指定するのが安全です。
1440で作ったデザインが1920で崩れる3つの原因
順位表に出てくる疑問の実体はここに集まります。幅の設定そのものではなく、固定した数字が残っていることが原因です。
原因1：一番外のラッパーに max-width をかけている
max-width: 1440px をラッパー全体にかけると、1920 のモニタで背景色の帯が 1440 で切れ、左右に地の色が出ます。背景を持つ要素は幅を制限せず、中身だけ制限します。
崩れない形
- セクション自体は幅100%
- 背景色・画像はセクションに付ける
- 内側のcontainerで中身だけ止める
1920で崩れる形
- 一番外のラッパーにmax-width:1440px
- 背景色もそのラッパーに付ける
- 広い画面で帯が途中で切れる
左が正です。「幅を止めるのは中身、背景は止めない」の一行を守るだけで、ワイドモニタでの事故はほぼ消えます。
原因2：余白を固定pxで置いている
1440 前提で padding: 120px 160px のように固定すると、1920 では余白の比率が崩れて中身が小さく見えます。余白は幅に応じて動かします。
.section {
/* 最小40px / 画面の6% / 最大120px */
padding-block: clamp(40px, 6vw, 120px);
padding-inline: clamp(20px, 5vw, 80px);
}
clamp() は全モダンブラウザで使えます（Safari 13.4 以降）。なぜこう書くかは、ブレイクポイントごとに余白を書き直す作業をまるごと消せるからです。3か所にメディアクエリを増やすより、1行で連続的に変える方が崩れません。
文字サイズも同じ考え方で連続的に変えられます。
原因3：写真とヒーローの高さを固定している
ファーストビューを height: 800px で固定すると、1440 では収まっても広い画面で間延びし、狭い画面では中身が切れます。min-height と dvh の組み合わせが扱いやすいです。
.hero {
min-height: min(78dvh, 820px);
display: grid;
place-items: center;
}
dvh（動的ビューポート高さ）は、スマホでアドレスバーが隠れたときの高さ変化を拾います。Chrome 108 / Safari 15.4 / Firefox 101 以降。vh だけだと iOS で下が見切れます。
ブレイクポイントは数字より先に実物を縮める
1440 で組んだあと、ブラウザ幅をゆっくり縮めて最初に見苦しくなった幅を記録します。そこがブレイクポイントです。
/* 基準はPC。狭くなったときだけ上書きする */
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
@media (width <= 1080px) { /* カードが窮屈に見えた幅 */
.cards { grid-template-columns: repeat(2, 1fr); }
}
@media (width <= 680px) { /* 2列でも文字が折れすぎた幅 */
.cards { grid-template-columns: 1fr; gap: 20px; }
}
@media (width <= 1080px) の範囲構文は Chrome 104 / Safari 16.4 / Firefox 63 以降で動きます。古い環境も拾うなら max-width: 1080px で書いても挙動は同じです。
カラム数を固定せず自動で折り返す書き方もあります。
/* ブレイクポイントを書かずに折り返す */
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 32px;
}
カードの最小幅（この例では 280px）だけ決めれば、幅に応じて 4列→3列→2列→1列と自動で変わります。ただし列数を意図的に揃えたいセクションには使わない。2列で止めたいのに3列になることがあります。
12カラムの数字を先に決める
1440 の中に 1200 のコンテンツ幅を置き、12カラムで割ると扱いやすい数字が出ます。
| 項目 | 値 |
|---|---|
| コンテンツ幅 | 1200px |
| カラム数 | 12 |
| ガター（溝） | 24px |
| 1カラム幅 | 76px |
| 左右余白（1440時） | 120px |
CSS 側で1カラムの px を書く必要はなく、grid-template-columns: repeat(12, 1fr) と gap: 24px で済みます。カンプ上の 76px は、要素を何カラム分にするか決めるための物差しです。
.grid12 {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
max-width: 1200px;
margin-inline: auto;
}
/* 8カラム分の本文 + 4カラム分のサイドバー */
.grid12 > .main { grid-column: span 8; }
.grid12 > .side { grid-column: span 4; }
@media (width <= 900px) {
.grid12 > .main,
.grid12 > .side { grid-column: 1 / -1; }
}
つまずきやすい点: span 8 と span 4 の合計が 12 を超えると2行目に落ちます。カンプの段階でカラム数を足し算しておくと、実装でのズレが出ません。
横スクロールが出たら幅より先に原因を探す
1440 で作ったのに横スクロールが出る場合、原因はほぼ次の4つです。
- 固定 px の要素（長いテーブル・画像・
white-space: nowrapの文字列）が器を押し広げている 100vwを使っている（縦スクロールバーの幅を含むため100%より広い）- 負の
marginで全幅に抜いた要素にoverflowの受け皿がない - グリッドの子要素が
min-width: autoで縮まない
4つ目は見つけにくいので、切り分け用に覚えておくと早いです。
/* grid/flexの子が縮まない時の定石 */
.grid12 > * { min-width: 0; }
/* 長い英数字URLが器を押し広げる時 */
.prose { overflow-wrap: anywhere; }
スマホ側の基準値は別の記事で整理しています。
Soreiine!!のギャラリーで基準幅を読む練習
数字の正解を覚えるより、公開されているサイトを幅を変えながら見るほうが早く身につきます。Soreiine!! のギャラリーに並ぶサイトを 1280 / 1440 / 1920 で開き直し、どこが動いてどこが固定されているかを見ます。見るポイントは3つに絞れます。
見どころ1：ヘッダーのロゴとナビの間隔
ロゴが画面の左端まで寄るか、コンテンツ幅の内側で止まるか。内側で止まるサイトは「全体を1枚の紙として扱う」設計で、企業サイトに多い型です。左端まで寄るサイトは画面そのものを器として使う設計で、ブランドサイトやギャラリー系に多く見られます。どちらが正しいということはなく、サイト全体で揃っているかどうかが品質の差になります。1920 まで広げたときにヘッダーだけ左端に寄り、下のセクションは中央に寄るサイトは、この判断が揃っていない状態です。
見どころ2：カードの列数が変わる幅
事例一覧や商品一覧を持つサイトを縮めていくと、3列→2列→1列の切り替わり方が分かります。丁寧なサイトは、カードの中の写真の比率と文字量が崩れない幅で切り替わっています。切り替わった直後にカードが異様に横長になるサイトは、列数だけ変えて中身の比率を置いていない状態です。ここは auto-fit を入れただけで止まっているサイトと、列数ごとに写真の比率を指定しているサイトの差が出ます。
見どころ3：広い画面での「上限」の有無
1920 まで広げたとき、文章が延々と横に伸びるサイトと、どこかで止まるサイト。止まるサイトは本文側に max-width が入っています。止まらないサイトは1行が60文字を超えて読みづらくなります。実装の丁寧さがそのまま出る場所です。
この3点は、ギャラリーのどのサイトでも同じ手順で読めます。1つのサイトで5分、3サイト見れば業態ごとの型が見えてきます。
グリッドの組み方そのものを事例で確認したいときは、レイアウト別にまとめた記事が近道です。
業態ごとに選ばれやすい幅
| 業態 | 選ばれやすいコンテンツ幅 | 理由 |
|---|---|---|
| コーポレート・採用 | 1120〜1200px | 文章と図が主役。行長を抑えたい |
| 事例・ポータル・メディア | 1200〜1240px | カードを3列以上並べる |
| ブランド・ギャラリー | 全幅＋内側1240px | 写真を画面いっぱいに使う |
| 医療・BtoB・規制業種 | 1120px前後 | 情報量が多く、可読性を優先する |
規制のある業種では、幅の判断より先に表示内容の整理が必要になります。該当する案件では医薬品業界のサイト設計の勘所を先に押さえておくと、幅を決める段で迷いません。
公開前に幅を確認する手順
4つの幅を、ブラウザの幅をドラッグしながら連続して見ます。スクリーンショットを4枚撮るのではなく、動かしながら見ると崩れる瞬間が分かります。
PC の基準幅を 1440 に決めても、スマホ側を1種類で済ませると別の崩れが出ます。現行のスマホは画面幅が4系統に分かれていて、混ぜて設計すると狂います。
色のコントラストも幅によって印象が変わります。幅の検証と同じタイミングでコントラスト比の確認まで済ませると、手戻りが一度で終わります。
よくある質問
webサイトのデザイン幅は1440pxが正解ですか？
キャンバス幅としては妥当な標準です。ただし 1440 は中身の幅ではなく、内側にコンテンツ幅 1120〜1240px を置いて左右に余白を取ります。1440 いっぱいに要素を並べると、ノートPCで詰まって見えます。
1440と1920、どちらでデザインを始めるべきですか？
1440 から始めます。狭いほうで成立させてから広いほうへ伸ばすと、要素が詰まる事故が起きません。1920 はデザインを起こす幅ではなく、組み上がったあとに背景の切れや行長の伸びを確認するための幅です。
コンテンツ幅は1200pxと1240pxのどちらがよいですか？
文章や図が主役なら 1200px、カードを3〜4列並べる一覧ページを持つなら 1240px が扱いやすいです。迷ったら 1200px にして、カードが窮屈に見えたときだけ広げます。本文の段落は器の幅とは別に、max-width: 42em 前後で止めます。
ブレイクポイントはどの数字で切ればよいですか？
数字を先に決めず、1440 で組んだものをブラウザ幅で縮めて、最初に見苦しくなった幅で切ります。768 や 1024 といった定番値に合わせると、その数字に引きずられて不自然なレイアウトになります。grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) を使えば、ブレイクポイントを書かずに折り返せる箇所もあります。
1440で作ったのに横スクロールが出るのはなぜですか？
幅の設定そのものより、器を押し広げている要素が原因です。固定 px の画像やテーブル、100vw の指定、グリッドの子要素が min-width: auto で縮まない状態の4つを順に確認します。.grid > * { min-width: 0 } で直ることが多いです。
まとめ
1440px は webサイトのサイズの基準として妥当な数字です。ただし 1440 を打った時点で設計が決まるわけではありません。決めるのは3つで、順番があります。
- デザイン幅 1440px に固定する。カンプを複数幅で作らない
- コンテンツ幅 1120〜1240px から選ぶ。背景は止めず、中身だけ止める
- ブレイクポイント 実物を縮めて、崩れた幅で切る
事故が一番多いのは2番目です。max-width を一番外側のラッパーに付けると、1920 のモニタで背景の帯が途中で切れます。幅を止めるのは中身、背景は止めない。この一行でワイドモニタの見栄えは安定します。
デザインを起こす前に、対象業態の一覧ページで何列のカードを並べるのかを数えておくと、コンテンツ幅の判断が一度で済みます。
