キネティック タイポグラフィの核心は、テキストに命を吹き込む方法でアニメーションを付け、文字、単語、フレーズに動きを加えて感情を伝えたり、ストーリーを伝えたり、視覚的に魅力的な方法でメッセージを伝えたりする芸術 (および技術) です。
当初、テキスト編集には、フォントを選択し、メッセージを入力し、おそらくフォントの種類、サイズ、色を調整するだけでした。しかし、デザイン ツールとコンセプトが進歩するにつれて、基本的なテキスト編集は、テキスト、デザイン、アニメーションの魅力的な組み合わせに進化しました。
キネティック タイポグラフィーの典型的な例は、映画のタイトルが踊ったり、浮かんだり、形状や画像から生じたりすることで、映画が始まる前から体験を作り出します。 After Effects などのビデオ編集ツールを使用して、このような一般的なキネティック タイポグラフィ エフェクトを作成できます。
この記事では、After Effects でキネティック テキストを作成する方法、使用できるいくつかのプリセット、およびそれらをダウンロードできる人気の Web サイトについて説明します。
この記事について
<オル>キネティック タイポグラフィの例
ブランド コミュニケーションからエンターテイメントや教育に至るまで、キネティック タイポグラフィー効果はテキスト メッセージを目立たせる方法を生み出してきました。これらは、私たちが毎日目にするブランド メッセージの中に見つけることができます。
Apple を例に挙げてみましょう。
Apple は、キネティック タイポグラフィーを使用して、カーボン ニュートラルを目指す同社の意図を強く伝えました。動的なテキスト、カラーパレット、力強いビジュアルは、ブランドのアイデンティティと共鳴しながら、ナレーターのメッセージを伝えるのに素晴らしい役割を果たしました。
バーガーキングはまた、ブランド コミュニケーションにおける動的なテキストの力を明確に理解しています。
彼らのブランド変更ビデオはテキストをふざけており、視聴者を非常にシームレスに連れて行ってくれます。動的なテキストは、食品ブランドを楽しくておいしいものとして提示しながら、ブランドの基本的な芸術と創造性を強調します。
After Effects で独自のキネティック タイポグラフィを作成する方法
After Effects のタイポグラフィ アニメーションに関する最近の傾向としては、微妙なアニメーションを使用してきれいなテキストに命を吹き込むこと、歪んだテキストを視覚効果と組み合わせること、メッセージ以上のものを伝えるためにアニメーション化して操作できる 3D テキストを作成することなどが挙げられます。
また、ブランドは、特に Instagram や TikTok などで、ソーシャル メディアのブランド コンテンツを作成するために、キネティック タイポグラフィーとモーション グラフィックを統合し始めています。この動きは、いくつかのブランドが飽和市場においてブランド メッセージで目立つのに役立っています。
これは、After Effects を使用して独自のキネティック タイポグラフィをいかに簡単に作成できるかを示しています。
方法 1:スイング効果のある基本的な複数のタイトル ブロック
この方法では、複数のテキスト レイヤーを一緒にアニメーション化し、タイトル ブロックと呼ばれる対照的なテキスト ブロックを作成し、それらにスイング エフェクトを追加します。
ステップ 1:新しいコンポジションを作成します。最初のテキスト要素をコピーして貼り付け、最初の位置に設定します。
ステップ 2:[テキスト プロパティ] ドロップダウン メニューで、[アニメーション]> [不透明度] を選択します。
ステップ 3:[範囲セレクター] ドロップダウン メニューで、[不透明度] を 0% に下げます。タイムライン上のアニメーションの開始時にキーフレームを作成し、開始を 0% に変更します。
ステップ 4:2 番目のテキスト要素をコピーしてコンポジションに貼り付け、最初の位置に設定します。最初のレイヤーで、回転、位置、スケールのキーフレームを有効にして、画面上のテキストを 2 番目の位置に移動します。
ステップ 5:2 番目のテキストレイヤーを選択し、「アニメーション」>「トラッキング」をクリックします。
ステップ 6:トラッキング値にキーフレームを追加します。希望する結果に合わせて調整してください。
ステップ 7:不透明度オプションを使用してフェードイン効果を追加します。こうすると、2 番目のレイヤーが同時にフェードインします。
ステップ 8:次に、スイング効果を追加します。 [レイヤー]> [新規]> [ヌル] に移動します。
ステップ 9:2 つのテキスト レイヤーのホイップを使用して、それらをヌル レイヤーにアタッチします。これにより、ヌル レイヤーを移動してテキスト レイヤーの位置を変更できるようになります。
ステップ 10:Null レイヤーで位置、スケール、および回転のオプションを有効にし、さまざまな設定を調整しながらキーフレームを追加します。 Null レイヤーを新しい位置に移動します。
ステップ 11:最終的なテキストレイヤーをコピーして貼り付けます。 [アニメーション]> [位置] に移動します。
ステップ 12:範囲セレクター メニュー オプションを使用して、テキストを画面の下に移動します。 [アニメーション]> [不透明度] をクリックし、好みに合わせて調整します。 [詳細] メニューを使用して、文字、単語、またはテキスト行をアニメーション化するかどうかを選択します。
方法 2:キネティック タイポグラフィの列アニメーション
ステップ 1:まず、タイトルをアニメーション化します。最初の単語を含むテキストレイヤーを作成します。 [アニメーション]> [トラッキング] をクリックします。
ステップ 2:速度に応じて、最初のアニメーション ポイントにキーフレームを追加します。タイムラインに沿って移動し、好みに合わせてトラッキング値を調整します。
ステップ 3:タイムライン テキスト レイヤーを選択し、[編集]> [レイヤーの分割] に移動します。ここで、新しいタイル レイヤーを 2 番目の単語に変更できます。
ステップ 4:2 番目のテキストレイヤーを選択します。キーボードの「U」をクリックすると、配置したキーフレームが表示されます。最初のキーフレームを 2 番目のキーフレームを越えて移動して、キーフレームの位置を変更します。このようにして、トラッキング効果は逆転します。
ステップ 5:両方のテキストレイヤーを選択し、複合クリップを作成します。必要に応じて、結合されたクリップの端をトリミングします。複合クリップを複製し、最初のクリップの直後に再生されるように配置します。
ステップ 6:2 番目のクリップを反転して、連続ループで再生します。テキスト レイヤーを右クリックし、[時間]> [時間反転レイヤー] を選択します。これにより、シーケンスの長さに合わせてレイヤーを複製できるようになります。クリップ、リバース クリップ、クリップ、リバース クリップという順序を覚えておいてください。
ステップ 7:すべてのレイヤーを選択し、単一の複合クリップを作成します。全長のループ アニメーションを含む 1 つのレイヤーが作成されます。
ステップ 8:列エフェクトを作成するには、レイヤーを複製し、必要なだけ複製します。
Adobe After Effects は、アニメーション、特にテキスト アニメーションを操作する場合に最適なツールです。創造力を発揮し、さまざまなテクニックを使用してキネティック タイポグラフィをゼロからデザインできる広範な機能が備わっています。
ここでは、クリエイティブ プロジェクト用に作成および複製できる、After Effects の一般的なキネティック テキスト アニメーションを示します。つまり、多くのオプションを選択すれば、決して間違えることはありません!
After Effects のテキスト アニメーション用の 10 のキネティック タイポグラフィ エフェクト
-
テキストの影
テキストシャドウは、タイポグラフィにテキストと立体感を追加します。画面上でテキストが動くにつれて、影をアニメーション化して移動、増加、または減少させることができます。
-
手書きのテキスト
After Effects を使用した手書きのタイポグラフィ アニメーションは、手書きのテキストを模倣します。ストロークとマット レイヤーを使用して、説明ビデオに適したユニークなタイポグラフィを作成します。その方法は次のとおりです。
-
滑らかなテキスト
このアニメーションのタイプミス After Effect は微妙で、シームレスな流体モーションに焦点を当てています。最初にテキストを追加し、ぼかし、スライドの回転、グライド、テキストの色などのテキスト設定を試すだけです。
-
3D 押し出し
3D フォントは非常に多用途であるため、押し出しグラデーションやベベルを追加して変更できます。これにより、テキストがより魅力的になり、テキストに深みが加わります。これがその方法です。
-
テキストへの図形の統合
この After Effects タイポグラフィ効果には、テキスト アニメーションにシェイプを組み込むことが含まれます。ここでは、ゆっくりとフォントを明らかにし、サスペンスを構築し、視聴者を興奮させます。この効果は、どのようなフォント、色、形状でもうまく機能します。
-
リキッドテキスト
液体テキストの流動性により、この After Effects タイポグラフィの多用途性がさらに高まります。選択したフォントを使用して、泡の効果、波形、または水のような動きを作成できます。このビデオの手順に従って複製してください。
-
不安定なテキスト
一般に「神経質なエフェクト」と呼ばれるものは、恐ろしい映画クリップや予告編に流行に敏感なスタイルのエフェクトを作成するために使用できます。不安定なテキストを作成する方法は次のとおりです。
-
3D 運動効果
回転、レイヤー スナップ、その他の効果を試して、2D テキストをキネティック 3D テキストに変更します。
-
テクスチャをテキストに結合する
テクスチャを追加し、文字を挿入し、通常のテキストを改善して、見た目の美しさを向上させます。
-
ドットから文字へのスムーズな移行
この動的タイポグラフィ効果は、ドットを滑らかにアニメーション化して、次に何が表示されるかを視聴者に期待させる動的なテキスト アニメーションを作成します。このキネティック タイポグラフィーを使用したビデオは、維持率が高くなります。その方法は次のとおりです。
Adobe Effects 用のキネティック タイポグラフィ プリセット
タイポグラフィ アニメーション エフェクトをゼロから作成するのはとても楽しく創造性がありますが、After Effects のプリセットを使用するとより簡単で、編集プロセスが合理化されます。キネティック タイポグラフィ テンプレートを入手できる Web サイトには、Envato Elements や Motion Array などがあります。 Videohive では、タイポキング タイトル アニメーション キネティック タイポグラフィ テキストなどのアニメーション タイトルをダウンロードできます。
ボーナス:Filmora でキネティック タイポグラフィを作成する簡単な方法
Wondershare Filmora は、魅力的なテキスト アニメーションを作成できるビデオ編集ソフトウェアです。 Filmora は、統合された写真編集ツールとテキスト操作ツールを使用して、テキスト アニメーションをポップで生き生きとしたものにします。
Filmora で魅力的なキネティック タイポグラフィを作成する
- さまざまなプリセット効果を使用してテキストを簡単にアニメーション化できます。
- 独自のフォントをインポートしてクリエイティブなデザインに使用します。
- キーフレームの精度でタイミングと動きを調整する
- テキストの動きを動画要素とシームレスに同期させる
- テキスト アニメーションを音声と合わせてインパクトを与える
Filmora でキネティック タイポグラフィを作成する手順
ステップ 1:ツールバーの [メディア]> [プロジェクト メディア]> [サンプル カラー] に移動します。選択した色をタイムラインにドラッグします。
ステップ 2:[タイトル] タブに移動します。基本タイトル テンプレートをドラッグし、タイムライン上のサンプル カラー クリップの上に配置します。
ステップ 3:タイムライン上のタイトル クリップを右クリックし、オプションのリストから [プロパティの編集] を選択します。 「詳細設定」をクリックします。ここで、フォントの種類とサイズを好みに合わせて変更できます。
ステップ 4:タイムライン上で、2 番目のレイヤーから開始して、すべてのテキストレイヤーを前のレイヤーから 5 フレーム前に移動します。これにより、各単語が 2 番目の単語の数ミリ秒後に表示されます。 [OK] をクリックします。
ステップ 5:タイムラインをエクスポートし、テキスト アニメーションを新しいクリップとして保存します。次に、タイムラインからすべてのクリップを削除し、エクスポートしたばかりのテキスト ビデオをインポートします。それをタイムラインにドラッグします。
ステップ 6:タイムライン上のクリップを右クリックし、「プロパティの編集」を選択します。
ステップ 7:ツールバーで [アニメーション]> [カスタマイズ] をクリックします。スケール設定を 120% に調整します。
ステップ 8:再生ヘッドをタイムライン上のクリップの最後に移動します。スケールをリセットし、「OK」をクリックします。
結論
キネティック タイポグラフィーは、ビデオを調整する楽しく創造的な方法です。 After Effects でキネティック テキストを作成するには、この記事に記載されている手順に従ってください。また、指定された Web サイトから、タイポグラフィー アニメーション After Effects テンプレートを無料で探してみましょう。さらに良いことに、Filmora の合理化された編集プロセスと組み込みのテンプレートをお楽しみください。