左右の余白は何pxが正解？Webサイトの横幅設計を考える

Webサイトをデザインするとき、「左右の余白は何pxにすればよいのだろう」と迷うことがあります。16px、24px、40pxなど、参考サイトによって設定はさまざまです。

しかし、余白にはすべてのサイトに共通する絶対的な正解があるわけではありません。画面幅やコンテンツの種類、読みやすさを考慮して決める必要があります。この記事では、Webサイトの横幅設計に必要な考え方と、デバイス別の余白の目安を解説します。

左右の余白に唯一の正解はない

左右の余白は、単に見た目を整えるためのスペースではありません。文章や画像が画面端に接するのを防ぎ、情報を読みやすくする役割があります。

重要なのは特定のpx数を守ることではなく、画面幅が変わっても快適に閲覧できる状態を作ることです。同じ24pxでも、スマートフォンでは十分に見えて、広いデスクトップ画面では狭く感じる場合があります。

余白を決める際は、次の点を確認しましょう。

Webサイトの横幅は、画面全体の幅だけでなく、情報を配置する「コンテナ」の幅を基準に考えると整理しやすくなります。コンテナとは、見出し、文章、画像、カードなどを収める領域です。

一般的な設計では、コンテナに最大幅を設定し、画面が広いときは中央に配置します。たとえば最大幅を1200pxにした場合、1440pxの画面では左右にそれぞれ120pxの空きが生まれます。一方、画面が1200pxより狭い場合は、左右に一定の余白を残しながらコンテナを縮めます。

「最大幅」と「画面端からの最低余白」を組み合わせることが、安定した横幅設計の基本です。

固定余白は、画面幅にかかわらず24pxなどの同じ値を使う方法です。管理しやすい反面、大画面では余白が少なく見えることがあります。可変余白は、画面幅に応じて余白を変化させる方法です。柔軟ですが、最小値と最大値を決めないと余白が極端になるため注意が必要です。

数値はデザインによって変わりますが、最初の基準として使いやすい範囲があります。

スマートフォンでは、左右16pxがよく使われます。表示領域を確保しつつ、文字やボタンが画面端に接するのを防げるためです。ゆったりした印象にしたい場合は20〜24pxも候補になります。

ただし、幅320px程度の小さな画面で余白を広くしすぎると、本文やカードの領域が狭くなります。小さい画面ほど、見た目の余裕と情報量のバランスが重要です。

タブレットでは24〜40px程度から検討できます。画面幅が広くなるため、スマートフォンと同じ16pxでは情報が端に寄って見えることがあります。カードを複数列にする場合は、カード間の余白とのバランスも確認しましょう。

デスクトップでは、左右の余白を固定値だけで管理するより、コンテナの最大幅を決める方法が適しています。一般的なサイトでは、コンテナ幅として960〜1200px程度が使われますが、写真中心のサイトではさらに広くすることもあります。

デスクトップでは「左右を何px空けるか」より、「コンテンツをどこまで広げるか」を先に決めましょう。

サイト全体で一つのコンテナ幅だけを使う必要はありません。文章、画像、一覧など、コンテンツの性質に応じて適切な横幅は異なります。

長い文章を読むページでは、一行が長すぎると次の行を追いにくくなります。本文領域は640〜760px程度を目安にすると、読みやすさを保ちやすくなります。一方、商品一覧や実績紹介などのカードレイアウトでは、1000〜1200px程度の広い領域が必要になることがあります。

画像を印象的に見せたい部分は画面いっぱいに広げ、画像内の文字やボタンだけをコンテナに合わせる方法もあります。すべての要素を同じ横幅にそろえるのではなく、役割ごとに幅を設計することが大切です。

横幅設計は、CSSのmax-widthと左右のpaddingを使うと実装できます。次の例では、コンテンツの最大幅を1200px、画面端の余白を24pxにしています。

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
  box-sizing: border-box;
}

margin-inline: autoによって、最大幅に達したコンテナが中央に配置されます。box-sizing: border-boxを指定すると、paddingを含めて幅が計算されるため、意図しない横スクロールを防ぎやすくなります。

画面幅に応じて余白を滑らかに変えたい場合は、clamp()も便利です。

.container {
  padding-inline: clamp(16px, 4vw, 48px);
}

この指定では、余白が最小16px、最大48pxの範囲で変化します。可変値を使う場合でも、必ず最小値と最大値を設定しましょう。

よくある失敗は、デザインカンプの画面幅だけを見て余白を決めることです。1440pxでは美しく見えても、1280pxや375pxで同じ印象になるとは限りません。

また、コンテナにwidth: 1200pxだけを指定すると、狭い画面では横にはみ出します。固定幅ではなく、width: 100%とmax-widthを組み合わせるのが基本です。

最終確認では、代表的なデバイス幅だけでなく、その間の幅でも表示を確認しましょう。ブラウザ幅を少しずつ変え、文章、画像、カード、ナビゲーションが不自然に崩れないかを見ることが大切です。

左右の余白に、すべてのWebサイトで使える一つの正解はありません。スマートフォンでは16〜24px、タブレットでは24〜40pxを出発点にし、デスクトップではコンテナの最大幅を中心に設計すると考えやすくなります。

数値だけをまねるのではなく、コンテンツの読みやすさや画面幅の変化を確認しながら調整しましょう。最大幅、最低余白、コンテンツごとの適切な幅を組み合わせることで、さまざまな環境で見やすいWebサイトを作れます。