スマホサイトの本文左右余白はどれぐらいが一般的？迷った時の目安を解説

スマホサイトを作っていると、本文の左右にどれぐらい余白を取ればいいのか迷うことがありますよね。

余白が狭すぎると画面が詰まって見えますし、逆に広すぎると1行が短くなって読みにくくなります。見た目の問題だけに見えて、実は読みやすさや使いやすさにかなり関わる部分です。

では、スマホサイトでは本文の左右余白はどれぐらいが一般的なのでしょうか。結論から言うと、16pxがもっとも標準的で、少しゆったり見せたいなら20pxが使いやすいです。

この記事では、スマホサイトの本文左右余白の一般的な目安と、実務で使いやすい決め方、さらに後から調整しやすいCSS変数の使い方までまとめます。

スマホサイトの本文左右余白は16pxが標準的

スマホサイトでは、本文の左右余白は16px前後で設計されることが多いです。

これはかなり無難な幅で、多くのサイトで違和感が出にくいサイズです。迷ったらまず16pxで始めれば、大きく外しにくいです。

特に、一般的な企業サイト、店舗サイト、ブログ、サービス紹介ページなどでは、このぐらいの余白がちょうどよく感じられることが多いです。

本文を少しやさしく、ゆったり見せたい場合は、左右20pxもよく使われます。

たとえば、次のようなケースでは16pxより20pxのほうがしっくり来ることがあります。

スマホは画面が小さいので、たった4pxの違いでも印象がかなり変わります。少し余白を広げるだけで、窮屈さが減って見やすくなることがあります。

左右12pxぐらいまで狭めることもありますが、これは情報量を優先したい場合に限ったほうが無難です。

たとえば、カードをたくさん並べたい時や、管理画面っぽく情報を詰めて見せたい時には使えます。ただし、本文や説明文のような読み物に使うと、かなり詰まって見えやすくなります。

特に日本語は文字の密度が高く見えやすいので、本文エリアでは12pxだと少し苦しく感じることがあります。

左右24pxにすると、余白にゆとりが出て上品な印象になります。

ただし、スマホはもともとの横幅が狭いため、余白を広く取りすぎると本文の横幅が細くなりすぎます。その結果、改行が増えてしまい、かえって読みにくくなることがあります。

見た目は整いやすいですが、本文全体に使う場合は少し注意が必要です。見出しや一部の紹介ブロックだけに使うほうが扱いやすいこともあります。

ここは実務ではかなり大事なポイントです。

スマホサイトの本文左右余白は、外側のmarginで空けるよりも、内側のpaddingで取ることが多いです。

たとえば本文エリア全体を横幅100%で持たせて、その中に左右16pxの余白を入れる形です。このほうが背景色や区切り線、ボーダーの扱いが安定しやすく、後から調整もしやすいです。

.content{
  padding-inline:16px;
}

少しゆったり見せたいなら、20pxにするだけです。

.content{
  padding-inline:20px;
}

スマホサイトを作っていると、途中で「やっぱり左右余白をもう少し広げたい」「少し狭くしたい」となることがよくあります。

そのたびに各CSSを1つずつ書き換えるのは面倒なので、最初からCSS変数を使っておくとかなり楽です。

たとえば、:rootにサイト共通の余白を定義しておけば、その値を変えるだけで全体に反映できます。

:root{
  --content-side-space:16px;
}

.content{
  padding-inline:var(--content-side-space);
}

この形にしておけば、後から余白を20pxにしたい時は、ここだけ直せば済みます。

:root{
  --content-side-space:20px;
}

つまり、本文エリアごとのCSSを何カ所も修正しなくても、元になる数字を1つ変えるだけで済むわけです。実務ではこういう作りにしておくと、デザイン調整がかなりしやすくなります。

:rootは、ページ全体で使う共通の設定を書く場所と思えばわかりやすいです。

そこに色や余白や文字サイズなどの共通値を入れておくと、後から全体調整がしやすくなります。

たとえば、今回の左右余白だけでなく、色や角丸などもまとめて管理できます。

:root{
  --content-side-space:16px;
  --main-text-color:#333;
  --main-bg-color:#fff;
  --card-radius:16px;
}

こうしておけば、サイト全体のルールが見やすくなりますし、修正漏れも減らしやすいです。

スマホサイトの本文左右余白に迷ったら、次の考え方で決めると失敗しにくいです。

まずは16pxで作ってみて、文字サイズや見た目の印象を確認しながら20pxに広げるか判断する流れが、いちばん現実的です。

スマホサイトの本文左右余白は、16pxがもっとも一般的です。少しゆったり見せたいなら、20pxが使いやすいです。

逆に、12pxは少し窮屈になりやすく、24pxは本文幅が狭くなりやすいため、目的に合わせて使い分けるのが大切です。

また、実務ではmarginよりpaddingで余白を取り、さらにCSS変数を使っておくと、後からの調整がかなり楽になります。

迷ったら、まずは左右16pxで組んでみる。そこから必要に応じて20pxに広げる。この考え方で進めると、スマホサイトの余白設計で失敗しにくくなります。