本文へスキップ
ひとりAIラボ

HTMLアニメーションのエフェクト

タイプライター

Typewriter effect

文字を1字ずつ、打っていくように出す表示。

見本：見出しの文字が1字ずつ出てくる見本。幅は動かさず、1文字ずつの opacity を steps() で切り替えています。ひとりAIラボが作った、その場で動くHTMLとCSSです。

使いどころ　ヒーローのキャッチコピーに。

コピペ用プロンプト

[ ] のところを書きかえて使ってください。英語のほうが伝わりやすいツールもあります。

日本語

[キャッチコピー]を、タイプライターのように1文字ずつ出してください。1文字ずつ span に分けて、opacity を steps() で切り替える。幅は動かさない。くり返さず1回で止める。読み上げ用に全文も入れて、動きを減らす設定の人には最初から全文を出してください。

English

Show [the tagline] one character at a time like a typewriter. Wrap each character in a span and switch its opacity with steps(); don't animate the width. Play it once, without looping. Include the full text for screen readers, and show it all at once for people who prefer reduced motion.

ひとりAIラボ作成のテンプレートです（各社の公式ガイドの文ではありません）。

公式ガイドに載っているか

タイプライターが各社の公式プロンプトガイドに載っているか
ガイド記載
v0公式記載なし[1][2][3]
Lovable公式記載なし[4][5]
MDN公式記載なし[6][7][8][9][10][11][12][13]

3つのガイドとも、タイプライターという言葉は見当たりませんでした。1字ずつ切り替えるのに使う steps() は、MDN に載っています。[12]

確認日 2026年11月2日。公式ガイドのページを開いて、本文にこの言葉（英語）が出てくるかを見ました。「公式記載なし」は、出典のページに見当たらなかったという意味です。

気をつけること

  • 自動で動くものは、5秒以内に止めるか、止める手段を用意します（WCAG 2.2.2）。この見本も5秒以内に止まります。[14]
  • 動かすのは transform と opacity にします。レイアウトや描画のやり直しが起きるプロパティは、どうしても必要なとき以外は避けます。[15]

出典

  1. 1.v0 Docs（トップ）（外部サイト、新しいタブで開く）https://v0.app/docs
  2. 2.v0 Docs「Text Prompting」（外部サイト、新しいタブで開く）https://v0.app/docs/text-prompting
  3. 3.v0 Docs「Design Mode」（外部サイト、新しいタブで開く）https://v0.app/docs/design-mode
  4. 4.Lovable Docs「Prompting best practices」（外部サイト、新しいタブで開く）https://docs.lovable.dev/prompting/prompting-one
  5. 5.Lovable Docs「Prompt library」（外部サイト、新しいタブで開く）https://docs.lovable.dev/prompting/prompting-library
  6. 6.MDN「Using CSS animations」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations
  7. 7.MDN「Using CSS transitions」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions
  8. 8.MDN「View Transition API」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API
  9. 9.MDN「CSS scroll-driven animations」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations
  10. 10.MDN「animation-timeline」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline
  11. 11.MDN「prefers-reduced-motion」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
  12. 12.MDN「steps()」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function/steps
  13. 13.MDN「position」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/position
  14. 14.W3C「Understanding SC 2.2.2: Pause, Stop, Hide」（外部サイト、新しいタブで開く）https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html
  15. 15.web.dev（アニメーションの性能の記事）（外部サイト、新しいタブで開く）https://web.dev/articles/animations-guide

今週の一歩

上のコピペ用プロンプトの日本語版を写して、[ ] を自分の内容に書きかえ、v0 の無料版（1日7メッセージ）で作りかけの画面に1回だけ足して、動きが付いたか確かめてください。

できた見本を短い動画にするならClaude Codeで短いモーション動画を作るへ（ターミナルを使います）。