ホームページの余白とレイアウトが整わず、画面が詰まって見えるときは、余白の「量」よりも「間隔の差」が足りないことがほとんどです。この記事では、制作会社が制作中に見直している順番に沿って、詰まって見える原因の見つけ方、余白の数値の決め方、文字まわりとレイアウトの整え方、直したあとの確認方法を手順で解説します。自社で運用しているサイトの手直しにも、制作会社へ修正を依頼するときの伝え方にも使えます。

ホームページが詰まって見える原因は「余白の量」ではなく「間隔の差」です

詰まって見える原因の多くは、余白が少ないことではなく、すべての間隔がほぼ同じで、どこが区切りか分からないことです。余白を一律に増やしても、スカスカに見えるだけで、読みやすくはなりません。

近いものは近く、離れたものは離すのが基本です

人は、近くにあるものを同じグループだと受け取ります。この性質を使うと、線や枠で囲まなくても、まとまりを作れます。見出しとその本文は近く、次の見出しとは離れていると、ひとかたまりずつ読めます。逆に、見出しの上下の空きが同じだと、見出しがどちらの文章のものか分からなくなります。

詰まって見える症状は4つに分けられます

自分のサイトがどの症状に当てはまるかを先に決めておくと、手を付ける場所が絞れます。複数当てはまる場合は、次の章の順番で上から直していきます。余白の調整は、色や写真を入れ替えるより低コストで見た目が変わるため、リニューアルの前にまず試す価値があります。社内で修正を依頼するときも、「文字が読みにくい」「区切りが分からない」のように症状で伝えると、直す側が原因を特定しやすくなります。

余白を直す順番｜大きい余白から小さい余白へ

余白は、セクション間、ブロック内、行間・文字間の順に、大きいものから整えます。細かいところから直すと、全体の流れが整っていないため、後でやり直しになります。

セクション間の余白を広く、同じにそろえる

「実績」「料金」「よくある質問」のような大きなまとまりの上下に、広めの余白を取ります。PCでは数十px〜100px前後、スマホではその半分程度が一般的な目安です。大切なのは、セクションごとの余白をそろえることです。広さがばらばらだと、リズムが乱れます。

ブロック内の余白をセクション間より狭くする

カードや見出し＋本文のまとまりの内側は、セクション間より狭くします。「まとまりの中の間隔 < まとまりどうしの間隔 < セクション間の間隔」の関係になっていれば、構造が見た目で伝わります。

最後に行間と文字間を調整する

文字まわりは最後に整えます。行間は、本文の読みやすさを左右します。具体的な数値は、文字まわりの章で扱います。

余白の数値を決める｜8の倍数で揃えるとぶれません

余白の数値は、8pxを基準にした倍数（8、16、24、32、48、64…）から選ぶと、サイト全体がぶれません。数値を毎回感覚で決めると、13px、17px、22pxのような中途半端な値が混ざり、整って見えなくなります。

基準になる数値を最初に決めます

使う数値は、5〜6種類に限ります。たとえば、8、16、24、48、96の5段階です。デザインのデータ（Figmaなど）でも、実装（CSS）でも、この数値のなかから選ぶルールにすると、担当者が変わっても同じ見た目を保てます。

PCとスマホの目安

上の数値は、一般的な制作で使われる幅の目安であり、サイトの雰囲気によって変わります。上品で落ち着いた印象にしたいときは広め、情報量を見せたいときは狭めにします。

余白を「共通の部品」として管理する

余白の数値は、ページごとに別々に指定せず、共通の設定にまとめておきます。後で「全体をもう少し広げたい」と思ったときに、1か所の変更で済みます。制作会社に依頼するときは、「余白のルールを決めて、共通化してほしい」と伝えると意図が通じます。ルールがないまま修正を重ねると、直すたびに別のページとの差が増えていきます。

文字まわりの余白｜行間・行の長さ・見出しの上下

文字まわりの余白は、行間を文字サイズの1.7〜2倍、1行を30〜40文字前後、見出しは上を広く下を狭くが目安です。本文が読みやすいと、サイト全体が整って見えます。

行間は文字サイズの1.7〜2倍を目安にします

日本語は欧文より行間を広く取るのが一般的です。本文が16pxなら、行間は27〜32px程度です。行間が文字サイズに近いと、行がくっついて見えます。大きな見出しは、行間を狭めても構いません。

1行の長さは30〜40文字前後に収めます

PCで画面いっぱいに文章を広げると、1行が長すぎて、次の行の頭が探せなくなります。本文の幅に上限（最大幅）を設けて、1行に収まる文字数を抑えます。

見出しは「上を広く、下を狭く」します

見出しの上に広い余白を取り、下を狭くすると、見出しが直後の文章に属して見えます。上下を同じ幅にすると、どちらの文章の見出しなのか分かりにくくなります。

段落の間は1行分の半分〜1行分を空ける

段落の区切りには、行間と区別がつく程度の空きを入れます。段落の間が行間とほぼ同じだと、段落が分かれていることに気づきにくくなります。

レイアウトを整える｜揃える・まとめる・列を決める

余白の次は、要素の置き方です。左端を揃える、近いものをまとめる、列数を決める、の3点で、画面が整理されます。

左端と上端の「線」を揃える

