ブログの見出しが見にくいとき、文字サイズと装飾を分けて考える
大きすぎる見出しを小さくして、囲みの装飾も減らした。これで落ち着いたと思ったら、「見出しに装飾がなくて見にくい」という指摘がありました。今回のCoffee Break Againの修正は、ここから始まります。
サイズを抑えることと、見出しを見つけやすくすることは、別の課題でした。文字だけでも十分に区別できるページはあります。ただ、このサイトでは、続けて文章を読んだときに章の始まりを拾える目印がほしかったのです。
そこで、本文と見出しのサイズは保ち、H2のすぐ下へ細い線を加えました。H2は記事の中の大きな話題、H3はその中の小さな話題を表す見出しです。飾る場所を決める前に、この二つの役割をそろえます。
見出しの装飾前後を、同じ記事の画面で比べる
比較に使ったのは、このサイトの「AI指示書の書き方」の最初の章です。見出しの文、本文、文字サイズを変えず、装飾前と装飾後を撮りました。PCは1440px、スマホは390pxの画面幅です。
変更前・変更後を切り替えると、同じページの同じ場所を比べられます。
変更後は、見出しの幅に沿う細い下線と、左端の短い茶色の線を組み合わせています。見出しから離れていた章の上方の線は外しました。線を増やし続けるのではなく、話題の切り替わる場所へ寄せています。
この比較で見てほしいのは、読み流したときに「ここから次の話」と気付けるかです。装飾を加えた結果、読了率が上がったと測ったものではありません。ご自身の画面でも、読みやすいかを見比べる材料にしてください。
H2とH3の見出しデザインは、同じ役割ごとにそろえる
H2ごとに帯、吹き出し、二重線と飾りを変えると、その違いが何を意味するのか分からなくなります。CBAでは、大きな話題のH2には長い下線、小さな話題のH3には短い細線という一組にしました。
H2は章の始まり、H3は章の中の区切り
たとえばH2が「商品写真の選び方」なら、その中にH3の「背景をそろえる」「使う場面を見せる」を置きます。この節の小見出しにも、短い細線を使っています。H3を目立たせたいからといってH2へ変える必要はありません。
見出しの段階は文章の構造、線や文字サイズは見た目として決めます。HTMLの見出しにも階層があることは、MDNの見出し要素の説明で確認できます。
今回の本文はPC16px・スマホ15px、H2は22px・20px、H3は両方18pxです。H1は28px・24pxを保ち、細い下線を付けました。数字を増やして目立たせる前に、同じ役割の形がそろっているか見ます。
シンプルな見出し装飾のCSS例｜下線と余白を一緒に指定する
CSSは、文字や線の見た目を決める指定です。次は、今回の下線を他のページへ使うために整理した例です。HTMLの見出しへ名前を付け、その名前にCSSを当てます。WordPressなどで既に見出しのデザインがある場合は、重なって適用されないよう、AIへ今のページも一緒に渡します。
<section class="article-section">
<h2 class="article-h2">商品写真の選び方</h2>
<p class="article-copy">まずは形が分かる一枚を選びます。</p>
<h3 class="article-h3">背景をそろえる</h3>
<p class="article-copy">商品より背景が目立っていないか比べます。</p>
</section>.article-h2 {
position: relative;
margin: 0;
padding-bottom: 16px;
border-bottom: 1px solid #b4c1ac;
font-size: 22px;
font-weight: 600;
line-height: 1.65;
}
.article-h2::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 44px;
height: 3px;
background: #9a7849;
}
.article-h3 {
margin: 0;
padding-bottom: 12px;
font-size: 18px;
font-weight: 600;
line-height: 1.65;
}
.article-h3::after {
content: "";
display: block;
width: 24px;
height: 1px;
margin-top: 10px;
background: #52614c;
}
.article-copy {
margin: 0;
font-size: 16px;
line-height: 2;
}
.article-section > [class] + [class] {
margin-top: 24px;
}
@media (max-width: 760px) {
.article-h2 { font-size: 20px; }
.article-copy { font-size: 15px; }
.article-section > [class] + [class] { margin-top: 20px; }
}長い見出しが二行になっても、線は最後の行の下に付きます。線の下から本文までの間隔も必要です。この例では、本文などのまとまりの間にPC24px・スマホ20pxを取っています。
左側の太い線と色付き背景を組み合わせる囲みは、今回も使っていません。囲みを外した経緯や文字サイズの比較は、ホームページの余白と文字サイズの修正例へまとめています。
見出しデザインの修正をAIへ頼むときの指示例
装飾を選んだら、気に入っている文字サイズまで変えられないよう、保つ部分も指定します。次は今回の修正をもとに、自分のブログへ置き換えられる形にした例です。
［記事のURL］は、章の始まりが本文に埋もれて見えます。 本文と見出しの文字サイズ、記事の横幅は保ってください。 H2には細い下線と短い色線、H3には短い細線を付けたいです。 同じ階層は同じ形にそろえ、目次に表示する文章は変えないでください。 左線と色付き背景を組み合わせた囲みは使わないでください。 変更前後を同じ記事・画面幅で見せてください。 スマホで二行になる見出しも確認し、線と本文の間に余白を残してください。 記事内の見出しを直す範囲に絞り、トップページの演出は保ってください。
最初は一つの記事で比べます。短い見出しと二行になる見出しを見て、どちらも章の目印として働いていれば、共通の表示へ反映します。飾りの種類を増やすより、同じ役割が同じ形で見えることを目指しましょう。