After Effectsでグラデーション背景を作る方法【2026年版】2点の位置と色・直線と放射状の使い分け

After Effectsで、単色より少し表情のある背景を作りたい。そんなときの入口が、描画エフェクトの「グラデーション」（英語名：Gradient Ramp）です。難しく感じる原因は、色選びと、色が変わる位置の調整を同時に考えてしまうこと。この記事では、まず2点で変化の方向を決め、次に2色を選び、最後にタイトルを載せて仕上げる順番で説明します。

こっこちゃん「色はきれいなのに、文字を置くとなぜか読みにくいんです」

白い鴉「背景だけで完成にせず、文字の置き場も一緒に決めると調整しやすいよ」

🎨 グラデーションは「2点と2色」の道具

一般にグラデーションとは、ある色から別の色へ連続して変わる表現です。ここで使う同名の描画エフェクトは、その変化を平面などのレイヤーに作ります。Adobe公式では直線と放射状に対応し、位置や色を時間とともに変えられると説明されています。

たとえば、配信待機画面の左側にタイトルを置くなら、左から右へ少しずつ色が変わる背景が考えられます。反対に、画面の一部をほのかに明るくしたいなら、放射状の形が候補です。どちらが上級という話ではなく、主役を見せたい場所との相性で選びます。

🧱 背景用の平面に適用する手順

まず、編集中のコンポジションを開きます。コンポジションは、完成画面と時間をまとめる入れ物です。初めて試す場合は、普段使う横長・縦長のサイズでかまいません。以下では説明用に横幅1920、高さ1080の画面を使い、平面の大きさと画面をそろえます。

1. 「レイヤー」→「新規」→「平面」で背景の土台を作ります。
2. 平面の設定で「コンポジションサイズ作成」を使い、コンポジションと同じ大きさにします。
3. 「背景_グラデーション」など、役割が分かる名前を付けます。
4. 平面を選択し、「エフェクト＆プリセット」で「グラデーション」を検索し、見つけたエフェクトをダブルクリックして適用します。
5. エフェクトコントロールで開始・終了の位置と色、グラデーションの形を調整します。
6. タイトルやキャラクターが上に見えるよう、背景の平面をその下に置きます。

英語表記では「Gradient Ramp」です。項目を探すときは、開始位置の「Start Of Ramp」、終了位置の「End Of Ramp」が目印になります。表示言語やバージョンで表記に差がある場合も、開始と終了が対になっていることを手がかりにしてください。ここでは、既定値に頼らず位置と色を自分で指定する流れにします。

平面の作成や大きさの変更から確認したい場合は、After Effectsの平面レイヤーの使い方を先に読むと、背景の土台を用意する部分を整理できます。ランプの操作中に、平面を作り直す必要があるのか判断しやすくなります。

背景を専用レイヤーに分ける理由

写真やキャラクターへ直接適用すると、元の素材まで変わり、背景だけのつもりが主役の見た目にも影響することがあります。最初の練習は、独立した平面を1枚作る形が分かりやすいです。タイトル、キャラクター、背景の役割が分かれ、修正したい対象を選び直せます。

この段階では、調整レイヤーや複数の描画モードを組み合わせる必要はありません。背景を作る目的なら、まず専用の平面だけで色の変化を完成させましょう。作りたい結果が見えてから構成を増やすと、何が見た目を変えているのか追いやすくなります。

↔️ 2点の位置と距離で、色の変わり方を決める

色が気に入らないと感じたとき、すぐ別の色を選ぶ前に2点の位置を見てみましょう。同じ配色でも、画面の端から端へ変わる場合と、中央付近だけで変わる場合では印象が異なります。「配色の問題」と「変化する範囲の問題」は、分けて直せます。

直線：2点を結ぶ方向に色を流す

直線のグラデーションは、開始点から終了点へ向かって色が変わります。上下に並べると縦方向、左右に並べると横方向、斜めに並べると斜め方向の流れになります。まず上下か左右のどちらかで作り、仕組みが分かってから斜めへ変えると違いを見比べやすいです。

説明用の1920×1080の平面なら、開始を（0,540）、終了を（1920,540）に置くと、画面中央の高さで左から右へ結ぶ例になります。これは推奨の固定値ではなく、画面の幅と高さから決めた練習値です。座標は横位置、縦位置の順で、今回は平面と画面の大きさをそろえて考えています。

この2点を同じ割合で上下にずらしても、横方向の流れ自体は変わりません。一方で、片方だけを上へずらすと、結ぶ向きが斜めになります。何を変えたのか確認しながら、1回に動かす点を1つに絞ると、結果を読み取りやすくなります。

