ホームページの余白と文字サイズを整える｜見出しが大きすぎた修正例

ホームページの余白が足りないとき、四つの場所を見る

AIに「余白を増やして」と頼んでも、見てほしかった場所は詰まったまま。その一方で、ページの端だけが広くなった、ということがあります。余白のどの部分を変えるかが、まだそろっていないためです。

このサイトでも、記事一覧に「余白が足りない」「見出しが大きすぎる」という指摘がありました。ローカルの制作画面を調べると、カードの枠が次の行へ重なり、カード群と次の見出しの間も空いていませんでした。

そこで、まず余白を四つに分けました。自分のサイトを見るときも、この分け方なら場所を指しやすくなります。

• 画面の端：文字や枠が、スマホの左右へ寄りすぎていないか。
• 枠の内側：文章とカードのふちの間に、読める空間があるか。
• カード同士：別々の案内だと分かる間隔があるか。
• 章の間：次の話題へ移ったことが、見た目でも分かるか。

「二段目のカードが一段目に重なっている」「カードの下と、次の見出しの間が詰まっている」と伝えると、直す場所が具体的になります。

ホームページの見出しと文字サイズを、本文との関係で整える

余白だけを広げても、見出しが大きすぎると読み始めるまでに何度もスクロールすることになります。今回の一覧では、一番大きな見出しが64px、小見出しが最大48pxでした。案内を読んで選ぶページとしては、見出しが場所を取りすぎていました。

この修正を紹介する記事にも、本文サイズが表にない、という指摘がありました。「本文との関係で整える」と書くだけでは、何を基準に見出しを決めたのか分かりません。そこで、この記事の本文をPC16px・スマホ15pxと明記し、実際の表示もそろえました。pxは画面上の大きさを表す単位です。

下の数字は、このサイトで採用した例です。本文と見出しを一緒に並べると、大きさの差を比べられます。

H1はページの題名、H2は章、H3は章の中の小見出しです。PCでは本文16pxに対してH2が22pxなので、約1.4倍。スマホでは15pxに対して20pxで、約1.3倍です。スマホは画面幅760px以下、数字は文字を拡大していない通常表示での値です。

同じ22pxでも、太い文字や何行にも折り返す見出しは大きく感じられます。このサイトでは見出しのサイズを保ち、太さと改行、前後の空間も一緒に見ています。本文が窮屈だからと小さくする前に、見出しが占める場所と文章のまとまりを整えましょう。

見出しが大きすぎるホームページの例を、改善前の画面で見る

次は、私たちが運営するサブドメインから選んだ、見直す場所を考える三つの実例です。2026年9月29日の公開画面を、PC幅1440px・スマホ幅390pxで撮りました。今回は改善前の記録を残し、修正したあとに同じページ・同じ場所・同じ画面幅の写真を加えていきます。

ikumen：案内ページのタイトルと囲みを整えたい

「はじめての方」の案内は、PCの本文16pxに対してタイトルが57.6px、章の見出しが32px。タイトルは本文の3.6倍あります。大きな二行の題名に目が向き、手順へ進むまでの縦幅も取っています。最初の説明には左線と色付き背景の囲みもあり、文字の大きさと装飾を一緒に見直す候補です。

次に直すところ：本文16pxを保ち、タイトル・章見出しを小さくする。囲みの内容は残して左線と背景を外し、手順の始まりを見つけやすくする。

撮影したページを見る

Mirai：本文の約3倍ある章見出しを見直したい

「もし、こんな世界になったら？」の一場面です。PCでは「AIを置いて入る町」という見出しが47.52px、本文が16pxで、約3倍の差があります。場面の名前が強く目立つ配置です。本文を続けて読む見せ方に寄せるなら、絵と色は保ち、章見出しの大きさを調整すると違いを比べやすくなります。

この画像は公開版の記録です。別に改修が進んでいる制作中のMiraiでは、見出し下にサムネイルを加える前の画面を保存しました。画像を加えたあとの比較は、サムネイルの改善記録で紹介しています。

撮影したページを見る

本の処方箋：記事タイトルと本文の差を整えたい

書籍を紹介する記事では、PCのタイトルが48px、本文が16.32pxでした。スマホでもタイトルは32.8pxあり、本文の約2倍です。本文を小さくする必要はありません。まず題名のサイズを抑え、冒頭の説明や画像と合わせて、読み始めやすい大きさを探します。

次に直すところ：タイトルを小さくし、改行と冒頭の余白を整える。PCだけで決めず、スマホの同じ冒頭画面でも比べる。

