中央寄せ タグラインヒーロー
このパーツは、短いキャッチコピー 1 行を主役に、上にアイブロウ（小さなラベル）、下にサブ文と CTA を中央配置したヒーローです。濃紺の背景に白文字で、 h1 は letter-spacing を広げて 1 行で見せ、視線を中央へ集めます。
このパーツの使いどころと実装ポイント
このパーツは、短いキャッチコピー 1 行を主役に、上にアイブロウ（小さなラベル）、下にサブ文と CTA を中央配置したヒーローです。濃紺の背景に白文字で、h1 は letter-spacing を広げて 1 行で見せ、視線を中央へ集めます。要素が少なく余白が大きいぶん、メッセージが一点に集中するフォーカス重視の構成です。
向いている場面
- 1 つの訴求に絞った LP やキャンペーンページの冒頭
- 新サービス・新商品のティザーや告知ページ
- セミナー・イベントの申込み導線をシンプルに見せたいとき
カスタマイズと注意点
主役はコピー 1 行なので、文字数を絞り、改行で崩れないよう短く言い切るのがコツです。アイブロウは「2026 新サービス」のような状況ラベルに、CTA は資料ダウンロードや申込みなど 1 つの行動へ集約します。背景は単色ですが、控えめなグラデーションや実写を ::before で重ねると雰囲気を足せます。濃い背景に白文字なので、コントラスト比を十分に保つと読みやすさとアクセシビリティが両立します。h1 はページで 1 つに保ち、強い letter-spacing は日本語だと間延びしやすいので、和文では値を控えめにすると整います。
よくある質問
コピーは長い文章でも大丈夫ですか
このレイアウトは1行の短いコピーを主役にする設計です。長い文章を入れると中央配置が間延びして印象が弱まります。言いたいことを一言に絞り、補足はサブ文に回すと、フォーカス重視の良さが活きます。
背景の濃紺は変えてもいいですか
変えられます。背景色を変えるときは、白い文字とのコントラストが十分に保たれるかを確認してください。明るい背景にするなら文字色も濃い色へ調整し、読みやすさを優先します。