ここで調整するのは、平面全体の「位置」ではなく、グラデーションの開始・終了の位置です。平面そのものを横へ動かすと、背景の端が画面へ入ってしまうことがあります。色の変化だけを変えたいときは、エフェクトコントロールで目的の項目を選んでいるか確かめてから操作します。

距離：離すと広く、近づけると狭く変わる

開始点と終了点を離すと、2色が変化する範囲も広がります。近づけると、短い距離の中で色が変わるため、境目が強く見えやすくなります。なだらかな背景を作りたいときは、まず2点が必要以上に近づいていないか確かめてください。

練習では、左右の端にあった2点を、開始（700,540）、終了（1220,540）へ近づけて比較してみます。配色を変えず、距離だけを変えるのが要点です。画面中央での変化が狭くなったら、色選びをやり直さなくても調整できることが分かります。

放射状：中心と広がりを作る

放射状では、開始点を明るさの中心、終了点を広がりを調整する目安として考えると扱いやすくなります。開始を画面中央に置き、終了を外側へ離して、まず円形の変化を見てください。端へ向かって暗くしたいなら、開始を明るい色、終了を暗い色にする例が考えられます。

中心は必ず画面の真ん中である必要はありません。右上を少し明るくすれば、左側のタイトルと明るい部分を分けられます。ただし、中心を移動すると文字の背景色も変わるので、配色だけを見ずに、最終的なレイアウトで確かめます。

練習の途中で見た目が分からなくなったら、最初に見やすかった位置へ戻し、色はそのままで比較します。良かった状態の値を短くメモしておけば、試した変更を取り消す判断もしやすくなります。「何となく良い色」ではなく、「この範囲が穏やかだから文字を置ける」と説明できる状態を目指しましょう。

🔤 2色は「きれいさ」と「文字の読みやすさ」で選ぶ

背景だけで気に入った配色でも、白文字を置くと読みにくいことがあります。タイトルカードや配信素材なら、色選びの途中で仮の文字を載せましょう。使う文字の大きさと長さも、できるだけ実際の予定に近づけます。「サンプル」の一言だけでは、長い配信タイトルの収まりまで分かりません。

最初は近い系統の2色で試す

色選びに迷ったら、青と青紫など近い系統の2色を候補にし、明るさを少し変えるところから始めます。これは必須の配色ルールではなく、色の変化を把握するための練習方法です。強く違う色を選ぶと、中間に出る色も含めて調整する対象が増えるためです。

落ち着いた配信待機画面なら、両端を暗めにそろえて差を小さくする例があります。明るい告知画面なら、淡い色どうしにして濃い文字を載せる例があります。白文字だから必ず暗い背景という固定観念より、実際に置いた文字と背景の差を見て決めることが大切です。

文字の後ろの変化を減らす

読みにくいときは、文字を太くしたり縁取りを足したりする前に、強く色が変わる箇所を文字から離してみます。タイトルを左へ置くなら、左側は比較的落ち着いた色にし、変化の中心を右へ寄せる方法があります。背景の見どころと、文字を読む場所を両立させる考え方です。

タイトルが2行になる予定なら、上の行と下の行の両方を見ます。上の行だけ読めても、下の行の背景が明るくなると、まとまりが崩れることがあります。配信画面では、タイトルだけでなく、日付、説明、名前などの小さい文字も置いた状態で調整してください。

仕上げでは、拡大した作業画面だけでなく、実際に使う大きさでも見ます。編集時は読める細い文字でも、画面全体を小さく表示すると背景へ沈む場合があります。まず画面に収まる表示で全体のバランスを見て、次に気になる箇所を拡大する順にすると、細部の美しさだけに判断が偏りにくくなります。

また、キャラクターの髪や衣装と背景の色が近いと、輪郭が分かりにくくなる場合があります。背景を少し暗くする、明るい中心を顔の近くからずらすなど、まず2点と2色で解決できるか試します。飾りを増やす前に、主役が見えるか確かめる順番です。

🌱 静止画が整ったら、背景だけをゆっくり動かす

グラデーションの位置や色には、時間による変化を付けられます。最初は放射状の中心だけを小さく動かすと、調整するものが少なくなります。文字、2点、2色を一度に動かすと、どこが読みにくさの原因なのか分かりにくいため、背景の1項目から始めましょう。

1. 0秒で静止画として見やすい背景を作り、開始位置のストップウォッチをオンにします。
2. 2秒へ移動し、開始位置だけを少し横へ動かします。
3. 4秒へ移動し、開始位置を0秒と同じ値へ戻します。
4. 0秒から4秒まで再生し、途中でもタイトルが読めるか見ます。

