After Effects│文字の長さに合わせて背景（座布団）が伸びるエクスプレッション｜sourceRectAtTime

テロップの文字を打ち替えるたびに、背景の四角を手で伸ばし直すのは手間がかかります。

sourceRectAtTime を使うと、文字の長さに合わせて背景（座布団）が自動で伸び縮みします。

• 背景はシェイプレイヤーの長方形で作る
• 長方形のサイズ：文字の幅と高さに余白を足す
• 長方形の位置：文字の枠の中心に合わせる
• シェイプレイヤーの位置：テキストレイヤーの位置にそろえる

この記事は、Adobe公式の「Expression language reference」の説明（2026年10月3日に公式資料を確認）にもとづいています。

After Effectsの画面での再現は含まず、公式の説明どおりに組み立てた式を紹介します。

sourceRectAtTimeとは

sourceRectAtTime は、レイヤーの中身がどの範囲にあるかを返す関数です。

sourceRectAtTime(time, false)

返ってくるのは、top（上端）・left（左端）・width（幅）・height（高さ）の4つです。

falseのテキスト例は、文字のレイヤー内の境界を使います。返す座標と大きさには、レイヤーの位置・回転・拡大縮小を合成した画面上の変換は含まれません。

includeExtentsがtrueなら、段落テキストは段落ボックスの範囲を返します（AE15.1以降）。シェイプレイヤーでは必要な範囲まで境界を拡張します。文字の見える幅と段落ボックスの幅を混同せず、ここではfalseを使います。

作り方

1. レイヤーを用意する

1. テキストレイヤーを作り、名前を「テキスト」にする
2. シェイプレイヤーに長方形を1つ作る（塗りだけにする）
3. シェイプレイヤーをテキストレイヤーの下に置く

練習は両レイヤーとも2D・親なしで、回転0°、拡大縮小100%にします。背景のレイヤーアンカーは [0, 0]、長方形グループのトランスフォームも位置・アンカー [0, 0]、回転0°、スケール100%にします。テキストのアンカーは次の位置式で差し引くので、既存値を維持できます。

2. 長方形のサイズ

シェイプレイヤーの「コンテンツ」→「長方形」→「長方形パス」→「サイズ」に書きます。

var t = thisComp.layer("テキスト");
var r = t.sourceRectAtTime(time, false);
var pad = [40, 20]; // 左右の余白, 上下の余白
[r.width + pad[0] * 2, r.height + pad[1] * 2];

文字の幅と高さに、左右と上下の余白を2倍して足しています。

3. 長方形の位置

同じ「長方形パス」の「位置」に書きます。

var t = thisComp.layer("テキスト");
var r = t.sourceRectAtTime(time, false);
var a = t.transform.anchorPoint;
[r.left + r.width / 2 - a[0], r.top + r.height / 2 - a[1]];

文字の枠の中心からテキストのアンカーを差し引き、背景レイヤーの原点から見た長方形中心を求めています。

長方形は中心を基準に描かれるので、これで文字の真後ろに背景が来ます。

4. シェイプレイヤーの位置

シェイプレイヤーの「トランスフォーム」→「位置」に書きます。

thisComp.layer("テキスト").transform.position;

親なし・回転0°・スケール100%の条件なら、テキストを移動したときも背景が追従します。位置だけをコピーするこの方式は、テキストの回転や拡大縮小まで追従させる式ではありません。

文字を打ち替えると、背景の大きさも自動で変わります。

よく使う応用

角を丸くする

「長方形パス」の「角丸の半径」に数値を入れると、角の丸い帯になります。

余白をスライダーで変える

テキストレイヤーにエフェクトの「スライダー制御」を2つ足し、名前を「余白横」「余白縦」にします。

var t = thisComp.layer("テキスト");
var r = t.sourceRectAtTime(time, false);
var px = t.effect("余白横")("スライダー");
var py = t.effect("余白縦")("スライダー");
[r.width + px * 2, r.height + py * 2];

英語版ではスライダーの名前が変わるため、ピックウィップで2つの参照を作ります。余白は0以上の数値で指定し、スライダー制御の名前とプロパティ名を分けて確認します。

幅だけ合わせて高さは固定する

var r = thisComp.layer("テキスト").sourceRectAtTime(time, false);
[r.width + 80, 60];

文字の高さに関係なく、帯の高さを60ピクセルにそろえたいときに使います。

ずれるとき・効かないとき

• 背景がずれる：アンカー差し引き式、背景レイヤーのアンカー、長方形グループの変換を確認する
• 背景の大きさがおかしい：テキストレイヤーの拡大・縮小を変えていないかを見る（sourceRectAtTime は拡大・縮小の前の大きさを返す）
• エラーになる：レイヤー名が式の中の “テキスト” と同じかを見る
• 文字がない時間に背景が残る：文字を空にすると幅が0になり、余白の分だけ残る

ここまでの位置コピー式を残したまま背景をテキストの子にすると、位置が二重に適用されることがあります。親子付けへ切り替える場合は位置コピーを外し、子のローカル位置とアンカーを設定し直す必要があります。この練習では親子付けせず、回転0°・スケール100%の方式に揃えます。

エクスプレッションのほかの記事は、After Effectsの使い方まとめからご覧いただけます。

アンカーと余白を数値で確かめる練習

式はサイズ・長方形パスの位置・レイヤー位置の3箇所へ、それぞれ対応する例を1本ずつ貼ります。

長方形パスの位置とレイヤー位置は別のプロパティです。

以下は仮の境界とアンカーを入力した計算例で、実フォントの測定値ではありません。

文字を短く変更し、背景の横幅が変わるか、テキストを移動したときに追従するかをプレビューします。

空の文字には余白だけの背景が残るため、空文字でも消す必要がある場合は不透明度の制御を別途設定します。

練習前の3箇所の値と式を保存し、終了後は保存した値・式を戻します。

AE本体の表示は未検証です。

まとめ

• sourceRectAtTime で、文字の上端・左端・幅・高さが分かる
• 長方形のサイズは幅と高さに余白を足し、位置は枠の中心にする
• シェイプレイヤーの位置をテキストレイヤーにそろえると、一緒に動く
• ずれるときは、アンカーポイントと拡大・縮小を見る

参考：Adobe「Expression language reference」（2026年10月3日に公式資料を確認）。