Amazonで商品を見るセール会場へ

After Effects│斜めに切り替わるトランジションの作り方

斜線を用いたトランジションがよく見えたので再現してみました。

斜めに切り替わるトランジションは、標準のエフェクトでも作れます。

どれを使うかで、出せる形が変わります。

使うもの向いている形
ブラインド同じ幅の帯が並ぶ形。「方向」の角度で斜めにする
リニアワイプ1本の直線で切り替える形。ワイプ角度で斜めにする
カードワイプ格子状に分けて順に裏返す形
シェイプ+リピーター帯の幅・間隔・本数を自分で決めたい場合

決まった形でよければエフェクト、細かく決めたいならシェイプです。

ブラインドとシェイプの数値例は、2026年10月16日にAfter Effects 26.5.0(Windows 11)で描画を確かめ、シェイプの例は終点の幅を直しました。

目次

A画面からB画面へ1秒で切り替える練習

640×360・24fps・3秒の練習コンポを作り、名前を付けたA画面とB画面を全尺に置きます。

以下は0秒から1秒の間にAからBへ切り替える例です。

既存AEPとは分けて保存してから試します。

ブラインドを使う場合は、AをBより上に置き、Aだけにブラインドを追加します。

「方向」を45度、「幅」を100、「境界のぼかし」を0とし、「変換終了」を0秒で0%、1秒で100%へ動かします。

0秒ではA、1秒ではBが全面に見えることを確認します。

逆順に切り替える場合は値を100→0へ入れ替えます。

2026年10月16日に、Windows 11 Pro(10.0.26200)のAdobe After Effects 26.5.0(Build 89、日本語表示)で、この値を試しました。

練習コンポは640×360・24fps・3秒・8bpcで、Aは青、Bはオレンジの画面に、それぞれ白い文字を置きました。

日本語表示の画面では、角度の欄は「方向」、ぼかしの欄は「境界のぼかし」という名前でした。

0.5秒では「変換終了」が50%で、AとBが斜めの帯になって交互に見えました。

ブラインドの変換終了50%・方向45度・幅100で、AからBへ斜めに切り替わる途中のAfter Effectsの画面
2026-10-16撮影。Adobe After Effects 26.5.0 (Build 89)、Windows 11 Pro (10.0.26200)。Aだけにブラインドを追加し、「変換終了」50%・「方向」45度・「幅」100・「境界のぼかし」0にした0.5秒時点の実機画面(ウィンドウのタイトルバーのみ切り取り)。

AEで描画した画像を比べると、0秒はAと、1秒から3秒までの48フレームはBと、全画素が一致しました。

素材の準備と、ブラインドの数値・キーフレームの入力はスクリプトで行ったため、手作業での入力は確認に含めていません。

スポンサーリンク

サンプル1:ブラインドエフェクトを使った方法

ブラインドトランジション
  • エフェクト → トランジション → ブラインドを追加して「方向」を45度にする

サンプル2:シェイプとリピーターを使った方法

シェイプトランジション
  • 長方形シェイプを作成。斜めにして、リピーターで複製
  • 『パスのオフセット』を用いて、線の太さのアニメーションを作成
  • Bのトラックマット参照先に白いシェイプを指定し、ルミナンス・非反転にします。次節の数値練習ではアルファ・非反転も使えます。

シェイプの白い帯をBのマットにする設定

BをAより上へ置き、さらに白い塗り・線なしのシェイプレイヤー「MAT」を作ります。

長方形パスの中心を[0,0]、高さを1600、グループの位置を[0,0]にします。

グループ内で長方形と塗りの下へリピーターを追加し、コピー数12、オフセット-5.5、位置[100,0]、アンカーポイント[0,0]、スケール[100,100]、回転0度にします。

MATレイヤーの位置を[320,180]、回転を45度にします。

長方形パスのサイズを0秒で[0,1600]、1秒で[102,1600]にします。

帯の幅が0から102へ広がり、100ピクセル間隔の隙間を、隣の帯と2ピクセル重ねて埋めます。

MATレイヤーの不透明度は、0秒で0%、次のフレーム(0:00:00:01)で100%にします。

