この記事の対象: Webサイトの横幅設計で迷っているデザイナー・コーダー・ディレクター
読了時間: 約10分
結論から書くと、2026年のWebデザインでコンテンツ幅に迷ったら1200pxを基準にしてください。コーポレートサイトからサービスサイトまでジャンルを問わず対応でき、カード3列がちょうど収まるバランスのよい幅です。
ただし、すべてのページを1200pxで統一するのではありません。テキスト中心のページは720px前後に絞り、ヒーローやギャラリーは全幅に広げる。セクションごとに幅を切り替えるのが今の主流です。
この記事では、コンテンツ幅の推奨値を用途別に整理し、CSSでの実装パターンまで一気に解説します。Soreiine!!ギャラリーの掲載サイトを実例に挙げながら、「実際のサイトがどの幅で作られているか」も確認していきます。
2026年のWebデザインで推奨されるコンテンツ幅の数値
まず押さえる3つの幅
コンテンツ幅の設計で最初に理解しておくべきは、「幅」にはレイヤーがあるという点です。
| 用語 | 役割 | 2026年の目安 |
|---|---|---|
| デザインカンバス幅 | Figma等のアートボード幅 | 1440px |
| コンテンツ幅（inner width） | テキストやカードが並ぶ領域の上限 | 1000〜1280px |
| テキストコンテンツ幅 | 本文テキストだけの幅 | 680〜800px |
デザインカンバスを1440pxで作り、コンテンツ幅を1200px、本文テキスト部分を720px——この入れ子が設計のベースです。カンバス幅 ≠ コンテンツ幅という前提をチーム内で共有できていないと、デザイナーとコーダーの間で認識がずれる原因になります。
コンテンツ幅の5段階と使い分け
実際のサイトで採用されている幅は、大きく5段階に分かれます。
| コンテンツ幅 | 向いている用途 | 特徴 |
|---|---|---|
| 960px | テキスト主体のブログ・メディア | 可読性が最も高い。1カラム構成向き |
| 1080〜1100px | コーポレートサイト全般 | 余白に余裕があり、落ち着いた印象 |
| 1200px | コーポレート・サービスサイト | 採用数が最多の定番値。カード3列が自然に収まる |
| 1280px | ECサイト・ポータル系 | 商品一覧の列数を確保しやすい |
| 1400px以上 | 映像・写真ポートフォリオ | ビジュアル重視の場合に限定的に使用 |
1200pxが「定番」と呼ばれる理由は明快です。3カラムのカードUIがちょうど収まり、2カラム＋サイドバーでも窮屈にならず、テキスト主体のページでも本文幅を720px前後に絞れば余白が自然に入ります。
適切な幅（1200px）
- 1行30〜40文字で読みやすい
- 左右の余白が自然
- カード3列が無理なく収まる
広すぎる幅（1600px〜）
- 1行の文字数が多く視線が泳ぐ
- 低解像度モニタではみ出す
- 要素間の余白が間延びする
これは可読性の原則に基づいています。1行の文字数が増えるほど視線の横移動が長くなり、行末から次の行頭へ戻るときに読んでいた位置を見失いやすくなります。とくに漢字かな混じりの日本語は1文字あたりの情報密度が高いため、英文よりも1行の文字数を抑えたほうが疲れにくくなります。
コンテンツ幅を決めるときの実践チェックリスト
幅の数値で迷ったら、以下を順番に確認してください。
1. メインコンテンツの型を確認する
テキスト主体なら960px以下、カードUIを使うなら1100〜1200px、EC系なら1280px〜。前述の5段階の表と照らし合わせれば、おおよその幅はすぐ絞れます。
2. ターゲットの閲覧環境を想定する
自社サイトのデバイス比率はGoogle Analyticsで確認できるので、既存データがある場合は必ず参照してください。PC閲覧の割合が高ければ1200pxをフルに活かせますし、スマートフォン比率が7割を超えるようなサイトではモバイルファーストで設計し、デスクトップのコンテンツ幅は1100px程度に抑えても支障ありません。データがない新規サイトの場合は、同業種のサイトをSimilarWebなどで調べて傾向をつかむ方法もあります。
3. 競合サイトの幅を実測する
ブラウザのDevTools（F12 → 要素の検証）で、競合サイトの .container や .inner などラッパー要素を選択すれば、ボックスモデルの width がすぐ分かります。同業種のサイトを3〜5件チェックするだけで、業界内の標準値が見えてきます。Soreiine!!ギャラリーで同業種のサイトを探して比較するのも効率のよい方法です。
4. 画像サイズへの影響を確認する
コンテンツ幅が広がると、それに合わせて画像も大きくなりがちです。1400px幅のセクションにフルサイズの画像を配置すれば、ファイルサイズは増えます。幅の設定と画像の最適化はセットで考えてください。
よくある質問
デザインカンバスは1440pxと1920pxのどちらで作るべきですか？
1440pxが現在の主流です。1920pxで作ると、その幅で閲覧するユーザー以外には見えない領域のデザインに時間を取られます。1440pxのカンバスでデザインし、全幅セクションの背景だけ左右に伸ばす想定にしておけば、ほとんどのケースに対応できます。
コンテンツ幅を変更するとSEOに影響はありますか？
コンテンツ幅の数値がGoogleの評価に直接影響することはありません。ただし、幅の変更でレイアウトが崩れたり画像サイズが不適切になると、Core Web Vitalsのスコアに響く可能性はあります。変更後はモバイル・デスクトップ両方で表示を確認してください。
左右の余白（padding）はどのくらい取ればよいですか？
デスクトップでは左右20〜40px、スマートフォンでは16〜20pxが標準です。clamp(16px, 4vw, 40px) と書けば画面幅に応じて自動調整され、デバイスを問わず自然な余白が保たれます。
1200pxだと13インチノートPCでは窮屈になりませんか？
13インチノートPCの一般的な解像度（1440×900や1920×1080）であれば、1200pxのコンテンツ幅でも左右に余白が残ります。窮屈に感じるケースは少ないですが、ノートPC利用者が多いBtoBサイトなどでは1100px程度に抑える選択肢もあります。
レスポンシブ対応していればコンテンツ幅は気にしなくてよいですか？
レスポンシブ対応は画面幅の変化に追従する仕組みであり、コンテンツ幅の設計とは別の話です。デスクトップのコンテンツ幅が広すぎればテキストは読みにくく、狭すぎれば余白だらけになります。各ブレイクポイントの基点となるコンテンツ幅を先に設計することで、レスポンシブの調整もスムーズに進みます。
まとめ
2026年のWebデザインにおけるコンテンツ幅は、1200pxを基準に、用途と閲覧環境で調整するのが実践的な考え方です。
- テキスト主体のページは960px以下で可読性を確保する
- カード型UIや2カラム構成なら1100〜1200px
- ECやポータル系は1280pxまで広げて情報密度を保つ
- 本文テキストの幅は720px前後に絞り、読みやすさを確保する
- 全幅セクションと固定幅セクションを交互に使い、視覚的なリズムを作る
- CSSでは
min()とCSS変数を組み合わせると保守性が上がる
コンテンツ幅は一度決めたら終わりではなく、リニューアルやコンテンツ追加のタイミングで見直す値です。DevToolsで自サイトと競合サイトの幅を実測し、ユーザーにとって読みやすいバランスを探ってみてください。
