テキストアニメーションの作り方：6つの手法と最速のAI活用法
テキストをアニメーションさせるには？（結論から）
テキストアニメーションは、マスクリビール、ブラーイン、クリップワイプ、文字ごとのスタッガー、キネティックタイポグラフィ、バリアブルフォントのウェイト変化という6つの基本手法のいずれかで、400〜800msかけてease-outカーブでタイポグラフィを出現・移動させて作ります。CSSやAfter Effectsで手作業で組むこともできますし、AIジェネレーターに言葉で説明して完成MP4を1分ほどで書き出すこともできます。手順は次のとおりです。（After Effectsの価格がネックなら、実測した無料代替ツールもどうぞ。）
- 手法をひとつ選ぶ（落ち着いたブランドコピー→マスクかブラー、勢いのあるフック→スタッガーかキネティックな打点）。
- タイミングを決める：ease-outで入り、フラグメント間は20〜100msのスタッガー、全体の出現は約800ms以内。
- 組み立てる — 手作業（CSS/GSAP、After Effects）か、AIテキストアニメーションジェネレーターへのプロンプトで。
- 読ませてから書き出す：1語あたり約0.3秒の読み時間を確保し、用途に合わせてMP4で書き出します。
静止したテキストはただそこにあるだけですが、動くテキストは視線を導き、テンポを作り、たった1行をデザインされたものに見せます。以下では、タイミングの数値付きの6手法、2026年時点でテキストを動かすすべての方法の比較、そして最速のAIワークフローを紹介します。
上のリールは6つの手法を続けて見せています。ここからは、それぞれをいつ使い、どう機能するのかを解説します。
6つの基本テキストアニメーション手法
1. マスク（スライドアップ）リビール
業界標準のヘッドライン登場演出：各行をオーバーフローを隠すボックスで包み、隠れたベースラインからテキストを上にスライドさせます。クリーンで、GPU負荷が軽く、瞬時に「上質」に読めます。各行を60〜100msずらして、一斉に現れるのではなくカスケードさせましょう。ヘッドラインや複数行のタイトルに最適です。
2. ブラーイン（フォーカスプル）
不透明度を0から1へフェードさせながら、ブラーを約12pxから0へアニメーションさせます。テキストはカメラのラックフォーカスのように「ピントが合って」所定の位置に収まります——柔らかく高級感があります。ブラー半径は控えめに、デュレーションは短く保ち、もたつかないようにします。エレガントな一行やロゴのロックアップに最適です。
3. クリップパスワイプ
グリフ自体を動かさずに、方向性のあるワイプ——片側からスライドインするクリップマスク——でテキストをリビールします。シャープでエディトリアルな印象です。同じスピードで移動する下線やカラーバーと組み合わせると、デザインされた感じが出ます。ローワーサードやセクションタイトルに最適です。
4. 文字スタッガー
文字列を1文字ずつに分割し、それぞれを20〜40msのオフセットでフェードしながら上昇させます。最もキネティックで遊び心のある選択肢——一単語やタグラインのような短い文字列に限定しましょう。長い文章を文字単位でアニメーションさせると、ごちゃごちゃして見えるためです。アクセシビリティの注意：文字単位の分割はスクリーンリーダーを壊すので、コンテナのaria-labelには必ず完全な文字列を保持してください。
5. キネティックタイポグラフィ
キネティックタイポグラフィは、ビートに合わせて振り付けられたテキストです——言葉がパンチインし、スケールし、強調点でカットされ、多くの場合ナレーションや音楽トラックに同期します。リリックビデオやインパクトのあるプロダクトのタグラインの背後にある手法です。各キーワードの「ヒット」（キーとなる語をスケールポップ）をシーケンスし、落ち着いた締めの行で着地させて作ります。キネティックタイポグラフィメーカーを使えば、プロンプトから生成できます。
6. バリアブルフォントのウェイトアニメーション
位置の代わりに、バリアブルフォントのウェイト（または幅やスラント）をアニメーションさせます——文字がその場で太く、細く、あるいは伸びます。一語の強調にうまく機能する、繊細でモダンなアクセントです。値が滑らかに補間されるよう、font-weightではなくfont-variation-settingsをアニメーションさせ、まずフォントが実際にバリアブルフォントであることを確認してください。そうでないと値が静かにクランプされます。
テキストをプロらしく見せるタイミング
手法よりもリズムが重要です。3つのルールがそのほとんどを担います：
- イーズアウトカーブで登場させる。
cubic-bezier(0.16, 1, 0.3, 1)（easeOutExpo）——速いスタート、柔らかい着地——は上質に読めます。リニアは避けましょう。ロボットのように感じられます。 - 粒度に応じてスタッガーする。 行は60〜100ms、語は40〜70ms、文字は20〜40msずつ。そのオフセットこそが、リビールをカスケードさせ、ぶちまけにしない要因です。
- リビール全体を800ms付近で抑え、各フラグメントは400〜600msで走らせます。長い文字列に時間がかかりすぎるなら、文字から語または行に切り替えましょう。
まず静的なタイポグラフィを固めましょう——ディスプレイのヘッドラインはトラッキングを締め（-0.02emあたり）、行間を1.1〜1.2に設定します。モーションは悪いタイポグラフィを救えません。
テキストをアニメーションさせる方法の比較
2026年現在、テキストアニメーションの実用的な作り方は4通りです。主な違いは、見出し1本にかかる時間とスキルです。
| 方法 | 見出し1本の所要時間 | 必要スキル | 向いている用途 | 費用 |
|---|---|---|---|---|
| CSS / GSAP（コード） | 30〜90分 | フロントエンド開発 | 自社サイト上で動くテキスト | 無料（自分の時間） |
| After Effects | 習得に1〜3時間、その後1本15〜60分 | キーフレーム、イージングカーブ | 放送品質のシーケンス、完全なコントロール | 月額$22.99〜 |
| テンプレートツール（Canva、CapCut） | 5〜15分 | 不要 | プリセット感は出るが手早いSNS投稿 | 無料プランあり。プレミアム素材は有料 |
| AIジェネレーター（iArt） | 動画1本 約1分 | 不要 — 言葉で説明するだけ | テンプレートもキーフレームもなしのカスタムモーション | 無料で開始（$2クレジット） |
After Effectsの価格はAdobeのプランページによる（2026年8月確認）。制作時間は慣れたユーザーの目安で、初回はもっとかかります。
コードの道はウェブ上で最大のコントロールを与えてくれます。テンプレートの道は、プリセットがブランドに合えば最速です。AIの道は最も新しく、書かれた説明からスタッガー、イージング、レイアウトといった本物のモーションデザインを生成するため、学習コストなしでカスタムの結果が得られます。エディター型とエージェント型の思想の違いはJitter vs iArtで詳しく比較しています。
最速の方法：AIでテキストをアニメーションさせる
各リビールを手でコーディングするのも有効ですが、最速の道は、欲しいものを説明してAIにアニメーションを作らせることです。iArt.aiでの流れはこうです：
ステップ1：テキストとモーションを説明する
あなたの一行と欲しい雰囲気を入力します——「ヘッドラインが一語ずつ上にワイプ、クリーンで上質に」や「キネティックタイポグラフィ、各語がビートに合わせてパンチイン」。デュレーション、背景色、フォントの雰囲気を添えましょう。
ステップ2：AIがアニメーションを生成する
AIは本物のモーショングラフィックスアニメーションをコードとして書きます——テキストを分割し、各フラグメントのスタッガーモーションを書き、正しくイージングをかけ、それを動画にレンダリングします。テキストは描かれるのではなく組版されるため、スペルとフォントは指定どおり正確です。短い一行は約1分でレンダリング、マルチシーンのシーケンスは2〜3分。タイムラインもプラグインも不要です。
ステップ3：プロンプトで調整する
少し違う？変更したいことを伝えましょう——「もっと遅く」「文字単位でスタッガー」「ブラーインを追加」「最後の語をアクセントカラーに」。AIは最初からやり直さずに調整します。
ステップ4：MP4として書き出す
解像度を選び、MP4として書き出せば、動画編集、ソーシャル投稿、ウェブサイトのヒーロー、タイトルシーケンスにすぐ使えます。
2つのエンジン、1つのプロンプト。上の流れはiArtのMotion Designエンジンで、言葉が正確でなければならないときに使うものです。iArtには、映像のように見せたいテキスト向けの生成AI Videoエンジンもあります——点滅しながら灯るネオンサイン、濡れた路上に立つ3D文字、紙ににじむインク。その代わり文字はモデル自身が描くためスペルがずれることがあり、エージェントはそのリスクを警告して組版ルートを提案します。両者の比較はキネティックタイポグラフィの実例で、実際に作るならキネティックタイポグラフィメーカーから始めてください。
より良いテキストアニメーションのためのヒント
- 1つの瞬間に1つのリビール。 同じ行にブラーインとスタッガーとワイプを重ねないこと——1つのドライバーを選びましょう。リビールを組み合わせるとノイズに読めます。
- モーションをメッセージに合わせる。 落ち着いたブランドの一行にはマスクやブラーを、エネルギッシュなフックには文字スタッガーやキネティックヒットを。
- 読めるだけの長さ保持する。 リビールが終わってからカットするまで一拍置きましょう——おおよそ1語あたり0.3秒、最低でも約1秒。
- セーフエリアに気を配る。 プラットフォームのキャプションやUIで切れないよう、テキストはフレーム中央の90%以内に収めましょう。
- リデュースモーションを尊重する。 ウェブでは
prefers-reduced-motionを尊重し、アニメーションなしで最終テキストを表示しましょう。
FAQ
テキストをアニメーションさせる一番簡単な方法は？
AIツールに説明して結果を書き出すことです。iArtなら、一行と欲しいモーション（「一語ずつ上にワイプ」）を入力すると、AIがテキストを正確に組版したままアニメーションをコードとして書き、追加のプロンプトで調整してMP4を書き出せます——After Effectsもキーフレームも不要です。
After Effectsなしでテキストをアニメーションさせるには？
3つのルートがあります：ウェブ向けにコーディングするならCSSやGSAP、プリセット用のテンプレートツール、または iArt のようにテキストプロンプトからカスタムアニメーションを作るAIジェネレーターです。AIルートは単発のタイトルやソーシャルクリップに最も速い方法です。After Effectsの代替をご覧ください。
キネティックタイポグラフィとは？
キネティックタイポグラフィは、強調とリズムのために振り付けられたアニメーションテキストです——言葉がスケールし、パンチし、カットされ、多くの場合オーディオに同期します。リリックビデオやインパクトのあるタグラインの背後にあるスタイルです。完全な定義はキネティックタイポグラフィ用語集に。
テキストアニメーションの長さはどれくらいにすべき？
リビール自体は約800ms以内で着地させるべきです。その後、読めるだけの長さテキストを保持しましょう——おおよそ1語あたり0.3秒、最低1秒——それからカットや次の展開へ。
アニメーションテキストを作る方法にはどんな種類がありますか？
4通りあります。ウェブサイト向けにコード（CSSやGSAP）で書く、After Effectsでキーフレームを打って完全に手動でコントロールする、CanvaやCapCutのようなテンプレートエディターでプリセットを組む、iArtのようなAIジェネレーターに動きを説明してレンダリング済み動画を書き出す、です。コードとAfter Effectsは時間と引き換えにコントロールを得る方法、テンプレートは速いが画一的、AI生成は速くてカスタムです。
アニメーションテキストを商用利用できますか、いくらかかりますか？
はい——ProとUltraプランには商用利用権が含まれるため、広告、クライアント案件、公開するあらゆる動画で使えます。無料で始められます：新規アカウントには登録時に$2のクレジットが付与され、クレジットカードは不要で、1つのテキストアニメーションはそのごく一部のコストです（当社のテストでは3〜5秒の一行で約$0.17）。無料プランはプレビューと共有まで、ダウンロードは有料プランで解放されます。プランの詳細は料金をご覧ください。