テキストアニメーションヒーロー

このパーツの使いどころと実装ポイント

このパーツは、見出しが1文字ずつ順番にフェードインするインパクト重視のヒーローセクションです。JavaScriptで見出しテキストを1文字ずつ span.char に分割し、各文字へ少しずつ遅延を付けた animation-delay を設定することで、左から流れるように現れる演出を作ります。背景は濃紺系の linear-gradient で奥行きを出し、上にアイブロウ・見出し・補足文・CTAボタンを中央配置。min-height:100vh で画面いっぱいに広がる第一印象の強い構成です。

向いている場面

• ブランドや世界観を強く印象づけたいサービス・ポートフォリオのトップ
• キャッチコピーを主役にしたいLPのファーストビュー
• イベントや新商品のティザーページ

文字が動くことで視線を見出しへ集め、最初の数秒で伝えたいメッセージを残せます。

カスタマイズと注意

見出し文言はJavaScript側の文字列を書き換えるだけで変更でき、文字数に応じて自動で分割・遅延が割り振られます。アニメーションの速さは1文字あたりの遅延量で調整します。実装上の注意として、JavaScriptが動かないと見出しが空になるため、初期表示用のテキストをHTMLに置いておくか、動作しない環境への配慮を加えると安全です。文字数が多いと表示し終わるまで時間がかかるので、見出しは短くまとめるのが効果的です。アクセシビリティ面では h1 を1ページに1つだけ使い、装飾の分割が読み上げの妨げにならないよう、過度なアニメーションは控えめにしてください。

このパーツは JavaScript が含まれます。HTML の最後に <script> タグで読み込むか、外部 JS ファイルに切り出してください。