Webデザインの余白の使い方｜詰まって見える原因と整え方の基本

「自分が作ったページが、なんとなく詰まって見える」「プロが作ったサイトと比べると、垢抜けない気がする」という悩みの原因は、色でもフォントでもなく、余白の取り方にあることがほとんどです。

余白は「何もない場所」ではなく、要素どうしの関係を伝えるための情報そのものです。近づけるか、離すか。この判断の積み重ねが、ページの読みやすさを決めています。

この記事では、余白が果たしている役割、詰まって見える具体的な原因、そして今日から使える整え方の手順をお伝えします。デザインの経験がなくても実践できる内容にまとめました。

初心者と経験者の差が一番はっきり出るのが余白なんだ。色やフォントは真似できても、余白の判断だけは考え方を知らないと再現できない。ここを押さえていこう。

余白が果たしている3つの役割

1. 要素の関係を伝える

見出しとその下の本文は、意味のうえでつながっています。一方、本文と次の見出しは、話題が切り替わる境目です。この関係の違いを、距離の違いで表すのが余白の第一の仕事です。

見出しの上下の余白が同じだと、読み手はどこで話題が変わったのか判断できません。見出しの上を広く、下を狭く。これだけで文章のかたまりが読み取りやすくなります。

2. 視線を誘導する

周囲に余白の多い要素は、自然と目を引きます。ボタンやキャッチコピーを目立たせたいとき、色を派手にする前に、周囲の余白を広げてみてください。色を足さずに目立たせられるのは、余白ならではの効き方です。

3. 読む負担を軽くする

文字と文字の間、行と行の間、段落と段落の間。これらが詰まっていると、目が休む場所がなくなり、読むのが苦痛になります。文章量の多いページほど、余白の設計が結果を左右します。

こうした余白の考え方は、ノンデザイナー向けのデザイン入門書でも「近接」などの原則として作例つきで解説されています。1冊手元に置いておくと、判断に迷ったときに確認できます。

詰まって見える5つの原因

原因1：行間が狭い

日本語の本文では、行の高さを文字サイズの1.6〜1.8倍程度に設定すると読みやすくなります。英語と違って日本語は文字の密度が高いため、欧文の標準的な行間をそのまま使うと窮屈に見えます。

原因2：左右の余白が足りない

スマートフォンで表示したとき、文字が画面の端に張り付いていると、読み手は圧迫感を覚えます。左右に16px前後の余白を確保するだけで、印象は変わります。

原因3：セクション間の余白が足りない

話題のかたまりごとの区切りが弱いと、ページ全体が一枚の壁のように見えます。セクション間の余白は、段落間の余白の2倍から3倍を目安に取ると、構造が視覚的に伝わります。

原因4：ボタンの内側が狭い

ボタンの文字と枠の距離が近いと、窮屈で押しにくい印象になります。上下に12〜16px、左右に24px程度の内側の余白を確保すると、押せるものとして認識されやすくなります。

原因5：余白の値がバラバラ

ある場所は18px、別の場所は22px、また別の場所は25px。こうした半端な数値が混在すると、全体がなんとなく落ち着きません。余白の値を8の倍数などの決まった単位にそろえるだけで、統一感が生まれます。

余白を整える手順

ステップ1：単位を決める

まず、そのサイトで使う余白の値を4〜6種類に絞ります。たとえば8・16・24・40・64の5種類。これ以外の数値は使わない、と決めてしまいます。選択肢を減らすことが、統一感への近道です。

ステップ2：小さい単位から決める

文字と文字、見出しと本文といった細かい部分から決めていきます。ここが決まらないうちに大きなセクションの余白を決めると、あとで全体を組み直すことになります。

ステップ3：関係の遠さで割り当てる

関係が近い要素には小さい値、遠い要素には大きい値を割り当てます。見出しと本文は16、段落と段落は24、セクションとセクションは64、といった具合です。

ステップ4：スマートフォンで確認する

パソコンで見て良いバランスでも、狭い画面では余白が過剰に感じられることがあります。スマートフォンでは、パソコンの6割から7割程度の余白に縮めるとちょうどよくなる場面が多いため、画面幅ごとの調整を前提に考えてください。

「余白は多めに取れ」ってよく言われるけど、闇雲に広げると今度は関係が読み取れなくなる。大事なのは広さじゃなくて、差をつけることだよ。

余白の目安を数値で確認する

これらはあくまで出発点となる目安です。フォントの種類や文字サイズによって最適な値は変わるため、実際の画面で確認しながら微調整してください。

文字まわりの余白も忘れない

文字の間隔

見出しに使う大きな文字は、そのままだと字間が広く見えることがあります。逆に小さい文字は詰まって見えがちです。大きい文字は字間を狭く、小さい文字は字間を広くという調整が、仕上がりの精度を上げます。

使用するフォントによって最適な字間は変わります。Google Fontsには日本語対応のフォントが揃っているので、実際の文章を流し込んで見え方を比べてみるとよいでしょう。

1行の文字数

本文の1行が長すぎると、行の折り返しで視線が迷子になります。日本語の本文では、1行あたり35〜45文字程度に収まるよう、コンテンツの最大幅を設定するのが定番です。

作業の進め方と環境

数値をルール化しておく

