文字間隔が広がるタイトル
表示後に文字と文字の間隔がスーッと広がっていく、上品なオープニングタイトルです。 letter-spacing を 0 から始め、 @keyframes lsExpand で .4em まで開くアニメーションを 1.6s かけて再生します。
解説
表示後に文字と文字の間隔がスーッと広がっていく、上品なオープニングタイトルです。letter-spacing を 0 から始め、@keyframes lsExpand で .4em まで開くアニメーションを 1.6s かけて再生します。イージングは cubic-bezier(.65,0,.35,1) で、ゆっくり始まってゆっくり終わる落ち着いた緩急を持たせています。深い紺色の背景に白文字を載せ、ブランドのキービジュアルらしい静けさを演出しているのも特徴です。
合う場面
- コーポレートサイトのキービジュアルやブランド名の表示
- 高級感・洗練を出したいファーストビュー
- ロゴタイプ風に企業名を一文字ずつ見せたいオープニング
広がりの量は .4em の値で、速度は 1.6s、出るタイミングは .4s の遅延で調整できます。間隔を開けすぎると単語のまとまりが崩れて読みにくくなるため、英大文字なら .2em〜.4em 程度が目安です。動きが苦手な人向けに prefers-reduced-motion で最終状態を即時表示する配慮ができます。一度きりの再生で軽量です。
使用例・適したシーン
- ヒーローセクションのキャッチコピー
- セクション見出し
- 記事タイトル・ブログのリード
- コーポレートサイトのキービジュアル
よくある質問
間隔の広がり量を変えるには？
@keyframes lsExpand の to に書かれた letter-spacing: .4em の数値を変えます。大きくするほど開きますが、広げすぎると単語が読みにくくなるため英大文字で .2em〜.4em が目安です。
日本語の見出しでも使えますか？
使えますが、日本語は一文字ずつの間隔が空きすぎると読みにくくなります。和文では広がり量を小さめ（.1em〜.2em 程度）にすると上品にまとまります。