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

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

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

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

この記事では、長方形のサイズ・パスの位置・レイヤーの位置の3箇所に式を設定します。Windows 11 Pro（10.0.26200）・日本語版After Effects 26.5（Build 89）で、2026年10月14日に文字変更、アンカー補正、移動、余白変更、空文字の結果を確認しました。

sourceRectAtTimeとは

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

sourceRectAtTime(time, false)

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

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

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

以下の2枚は2026年10月13日の検証画面です。上下余白は片側24pxで、後述の手順の片側20pxとは異なります。フォントや文字サイズが変わると測定値も変わるため、掲載数値との一致ではなく、文字に合わせて伸びることを確認してください。

式は「r=thisComp.layer(‘Title18699’).sourceRectAtTime(time,false); [r.width+80,r.height+48];」で、短い文字「SHORT」では、サイズが282.1×94.0でした。

文字を「LONGER TITLE TEXT」に変えると、背景が文字幅に合わせて伸び、サイズは683.9×94.0になりました。

作り方

1. レイヤーを用意する

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

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

2. 長方形のサイズ

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

Windowsでは、対象プロパティのストップウォッチをAltキーを押しながらクリックし、表示された式欄に貼り付けます。入力後は式欄の外をクリックして確定します。次の位置式も、それぞれ指定されたプロパティに設定してください。

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ピクセルにそろえたいときに使います。

Windowsで確認した追従と空文字の結果

960×540px・30fpsのコンポジションに、Arial（PostScript名ArialMT）・60px・左揃えのポイントテキストを作りました。両レイヤーは2D、親なし、回転0°、スケール100%。背景のアンカーと長方形グループの位置・アンカーは[0, 0]です。余白は左右各40px・上下各20pxにしました。

長い文字のアンカーを[0, 0]から[20, 10]に変えると、長方形パスの位置は[302.23, −21.49]から[282.23, −31.49]へ変わりました。文字のアンカー差を引く式により、背景も文字と一緒に移動しました。また、テキストの位置を[240, 270]から[340, 320]へ変えると、背景レイヤーの位置も同じ値へ追従しました。数値は小数第2位に丸めています。

空文字のときだけ背景を消す

文字をすべて削除しても、サイズ式は余白の80×40pxを返します。これはエラーではありません。完全な空文字のときだけ消したい場合は、背景シェイプレイヤーの「トランスフォーム」→「不透明度」に次の式を追加します。既存の不透明度の式がある場合は、先にコピーして保存してください。

thisComp.layer("テキスト").text.sourceText.toString().length === 0 ? 0 : value;

元の不透明度を100%にして確認すると、空文字では0%、SHORTでは100%になりました。半角スペース1個では文字数が1になるため100%のままです。空白も消したい運用では、まず不要なスペースを削除してください。この式は文字の長さだけを判定します。

段落テキスト、テキストアニメーター、親子付け、3D、回転やスケールを変えた構成は、この検証の対象外です。まず上記の2D条件で動作を確かめてから、ご自身の構成へ適用してください。

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

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

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

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

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

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

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

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

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

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

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

2026年10月13日に、After Effectsの画面で、文字に合わせて背景が伸びることを確認しました。

まとめ

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

参考：Adobe「After Effectsでのエクスプレッション言語」のsourceRectAtTime項目。返り値とincludeExtentsの適用範囲を2026年10月14日に確認しました。