以前の版では終点の幅を100とし、不透明度のキーフレームはありませんでした。

幅100のままでは1秒の時点でも帯の境目に薄い斜線が残ることが、2026年10月16日の確認で分かったため、値を直しました。

旧サンプルのパスのオフセットを使う方法とは異なる、数値を指定した練習例です。

タイムラインの「モード」列を表示し、Bのトラックマット参照先をMATへ指定します。

アルファ・非反転を選ぶと、帯がある場所だけBが見えます。

ルミナンス・非反転を使う場合はMATの塗りを白にします。

灰色ではBが半透明になるため、意図せず背景と混ざるときは塗りとマット方式を確認します。

マットとして使うMAT自体のビデオスイッチはOFFにし、AとBはONにします。

0秒でA、途中で斜めの帯、1秒でB全体を確認します。

隅にAが残る場合はMATの位置と回転を照合し、帯の長さと本数を増やします。

2026年10月16日に、前の練習と同じ環境とコンポで、この節の数値を試しました。

素材とMATの作成、数値とキーフレームの入力はスクリプトで行ったため、手作業での入力は確認に含めていません。

BのトラックマットにMATを指定する操作と、アルファとルミナンスの切り替えは、画面で行いました。

以前の版の値(終点の幅100)で0.5秒にすると、斜めの帯の部分だけBが見えました。

BのトラックマットにMATを指定し、斜めの帯の部分だけBが見えている0.5秒時点のAfter Effectsの画面
2026-10-16撮影。Adobe After Effects 26.5.0 (Build 89)、Windows 11 Pro (10.0.26200)。Bのトラックマットに、目をオフにしたMATを指定した0.5秒時点の実機画面(ウィンドウのタイトルバーのみ切り取り)。以前の版の値(終点の幅100)で撮影した。

AEで描画した画像を、AだけやBだけの画像と全画素で比べた結果です。

設定0秒1秒以降
終点の幅100(以前の版)Aと3,198画素が異なり、Bが薄い斜線状に混ざった(差は最大24/255)1秒でBと7,393画素が異なり、境目に薄い斜線が残った(差は最大48/255)
終点の幅102、不透明度0%→100%Aと全画素が一致アルファでは1秒から3秒までの48フレームすべてがBと全画素一致。ルミナンスでも1秒・2秒で一致

白のMATでは、アルファとルミナンスのどちらでも、比べた6つの時刻で同じ描画でした。

MATだけを描画すると、幅0の0秒でも境目にわずかに不透明な部分があり、幅100の1秒でも境目が完全には不透明になっていませんでした。

帯の縁が半透明に描かれることは確かめましたが、AEの内部でなぜそうなるかまでは分かっていません。

幅102と不透明度のキーフレームは、この練習の条件(640×360・24fps・8bpc、帯の間隔100、回転45度)で確かめた値です。

解像度・帯の間隔・角度・色深度・GPUの有無を変えた場合に、同じ値でよいかは確かめていません。

サンプル3:複数シェイプを使った方法

複数シェイプトランジション
  • やり方はサンプル2と同じ
  • 複数シェイプを作成してそれぞれに左右にアニメーションをつけたヌルを関連付ける

After Effectsのほかの操作は、まとめからご覧いただけます。

シェイプを斜めに動かして、画面を覆う簡単な例の画面です。

シェイプレイヤー「DiagonalShape431」の「回転」は0x+45.0°、「スケール」は100.0、100.0%、「不透明度」は100%でした。

0:00:01:08では、「位置」が-889.3、360.0で、オレンジの帯が左から斜めに画面へ入っています。

回転45度のシェイプと位置アニメーションによる斜め切り替え
2026-10-13撮影。Adobe After Effects 26.5.0 (Build 89)、Windows 11 Pro (10.0.26200)。実機画面、原寸保存。

0:00:02:13では、「位置」が640.0、360.0で、画面全体がオレンジになりました。

下には、青い「BlueScene431」のレイヤーがあります。

シェイプが画面全体を覆ったトランジションの終了状態
2026-10-13撮影。Adobe After Effects 26.5.0 (Build 89)、Windows 11 Pro (10.0.26200)。実機画面、原寸保存。

