テキストのみミニマルヒーロー
このヒーローは画像や背景色に頼らず、文字組と余白だけで第一印象をつくるエディトリアル型のレイアウトです。 .ht に max-width:640px と margin:0 auto を与えて中央に細い1カラムを置き、上部の小さなラベル・大きな見出し・控えめな補足文という3段構成で視線を縦に導きます。
解説
このヒーローは画像や背景色に頼らず、文字組と余白だけで第一印象をつくるエディトリアル型のレイアウトです。.ht に max-width:640px と margin:0 auto を与えて中央に細い1カラムを置き、上部の小さなラベル・大きな見出し・控えめな補足文という3段構成で視線を縦に導きます。見出しは letter-spacing:-.01em で字間をわずかに詰め、ラベルは逆に .4em で大きく開けて、サイズだけでなく字間でも階層を表現しているのが要点です。JavaScript もアニメーションも使わない純 CSS なので、表示は速く崩れにくく作れます。
使う場面とカスタマイズ
ブランドサイトのトップ、コラムやマガジンの記事冒頭、写真を持たないコーポレートの宣言ページなどに向きます。世界観は font-family と背景色 #FDF8EF の組み合わせで決まるため、明朝・ゴシックの選択と地色を変えるだけで印象を大きく振れます。注意点として、見出しの font-size:48px は固定値なのでスマホでは clamp() に置き換えると折り返しが安定します。文字主体ゆえに line-height を詰めすぎず、読みやすい行間を保つことが品質に直結します。
使用例・適したシーン
- LP のファーストビュー
- サービストップの導入
- コーポレートサイトのトップ
よくある質問
画像なしでも寂しく見えませんか。
余白とフォント選び、字間の設計でメリハリをつければ十分に成立します。ラベルの字間を広げ、見出しの字間を詰めるという対比が効くので、まず font-family と letter-spacing を調整してみてください。
見出しサイズをスマホで自動調整したい。
font-size の固定値48pxを clamp(28px, 6vw, 48px) のような指定に置き換えると、画面幅に応じて滑らかに縮みます。max-width との併用で長い行の折り返しも整います。