デザインを作る段階で余白の値を決めておかないと、実装時に判断がぶれます。Figmaなどのデザインツールでスタイルとして登録しておくと、複数人で作業する場合もぶれません。

画面が狭いと余白の判断ができない

ノートPCの13インチの画面だけで作業していると、全体のバランスを見ながら細部を詰めるという行き来ができず、余白の判断が甘くなります。

27インチのWQHDモニターを1枚足すと、全体像と拡大表示を並べて確認できるようになります。デスクの奥行きが足りない場合は、モニターアームで設置面積を節約できます。長時間の作業になるため、静音タイプのワイヤレスマウスやパームレスト付きのキーボードがあると、手首の負担も抑えられます。

印刷して確認する

画面上では気づかなかった余白のばらつきが、紙に印刷すると見えてくることがあります。重要なページだけでも、A4に出力して眺めてみる習慣をつけると、細かいずれを拾えるようになります。

余白と押しやすさ・読みやすさの関係

タップできる領域を確保する

スマートフォンでは、指で押す領域が小さすぎると誤タップが起きます。ボタンやリンクは、周囲に十分な余白を確保し、押せる範囲を縦横44px以上確保しておくと、操作のストレスが減ります。

リンクが縦に並ぶメニューでは、行と行の間隔が詰まっていると隣を押してしまいます。ここは見た目の整いよりも、操作のしやすさを優先してください。

文字を薄くする前に余白を疑う

補足情報を目立たせたくないとき、文字色を薄いグレーにする対処がよく取られます。しかし文字色を薄くすると読みづらくなり、アクセシビリティの観点でも問題が出ます。目立たせたくない要素は、色を薄くするのではなく、周囲の余白を狭めて主役から距離を取るという方法のほうが安全です。

枠線に頼らない

要素を区切りたいとき、線を引くのは手っ取り早い方法です。ただし線が増えるほど画面は騒がしくなります。まずは余白の差だけで区切れないかを試し、それでも伝わらない場合に線を検討する。この順番を守ると、すっきりした見た目を保てます。

余白を見直すチェックリスト

この6項目を通すだけで、素人っぽさの大半は消えます。公開前のチェック項目としてメモに残しておくと、毎回同じ品質を保てます。

ケース別・余白の直し方

ケース1：写真と文章が並ぶセクション

写真の横に説明文を置く構成では、写真と文章の間の余白が狭いと窮屈に見え、広すぎると別々のものに見えます。写真と文章の間の余白を、セクション間の余白より明らかに狭くすると、2つが1つのまとまりとして読み取られます。

ケース2：3つ並んだ特徴の紹介

アイコンと見出しと説明文を3列で並べる構成は定番ですが、列と列の間隔が狭いと窮屈になります。列の間は48px前後、各列の内部（アイコンと見出しの間など）は16px前後、というように外側を広く、内側を狭くという原則を守ってください。

ケース3：問い合わせフォーム

入力欄が詰まって並んでいると、どの項目に何を入れるのか分かりにくくなります。項目名と入力欄の間は8px、項目と項目の間は24px程度に差をつけると、迷わず入力できるようになります。

フォームは余白の設計が離脱率に直結する場所です。ここだけは念入りに確認してください。

ケース4：スマートフォンのメニュー

ハンバーガーメニューを開いた先の項目が詰まっていると、押し間違いが頻発します。項目の高さを十分に確保し、指で押せる範囲を意識して余白を取ってください。

よくある質問（Q&A）

Q. 余白は広ければ広いほどよいのでしょうか

A. そうとは限りません。余白を広く取りすぎると、関係のある要素どうしまで切り離されて見え、かえって読みにくくなります。重要なのは余白そのものの広さではなく、近いものと遠いものの差がついているかです。

Q. 8の倍数でなければいけませんか

A. 決まりではありません。4の倍数や10の倍数を基準にしているサイトもあります。大切なのは、そのサイトの中で基準が一貫していることです。

Q. スマートフォンとパソコンで余白を変える必要はありますか

A. 必要です。同じ数値をそのまま使うと、狭い画面では余白が過剰になり、情報量が入らなくなります。画面幅に応じて縮める設計を前提にしてください。

Q. 情報量が多くて余白が取れません

A. 余白が取れないのは、載せる情報を絞れていないサインです。余白の問題に見えて、実は情報整理の問題であることがほとんどです。優先度の低い情報を別ページに移すか、削ることを検討してください。

Q. 余白の感覚はどうすれば身につきますか

A. 好きなサイトのスクリーンショットを撮り、ブラウザの開発者ツールで実際の余白の数値を測ってみてください。「この見え方はこの数値だったのか」という照合を繰り返すと、感覚が数値と結びついていきます。

Q. デザインの本を読むだけで身につきますか

A. 知識としては入りますが、判断力は手を動かさないと育ちません。基礎を体系的に押さえるならノンデザイナー向けのデザイン入門書が役立ちますが、読んだあとに自分のページで試すところまでをセットにしてください。

まとめ

余白の扱いは、地味な作業の積み重ねです。しかし、ここを丁寧に詰めたページとそうでないページの差は、見た瞬間に伝わります。色やフォントを変える前に、まず余白を見直してみてください。

今日できることとして、自分が作ったページを1つ開き、見出しの上下の余白が同じになっていないかを確認するところから始めてみましょう。そこを直すだけでも、読みやすさは変わります。