撮影した画面のフレームレートは25 fpsです。

本文の例は24 fpsで、0秒から1秒の切り替えなので、時刻や数値は同じではありません。

リピーターやマットの設定は、この画面には写っていません。

リピーターとマットの設定を確かめた結果は、「シェイプの白い帯をBのマットにする設定」の節にあります。

標準エフェクトで斜めにする

ブラインドは、指定した方向と幅の帯で下のレイヤーを出していくエフェクトです。

「方向」を45度にすると斜めになります。

画質を「最高」にすると、帯がサブピクセル精度で動きます。

「ドラフト」のままだと、斜めの線がガタつくことがあります。

なお、ブラインドの公式な対応色深度は8bpcと16bpcです。

32bpc処理への対応とは区別してください。

32bitのプロジェクトで使う場合は、リニアワイプのほうが向いています。

エフェクト斜めにする設定使える色深度
ブラインド方向8 bpc・16 bpc
リニアワイプワイプ角度(90°で左から右)8・16 bpc、CS6以降は32bitも
カードワイプ反転の軸・方向8 bpc

カードワイプは行と列を1〜1000まで指定できます。

行と列の数を変えると、ベネチアンブラインドのような見た目にもできます。

反転の順序に「グラデーション」を選ぶと、黒い部分から白い部分へ順に切り替わります。

斜めのグラデーションを用意すれば、斜めに流れる切り替えになります。

※ 各エフェクトの仕様は、Adobe公式ヘルプ「After Effects のトランジションエフェクト」で2026年9月19日に確認しました。

切り替わらないときの確認と戻し方

条件結果
白い帯そのものが見えるMATのビデオスイッチとBのマット参照先を確認
AとBが逆になる重なり順、0→100の向き、マットの反転を確認
Bが半透明になるBの不透明度とMATの塗り・アルファ/ルミナンスを確認
32bpcで精度を保って切り替えたい既存プロジェクトの色深度を変えず、32bpc対応のリニアワイプを検討

1秒を過ぎても境目に細い斜線が残る場合は、長方形の終点の幅を帯の間隔より少し広げて、隣の帯と重ねます。

2026年10月16日に、MATの塗りをRGB各0.5の灰色にしてルミナンスで使うと、帯の部分はBにならず、Aと混ざった色になりました。

灰色のMATをルミナンスで使い、帯の部分がAとBの混ざった色になったAfter Effectsの画面
2026-10-16撮影。Adobe After Effects 26.5.0 (Build 89)、Windows 11 Pro (10.0.26200)。MATの塗りをRGB各0.5の灰色にして、ルミナンスで使った0.5秒時点の実機画面(ウィンドウのタイトルバーのみ切り取り)。帯の部分はBにならず、Aと混ざった色になった。

1秒の時点でも画面の左上の点は、Aの色(RGB 20,64,166)とBの色(RGB 217,64,13)の間の色(RGB 119,64,90)でした。

同じ灰色のMATをアルファに切り替えると、白のMATと比べた6つの時刻すべてで同じ描画になりました。

元の編集へ戻すときは、Bのマット参照を「なし」にしてからMATを非表示にし、Bも非表示にしてAだけを確認します。

2026年10月16日に、Bのトラックマットを画面で「なし」にし、Bのビデオスイッチをオフにすると、比べた6つの時刻すべてでAだけの画像と全画素が一致しました。

ブラインド方式はAのエフェクトスイッチをOFFにします。

エフェクトスイッチをオフにする戻し方は、確かめていません。

練習前の重なり順まで戻す場合は、別名保存したAEPを開き直します。

Adobe:トランジションエフェクト、Adobe:トラックマット。

シェイプを使ったアニメーションの記事は、ほかにもあります。

スポンサーリンク

まとめ

  • ブラインドエフェクトを使えば簡単に斜線トランジションが作れる
  • シェイプとリピーターを使うとより自由度の高い表現が可能
  • 白いシェイプをアルファまたはルミナンスのトラックマットにして素材を切り替える

よくある質問:After Effectsで斜めのトランジションを作るとき

斜めに切り替わるトランジションは、どの方法で作れますか?