0秒・2秒・4秒は、操作を学ぶための例です。画面の用途や表示時間に応じて変えてかまいません。ここでの目標は、背景に動きがあると分かることより、文字を読む邪魔をせず画面に変化があることです。見せたい動きの大きさは、最終的な映像を見て決めます。

キーフレームは、その時刻の値を記録する点です。ストップウォッチをオンにした後は、別の時刻で値を変えるとキーフレームが追加されます。動きが付かないときは、時刻を移動せず同じキーフレームの値だけを書き換えていないか確認してください。

例のように最初と最後を同じ値にしても、それだけで滑らかなループが完成するとは限りません。境目で速度が変わると、つなぎ目が分かる場合があります。待機画面として繰り返すなら、終わりから始まりへつないだ状態で再生し、色だけでなく動きの続き方も見ます。

キーフレームがどの項目に入っているか分からなくなったら、After Effectsのプロパティを開くショートカットが役立ちます。背景に付けた動きだけを探したいときに、表示する項目を整理できます。

🔎 段差が出る・見えないときの確認順

グラデーションで色の境目が帯のように見える現象を、バンディングと呼びます。配色の境目を意図的に狭くした見え方と、滑らかなはずの部分に段差が出る現象は分けて考えましょう。まず静止した状態で、2点の距離を十分に取っても段差があるか確かめます。

拡散と色深度は、原因に合わせて試す

エフェクトの「Ramp Scatter」は、色を散らして段差を目立ちにくくする調整です。公式日本語ヘルプでは「カーブ拡散」と説明される項目です。画面の表記が異なる場合は英語名を手掛かりに確認します。最初から大きな値を決め打ちせず、拡大表示と通常の表示を見比べ、ざらつきが気にならない範囲で検討してください。

プロジェクトの色深度も候補です。色深度は、色をどれだけ細かく扱えるかに関わる設定です。Adobeは、16bpcや32bpcでの計算がグラデーションの段差軽減に役立つ一方、出力形式の色深度が低い場合は、プロジェクト側の変更だけでは解消しないと説明しています。「32bpcにすれば完成」とは考えず、出力後まで見ます。

作業画面ではなく、出した動画に問題がある場合

作業画面と書き出した動画では、圧縮や再生環境によって見え方が異なることがあります。長い動画を毎回出す前に、問題が分かる短い範囲を書き出して比較しましょう。配色、拡散、色深度、書き出し設定を一度に変更すると、どれが効いたのか分からなくなるので、1つずつ試します。

全体の色まで変わるときは、段差だけを直そうとせず、After Effectsで書き出し後に色が変わる時の確認手順へ進んでください。色の管理とグラデーションの形を別の問題として調べると、2色を何度も選び直す遠回りを避けられます。

「見えない」場合は、ランプの設定を複雑にする前に、背景平面が今の時刻に存在するかを確認します。開始点を動かしても変わらないときは、別のレイヤーを選んでいないか、上に不透明な背景が重なっていないかも見てください。作り直す前に、表示と適用先を確認するだけで解決する場合があります。

❓ よくある質問

写真や画像を用意しなくても作れますか？

Aはい。この記事の方法は、After Effectsで作った平面を土台にします。背景写真を探さなくても、2色の変化だけでタイトルカードや配信待機画面の下地を作れます。主役を載せた状態で、必要な情報が読み取れるか確認しましょう。

文字そのものをグラデーションにしたい場合も同じですか？

A色の変化を作る考え方は共通ですが、この記事は全面の背景を対象にしています。文字の内側だけへ見せる場合は、文字と背景を分けた上でマットなどを使う方法があります。背景の練習が終わってから、文字の形に合わせて見せる工程を追加すると整理しやすいです。

直線と放射状は、どちらから覚えるべきですか？

A最初は直線で左右に2点を置くと、位置と色の関係が見やすいです。その後で放射状へ切り替え、開始点を中心として動かしてみてください。同じ2色を使ったまま形だけ変えると、配色と形の違いを混同せず比べられます。

きれいな背景なら、文字を載せる前に完成としてよいですか？

Aタイトルや配信画面に使うなら、文字やキャラクターを載せてから仕上げます。背景単体ではきれいでも、明るい部分と白文字が重なることがあります。実際に使う文字量と配置で確認し、必要なら開始点や終了点を動かしましょう。

こっこちゃん「色を選び直す前に、変化する場所を動かせばいいんですね」

白い鴉「そう。位置と色を分けて考えると、直す理由がはっきりするよ」

📋 まとめ：背景の役割から、2点と2色を整えよう

挿絵はAI画像生成で制作した概念図です。実際の操作画面とは異なります。機能・操作の説明は2026年11月5日に公式資料で確認しました。