見出し、本文、ボタンの左端がページ内で揃っていると、一本の線が通って見えます。揃っていないと、わずかなズレでも落ち着きません。中央揃えと左揃えが混ざっているページは、どちらかに寄せます。

関係の近いものをまとめる

「写真」「見出し」「説明」「ボタン」が一組の場合、組のなかの間隔を狭く、組どうしを広くします。余白を変えるだけで、色や線で囲まなくても、まとまりが伝わります。

列数は2・3・4から選びます

カードを横に並べるときの列数は、2、3、4列のいずれかに決めます。5列以上は、ひとつひとつが小さくなり、文字が読みにくくなります。スマホでは1列か2列にします。

画像と文字の比率を決めておく

左に画像、右に文章を置くレイアウトでは、画像と文章の幅の比率を、ページ全体で統一します。ページごとに5:5、6:4、4:6と変わると、サイトに統一感がなくなります。ファーストビューの画像配置は、ファーストビューで選ばれるWebサイトデザインのコツで扱っています。

余白を足しても直らないときの対処

余白を調整しても詰まって見えるときは、要素の数が多いか、要素の強弱がないことが原因です。余白だけで解決しようとせず、中身を見直します。

情報が多すぎるときは、減らすか分ける

1画面に載せる内容が多すぎる場合は、優先度の低いものを別のセクションやページへ移します。すべてを載せようとすると、どれだけ余白を広げても窮屈なままです。

要素に大小の差をつける

見出し、本文、補足の文字サイズがほぼ同じだと、強弱がなく、詰まって見えます。見出しを本文の1.5倍前後、補足を本文より少し小さくするだけで、階層が見えてきます。

背景色の切り替えで区切る

余白だけで区切りが伝わらないときは、セクションごとに背景を白と薄いグレーに切り替えます。色が多くなりすぎないよう、背景色は2色までにとどめます。色の選び方は配色ツール10選と配色の決め方を参考にしてください。

直したあとの確認手順

手直しのあとは、目を細めて全体を見る、スマホ幅で見る、前後を並べて比べる、の3つで確認します。

画面を縮小して「かたまり」を見る

ブラウザを縮小するか、目を細めて画面を見ます。文字が読めなくなっても、かたまりが4〜5つに分かれて見えれば、構造は整っています。

スマホ幅で見直す

PCで整っていても、スマホで見ると詰まることがあります。幅390px前後に画面を狭めて、左右の余白、ボタンの大きさ、文字の折り返しを確認します。

前後を並べて比べる

修正前と修正後の画面キャプチャを並べます。変えたつもりでも、見た目の差が小さければ、変更が足りていません。また、直した箇所の数値を記録しておくと、あとで別のページに同じ直しを広げるときに迷いません。

デザインの腕試しに「Webサイトデザインバトル」

余白の感覚は、他のサイトと比べる経験で身につきます。当社の「Webサイトデザインバトル」は、サイトのトップ画面を2つ並べて、好きなほうを選ぶ遊びです。

余白の違いを意識して選んでみる

2つのトップ画面を比べて、良いと思うほうを選びます。投票の前に、業種、目的、想定する人、観点、説明（制作のねらい）が各カードの下に出ます。選んだ理由が「余白」や「文字の読みやすさ」に言葉にできるか、試してみてください。無料で、会員登録なしで遊べます。

実際のサイトを開いて全体を見る

トップ画面だけでなく、実際のサイトを開いて全体を見ることもできます。トップの余白の取り方が、下のページまで続いているかを確かめられます。

エントリーの流れ

自分が作ったサイトを出す場合は、URLを入れるとページの画像が取得されます。エントリーは審査制で、公開前に当社で確認します。取り下げは、本人がいつでもできます。Webサイトデザインバトルにエントリーするから、まずは他の人のサイトを見るだけでも構いません。

よくある質問

Q. 余白は広いほどよいのですか？

広ければよいわけではありません。広げすぎると、情報が散らばって見え、スクロール量も増えます。間隔に差をつけ、同じ種類の余白をそろえることが重要です。

Q. 余白の数値はどうやって決めればよいですか？

8pxなど基準の数値を決め、その倍数から選びます。迷ったら、前述の目安の表から始めて、実際の画面を見ながら調整してください。

Q. 本文の文字サイズは何pxがよいですか？

一般的には16px前後がよく使われます。読む人の年齢層が高い場合は、17〜18pxに上げます。サイズに合わせて、行間も調整します。

Q. スマホだけ詰まって見えるのはなぜですか？

画面幅が狭いため、PCの余白をそのまま縮めても足りないことがあります。左右の余白は16〜20px前後を確保し、セクション間の余白もスマホ用に別で設定します。

Q. テンプレートのサイトでも余白は直せますか？

多くのテンプレートは、余白の設定を変更できます。設定画面で変えられない場合は、追加のCSSで調整する方法があります。変更が難しいときは、制作会社に相談してください。

まとめ｜余白は「差」をつけて、数値を決めて、共通化する

ホームページの余白とレイアウトを整えるには、セクション間、ブロック内、行間の順に、間隔に差をつけることが基本です。余白の数値は8pxの倍数など5〜6段階に絞り、共通のルールにすると、ページが増えてもぶれません。余白の調整やサイトの手直しでお困りの方は、お問い合わせからご相談ください。