撮影したページを見る

カードの余白を増やしても重なるときは、枠の作り方を直す

今回の重なりは、間隔の数字だけの問題ではありませんでした。カードを同じ高さにする指定に、内側の余白が外へ足され、次の行へ枠がはみ出していました。

そこで、余白も枠の大きさに含めるようにし、不要な高さの指定を外しました。さらに、カード群の次に見出しが来る場所にも、章間の余白が付くようにしました。

修正後は、幅320・390・768・1440pxの制作画面で、見出しの大きさ、カード間の距離、章の間隔を確かめました。「横にはみ出していない」だけでは、縦の重なりは見落とします。気になった場所を実際に測ることが、今回の確認で変えた点です。

CBAの比較は、違いが分かりにくい例でもある

ただ、この二枚には「修正前後の違いが分かりにくい」という課題もあります。ページ全体を小さく並べたため、本文と見出しの関係やカード間の距離を、画像だけでは読み取りにくくなっています。修正した数値を書くことと、変化が伝わる見せ方にすることは、別々に考える必要がありました。

次の比較では、先ほどの三つのサイトで、同じ見出しと周囲の本文が写る位置をそろえます。変更した場所を一つずつ説明し、原寸画像も開けるようにします。このCBAの比較は、差が伝わりにくかった例として残します。

AIっぽいデザインをやめるには、見出しと囲みの役割を分ける

このページでは、AIへの指示例を「左側の色線＋薄い背景色」で囲んでいました。そこにも、この形をやめたい、AIっぽいと感じるという指摘がありました。大きな見出しや同じ囲みを繰り返すと、内容よりも決まった飾り方が目に入り、このサイトらしさが薄れていたのです。

最初の修正では、見出しを文字の大きさ・太さ・余白で章を示す形にしました。指示例は背景と左線を外し、上下の細い区切り線だけにしました。一つの案内をまとめて選んでもらうカードには、必要に応じて四辺の細い枠を使います。章の見出し、コピーして使う文章、別ページへの案内で、見せ方を分けました。

さらに、指示例の直前の段落と枠の間を測ると、余白は0pxでした。段落の上側にだけ余白を付けていたため、その次に別の部品が来る場合が抜けていたのです。今回は段落から指示例、表、画像へ移る場所も含め、ブロック同士の間にPC24px・スマホ20pxの余白を設けました。

「AIっぽい」は見た目への感想なので、AIには変えたい形まで伝えると具体的です。たとえば「説明のたびに左線と色付き背景で囲まないで。見出しの文字を大きくせず、案内カードだけに細い枠を使って」と頼めます。

テーブルの余白がないときは、セルの内側と背景色を整える

PR表記の記事へ文例の表を追加したとき、また「余白がない」という指摘がありました。表の前後には間隔がありましたが、一つひとつのマスの中で、文字が端へ詰まっていたのです。表のマスをセルと呼びます。外側の余白と、セル内の余白は別々に見る必要がありました。

変更前・変更後を切り替えると、同じページの同じ場所を比べられます。

悪い例：余白なし 良い例：余白と背景あり

修正後は、セルの内側にPCで上下18px・左右20px、スマホで上下14px・左右16pxの余白を取りました。本文はPC16px・スマホ15pxのままです。文字を小さくして収める代わりに、文を自然に折り返しています。

背景は、見出し行を薄緑、本文を生成り、偶数行を淡い緑にしました。見出しと内容を見分け、左の項目から右の例文へ同じ行を追うためです。背景色だけに頼らず、行の間には細い線も残しています。

今回の原因は、この表にだけ、余白を付けるための指定が入っていなかったことでした。サイトの他の表が整っていても、新しく作った表にも同じ指定が付いているとは限りません。今後は共通の表部品を使い、セル内の上下左右の余白も確認することにしました。

［表があるページURL］の表を直してください。
表の前後ではなく、セルの中の文字と端の間が詰まっています。

本文サイズは保ち、セルの上下左右に余白を付けてください。
見出し行には薄い背景色を付け、本文は一行おきに淡い色を変えてください。
文字が読める濃さと、行を追える区切り線は残してください。

この二列の表はスマホでも画面内へ収め、文章を自然に折り返してください。
PCとスマホで、同じ表の修正前後を見せてください。
他の表にも、余白の指定が抜けているセルがないか確認してください。

