AIでテキストが1文字ずつ打ち込まれるタイピングアニメーションを作る【CSS＋JS生成】

キャッチコピーや自己紹介文が1文字ずつ表示されるタイピングアニメーション。ヒーローセクションに置くだけで印象的なファーストビューになります。

方法①：既存のHTMLからCSS・JSを生成する

AIへのプロンプト例

以下のh1タグのテキストが、1文字ずつタイピングされるように見えるアニメーションを
CSS・JavaScriptで実装してください。
・文字を打ち終わったあとにカーソルが点滅する
・点滅カーソルもCSSで実装

<h1 class="typing-text" data-text="Webの世界へようこそ。"></h1>

生成されたCSS例

.typing-text {
  display: inline-block;
  font-size: 2.5rem;
  font-weight: 800;
  color: #1a1a1a;
  border-right: 3px solid #3e8685;
  white-space: nowrap;
  overflow: hidden;
}
.typing-text.done {
  animation: blink 0.8s step-end infinite;
}
@keyframes blink {
  0%, 100% { border-right-color: #3e8685; }
  50%       { border-right-color: transparent; }
}

生成されたJS例

const el = document.querySelector('.typing-text');
const text = el.dataset.text;
let i = 0;

function type() {
  if (i <= text.length) {
    el.textContent = text.slice(0, i);
    i++;
    setTimeout(type, 80); // 1文字あたりの速さ（ミリ秒）
  } else {
    el.classList.add('done'); // 完了後にカーソル点滅
  }
}
type();

方法②：HTMLとセットで生成する

AIへのプロンプト例

テキストが1文字ずつタイピングされるヒーローセクションを
HTML・CSS・JavaScriptでまとめて作ってください。
・複数のフレーズを順番に表示→削除を繰り返すループ式
・各フレーズの表示速度・削除速度を指定できる
・カーソルの点滅もつける

ポイント

• スピードはsetTimeoutの数値（ミリ秒）で調整。小さいほど速くなります
• 日本語テキストでも問題なく動作しますが、絵文字が含まれる場合は文字数のカウント方法が変わるため「絵文字にも対応して」と伝えましょう