Webサイトをデザインする際に必ず考慮しなければならない要素のひとつが「コンテンツ幅」です。コンテンツ幅は、ユーザーが読みやすく、かつデザインとして美しく見えるレイアウトを作るための基盤になります。この記事では、PC・タブレット・スマートフォンにおける最適なコンテンツ幅と余白設定の考え方について、具体的な数値をもとに解説します。
1. コンテンツ幅とは何か
コンテンツ幅とは、Webページ内で実際に文章や画像、ボタンなどが配置される「本文領域の幅」のことです。全体のブラウザ幅（ウィンドウ幅）とは異なり、読みやすさやレイアウトの安定感を左右する非常に重要な要素です。
-
広すぎる幅 → 文章が横に長く流れ、視線移動が大きくなり、読みづらくなる。
-
狭すぎる幅 → 情報が窮屈に見え、デザインに余裕がなくなる。
このため、デバイスごとに適切な幅を設定することが理想です。
2. PCにおけるコンテンツ幅の考え方
推奨設定：最大1100px程度、左右の余白は100px前後
PC画面は横幅が広いため、ウィンドウをフルスクリーンで表示すると2000pxを超えることも珍しくありません。しかし、本文をそのまま全幅で表示すると、文字数が1行に多くなりすぎて読みにくくなります。
そのため、最大でも1100px程度に収めるのが一般的です。さらに、左右には100px前後の余白を設けることで、コンテンツが中央にまとまり、視線誘導がしやすくなります。
例：
-
画面幅 1440px のPC → コンテンツ幅 1100px、左右余白 170px
-
画面幅 1920px のPC → コンテンツ幅 1100px、左右余白 410px
これにより、どのPC画面でも「真ん中にきれいに収まるデザイン」が実現できます。
3. タブレットにおけるコンテンツ幅の考え方
推奨設定：左右の余白を64pxに変更
タブレットは縦持ち・横持ちでレイアウトが大きく変化します。特にiPadなどは横幅768pxや1024pxが一般的です。
PCと同じ余白を適用すると、画面が狭く感じられるため、タブレットでは左右の余白を64px程度に調整するとバランスがよくなります。
例：
-
横幅 768px のタブレット → コンテンツ幅 約640px（左右余白 64px ×2）
-
横幅 1024px のタブレット → コンテンツ幅 約896px
この設定により、可読性を保ちつつ、窮屈さを感じさせないデザインになります。
4. スマートフォンにおけるコンテンツ幅の考え方
推奨設定：左右の余白を32pxへ変更
スマートフォンは画面幅が非常に限られるため、余白設定が読みやすさに直結します。
左右余白を狭くしすぎると文字が端まで詰まり、読みにくくなります。一方、広すぎる余白を取ると本文の幅が小さくなり、改行が増えて読みにくくなります。
そのため、左右32px程度がバランスのよい設定です。
例：
-
横幅 375px（iPhone標準） → コンテンツ幅 約311px
-
横幅 414px（iPhone Plus） → コンテンツ幅 約350px
この幅は片手でも読みやすく、親指で操作しやすいレイアウトを実現します。
5. なぜデバイスごとに余白を変えるのか
余白は単なる「空白」ではなく、コンテンツを際立たせるための「デザインの呼吸」です。デバイスごとに余白を調整する理由は以下の通りです。
-
PC：情報量が多いため、余白を広めに取ることで可読性を確保。
-
タブレット：中間的なサイズのため、PCより狭く、スマホより広い余白が適切。
-
スマホ：画面が小さいため、最小限の余白にして本文を確保。
つまり、「デバイスに合わせて最適化する」ことが、レスポンシブデザインにおける基本的な考え方となります。
6. 実装例（CSSベース）
このように、メディアクエリを利用することでデバイスごとに余白を柔軟に調整できます。
7. まとめ
-
PC：最大1100px、左右余白100px前後
-
タブレット：左右余白64px
-
スマホ：左右余白32px
コンテンツ幅は、単に「見た目を整える」だけでなく、ユーザー体験（UX）に直結します。特にテキスト主体のWebサイトでは、可読性が大きく影響するため、ぜひデバイスごとに意識して設計してください。
このブログ記事を読むことで、コンテンツ幅の基本設計がイメージしやすくなると思います。実際のプロジェクトでは、ブランドイメージやターゲットユーザーに合わせて微調整していくことも大切です。
👉 次回は「フォントサイズと行間設定の考え方」について解説します。