列の多い比較表まで無理に画面幅へ押し込む必要はありません。二列の短い説明表は折り返す、数値の多い比較表は表の中だけ横へ動かせるようにする、と内容に合わせます。修正した実物はPR表記の文例で見られます。

見出しの文字サイズとカードの余白を決めるCSS例

CSSは文字の大きさや余白を指定するものです。コードを書かない方も、下の見本を見て「このくらいの差にしたい」とAIへ渡せます。見出しとカードの二つを、別々に決めてみましょう。

その後、文字だけでは章を見つけにくいという指摘を受け、下線を加えました。装飾の選び方と実画面の比較は、ブログの見出しデザインを整えた記事で紹介しています。ここでは文字サイズと余白の基準を示します。

見出しと本文の大きさの差をそろえる

本文にarticle-copy、章の見出しにarticle-headingを付ける例です。段落・表・指示例など、隣り合うまとまりには共通でcontent-blockを付けます。既存サイトで使うときは、AIに現在のクラス名と指定を調べてもらい、対応する場所へ組み込んでもらいます。

.article-copy {
  margin: 0;
  font-size: 1rem; /* 本文：通常表示で16px */
  line-height: 2;
}
.article-heading {
  margin: 0 0 1.5rem;
  font-size: 1.375rem; /* H2：22px */
  font-weight: 600;
  line-height: 1.65;
}
.content-block + .content-block {
  margin-top: 1.5rem; /* 異なる種類のブロック間も24px */
}
@media (max-width: 760px) {
  .article-copy { font-size: 0.9375rem; } /* 15px */
  .article-heading { font-size: 1.25rem; } /* 20px */
  .content-block + .content-block { margin-top: 1.25rem; }
}

この例のremは、ブラウザーの基準文字サイズをもとにする単位です。基準が16pxなら1remは16pxになります。本文の大きさを先に決め、見出しとの差を見比べてください。

カードは内側の余白と四辺の細い枠でまとめる

こちらはカード全体をguide-card、中の題名をguide-card-titleとした例です。左側だけを太くせず、四辺を同じ細さにします。

.guide-card {
  box-sizing: border-box;
  padding: 28px;
  border: 1px solid #d7dbcf;
  border-radius: 8px;
  background: transparent;
}
.guide-card-title {
  margin: 0 0 16px;
  font-size: 1.125rem; /* 18px */
  font-weight: 600;
}
@media (max-width: 760px) {
  .guide-card { padding: 24px; }
}

本文が続くところは、段落と余白だけでも読めます。枠を使うのは、複数の案内から選ぶ場所など、ひとまとまりとして見せる理由があるところに絞ると整理しやすくなります。

余白と見出しの修正をAIに頼む指示例

次の例は、この修正内容から組み直したものです。角括弧の部分を、自分のページと症状に置き換えて使えます。

［ページのURL］の余白と見出しを直してください。

気になっている場所：［例：カードの上下が重なり、次の見出しも近い］
確認した画面：［例：スマホとパソコン］

画面の左右、カードの内側、カード同士、章の間を分けて調べてください。
見出しが大きすぎる場合は、本文との大きさの関係も整えてください。
本文を小さくして収めるのではなく、見出しと間隔を調整したいです。
本文とH1・H2・H3のサイズを、PCとスマホに分けて示してください。
段落の次に指示例・表・画像が来る場所にも、必ず余白を付けてください。
左側の色線と背景色を組み合わせた囲みは使わないでください。
文章、画像、リンク先は保ってください。

修正後は同じページをスマホとPCの幅で開き、
見出しの実寸、枠の重なり、章の間隔を確認してください。

「おしゃれにして」に加えて、どこが読みにくいかを一つ添えるだけでも、依頼が具体的になります。修正前の準備から知りたい場合は、ホームページを自分で修正する手順へ進んでください。

ホームページの余白を直したら、スマホでも同じ場所を見る

直したあとに開くのは、最初に気になったページです。カードが一列になるスマホでも、文字とふちの距離、カード同士の間隔、次の見出しまでの空間を見てみましょう。

同じ配置を使う別のページも一つ開くと、共通の作り方が直ったかを確かめられます。良くなった状態は画面の画像と短いメモに残しておくと、次の修正でも基準になります。

余白の考え方をもう少し見比べたい方には、私たちが運営する余白灯舎のデザイン入門もあります。まずは自分のページから、詰まって見える場所を一つ選んでみてください。

画像を足したときの変化は、サムネイルを案内カードに加えた改善前後で、同じ位置の画面を切り替えて見られます。