After Effects v26.0で、「バリアブルフォント軸」のサポートが追加されました。
これにより、バリアブルフォント内で太さや幅といったスタイルを連続的に調整したり、その変化を滑らかにアニメーションとして動かしたりできるようになっています。
この記事では、バリアブルフォントの基本から、After Effectsで何ができるのか、実際の使い方まで初心者向けに解説します。
バリアブルフォントとは？
まずは前提として「バリアブルフォント」が何かを理解しておきましょう。
通常のフォントは、太字や細字などスタイルごとに別ファイルになっています。
- Regular
- Bold
- Light
- Italic
一方でバリアブルフォントは、これらのスタイルを1つのフォントファイルにまとめたものです。
さらに重要なのが、スタイルが「段階」ではなく「連続的に変えられる」という点です。
| 項目 | 従来フォント | バリアブルフォント |
|---|---|---|
| ファイル構造 | スタイルごとに別ファイル（Regular / Bold など） | 1つのフォントファイルに複数スタイルを内包 |
| スタイル範囲 | 段階的（100 / 200 / 300 など） | 連続的（100〜900の間を自由に調整） |
| 変化の表現 | フォントを切り替える必要がある | 数値で滑らかに変化させられる |
| 柔軟性 | 基本的に1軸（太さ or イタリックなど） | 複数軸を同時に制御可能（太さ＋幅など） |
表の通り、従来フォントはスタイルを「切り替える」仕組みなのに対し、バリアブルフォントはスタイルを「連続的に変化させる」ことができます。
この違いによって、After Effectsではフォントの太さや幅を滑らかに変化させるアニメーションが可能になっています。
バリアブルフォントなら中間の太さも自由に作れる
バリアブルフォント軸とは？
バリアブルフォントでは、「軸（Axis）」という考え方でスタイルをコントロールします。
簡単に言うとどの方向にデザインを変えるかのパラメータです。
代表的な軸は以下の通りです。
- 線幅（wght）：文字の太さを調整
- 幅（wdth）：文字の横方向の広がりを調整
- 傾斜（slnt）：文字の傾き角度を調整
- イタリック（ital）：文字のスタイルを斜体に切り替え
- オプティカルサイズ（opsz）：表示サイズに応じて文字の形状やバランスを最適化
例えば「線幅」の軸を動かすと、細字→太字へ滑らかに変化します。
After Effectsで何ができるようになった？
After Effects v26.0では、OpenTypeバリアブルフォントに含まれるデザインバリエーションを、アプリ内から直接コントロールできるようになりました。
従来のようにフォントを切り替えるのではなく、1つのバリアブルフォント内で太さや幅などを連続的に調整し、そのままアニメーションに反映できます。
主なポイントは以下の通りです。
- フォントの太さや幅などを連続的な値で細かく調整できる
- キーフレームを使ってフォントの変化をスムーズにアニメーションできる
- テキストアニメーターを使って文字ごとに異なる軸値を設定できる
- 1つのフォントファイルで複数スタイルを扱えるため、フォントの管理をシンプルにできる
これにより、フォントを切り替えることなく、見た目の変化を滑らかにつなげたテキストアニメーションが作れるようになっています。
バリアブルフォントの探し方
バリアブルフォント軸を使用するには、対応したバリアブルフォントを用意する必要があります。
バリアブルフォントは、Adobe FontsやGoogle Fontsなどで探すことができます。
Adobe Fontsを利用する場合は、検索ボックスに「バリアブル」と入力するだけで、対応フォントを簡単に見つけることができます。
また、「すべてを参照」にアクセスして、左側サイドバー「フォント技術」の所にある「バリアブルフォント」を使えばバリアブルフォントのみにフィルタリングすることができます。
Google Fontsの場合は、検索欄に「variable」と入力するか、FiltersのTechnologyのところにある「Variable」を使って絞り込みすることができます。
バリアブルフォント軸を使ったフォント調節手順
バリアブルフォント軸を使ってフォントを調節する手順は以下の通りです。
テキストレイヤーを作成して、バリアブルフォントを適用します。
以下は、バリアブルフォントの「Roboto Flex」のThinを適用したところ。
バリアブルフォントボタンをクリックすると、ポップアップが表示され、現在のフォントで使用可能なすべての軸が表示されます。
これらの軸のパラメーター値を変更すると、リアルタイムで見た目が変化します。
テキストの一部を選択状態にして調節すれば、文字単位で変化させることも可能です。
バリアブルフォントをアニメーションさせる方法
１．タイムラインパネルにフォント軸プロパティを追加
バリアブルフォントをアニメーションするには、タイムラインパネルのテキストレイヤーにフォント軸プロパティを追加します。
フォント軸プロパティを追加する方法は以下の３つ存在します。
- テキストレイヤーメニューから追加
- タイムラインパネルから追加
- プロパティパネルから追加
テキストレイヤーメニューから追加
テキストレイヤーをダブルクリックして編集モードに入り、アニメーション化したい文字を選択してハイライト表示にします。
テキスト全体に対して変化させる場合は、編集モードに入らずテキストレイヤーを選択するだけでOK。
コンポジションパネルでハイライト表示されたテキストを右クリックし、表示されたメニューから「テキストのアニメータープロパティを追加」⇒「バリアブルフォント軸」⇒「軸名」 を選択します。
今回は、Weightを選択。
すると、テキストレイヤーの中に範囲セレクター付きのフォント軸プロパティが追加されます。
フォント軸のストップウォッチボタンを押せば、フォント軸のキーフレームアニメーションを作れます。
タイムラインパネルから操作する場合
テキスト全体ではなく、一部の文字だけ変化させたい場合は、テキストレイヤーをダブルクリックして編集モードに入り、アニメーション化したい文字を選択してハイライト表示にしておきます。
※全体を変化させたい場合は、この操作は必要ありません。
テキストレイヤーを展開して、アニメーターの▶ボタンをクリックし、表示されたメニューから「バリアブルフォント軸」⇒「軸名」 を選択します。
これで、テキストレイヤーの中に範囲セレクター付きのフォント軸プロパティが追加されます。
プロパティパネルから追加
タイムラインパネルでテキストレイヤーを選択し、プロパティパネルのテキストアニメーションセクションにある「アニメーターを追加」ボタンをクリックします。
表示されたメニューから「バリアブルフォント軸」⇒「軸名」 を選択します。
これで、テキストレイヤーの中に範囲セレクター付きのフォント軸プロパティが追加されます。
２．フォント軸プロパティを使ってキーフレームを作成
フォント軸プロパティのストップウォッチボタンをクリックします。
キーフレームを設定してアニメーションを作成します。
どんな場面で使う？
この機能は、テキストに動きをつけたい場面で特に効果的です。
- タイトルの動き付け
- テキストアニメーション
- モーショングラフィックス
フォント自体を“動かす”表現ができる
まとめ
After Effects v26.0では、バリアブルフォント軸のサポートにより、1つのフォント内で太さや幅といったデザインバリエーションを連続的に調整し、そのままアニメーションに活用できるようになりました。
従来のようにフォントを切り替えるのではなく、数値で滑らかに変化させられるため、テキスト表現の自由度は大きく向上しています。テキストアニメーションの表現を一段引き上げたい場合は、活用しておきたい機能です。
新エクスプレッションを学んで応用の幅を広げよう
コメント