クイックアンサー: キネティック・タイポグラフィとは、テキストを動かすことで意味やリズム、感情を表現するアニメーション手法です。ショート動画においては、通常、話される言葉に合わせて単語が光るアニメーション字幕として現れます。After Effectsやテンプレート、あるいはナレーションに合わせて各単語のタイミングを自動調整する字幕ツールを使用して作成できます。
キネティック・タイポグラフィが字幕スタイルとして定着するずっと前、それはタイトルシークエンスとして存在していました。ソール・バスが手がけた『北北西に進路を取れ』（1959年）のオープニングクレジットでは、名前が画面外から飛び込んでくる演出がなされており、それ以来、多くのデザイナーがこのアイデアを取り入れてきました。
今日、同じ手法がスマートフォン上で、一度に1単語ずつ表示される形で活用されています。Publiqaのショート動画プレイブックでは、制作面について解説しています。本ガイドでは、キネティック・タイポグラフィとは何か、アニメーション字幕がどのような場面で役立つのか、その作成方法、そして実際に数値（視聴維持率など）を向上させるかどうかをテストする方法を説明します。
主要な事実
- Wikipediaでは、キネティック・タイポグラフィを「動くテキストを使用してアイデアや感情を伝えるアニメーションスタイル」と定義しており、初期の映画の例としてソール・バスによる『北北西に進路を取れ』（1959年）や『サイコ』（1960年）のタイトルシークエンスを挙げています。
- 一般的なツールにはAdobe After EffectsやApple Motionがあり、以前はFlashも使用されていました。
- 2024年10月7日に公開されたPLOS ONEのアイトラッキング調査では、168人の参加者を対象にテストが行われ、音声がない場合でも字幕付き動画の理解度は約81%から78%へとわずかに低下するにとどまることが判明しました。
- WCAG（Webコンテンツ・アクセシビリティ・ガイドライン）の達成基準1.2.2では、同期メディアにおける事前収録された音声に対して、レベルAで字幕を提供することが求められています。
- Publiqaは、縦型動画を1080x1920、30fpsでレンダリングし、単語ごとの字幕を表示するとともに、発話中は背景音楽を12dB下げます。
- アニメーション字幕が視聴時間を延ばすことを証明する、名称や日付が明記された研究は見つからなかったため、本ガイドではこれを検証すべき仮説として扱います。
キネティック・タイポグラフィとは何か？
キネティック・タイポグラフィとは、テキストをそれ自体が視覚要素となるようにアニメーション化することです。単語が音に合わせて拡大、スライド、バウンド、あるいは色を変えることで、動きそのものがメッセージの一部を伝えます。
静的な字幕は単に書き起こすだけですが、キネティック・タイポグラフィは「演じます」。叫ぶ言葉は膨らみ、間（ま）があるときは画面を空にし、リストはビートに合わせて次々と表示されます。キネティック・タイポグラフィは単なる機能ではなく、それ自体がひとつのスタイルです。
キネティック・タイポグラフィの起源
その系譜は、印刷物から映画、そしてスマートフォンへと続いています。
- タイトルシークエンス: ソール・バスが『北北西に進路を取れ』（1959年）や『サイコ』（1960年）で行った仕事により、動くタイポグラフィが一般大衆の目に触れるようになりました。
- デスクトップモーションツール: Flash、そしてその後のAfter EffectsやApple Motionの登場により、個々のデザイナーがテキストアニメーションを手軽に扱えるようになりました。
- ミュージックビデオ: リリックビデオ（歌詞動画）によって、すべての単語がビートに合わせる必要があるため、単語ごとのタイミング調整が一般的になりました。
- ソーシャル動画: プラットフォームの普及により、音声をオフにした状態での縦型視聴が一般的になったため、画面上のテキストが、かつて音声が担っていた役割の一部を代行するようになりました。
アニメーション字幕は視聴時間を延ばすか？
その可能性はありますが、それを証明するソースは見つかりませんでした。調査の過程で、多くのブログ記事がパーセンテージを引用していましたが、その多くは2019年の業界レポートの二次的な要約に遡るものであり、元のデータを確認することはできませんでした。
引用できるのは、より限定的な情報です。168人の視聴者を対象とした2024年のPLOS ONEの研究では、音声がない場合、人々はより字幕に頼るようになり、理解度はわずかに低下する（音声ありで約81%、なしで約78%）ことがわかりました。これは、音声をオフにして視聴する場合に字幕が有効であることを裏付けています。しかし、アニメーションが静的なテキストよりも優れているか、あるいは視聴時間を延ばすかどうかについては何も述べていません。
したがって、「アニメーション字幕は視聴時間を延ばす」という説は、検証すべき仮説として扱ってください。以下に公平なテスト方法を示します。
| ステップ | バリアントA | バリアントB |
|---|---|---|
| スクリプト | 同一の45秒スクリプト | 同一の45秒スクリプト |
| 字幕 | 静的、フレーズ単位 | 単語ごとのアニメーション |
| 投稿 | 同一アカウント、同一曜日 | 同一アカウント、同一曜日 |
| 比較 | 平均視聴時間、視聴完了率 | 平均視聴時間、視聴完了率 |
| 繰り返し | 少なくとも5組の動画 | 少なくとも5組の動画 |
5組の比較は、統計的な保証ではなく、大まかな傾向を掴むための推奨事項です。
スタイル別キネティックタイポグラフィの例
以下の4つのスタイルは、ショート動画でよく見かける手法のほとんどを網羅しています。
| スタイル | 動きの特徴 | 最適な用途 | 注意点 |
|---|---|---|---|
| 単語ごと表示 | 話す言葉に合わせて単語が1つずつ出現 | スピーディーでパンチの効いた解説 | 単語が短すぎるとチラつきやすい |
| ハイライト | フレーズ全体を表示し、現在の単語の色を変える | 長めの文章 | 映像が複雑だとコントラストが低下する |
| バウンス／ポップ | 少しオーバーシュートしながら拡大して出現 | 遊び心のあるエネルギッシュなトーン | 使いすぎると視聴者が疲れる |
| カラオケ | 行全体を色がなぞるように変化 | 音楽やリズム感のあるスピーチ | 音声とのタイミングのズレ |
リリックビデオはカラオケスタイルの代表例であり、タイトルシーケンスでは大胆で一度きりの動きが好まれます。話し手のペースに合ったスタイルを選び、シリーズを通して一貫して使用しましょう。
キネティックタイポグラフィ制作の3つのルート
| ルート | 制御性 | 手間 | 最適な用途 |
|---|---|---|---|
| After Effects | 完全 | 高い | ヒーロー動画、ブランドフィルム |
| テンプレート | 中程度 | 低〜中 | 繰り返し制作するシリーズ |
| 自動キャプション | 低い | 最低 | 日々のショート動画投稿 |
After Effectsでのキネティックタイポグラフィ
After Effectsでのワークフローは、テキストレイヤーの配置、アニメータープロパティやプリセットの適用、スケール・位置・不透明度へのキーフレーム設定、そして音声波形に合わせたタイミング調整という流れになります。精密な制御が可能ですが、完成動画1分につき数時間を要することもあります。
テンプレートとジェネレーター
キネティックタイポグラフィのテンプレートは、あらかじめ構築されたモーションに自分の言葉を当てはめるものです。ジェネレーターはさらに一歩進んで、スクリプトやトランスクリプトからタイミングを自動生成します。どちらも制御性を犠牲にする代わりにスピードを優先します。出力が縦型サイズであること、そしてスマホでフォントが読みやすいことを必ず確認してください。
自動単語単位キャプション
音声認識ツールを使用して各単語を音声に合わせ、動画上にキャプションをレンダリングします。私たちが観察する限り、これは日々のショート動画投稿において一般的な選択肢であり、以下でその手順を解説します。
アニメーションキャプションを読みやすくするデザインルール
これらはプラットフォームの要件ではなく、私たちからの推奨事項です。
- 画面上の単語数。 一度に表示するのは1〜4単語に留めましょう。それ以上になると、キャプションではなく字幕になってしまいます。
- コントラスト。 4.5:1の比率は、Webアクセシビリティガイドラインで本文テキストに対して使用される基準であり、キャプションにとっても妥当な最低ラインです。
- セーフゾーン。 1080x1920のフレームの下部5分の1は、プラットフォームのボタンや説明文が表示されるため、何も配置しないようにしましょう。セーフゾーンの詳細については、9:16アスペクト比ガイドをご覧ください。
- ペース。 話し手に合わせましょう。早口の話し手には、複雑なモーションではなく、シンプルな動きが必要です。
- 一貫性。 視聴者がパターンを学習できるよう、シリーズごとに1つのスタイルを使用してください。
Publiqaで動画にアニメーションキャプションを追加する方法
Publiqaは、ソーシャルコンテンツおよび動画のためのクラウドベースのAIスタジオです。AIビデオスタジオはRemotionを使用して縦型動画をレンダリングし、単語単位のキャプションは標準出力に含まれています。
- Campaign Studioでアイデアや記事から開始します。マスターコアエンジンが要点とフックを抽出します。
- Cloud Video Studioを開き、30秒、45秒、または60秒の長さで「Simple」モードを選択します。
- スクリプトを確認します。タイミングはボイスオーバー優先であるため、ナレーションがペースを決定し、カットがそれに従います。
- キャプションを生成します。各単語はボイスオーバーに合わせてタイミング調整されるため、手動で合わせる必要はありません。
- 映像がナレーションと一致しているか、また音楽のダッキング機能によって発話中にトラックが12 dB下がっているかを確認します。
- 9:16のキャンバス上で1080pでレンダリングします。レンダリングには15クレジットが必要です。
- モバイルで結果をプレビューし、承認します。
無料トライアルには200クレジットが含まれており、トライアル動画には透かしが入ります。
アクセシビリティについて：オープンキャプションかクローズドキャプションか？
オープンキャプションは映像に焼き付けられており、オフにすることはできません。クローズドキャプションは視聴者がオン・オフを切り替えられる独立したトラックです。アニメーション化されたキャプションはほぼ例外なくオープンキャプションであるため、スクリーンリーダーで読み取ることはできません。
WCAG 2.2の達成基準1.2.2では、同期メディアの事前収録された音声に対して、レベルAでキャプションを提供することを求めています。キャプションファイルをアップロードできるプラットフォームであれば、アニメーション版と併せてキャプションファイルを追加し、動画を視聴できない人のために投稿の説明欄に全文を記載してください。
よくある質問
キネティック・タイポグラフィ・アニメーションとは何ですか？
意味や感情を伝えるために、音に合わせて動くテキストのことです。ソーシャル動画においては通常、話し手の言葉に合わせて単語単位で表示、強調、またはバウンドするキャプションを指します。
キネティック・タイポグラフィはどうやって作るのですか？
手法を選びましょう。完全にコントロールしたい場合はAfter Effects、繰り返しシリーズを作るならテンプレート、日々の投稿なら自動キャプションが適しています。まず台本を書き、音声に合わせて単語のタイミングを調整し、最後にスマートフォンで読みやすさを確認してください。
アニメーションキャプションで視聴時間は伸びますか？
それを証明する特定の調査結果は見当たりませんでした。キャプションは音声をオフにしている視聴者が内容を追うのに役立ちますが、アニメーションがそれに寄与するかどうかは定かではありません。ご自身の動画でペアテストを実施してみてください。
アニメーションキャプションはアクセシブルですか？
部分的にそうです。これらはオープンキャプションであるため、視聴者がオフにすることはできず、スクリーンリーダーも読み取れません。プラットフォームが対応している場合はキャプションファイルを追加し、説明欄にテキストを含めるようにしてください。
最初の1週間の計画
月曜日：45秒の台本を1本作成する。火曜日：静止キャプションで制作する。水曜日：同じ台本を単語単位のアニメーションキャプションで制作する。木曜日と金曜日：それぞれ同じ曜日に投稿し、平均視聴時間と視聴完了率を記録する。判断を下す前に、これを5ペア繰り返してください。より広範な制作ワークフローについては、short-form video playbookをご覧ください。
タイムラインを操作せずにアニメーション版を作成するには、200クレジット付きの無料プランから始めてください。クレジットカードは不要です。