標準のエフェクトでも作れます。

ブラインドは同じ幅の帯が並ぶ形、リニアワイプは1本の直線で切り替える形、カードワイプは格子状に分けて順に裏返す形、シェイプ+リピーターは帯の幅・間隔・本数を自分で決めたい場合に向いています。

決まった形でよければエフェクト、細かく決めたいならシェイプです。

ブラインドで、AからBへ1秒で切り替えるには?

AをBより上に置き、Aだけにブラインドを追加します。

「方向」を45度、「幅」を100、「境界のぼかし」を0とし、「変換終了」を0秒で0%、1秒で100%へ動かします。

0秒ではA、1秒ではBが全面に見えることを確認してください。

逆順に切り替える場合は、値を100→0へ入れ替えます。

2026年10月16日にAfter Effects 26.5.0で、640×360・24fps・8bpcの練習コンポで試すと、0秒はA、1秒以降はBと全画素が一致しました。

斜めの線がガタつくときは?

画質を「最高」にすると、帯がサブピクセル精度で動きます。

「ドラフト」のままだと、斜めの線がガタつくことがあります。

32bpcの精度を保って切り替えたいときは?

ブラインドの公式な対応色深度は8bpcと16bpcです。

32bpc処理への対応とは区別してください。

32bitのプロジェクトで使う場合は、リニアワイプのほうが向いています。

記事の表では、リニアワイプは8・16 bpcで、CS6以降は32bitも使えるとしています。

既存プロジェクトの色深度は変えずに、32bpc対応のリニアワイプを検討してください。

カードワイプでは、どんな表現ができますか?

行と列を1〜1000まで指定できます。

行と列の数を変えると、ベネチアンブラインドのような見た目にもできます。

反転の順序に「グラデーション」を選ぶと、黒い部分から白い部分へ順に切り替わります。

斜めのグラデーションを用意すれば、斜めに流れる切り替えになります。

シェイプの帯で切り替わらないときや、白い帯が見えてしまうときは?

白い帯そのものが見える場合は、MATのビデオスイッチとBのマット参照先を確認します。

AとBが逆になる場合は、重なり順、0→100の向き、マットの反転を確認します。

Bが半透明になる場合は、Bの不透明度とMATの塗り・アルファ/ルミナンスを確認してください。

1秒を過ぎても境目に細い斜線が残る場合は、長方形の終点の幅を帯の間隔より少し広げます。

640×360・24fpsの練習では、間隔100に対して終点の幅を102にし、MATの不透明度を0秒で0%、次のフレームで100%にすると、0秒はA、1秒以降はBと全画素が一致しました。

練習前の状態に戻すには?

Bのマット参照を「なし」にしてからMATを非表示にし、Bも非表示にしてAだけを確認します。

ブラインド方式は、AのエフェクトスイッチをOFFにします。

練習前の重なり順まで戻す場合は、別名保存したAEPを開き直します。

2026年10月16日に、Bのトラックマットを「なし」にしてBのビデオスイッチをオフにすると、Aだけの画像と全画素が一致しました。

ブラインド方式でエフェクトスイッチをオフにする戻し方は、確かめていません。

各エフェクトの仕様は、いつ確認したものですか?

Adobe公式ヘルプ「After Effects のトランジションエフェクト」で、2026年9月19日に確認しています。

バージョンによって画面や仕様が異なる場合があるため、使用中のバージョンの公式ヘルプも確認してください。

次に学ぶ・作業環境を選ぶ

学習を続けたい方や、作業環境を整えたい方は、目的に合うガイドをご覧ください。

After Effectsのおすすめ書籍

必要なPCスペック

周辺機器の優先度

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

須澤 元貴のアバター 須澤 元貴 代表社員

MOTOKI合同会社 代表社員。
アニメ・映像業界とゲーム業界で、2D・UI・3D・アニメーション制作、映像編集、ツール制作に携わってきました。
現在はWordPressを中心にWebサイトの制作とカスタマイズを手がけています。
著書に『Unity デザイナーズ・バイブル』『Unityゲーム プログラミング・バイブル 2nd Generation』(ボーンデジタル)。
岡山県出身、埼玉県在住。

目次