ミニマル中央寄せヒーロー
ミニマル中央寄せヒーローは、大きな見出しと一行の説明、控えめな CTA だけを画面中央に置く、引き算で見せる基本構造です。中央寄せは display:grid;place-items:center 一行で縦横とも揃えており、見出しは font-size:clamp(40px,7vw,68px) によって画面幅に応じ…
解説
ミニマル中央寄せヒーローは、大きな見出しと一行の説明、控えめな CTA だけを画面中央に置く、引き算で見せる基本構造です。中央寄せは display:grid;place-items:center 一行で縦横とも揃えており、見出しは font-size:clamp(40px,7vw,68px) によって画面幅に応じて滑らかに拡縮します。細い font-weight:300 と広い字間で抜け感を出し、CTA は下線ボーダーだけのテキストリンクにしてノイズを抑えているのが特徴です。
合う場面
- ブランドサイトやプロダクトのトップを静かに見せたいとき
- 余白で高級感・洗練を演出したいファッション系・テック系
- 1 メッセージに集中させたいキャンペーン LP の冒頭
カスタマイズは、アイブロウ（上の小さな英字）・見出し・説明・CTA という 4 段の文言を差し替えるだけで成立します。背景色や文字色を変えれば雰囲気を一新できます。見出しが長い言語では clamp の最大値を下げて折り返しを防ぐと安定します。CTA の末尾矢印は装飾なので、文言で意図が伝わるなら省いても問題ありません。
使用例・適したシーン
- LP のファーストビュー
- サービストップの導入
- コーポレートサイトのトップ
よくある質問
見出しの文字サイズはスマホでも自動で変わりますか？
はい。clamp(40px,7vw,68px) を使っているため、画面幅に比例して下限40pxから上限68pxの範囲で滑らかに変化します。デバイスごとに個別指定する必要はありません。
背景を画像や濃色に変えても使えますか？
使えます。背景を変えたら見出しと説明、CTA の文字色も読みやすいコントラストになるよう調整してください。濃い背景なら文字を白系にするのが基本です。