塾長 尾上こんにちは！ぬるま湯デザイン塾の尾上です。
メモりすこんにちは！Webデザイナーのメモりすです。
課題で「余白が足りない」と言われたけれど、どこをどれだけ空ければいいのか分からない…
プロのサイトと見比べると、自分のデザインだけ窮屈に見えて自信が持てない…
「もっと余白を取らなければ」と思っても、どこをどれだけ広げるのかが分からないと手が止まりますよね。プロとの差がセンスの差に感じて、不安になることもあると思います。
余白は、ルールを決めておけば迷わず取れるようになります。関係の近さで幅を変え、数種類の幅を使い回すだけで、窮屈さはかなり直ります。
ここで扱うのは、Webページ・LP・バナーなど画面で見るデザインの余白です。この記事では、余白の役割、狭すぎるときに起きること、余白の取り方のルールと直し方をご紹介します。
- 余白がつくる3つの働き（グループ・強弱・読みやすさ）と、狭すぎるときに起きること
- 関係の近さで幅を決め、小・中・大の段階にそろえる余白の取り方のルール
- 文字・画像・ボタン・セクションごとの空け方と、詰め込んだデザインを直す3つの手順
余白とは？デザインで余白が果たす3つの役割
メモりす余白って？ただ何も置いていないスペースじゃないの？
余白とは
文字・画像・ボタンなどの要素の間や内側にある、何も置かないスペースのこと。ホワイトスペースとも呼び、白い色である必要はありません
Webページでは、
- 見出しと本文の間
- 画像とキャプションの間
- セクション同士の間
がすべて余白です。背景に色が付いていても、何も置いていない部分は余白としてみなします。
余白の役割は、次の3つです。
- グループをつくる
- 強弱をつくる
- 読みやすくする
1、グループをつくる
近くに置いたものは、関係があるものとして見られます。商品の写真のすぐ下に価格があれば、読者は説明がなくても「この写真の値段」だと分かります。
反対に、関係のないもの同士が同じ距離で並んでいると、どこまでがひとまとまりなのかが読み取れません。この「近いものは仲間に見える」考え方は、デザインの4原則の近接にあたります。
デザインの4原則は、以下の記事で詳しく説明しています。
2、強弱をつくる
周りに余白が多いものほど、目立って重要に見えます。LPの一番上でキャッチコピーの周りを広く空けると、文字を大きくしなくても視線が集まります。
文字サイズの差で強弱をつける考え方をジャンプ率と呼びます。余白の大小も、文字サイズの差と同じ働きをするわけです。
ジャンプ率は、以下の記事で詳しく説明しています。
3、読みやすくする
行と行の間、段落と段落の間に余白があると、目が一息つけます。スマホで長い文章を読むとき、行がぎっしり詰まっていると、どこまで読んだか分からなくなりませんか？
余白は余った場所ではなく、伝える順番と関係を見せるための場所です。
余白が狭すぎるとどうなる？詰め込みデザインで起きること
塾長 尾上添削で多いのが、伝えたいことを全部入れて、余白が残っていないデザインなんだ…
スマホで次のような画面を開いて、読みにくいと感じたことはありませんか？
- ネットショップの商品説明
- レシピサイトの材料と作り方
- 習い事の教室のお知らせページ
- 美容室や病院の予約ページ
こうした読みにくさは、余白が狭すぎることで起きている場合があります。余白が狭すぎるデザインで起きることは、次の3つです。
- どれとどれがセットか分からない
- 一番伝えたいことが埋もれる
- 読み疲れてページを閉じられる
1、どれとどれがセットか分からない
見出しと本文、画像とキャプションの距離がどこも同じだと、関係が読み取れません。例えば料理教室のLPで、写真の説明文が下の写真のほうに近いと、読者はどの写真の説明なのかを迷います。
2、一番伝えたいことが埋もれる
すべての要素が同じ距離で詰まっていると、すべてが同じ強さに見えます。せっかく置いた「無料体験はこちら」のボタンも、周りの文字に埋もれて目に入りません。
3、読み疲れてページを閉じられる
行間や段落の間が詰まった文章は、スマホの小さな画面では特に読みにくくなります。読む前に「大変そう」と感じられると、そのままページを閉じられることもあります。
余白が狭くなる一番の原因は、伝えたいことを全部入れようとすることです。余白は、要素を並べる前に最初に確保しておくものです。
いま作っているデザインがあれば、見出しの上と下の余白を比べてみてください。見出しが上の段落と下の本文のちょうど真ん中にあるなら、どちらとセットなのかが伝わっていない状態です。
Webデザインの余白の取り方｜3つの基本ルール
塾長 尾上余白は「なんとなく」で空けないよ。幅を数種類に絞って、同じ関係なら同じ幅にそろえるよ！
余白の取り方は、次の3つのルールで決めます。
- 関係が近いものは狭く、遠いものは広く
- 余白の幅は数種類に絞ってそろえる
- 大事なものほど周りを広く空ける
ルール1、関係が近いものは狭く、遠いものは広く
余白の幅は、要素同士の関係の近さで決めます。同じグループの中が一番狭く、グループ同士がその次、セクション同士が一番広い、という順番です。
例えば商品紹介のカードなら、商品名と価格の間は狭く空けます。カードとカードの間はそれより広く、商品紹介と次の「お客様の声」の間はさらに広くします。
ルール2、余白の幅は数種類に絞ってそろえる
余白の幅を場所ごとに目分量で決めると、10px・13px・18pxのように似た幅がばらばらに混ざります。似た幅が混ざると、関係を区別しているのか、ずれているだけなのかが読者に伝わりません。
デジタル庁のデザインシステムによると、一般的によく使われる基準単位は8pxで、余白の段階は3〜5つ程度になることが多いとされています。ただし絶対的な数値は決められておらず、使う値に規則性を持たせることが大切だと説明されています。
次の表は、デジタル庁が例として示している8px・24px・64pxの3段階を、Webの部品に当てはめて整理したものです。
| 余白の段階 | 幅の例 | 使う場所の例 |
|---|---|---|
| 小 | 8px（基準の1倍） | ラベルと見出しの間、画像とキャプションの間 |
| 中 | 24px（基準の3倍） | 見出しと本文の間、カード同士の間 |
| 大 | 64px（基準の8倍） | セクションとセクションの間 |
※幅はあくまで例です。8pxでなければいけないという決まりはありません。
大事なのは数値そのものより、同じ関係なら同じ幅を使うことです。段階を決めておけば、新しい要素を足すときも「これはグループの中だから小」とすぐに決められます。
ルール3、大事なものほど周りを広く空ける
周りの余白が大きいものほど、重要に見えます。ページの見出しなら、大見出しの上下は広く、小見出しになるほど周りの余白も小さくしていきます。
見出しの大きさと余白の大きさをそろえると、どれが大きな区切りで、どれがその中の話なのかが一目で分かるからです。
場所別の余白の取り方｜文字・画像・ボタン・セクション
メモりす文字と画像とボタンで、空け方は変わるの？
3つのルールを、Webページでよく使う部品ごとに当てはめていきます。先に、余白の用語を1つ押さえておきましょう。
パディングとマージン
パディングは要素の内側の余白、マージンは要素の外側の余白のこと。ボタンなら、文字とボタンの縁の間がパディング、ボタンと周りの要素の間がマージンです
文字まわり（行間・段落の間・字間）
行間と字間は、詰めすぎないことが基本です。文字の読みやすさは書体と余白の両方で決まるので、書体を選ぶときは行間も一緒に見ておきます。
読みやすい書体の選び方は、以下の記事で詳しく説明しています。
文字の位置をそろえたいときに、スペースキーで全角スペースを打って調整するのはやめましょう。単語が途中で区切られ、画面の読み上げ機能を使う人に言葉が正しく伝わらなくなるからです。
W3Cのアクセシビリティの基準では、利用者が行間を文字サイズの1.5倍まで広げても、内容が欠けたり重なったりしないことが求められています。文字を入れる枠は、行間を広げても収まるゆとりを持たせておきましょう。
画像まわり
画像とキャプションは近づけ、次の段落とは離します。キャプションが画像と本文の真ん中にあると、どちらの説明なのかが分かりにくくなります。
ボタンまわり
ボタンは、内側のパディングと外側のマージンを分けて考えます。パディングが狭いと文字が縁に当たって窮屈に見え、スマホでは押しにくくなるのが難点です。
押してほしいボタンほど、周りのマージンを広く取ります。周りに何もないボタンは、それだけで目に入りやすくなるからです。
セクションの間
セクション同士の間は、ページの中で一番大きい余白です。ここが狭いと、話が変わったことが読者に伝わりません。
スマホでは画面幅に合わせて余白を縮めますが、小・中・大の大小関係は崩さないようにします。パソコンとスマホの両方で、セクションの区切りが分かるかを確かめておきましょう。
余白が狭すぎるデザインの直し方｜3つの手順
メモりす「余白が足りない」って言われても、どこを空ければいいか分からない…
塾長 尾上足すより先に、減らせるものを探すよ。順番に見ていけば直せるよ！
架空の「パン屋のLP」のお知らせセクションを例にします。このセクションには、次の要素がすべて同じ間隔で詰まっています。
- お店の紹介文
- パンの写真4枚
- 営業時間
- 地図
- 予約ボタン
このセクションを直す手順は、次の3つです。
- 要素を減らす
- グループに分けて、グループの間を広げる
- 余白の種類を数えて、小・中・大にそろえる
1、要素を減らす
まず、このセクションの目的に必要ないものを外します。目的が「予約してもらうこと」なら、地図は店舗情報のページに移し、写真は4枚から2枚に絞れます。
余白は足すより、減らして生むほうが確実です。要素が減れば、残したものの周りを広く空けられます。
2、グループに分けて、グループの間を広げる
残った要素を、関係の近いもの同士でまとめます。「紹介文と写真」「営業時間と予約ボタン」のように分けたら、グループの中の余白はそのままにして、グループの間だけを広げます。
3、余白の種類を数えて、小・中・大にそろえる
最後に、使っている余白の幅を数えます。似た幅がばらばらに混ざっていたら、小・中・大のどれかにそろえましょう。
直したあとは、画面を縮小するか目を細めて全体を見てみてください。このセクションなら、紹介文と写真、営業時間と予約ボタンの2つのまとまりにはっきり分かれて見えればOKです。
反対に、広く空けすぎてスカスカに見えるときは、関係が近いもの同士が離れていないかを確かめます。グループの中の余白が大きすぎると、まとまりがばらけて見えるからです。
バナーのような小さな画面でも、考え方は同じです。バナーで詰め込みを避ける作り方は、バナーの作り方を初心者向けに解説｜手順・サイズ・上達のコツでまとめています。
まとめ
1、余白はグループ・強弱・読みやすさをつくる。狭すぎると全部が同じに見えて伝わらない
2、関係が近いものは狭く、遠いものは広く。幅は数種類に絞って小・中・大にそろえる
3、狭すぎるときは、要素を減らしてからグループの間を広げる
余白のような判断の基準を、手を動かしながら身につけたい方は、5日間チャレンジも活用してください。
ぬるま湯デザイン塾の5日間チャレンジ（無料体験）は、デザインの良し悪しの見方からバナー制作・サイト制作までを、5日間で体験できるプログラムです。
＼ 5日間チャレンジの詳細はこちらから ／
参考にした情報源
- デジタル庁「デジタル庁デザインシステムβ版 余白（概要）」https://design.digital.go.jp/dads/foundations/spacing/（2026年11月6日確認）
- W3C「Understanding Success Criterion 1.4.12: Text Spacing」https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html（2026年11月6日確認）
塾長 尾上次のブログでもまたお会いしましょう！
メモりすバイバイ！またね！
