スマホの画面や斜めの看板に、映像やデザインをぴったり合わせたい。そんなときに使えるのがコーナーピン（Corner Pin）です。画像の四隅を個別に動かして、平面に遠近感をつけられます。今回はグリッド画像で仕組みを確かめ、画面へのはめ込みと看板の合成へ展開します。
この記事で使用したAEプロジェクトの内容と利用条件は、記事の最後の配布欄にまとめています。
完成例：四隅を動かして、画像を変形する
右の画像だけにコーナーピンを適用し、四隅の位置を変えています。文字だけでなく背景のグリッドも一緒に変形するため、どの部分が伸びたり縮んだりするかを確認できます。
エフェクトの場所と、素材の用意
エフェクト → ディストーション → コーナーピンにあります。「エフェクト＆プリセット」で「コーナーピン」または「Corner Pin」を検索しても追加できます。
| 項目 | 今回の基本例 |
|---|---|
| 制作環境 | After Effects 26.5（26.5×89）／macOS／8bpc |
| 表示用コンポジション | 1280×720／30fps／6秒 |
| 素材 | 640×360のグリッド画像。PASはArial Bold・145px |
| 変形を作るコンポジション | 素材と同じ640×360／30fps／6秒 |
| 素材レイヤーの変形 | アンカーポイント[320,180]／位置[320,180]／スケール100%／回転0° |
| 比較動画内の表示 | 素材と変形後のコンポジションを、それぞれ80%に縮小して表示 |
文字や図形を複数使う場合は、先にひとつのコンポジションへまとめます。コーナーピンをかけるのは、そのまとまったレイヤーです。説明用の背景や見出しは別にしておきます。
四隅の名前と、座標の見方
設定は左上・右上・左下・右下の4つです。それぞれの数値は[X,Y]で、Xを増やすと右、Yを増やすと下へ動きます。640×360の素材なら、初期値は左上[0,0]、右上[640,0]、左下[0,360]、右下[640,360]です。
コーナーピンの座標は素材レイヤーを基準にしています。レイヤーの位置やスケールを変えると、同じ数値でもコンポジション内の見え方が変わります。まず基本例のように、素材と同じサイズのコンポジションで、レイヤーの変形を初期状態に揃えると対応を追いやすくなります。
数値を一つずつ変えて比較する
左上のX：左上だけを右へ寄せる
Xを増やすほど、左上が右へ寄り、上辺が短くなります。左下は固定しているため、左側の辺が斜めになります。レイヤー全体の位置を動かす場合とは、変形する範囲が違います。
右上のY：右上だけを下げる
Yを増やすと右上が下がり、上辺に傾きがつきます。どの角が動くか分かりづらいときは、グリッドや四隅の目印がある素材で、1点だけを調整してみてください。
基本例の作り方：四隅に2点ずつキーを入れる
- 640×360・30fps・6秒のコンポジションに、画像や文字とグリッドを用意します。今回の素材は、コンポジション全体に背景色がある状態です。
- 同じ640×360の別コンポジションへ素材を入れ、そのレイヤーにコーナーピンを適用します。アンカーポイントと位置は[320,180]、スケール100%、回転0°に揃えます。
- 1秒へ移動し、左上・右上・左下・右下のストップウォッチをONにします。数値は初期値のままです。
- 3秒へ移動し、四隅を下の表の「3秒」の値に変更します。4項目ともリニア補間にして再生します。
- 表示用コンポジションに元の素材と変形後を並べると、どの角の移動が形へ影響しているか比較できます。
| 設定 | 1秒（初期値） | 3秒（変形後） |
|---|---|---|
| 左上 | [0,0] | [110,50] |
| 右上 | [640,0] | [570,0] |
| 左下 | [0,360] | [50,330] |
| 右下 | [640,360] | [620,280] |
静止した面へはめ込むだけなら、四隅にキーを入れる必要はありません。次の2つの応用では、四隅は固定し、はめ込む素材の中だけを動かしています。
応用1：スマホ画面に映像をはめ込む
AE内で作った架空のスマホ枠を使った図解です。画面に入れる素材は400×720の縦長コンポジションで、棒グラフが動きます。その四隅をスマホ画面の内側へ合わせます。
| 項目 | スマホ作例の条件 |
|---|---|
| メインコンポジション | 1280×720／30fps／6秒 |
| 画面用素材 | 400×720。配布AEPでは07_PHONE_SCREEN_SOURCE |
| アンカーポイント／位置 | どちらも[200,360] |
| スケール／回転 | 100%／0° |
| 四隅のキー | なし |
| 左の元映像プレビュー | 50%表示。はめ込みレイヤーとは別です |
| 四隅 | 設定値 |
|---|---|
| 左上 | [816,256] |
| 右上 | [1000,220] |
| 左下 | [832,592] |
| 右下 | [1042,550] |
- 画面へ入れる映像を400×720のコンポジションへまとめます。素材全体が画面に入るため、不要な透明余白は作らないようにします。
- メインにスマホ枠を用意し、その前面へ画面用の素材レイヤーを置きます。今回の数値を使う場合は、アンカーポイントと位置を[200,360]、スケール100%、回転0°に揃えます。
- 素材レイヤーにコーナーピンを追加し、表の4点を設定します。別のスマホ枠を使う場合は、画面の内側の四隅へ合わせ直してください。
- 再生して、スマホ枠は静止したまま、中の映像だけが動くことを確認します。素材を差し替えるときは、画面用コンポジションの中身を変更します。
この作例は、素材レイヤーの左上をメインコンポジションの左上に揃えています。そのため、メイン上の位置と同じ数値で四隅を指定できます。レイヤーの位置やアンカーポイントを変えた場合は、表の数値をそのまま使わず、画面との対応を確認してください。
応用2：斜めの看板にデザインを合わせる
次は960×540の横長デザインを、斜めの看板へ合わせます。スマホと同じく四隅は固定し、デザイン内のアニメーションをそのまま看板上で見せています。背景の建物と看板枠も、AE内で作った図解です。
| 項目 | 看板作例の条件 |
|---|---|
| メインコンポジション | 1280×720／30fps／6秒 |
| デザイン素材 | 960×540。配布AEPでは09_SIGN_DESIGN_SOURCE |
| アンカーポイント／位置 | どちらも[480,270] |
| スケール／回転 | 100%／0° |
| 四隅のキー | なし |
| 四隅 | 設定値 |
|---|---|
| 左上 | [315,284] |
| 右上 | [976,234] |
| 左下 | [315,570] |
| 右下 | [998,550] |
- 看板に入れる文字・色面・動きを960×540へまとめます。配布プロジェクトではPASのデザインと、伸び縮みする線を入れています。
- メインへ看板枠とデザイン素材を配置します。素材レイヤーのアンカーポイントと位置を[480,270]、スケール100%、回転0°に揃えます。
- デザイン素材にコーナーピンを追加し、表の4点を設定します。左上・右上を上辺へ、左下・右下を下辺へ合わせます。
- 枠とデザインの間に不自然な隙間がないか確認します。別の看板を使う場合は、その面の四隅に合わせて数値を調整します。
透明な余白があると、見た目の端が合わない
コーナーピンで指定するのは、文字やロゴの見えている端ではなく、透明な余白も含む素材レイヤー全体の四隅です。同じ大きさの文字でも、素材コンポジションを大きくすると、同じ変形先の中で文字が小さく見えます。
画面や看板の面へ中身をいっぱいに入れたいときは、まず素材コンポジションの寸法と縦横比を整えます。角の数値だけを調整し続ける前に、余白が含まれていないか確認してみてください。
うまくいかないときの確認ポイント
画像がねじれる・上下が入れ替わる
左下と右下など、角の対応を取り違えていないか確認します。まず初期値へ戻し、左上・右上・左下・右下の順に合わせると見失いにくくなります。
数値を入れたのに、位置が合わない
素材のサイズに加え、適用レイヤーの位置・アンカーポイント・スケール・回転を確認します。今回の表は、各作例に記載した変形の値を前提にしています。設定値を流用するときは、素材条件も揃えます。
はめ込んだ文字が読みにくい
平面を斜めにすると、細い文字や小さな要素が縮んで見えます。仕上がりの表示サイズを確認し、必要なら素材側の文字を大きく、情報量を少なくします。フォントを置き換えた場合も、素材側の配置を見直してください。
動く実写画面にも、そのまま使える？
今回の応用は静止した枠へ4点を手動で合わせる方法です。カメラや画面自体が動く実写では、面の動きを追うトラッキングなどが別途必要になります。コーナーピンとモーショントラッカーの関係は、Adobe公式のコーナーピンの説明でも確認できます。
次に試す表現
輪郭に不規則なゆらぎを足したいときは、タービュレントディスプレイスの解説も参考になります。ほかの変形表現は、AEエフェクト辞典の「ディストーション」から探せます。
作例プロジェクトの配布
基本の四隅アニメーション、2種類の数値比較、透明余白の比較、スマホ画面、看板の合成、四隅の対応図を収録した編集可能なAEプロジェクトです。
| 項目 | 内容 |
|---|---|
| 版番号／容量 | v1.0／約146KB（149,588バイト） |
| 内容 | pas-corner-pin.aep／はじめに.txt |
| 確認環境 | After Effects 26.5（26.5×89）／macOS／8bpc |
| 追加プラグイン・外部素材 | 不要。AE標準のコーナーピンとAE内で作った素材を使用 |
| 使用フォント | Arial Bold／Arial／ヒラギノ角ゴシック W6。フォント本体は同梱していません |
| 利用条件 | 学習・個人制作での利用と改変は可。商用利用は個別相談 |
フォントがない場合は、お手持ちの書体に置き換えて配置を調整してください。今回の確認は8bpcの図形・文字の作例で、別OS・古いAEバージョン・16/32bpc・実写の追跡合成は未検証です。商用利用の相談はPASのお問い合わせからお願いします。
コメント