見出し下線の色はブランドアクセントと揃える
H2見出しの下線がブランドカラーと微妙にズレて浮いて見えるときの原因と直し方を解説します。カード枠と同じトークンに揃えるだけで整うケースと、区切り線との役割重複を避ける考え方を紹介します。2026年7月時点の情報です。
- CSS
- UI
- デザイン
- ブランドカラー
- 見出し
- 他1
Introカードの枠だけをブランド青にしたのに、本文中のH2見出しの下線は薄い水色のまま。色そのものは近いはずなのに、なんとなく浮いて見える瞬間があります。
今日の結論
- Introカード枠だけブランド青にすると、H2下線が薄い水色のままだと浮いて見える
- H2下線をカードと同じトークン(例:
2px/#2563eb)に揃えると、判断が単純になる- ヘッダー全体の太い区切り線まで同じ色にすると、カード下で役割が重複して見えるので分離する
なぜ色が近いのに浮いて見えるのか
原因は「青は青でも、正確に同じ値ではない」ことです。カード枠がブランドカラーの濃い青、H2下線がそれより薄いユーティリティ色だと、コード上はどちらも「青」に分類されていても、実際のレンダリングでは色相や明度の差がはっきり出る。人の目は、離れた色同士よりも近い色同士の差分にかえって敏感、という仕組みが働くためです。
筆者が実装時に確認した範囲では、カード枠がブランドカラーそのものの値、H2下線がそれより明るいユーティリティ色になっていました。コード上はどちらも「青系」で統一されているつもりでも、並べて見ると明らかに濃さが違って見えたわけです。
揃え方の手順
色の正本を先に決めてから、各パーツに反映します。
- カード枠・リンク色などブランド青の正本を1つ決める
- 見出しの下線（
border-bottomにあたる部分）を、その正本と同じ色・太さで合わせる - 記事ヘッダー下の区切り線は、カードと役割が被るようなら外す
3番目を飛ばすと、見出し下線とヘッダーの区切り線が同じ色で二重に主張し、かえって視線が散ります。
確認チェックリスト
- ブランド青の正本(カラーコード)を1つに決めた
- 見出しの下線を同じ色・太さに揃えた
- ヘッダー下の区切り線がカードと役割重複していないか確認した
まとめ・次に読む
見出し下線がブランドカラーと微妙にズレるのは、多くの場合「別の青を使っている」のではなく「同じ青のつもりで違う値を使っている」ことが原因です。正本の値を1つに決めて配ることが、遠回りに見えて一番早い直し方になります。
カード周りの余白の揃え方は、隣接Tips/blog/card-margin-unitも参考にしてください。
本記事の内容は執筆時点(2026-07-27)の情報に基づきます。実装のクラス名や色の値は使用しているCSSフレームワークやデザイントークンの構成によって異なる場合があり、仕様は変更される可能性があります。重要な判断は実装コードとデザインシステムのドキュメントで確認してください。