タイプライターテキストアニメーション

解説

これは、文字が一文字ずつ打ち込まれては消え、複数の語句を順番に入れ替えて見せるタイプライター演出です。JavaScript の配列に入れた語句を slice で一文字ずつ切り出して表示し、打ち終わると少し待ってから今度は一文字ずつ削り、次の語へ進む流れを繰り返します。打鍵側は約80ミリ秒、削除側は約40ミリ秒と速さを変えてあり、人が打つようなテンポになります。末尾の縦棒は CSS アニメーションで点滅し、カーソルらしさを出しています。

使いどころ

• トップページのキャッチコピーを切り替えて見せるヒーロー部分
• 「私たちは○○です」と複数の強みを順番に伝えたい場面
• 採用ページやプロフィールで肩書き・スキルを回す表現

表示する語句は配列を書き換えるだけで差し替えられ、打鍵・削除・語間の待ち時間はそれぞれの秒数で調整できます。文字数で枠の高さが揺れないよう min-height を確保している点も実装の要点です。動きが苦手な利用者には prefers-reduced-motion を見て静止表示へ切り替える配慮を、また点滅するカーソルには aria-hidden を付け読み上げの邪魔をしない作りにしています。

使用例・適したシーン

• ヒーローのキャッチコピー
• 見出しの強調
• コーポレートのキービジュアル