デザイナーがバイブコーディング生成AIでPhotoshopプラグインを自作してみた【マイネット夏ベントカレンダー2026｜2/6日目】
マイネットでUIデザイナーをしている宮司です。
長らくゲームのUIデザインに携わってきましたが、最近はアプリのディレクションや制作フローの改善にも関わっています。
無類のゲーム好きなのですが、最近はチル系のゲームで遊ぶことが多く、夜な夜な図書館を片付けたり、無人島で空き缶を拾ったり、スーパーの品出しをしたりして癒されています。
さて、昨年からエンジニア主導で始まった夏ベントカレンダーですが、今年はクリエイティブ部門からも寄稿することになりました。
クリエイティブの技術記事というと、「いかに良いデザインを作るか」という路線の記事が期待されそうですが、デザインのセオリーについては世に数多くある良書に任せ、今回は「いかにデザイン業務を楽にするか」をテーマに執筆しようと思います。
チェック作業を可能な限り自動化したい
ゲーム開発の現場では、決められたフォーマットに沿って画像を制作する場面が数多く存在します。
サイズ、レイヤー名、階層構造、テキスト内容など、チェック箇所は多岐にわたりますが、これらを間違えずに設定するのは地味に神経をすり減らす作業だったりします。
こういったクリエイティビティを必要としない作業はできるだけ機械に任せ、脳のリソースは人間にしかできない判断だけに使いたいところです。
というわけで、今回は生成AIとAdobe UXPを使い、Photoshop用のPSDデータチェックプラグインを作ってみることにしました。
Photoshop UXPとは？
従来、Photoshopの自動化にはExtendScriptで書かれた「JSX(※)」が多く使われてきました。JSXは決まった処理を一度だけ実行したり、多数のファイルをまとめて処理したりするのが得意です。
一方、UXPはPhotoshop内に常駐するパネルを作り、ドキュメントやレイヤーの操作に合わせて処理できるプラグイン開発向けの仕組みです。
HTML、CSS、JavaScriptを使ってUIと処理を一つにまとめられ、外部サービスとも連携できます。
UXPはJSXの完全な上位互換という訳ではありません。単発・一括処理にはJSX、常駐パネルやイベント連携にはUXPと、用途によって使い分けるのが現実的です。
なぜJSXではなくUXPプラグインなのか？
データをチェックするツール自体は、わざわざプラグイン化するまでもなく従来のJSX(※)でも実現可能です。
ただ、JSXで制作と検査の工程を分けると検査のためだけにフローを追加する必要がありますし、「どうせ後で検査するから」と制作時のチェックが疎かになりがちです。
そもそも制作中にエラーを自動検知し、エラーの発生自体を抑えられるようにしておく方が全体最適に繋がるはずです。
そこで今回はJSXで後から一括チェックを行うのではなく、Photoshopイベントをきっかけに柔軟な処理を行えるAdobe UXPを利用する事で、操作やドキュメントの状態に応じて自動でデータを確認できるプラグインを開発することにしました。
※ JSXとは
JSXとはJavaScriptをベースにしたAdobe独自のスクリプト「ExtendScript」で記述された、主にPhotoshopなどのAdobe製品上で実行できる自動化スクリプトファイルです。
レイヤー操作や画像の書き出しなど、定型作業を自動化する用途に向いています。
また、Photoshopの「スクリプトイベントマネージャー」を使えば、PhotoshopのイベントをきっかけにJSXを実行することもできます。
ただし、今回のように常駐パネルを設置し、操作に応じて複数の処理を連携させる用途ではUXPの方が扱いやすいと判断しました。
開発環境の準備
開発にはAdobe UXP Developer Toolを使います。
Creative Cloudデスクトップアプリからインストールでき、プラグインの作成、読み込み、デバッグ、パッケージ化をまとめて行えます。
Photoshopを起動してプラグインを読み込み、コードやUIを修正した後はReloadするだけで反映できます。初回はDeveloper Modeを有効にする必要があり、環境によっては管理者権限が求められますが、開発環境の準備自体はかなり容易なものでした。
作成するプラグインの要件定義
作りたいもののアイデアは色々と思いつくものの、風呂敷を広げすぎて完成しなければ意味がありません。
今回は「UXPを使う理由がある機能」に絞り、次の5項目を要件としました。
キャンバスサイズを確認する
PSDを開いた際、キャンバスサイズが規定通りか自動で確認するレイヤー名と外部データを照合する
CSVまたはGoogleスプレッドシートのレコードと、選択したレイヤー名を自動で照合する対になるレイヤーグループを確認する
選択したレイヤーと対になるレイヤーグループが、決められた階層に存在するか確認するテキストをPSDへ流し込む
一致したレコードからテキストを取得し、PSD内のテキストレイヤーへ自動で流し込むプレビュー表示を自動で切り替える
選択内容に応じて、プレビューに必要なレイヤーだけを自動で表示／非表示する
完成したプラグインの紹介
完成イメージを提示しないまま制作過程の話をしても頭に入ってこないと思いますので、先に出来上がったプラグインの動作イメージを紹介します。
レイヤーの選択状態に応じて動的に表示を切り替えるような処理はJSXだけで組むよりもUXPの方がはるかに実装しやすく、この処理を仕込むだけでも相当な操作ストレスの軽減を図ることが可能です。
また、読み込み時にデータフォーマットを確認し、問題があればエラーを表示するため、制作時点でミスを見つけることが極めて容易になりました。いちいち確認のために別のスクリプトを実行する必要もありません。
UIデザイナーであれば、動作イメージから、どれだけ操作ストレスを軽減できているかを感じていただけるはずです。
制作過程の紹介
Claude Codeによるバイブコーディング
今回のプラグイン開発では、Claude Codeを使用しました。
Claude Codeはコードベース全体を参照し、複数ファイルの編集、バグ修正、必要なコマンドの実行までまとめて行えます。HTML、CSS、JavaScript、設定ファイルを横断して修正してくれるため、複数ファイルで構成されるUXPプラグインでも、どのファイルを自分で書き換えるべきか毎回判断する必要がありませんでした。
また、コードだけでなく、開発環境の準備や操作手順まで文章で整理してくれます。本格的なAIコーディングツールを使うのは今回が初めてでしたが、非エンジニアでも次に何を確認すればよいか分かりやすく、かなり手厚いと感じました。
生成AIでファイルを修正した後は、UXP Developer Tool上でReloadボタンを押すだけで、変更内容がPhotoshopのプラグインへ反映されます。開発サイクルを短時間で回せるため、開発効率は非常に高いと感じます。
実際、スプレッドシートとの連携以外は試行錯誤を含めて1日もかからずに完成しました。慣れれば、単機能のプラグインであれば数時間で試作できそうです。
Googleスプレッドシート連携の問題
Googleスプレッドシートとのデータの突き合わせは、実務において特に利便性の高い要件なので、ぜひ試してみたいと思っていました。
ただ、この件に関してはコード作成以外の作業も発生するため、エンジニアの手を借りずに実装するのは難度が高いものでした。
Googleの非公開データへアクセスするため今回はOAuth 2.0を採用しました。会社のGoogle Workspace環境では、Google CloudプロジェクトやOAuthクライアントの設定が社内セキュリティに関わるため、事前に社内申請が必要となりました。
今回はGASを中継してスプレッドシートのデータを取得する構成としたため、プラグインとは別に専用のGASを用意し、シートIDなどの固有情報を設定する必要がありました。これも非エンジニアにはややハードルの高い作業です。
また、今回の試作では、実行時にプラグインへ認証コードを入力する必要がありました。アクセストークンを安全に保存・更新できるような設計が思いつけば再認証の手間も省けそうですが、その分、実装と運用は重くなります。
常に最新の表を参照する必要があるなら工数を投じて開発する価値はありますが、更新頻度が低いのであれば、ダウンロードしたCSVを読み込ませる形式で実装した方が実装も運用も圧倒的に楽です。
できるだけ手早く開発できることが非エンジニアがAIで開発することのメリットのひとつなので、「その便利さに対して開発コストが見合うか」を常に考える必要があります。
配布用パッケージの作成
完成後は、UXP Developer Toolのメニューから「Package」を選択することで、配布用のファイルを作成できます。
今回は社内向けの小さなツールなのでパッケージ化の作業でつまずくことはありませんでした。ただし、社外配布やCreative Cloud Marketplaceでの公開を考える場合はセキュリティや審査までを考慮した設計が必要になります。
作って分かったバイブコーディングのコツ
1．できるだけ小さい単位で実装する
最初から完成形を丸ごと指示すると、大枠はそれらしくても細部が想定とずれやすくなります。
今回は、「選択中のレイヤー名を取得する→CSVを読み込む→名前をCSVから探す→一致したレコードを表示する→テキストレイヤーへ流し込む」という順番で、一段ずつ機能を追加しました。
一つ一つの入出力を確認してから次へ進む方が、問題が起きた場所を特定しやすく、AIに修正させる範囲も狭められます。
2．いきなり直すのではなく、まず原因を考えさせる
不具合が起きたときに「動かないので直して」とだけ伝えると、AIが曖昧な推測でコードを書き換え、別の場所まで壊すことがあります。
修正前に「考えられる原因を列挙し、どの処理を変更する予定か説明してください」と指示すると、方向性が違った場合、コードを変更する前に止められます。
エラーのログ、期待する動作、実際の動作、再現手順などの情報をセットで渡すことも重要です。
3．正しい用語で指示を伝える
バイブコーディングでは、プログラム言語の知識以上に、対象業務を正確に説明する力が必要だと感じました。
例えばPhotoshopの「レイヤーグループ」を、普段の感覚で「フォルダ」とだけ伝えると、ファイルシステム上のフォルダとして解釈されることがあります。「どの階層にある、どのレイヤーグループを、何と比較するのか」まで具体的に説明した方が確実です。
言葉だけで構造を説明しづらい場合は、レイヤーパネルのスクリーンショットを渡す方法も有効でした。
生成AIを使えば、Photoshopを知らない人でも一瞬で高度なプラグインを作れる――などと、聞こえのよいことを言うつもりはありません。
実際には、原因を切り分ける力や、正しい入力と出力を定義する指示力を身に付ける必要があります。
ただ、新たにプログラミング言語を一から学び直さなくても、デザインに関する業務知識をベースに気軽に開発へ踏み出せる点は大きなメリットです。
デザイナーが本来の作業に集中するために
これまではPhotoshop用の業務ツールは、専任のエンジニアなどへ開発を依頼する必要がありました。
ただ、工数の削減量がはっきり読めるようなツールならばいざ知らず、ちょっとした手間を軽減するだけの小さなツールは、エンジニアの開発工数に見合うかどうかを考えるとお願いしづらく、結局は自力で頑張ることも少なくなかったと思います。
昨今の生成AIの進化によって、ツール開発の障壁はかなり下がりました。
もちろん、AIが生成したコードをそのまま大規模な商用製品として公開するのは別の話です。品質、セキュリティ、保守性、障害時の対応まで考える必要があります。
一方、用途と利用者が限定された社内向けの小さなツールは、バイブコーディングと非常に相性が良いと感じます。まず自分で試作し、難しい部分だけエンジニアへ相談する形にすれば現場の小さな不便を素早く解消できます。
人間が気にしなくてよいことは可能な限り仕組みに任せ、その分、デザイナーは本来の領分であるクリエイティブのクオリティ向上に集中する。
デザイナーの生成AI活用の話になると、画像や動画生成ばかりが話題になりがちですが、このようなAIの利用方法があることも頭の片隅に入れておいてください。
今回のように、現場のちょっとした困りごとを自分たちで工夫して解決していくことに面白さを感じる方がいれば、マイネットの仕事にもきっと興味を持っていただけると思います。
カジュアル面談も行っていますので、気になった方はぜひお気軽にご連絡ください。
