タイピング見出しヒーロー

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

タイピング見出しヒーローは、ファーストビューの見出しに文字が打ち込まれていくような演出を添えたパーツです。このサンプルではキーとなる語にカーソル風の縦線をborder-rightで付け、@keyframesで点滅させることで「いま入力している」印象を作っています。JavaScript無しのCSSアニメーションだけで成立するため軽量です。

向いている場面

スタートアップや制作会社、ポートフォリオなど、第一印象で動きを見せたいトップページに向きます。短いキャッチコピーを印象的に見せたい場面や、サービス名・社名を強調したいヒーローで効果を発揮します。

カスタマイズと注意点

カーソルを当てる語はspanで囲った部分なので、強調したいキーワードを差し替えるだけで使えます。背景色（#0f1b3d）とアクセント色を自社カラーに変更すると馴染みます。点滅アニメーションは過度に速いと読みにくくなるため、テキスト本体は静止させて視認性を保ってください。実際にJSで一文字ずつ表示する場合は、最初から全文をh1に入れておき、視覚効果として上書きするとSEOと読み上げの両立ができます。