2026年10月15日にWindows版AE 26.5で確認したところ、従来の説明にあった「色相/彩度」のマスターの明度へ式を設定する手順は実行できませんでした。
この記事では、式を設定できた「カラーバランス（HLS）」の明度へ貼付先を変更し、5レイヤーの明暗・Z位置・画像切替を検証した手順を掲載しています。
ノベルゲームやシナリオ演出のように、発言中のキャラクター画像を自動で切り替える方法を解説します。
セリフや進行に合わせて、話しているキャラクターを前面に表示して明るくし、表情を切り替える表現をエクスプレッションで制御します。
コンポジションに使用する素材を配置する
- キャラクター素材として、表情差分の連番画像を3枚用意します。
- 「master」という名前のコンポジションを作成し、用意した素材レイヤーを配置します。
連番画像レイヤーの設定
今回は5体のキャラクターを配置する構成とします。
式を貼る前に、後述するcontrollレイヤー・6つのスライダー・2つのコンポジションマーカーを先に作ります。
参照先が未作成の段階では式がエラーになるため、名前と配置をそろえてから式を有効にしてください。
各レイヤーからコンポジションマーカー内のエクスプレッションを参照して一括管理できるように設定します。
- 各画像レイヤーの名称を「1」「2」「3」「4」「5」と連番で設定します。
- 各画像レイヤーに「カラーバランス（HLS）」を適用し、「明度」へ次の式を貼ります。不透明度や「色相/彩度」のマスターの明度には貼りません。
//1つ目のコメント
eval(comp("master").marker.key(1).comment)- 各画像を3Dレイヤーにして「位置」の次元を分割し、分割した「Z位置」へ次の式を貼ります（通常の3成分の位置には貼りません）。
//2つ目のコメント
eval(comp("master").marker.key(2).comment)- 番号1・2・3の練習画像を24fpsの連番として解釈し、タイムリマップを有効にして次の式をタイムリマップへ貼ります。
var requested = Math.round(thisComp.layer("controll").effect("キャラ1")(1).value);
var step = thisLayer.source.frameDuration;
var frames = Math.floor(thisLayer.source.duration / step + 0.000001);
var result = value;
if (isFinite(requested) && isFinite(step) && step > 0 && frames >= 1) {
result = (Math.max(1, Math.min(requested, frames)) - 1) * step;
}
result;
キャラ1は各レイヤーに合わせてキャラ2〜5へ変更します。
表情番号1が1枚目、3が3枚目です。
3枚を24fpsで解釈した素材の長さは0.125秒です。
タイムリマップを有効にしたあと、各レイヤーのアウト点を演出の終了時刻まで延ばしてください。
今回の検証では2秒に延長しました。
式でフレームを固定しても、レイヤーのアウト点を過ぎると表示されません。
0以下は1枚目、枚数を超えた値は最後のフレームへ制限します。
コントローラー用ヌルレイヤーの作成
- タイムラインの最上位に「controll」という名前のヌルレイヤーを新規作成します。
- スライダー制御を6つ追加し、状態制御とキャラ1〜5へ改名します。状態1〜5が発言者、6が全員、0が全員を暗くする値です。キャラ1〜5の初期値は1にします。切替用スライダーのキーはホールド補間にします。
- コンポジションにマーカーを2つ追加します。
マーカー1：明るさ（明暗）制御用エクスプレッション
var state = Math.round(comp("master").layer("controll").effect("状態制御")(1).value);
var selected = Number(thisLayer.name);
(state == 6 || state == selected) ? 0 : -50;
画像レイヤー名を条件として判定し、表示状態を切り替えています。
状態6では全員のカラーバランス（HLS）の明度が0になり、元の明るさで表示します。
状態2ならレイヤー2だけが0、他は-50で暗くなります。
100で白くする式とは異なります。
マーカー2：描画順（Z位置）制御用エクスプレッション
var state = Math.round(comp("master").layer("controll").effect("状態制御")(1).value);
var selected = Number(thisLayer.name);
(state == 6 || state == selected) ? -1 : 0;
画像レイヤー名を条件にして判定し、Z位置の値を切り替えています。
状態2ならレイヤー2のZは-1、他は0です。
状態6では全員が-1になり、この練習条件では重なりがタイムライン順になります。
実際の重なりはカメラやレンダラーでも変わるため、プレビューで確認します。
設定した2つのマーカーに記述されたコードを各画像レイヤーが参照し、レイヤー名に応じた条件分岐で動作します。
アニメーションキーフレームの設定
ヌルレイヤーのスライダー制御プロパティに対して、状態切り替えや表情変更のキーフレームを打ってアニメーションを作成します。
正しく設定できていれば、各レイヤーを直接触ることなくヌルレイヤー「controll」側のスライダー操作だけで演出全体の制御が完結します。
撮影した練習例です。
本文の構成（状態制御とキャラ1〜5）ではなく、2枚の画像を1つのスライダーで切り替える、簡単な例です。
画面には式が写っていないため、本文のタイムリマップの式の結果かどうかは、この画像から分かりません。
エフェクトコントロールには、レイヤー「Controller17773」のスライダー制御「ImageIndex17773」があり、スライダーは1.00でした。
コンポジションパネルには、オレンジ色の画像が表示されていました。
スライダーを2.00にすると、表示が緑色の画像に切り替わりました。
タイムラインのレイヤーは、「Controller17773」「ImageTwo17773」「ImageOne17773」の3枚でした。
この画面では、スライダーの値を変えるだけで、表示する画像が変わりました。
参考：レイヤーマーカーから値を取得する記述方法
次は別の方法です。
レイヤーマーカーの最初のコメントへ表情番号1・2・3だけを入れ、タイムリマップから数値として読みます。
マーカーなしや整数以外なら式を入れる前の値を返します。
var result = value;
if (thisLayer.marker.numKeys >= 1) {
var number = Number(thisLayer.marker.key(1).comment);
var step = thisLayer.source.frameDuration;
var frames = Math.floor(thisLayer.source.duration / step + 0.000001);
if (isFinite(number) && number >= 1 && number % 1 == 0 &&
isFinite(step) && step > 0 && frames >= 1) {
result = (Math.min(number, frames) - 1) * step;
}
}
result;
番号3を24fpsで時刻へ変換すると、0から数えたフレーム2なので次の0.083333…秒になります。
framesToTimeのfpsを省略するとコンポのfpsが使われます。
framesToTime(2, 24);レイヤースタイル併用時の描画順に関する注意点
キャラクターを暗くする処理にエフェクト「カラーバランス（HLS）」を使用します。
レイヤーに「レイヤースタイル」を併用するとレンダリング順序の関係で描画結果が意図通りにならない場合があります。
After Effectsのほかの操作やテクニックについては、まとめ記事もあわせてご覧ください。
既存GitHubの参考コードは旧版の場合があります。
今回の貼付先と式は本文を使います。
マーカーコメントに他者から受け取ったコードを貼って実行しません。
テキストレイヤーを扱う記事は、ほかにもあります。
状態と表情を確認する練習例
検証環境はWindows 11 Pro（10.0.26200）、After Effects 26.5（Build 89）、640×360 px・30 fps・2秒、クラシック3Dです。
カメラ・親・レイヤースタイルはなし。
自作した120×180 pxの赤・緑・青のPNGに1・2・3の番号を付け、3枚の連番として24 fpsで読み込みました。
画像中の番号は表情番号で、レイヤー番号ではありません。
レイヤー1〜5はX＝120・220・320・420・520、Y＝180に並べ、元のZは0にしました。
120 px幅を100 px間隔で置くため20 px重なります。
設定・式の適用・PNG書き出しとプロパティ値の読み取りにはAEスクリプトを使用し、実画面と書き出した画像も確認しました。
掲載コードは変更せず、明度の貼付先のみカラーバランス（HLS）へ変更しています。
状態制御＝2、キャラ2＝3、その他のキャラ＝1では、2番だけ明度0・Z＝−1・素材時刻2/24秒になりました。
他の4枚は明度−50・Z＝0・素材時刻0秒です。
青い3番目の画像が明るく表示され、2番が1番よりタイムラインの下にある場合でも、重なる部分では2番の画像が前に出ました。
状態制御＝6では全5枚が明度0・Z＝−1、状態制御＝0では全5枚が明度−50・Z＝0でした。
状態6では全員を同じZへ動かすため、互いの重なり順はタイムライン順に戻ります。
キャラ2の表情番号0・1は素材時刻0秒、3・99は2/24秒になり、書き出したPNGもそれぞれ赤い1枚目・青い3枚目でした。
さらに状態2から6へ1秒位置でホールド切替すると、29/30秒では2番だけ明るく、1秒では全員が明るくなりました。
確認した全条件で明度・Z・タイムリマップの式エラーはありませんでした。
最初に試した「色相/彩度」のマスターの明度は、今回のAEではエクスプレッション設定不可で、スクリプトによる式の設定もエラーになりました。
「カラーバランス（HLS）」の明度では同じ0／−50の条件式が動きました。
AdobeはHLS版を旧プロジェクト互換用と説明していますが、ここでは式から明度を制御できる貼付先として使用しています。
旧手順を試して止まった場合は、この貼付先を確認してください。
この検証は本文のスライダーによる切替方式を対象としています。
参考節のレイヤーマーカーから数値を読む別方式、実際の人物素材、レイヤースタイル・別カメラ・別レンダラーとの併用は今回未検証です。
本稿は、カメラ・親レイヤー・レイヤースタイルのない練習コンポで元のZが0の例です。
コンポは30fps、3枚の連番素材は24fpsで解釈し、masterとcontrollの名前を揃えます。
2026年10月15日に、この組み合わせで以下の結果を確認しました。
| 入力・条件 | 期待する結果 | 確認点 |
|---|---|---|
| 状態2・キャラ2=3 | 2番の明度0・Z=-1・表情3 | 他の明度-50・Z=0 |
| 状態6 | 全員の明度0・Z=-1 | 全員同じZになり、重なりはタイムライン順 |
| 表情1／24fps | 素材時刻0 | 1枚目 |
| 表情3／24fps | 素材時刻2/24秒 | コンポfpsと区別 |
エラーの場合は名前の一致、コンポマーカー2つの存在、明度と分割Z位置への貼付先を確認します。
マーカー1と2は時間上の順序で参照するため、後から順序を入れ替えません。
戻し方と旧画像の範囲
変更前にコンポと各プロパティ値を保管します。
戻すときは追加した式をオフにし、明度・Z位置・タイムリマップを保管した値へ戻します。
元からあるキーを削除せず、今回追加したキーや制御は練習コピーで整理します。
2019年の参考画像と2026年10月13日の2枚切替例は、今回の5レイヤー検証とは条件が異なります。
今回の実機結果は10月15日撮影の画像2枚と、上の検証結果を参照してください。
レイヤースタイル、別カメラ、別レンダラーとの併用は今回未確認です。
参照資料
Adobeの色補正エフェクト資料と時間変換・マーカー参照資料を参照しています。
実機・色補正資料確認日：2026年10月15日。
スライダー方式の明度・表情・Z位置はAE本体の値とPNG描画で確認しました。
検証条件と対象外の範囲は「状態と表情を確認する練習例」に記載しています。
