はじめに
この記事は、サイバーエージェントのUIUXLab Advent Calendar 2025の企画として、「AI × デザイナー：拡張機能を自作して“面倒”を全部なくす方法」について書いています。
Advent Calendar 期間中は、25人のデザイナーが毎日テーマに沿った記事を公開していきます。
私も参加者の一人として、「AIにコードを書いてもらいながら、After Effects のスクリプトをどう作っているのか」を紹介します。
Advent Calendar から飛んできた方向けに、まずは簡単に自己紹介をさせてください。
自己紹介
サイバーエージェントのゲーム事業部（SGE）のコアクリエイティブ本部に所属している
UIアニメーションデザイナーのたかゆと申します。
2024年9月にサイバーエージェントへ転職をし、翌年2月頃から AI を使った After Effects 用スクリプト制作 にハマりました。
そこから約10か月で 7 本のスクリプトを作成しています（試作品も含めると 10 本以上）。
もともとスクリプトの制作経験はまったくなく、エンジニアでもありません。
当時はコードもほとんど読めない状態でしたが、「AIブームが来ているし、自分も何か作ってみたい」という軽い危機感から動き始めました。
まずは Adobe Firefly から入り、Stable Diffusion や Invoke などの生成AIでイラスト・ロゴ・アセット・テクスチャなどを試していきました。
その延長で「簡単なスクリプトも AI で作れるのでは？」と試してみたところ、これが想像以上に楽しく、そこからスクリプト沼に落ちていきます。
最初に作ったスクリプトはAE上で動くポモドーロタイマーでした。
AE上にゲージが表示されてポモドーロタイマーの役割で休憩になったら強制的にダイアログが出て休憩させてくれる機能です。
これはその内気が向いたら公開するかもしれません。
他にもこれまでにこんなスクリプトを作っています。
- AlignLab：複数レイヤーを等間隔に直線配置／パスに沿って配置できるツール
- ShapeEditor：シェイプレイヤーの塗り・線のエフェクト化、テキストのシェイプ化、 パスを常時選択状態にして編集しやすくするツール
- AutoLayout＋：コンポジション内の余白削除・復元、平面やヌルの一括統合、整列などをまとめたレイアウト支援ツール
- AESpritGrid：ワンクリックで指定アニメーションをスプライトシート状にタイリングするツール
- SaveAnimation：アニメーションのテンプレート化、レイヤーカンプ保存、スクリーンショット取得をまとめたツール
- Grupico：タイムライン上に疑似的なグループを作り、レイヤーを整理しやすくするツール
- ColorConductor：カラーパレット表示・カラー検索・カラー置き換えをまとめたカラー管理ツール
スクリプトを作る前に知っておいてほしいこと
今回作るスクリプトはとても多機能なスクリプトになります。
販売や他の人が使うことを想定したスクリプトのため、作るのにはとても時間がかかっています。
しかし、自分だけの「今この機能が欲しいんだよな」というピンポイントの願いを叶える場合は今回の制作の記事をヒントに作成してもらうと、5-30分で作成することができると思います。
そこを知ってもらいつつ、ちょっと重めの公開できるスクリプトを作ってみようと思う方や、スクリプトはどう作っているのか気になる方は読み進めていただければと思います。
今回つくるもの
今回の記事では、MacのAfter Effects 用のカラースウォッチ＋カラー検索・置き換えツール を題材に、私がどのように AI と一緒にスクリプトを作っているかを紹介します。
きっかけはとても単純で、「よく使う色をパレットに登録しておけたら、毎回カラーピッカーを開かなくて済んで便利そう」という発想でした。
ただ、「ちょっと便利」だとスクリプトを入れてまで使ってもらえない と考えています。
導入や学習の手間を上回るくらい「めちゃくちゃ楽になる」機能でないと、日常的には使われません。
そこで、
- 自分が欲しい「パレット登録」機能に加えて
- 他の人にとっても価値がありそうな機能
を足していく方針にしました。
まずは以下の3点を最小セットとして定義します。
- カラーパレットを UI に表示し、クリックで HEX コードをコピー
- コンポジション内で使用されているカラーの検索
- 検索したカラーを任意のカラーに一括置き換え
準備したもの（ツール環境）
スクリプト制作には、主に次の3つを使っています。
| ChatGPT | Claude | Cursor |
| 有料版 5.1Thinking コード生成をしてもらう | 有料版 Opus4.1 コード生成をしてもらう | 無料版 コードを開くために使用 |
全てアプリ版を使用します。
セットアップ手順
Cursor の設定
macOS の「システム設定 → プライバシーとセキュリティ → フルディスクアクセス」で Cursor を許可。
AE スクリプトの保存場所を準備
/Applications/Adobe After Effects 2025/Scripts/ScriptUI Panels に jsx ファイルを配置
例：AE_ColorPalette.jsx
Cursor でスクリプトを開く
上記 jsx を Cursor で開いて、最初は中身を空にしておく。
ChatGPT と Cursor を連携
ChatGPT 側の「Tab 連携」を有効にしておくと、 ChatGPT が提案したコードをそのまま Cursor に貼り付けやすくなります。
スクリプトを作ってみる
【検証環境・互換】
- 検証OS：macOS 14.x／Windows 11
- After Effects：2025（24.x）日本語版で動作確認
- 互換：CC 2020以降のExtendScript＋ScriptUIで概ね動作（UI差異あり）
スクリプト制作の指示を出す
ChatGPTにスクリプト制作の指示を出します。
AIへの指示出しするときは「短く具体」「初期→追加/修正」の指示で初めていきます。
最初から全部の仕様を詰め込むより、動かして直す前提で伝えます。
- 初期指示（最小UI）
- AE2025向けScriptUIで、カラーパレット機能を追加。クリック一回でHEXコピー。ダイアログは出さない。日本語UI。検証用に最小構成で。
- 追加/修正指示指示
- 12×2のカラーグリッドを作成し、カラーパレットの余白ゼロ。選択中はアウトライン表示。
- グループA/B/Cをプルダウンで切替。『色を追加／削除』ボタンをUI下に並べる。」
- 反映ボタンが塗りに効かないので修正して。（エラー画像、ログを貼って調べてもらうなど）
追加と修正指示を出すときのポイント
なるべく1~2の追加/修正で1指示くらいを目安に行います。
・初期指示で出してもらった機能
この少ない情報でここまでUIを出してくれたのはすごいと思いますが、実際使えるかの検証を行なっていきます。
反映ボタンを押してシェイプレイヤーに対して色を追加できるか操作してみましたが、全く機能せず。
基本的には一度の指示で問題なく動くスクリプトが出ることはまずあり得ないので、ここからバグの状況を伝えて修正していくことになります。
つまずきと解決
ChatGPTで5回ほど修正指示を出しましたが、反映ボタンは一向に動かなかったので、ここからはClaudeへコード全文を貼り付けて、指示を出します。
Claudeへ乗り換え
AEのスクリプトで反映ボタンがシェイプレイヤーの塗りに対して効かないので修正してほしい 修正が必要な箇所をビフォアフで出して
Claudeでは修正箇所に必要な箇所をビフォーアフターで出してもらう必要があります。
何も指摘せずに修正してと伝えると、コード全文が出力されてしまいます。
このようにBeforeの文章を検索し、Afterに置き換えるだけなので簡単に修正ができます。
また、この方法で修正を繰り返していくと、なんとなくこのコードがこういう役割を持っているというのが分かってもきます。
Claudeでは3回ほどやり取りをした後、ようやくシェイプレイヤーに色を反映することができました。
Geminiでも確認をする
次に、Gemini3が最近リリースされたので、Geminiで実際にPhotoshopのようなカラーパレットを入れられるか試してみます。
AEのスクリプトでカラーパレットを作ろうとしているが、UIにカラーの色をグリッド状に配置して出すことはできる？
以下コード全文貼り付け
結果はスクリプトが実行できないエラーが出てしまいました。
この画像をそのままGeminiに貼り付けて改めて調査してもらい新しくコードを出してもらいますが、結果はうまくいかないため、Claude、ChatGPTをメインにスクリプト開発をしていくことにします。
デバッグ機能を追加すると修正が早くなる
エラーが頻発する時はデバッグ機能の追加をGPTに相談し、ダイアログで出るようにするか、JSONデータで書き出してもらうようにすると、どこでエラーが出ているのかがすぐにわかるようになるのでおすすめです。
指示出しの悪い例
AI に一度に「修正＋機能追加＋UI変更」を全部投げると、高い確率でスクリプトが壊れます。
例えば、こんな指示です：
スウォッチのグループの切り替えがうまくいかないので修正したい。機能追加でカラー選択中はアウトラインの表示と、その色を使用しているレイヤーの検索機能を追加したい。UIの方も画像を参考に配置してほしい
- バグ修正
- 機能追加 × 2
- UI レイアウトの変更
が全部混ざっています。
結果として、AI は「どこからどう直すか」を差分ではなく ほぼ書き直し のコードを返してきます。
そのため、
- 1回の指示につき、修正は多くて 1〜2 個まで
- UI の大きな変更は、機能がある程度固まってからまとめて依頼
というルールで進めると、安定して開発を進められました。
作り直す
UI上に色のボタンを追加することができるのか、改めて順序立てて作っていきます。
まずは、UIに様々な色をグリッド表示できるかを試します。
Photoshopのカラースウォッチのように、UI上にグリッド上にカラーを表示したい
何度かの修正後に、UIにカラーを表示させることができるようになりました。
ここに以下の要件を追加します。
- カラーをクリックすることでHEXをコピー
- 色追加ボタンの追加
- 選択色を削除ボタンの追加
- 選択色を編集ボタンの追加
追加した後、色を追加してもUI上に表示されなかったので修正を繰り返します。
修正後は問題なくカラーパレットが表示されるようになり、色もコードで追加できるようになりました。
これで最低限のカラーパレットとしての機能は作ることができましたが、まだまだ改善していきますが、色の反映は不要と判断し追加することをやめ、
もっとよく使いそうな機能を作っていくことにしました。
細かく詰めていく
- カラーをクリックすると中央揃えになるので修正したい(バグ)
- カラーをクリックすると選択、2度目のクリックでコピーになるが、一度のクリックでコピーまで行いたい。
その際にダイアログでコピー完了の報告は不要なので削除したい（修正） - グループ名の初期セットはA ,B,Cの三つを作成（追加）
- 左グループリスト、右にスウォッチで作成して欲しい（修正）
- フォルダを追加／削除機能を入れたい（追加）
- グループの名前変更をダブルクリックで変更可能にしたい（追加）
最低限の機能を入れた状態は完成
ここから使いやすさや追加機能を入れて調整していきます。
- 名前変更ボタンの削除、追加ボタンを画像に置き換えられるように対応、削除ボタンも画像に置き換えられるように対応したい（追加）
- カラー同士の隙間を無くしたい（修正）
- グループの横幅を縮めたい（修正）
- 各ボタンをアイコン化したい（追加）
- 塗り置き換え機能を追加したい（追加）
- カラーをドラッグ&ドロップで入れ替えたい（追加）
- グループをプルダウンに変更（修正）
- 設定画面でカラーの選択色の削除ができるようにしたい（追加）
- カラー検索機能を追加したい（追加）
- 検索したカラーを置き換える機能を追加したい（追加）
UIをGPTと相談して使いやすいものを模索していきます。
ここで指定した色を一括で置き換える機能を追加しています。
最終的に、カラーパレットのUIを極力シンプルにし、必要な項目を「検索/置換」のダイアログ内に集約させました。
検索/置換は、コンポジション内のカラーを全て検索し、チェックボックスがある項目を置き換える機能になります。
さらに、HSB項目をスライダーで変化できるようにし、塗りで使用されている色とグラデーションで使用されている色を検索、置き換えできるようにしています。
色相彩度の統一ボタンも用意したので、色の統一感を出したい時に使用できます。
また、カラー単体を押すとカラーピッカーが開くようにもしています。
最終的に実装した機能
1. カラーパレット周り
◆ パレット＆グループ管理
- 複数グループ（ベーシック / アクセント / モノトーン / ビビッド / ブライト / ディープ / ライト など）
- グループ名の変更・追加・削除（設定ダイアログ＋プルダウン）
- 設定ダイアログで複数パレットの一括削除
- 「初期化」で初期グループ、カラーセットに戻す機能
- JSON で AE_color_palette として保存／読み込み（環境間共有前提）
◆ パレット UI
- カラーパレット横 12 マスまで拡張
- プルダウン下にパレット＆「色追加」「削除」ボタンなどを整理レイアウト
- カラー選択中がわかるアウトライン表示
- クリック一回で HEX コピー
- パレットの余白ゼロ調整
◆ アイコン周り
- 画像アイコン化
- アイコン用フォルダ構成
2. 色追加
- 「色を追加」ダイアログ
- AE 標準カラーピッカーを呼び出し
3. カラー検索・置換（塗り）
◆ 検索対象
- 「開いているコンポジション」全体を検索
- プリコンポジションを走査
- 選択レイヤーの有無に関係なく、「開いているコンポ全体」が対象
- 非表示・オフになっているカラーは除外
◆ 対応オブジェクト
- シェイプレイヤーの塗り・線（単色）
- テキストの塗り・ストローク（単色）
- エフェクトのカラー多数：
- Fill / Tint 系
- CC Particle World の Birth / Death / Color At X% / Fog Color
- 各種レイヤースタイル（ドロップシャドウ、光彩、サテン、カラーオーバーレイ、グラデーションオーバーレイ、境界線…）
- 他、対応済みエフェクトのカラー全般
◆ 検索結果 UI（塗り）
- 専用ダイアログ「カラー検索/置換え」
- 検索ボタンを押すと、ダイアログ表示＋同時に検索実行
- 結果は：
- カラープレビュー
- 対象の HEX
- チェックボックス（反映対象）
- 「塗り(n)」のように件数表示
- ページ送り（件数多い場合のページング）
- 全体チェック ON/OFF チェックボックス
4. グラデーション対応
◆ 対応範囲
- 4色グラデーションなど、エフェクト系のグラデーション
- 検出したグラデーションカラーは下の「グラデーション」枠に別表示
- 塗りとグラデーションは完全に別カウント・別 UI 領域
5. 置換・色相/彩度/明度調整
◆ 置換ロジック
- 「置換」ボタンで、チェックされているカラーだけを置換
- マッピング方式に変更：
- 「色ごとに全走査」ではなく
- 「すべての置換ペアからマップを作り → 1回の全走査で済ませる」
◆ HSBベースの調整UI
- H: 色相変化
- 各色の元のHを基準にオフセット
- 検索結果のそれぞれの色をベースに回転（青は青から、赤は赤から回す）
- S: 彩度変化
- -100〜+100
- デフォルト 0
- B: 明度変化
- -100〜+100
- デフォルト 0
- スライダーをドラッグで変更
- スライダー変更時に即プレビュー更新（変更後カラーに反映）
6. ダイアログ構造・操作性
- 検索／置換は 専用ダイアログとして独立
- ダイアログ内レイアウト：
- 上部：HSB調整エリア
- 中央左：塗りの一覧（スクロール＋ページング）
- 中央右：グラデーションの一覧（スクロール＋ページング）
- 下部右：
- 「反映」ボタン
- 「閉じる」ボタン（右下寄せ）
- 左下あたり：色検索ボタン
- 反映ボタン押下で：
- 現在の HSB 設定を反映
- チェックされた色のみ置換
- その後リストも更新（別途「更新」ボタンは削除）
7. パフォーマンス対策
- 一時ヌルの作成は必要最小限（1回で済むように整理）
- 色ごとの重複検索を避けるためのマッピング・キャッシュ
- プリコンポ多階層でも同じコンポを何度も走査しないようにキャッシュ
- 置換対象が多いときもマップ検索で高速化
- 検索結果リストもページング＋スクロールでUI負荷を軽減
制作にかかった時間とラリー回数
時間
30-40時間くらい？
毎日2時間-3時間ほど作業して、少しづつ進めていました。
コード知識0の状態で開発をしているので、基本的にどんなスクリプトを作るにしても最低10時間はかかっています。
エラーがないことがなく、つまづいては修正の繰り返しで作っていってます。
ラリーの回数
300~500回くらい？
（小さく直して積み上げる）
おそらくそのくらいはラリーしていると思います。
地道に一歩一歩進んでいくので、とてもやりとりが多くなりました。
まとめ
大規模なスクリプト制作は作るまではとても時間がかかりますし、お金を出して拡張機能を買う方が早い場合もあります。
ではなぜ自分で作るのかというと、自分が満足する機能を作れることや、他の人の不便を一括で解決できる機能を作れるからです。
例えば、レイヤーの整列/分布機能などは標準であるのですが、それよりも自分で自作して自分好みの配置にし、さらにこんな機能があると便利だなー
といった追加機能を入れることで、UIの表示領域を小さくしつつ、痒い所に手が届くようなUIと機能を作ることができます。
また、業務で面倒な作業の自動化、一括化といったこともスクリプトを作ることで時短することもできるので、一度面倒な作業があった時は作ってみていただきたいです。
小規模なスクリプトで一つだけの機能ならすぐに作れるので、時短や効率化は可能なので、まず最初は小規模な開発から始めてみてはいかがでしょうか。
単一機能なら数十分で作れると思うので、そこからトライしていくのがおすすめです。
ここまで読んでいただき、ありがとうございました。
