adb-mcpを使ってPhotoshopで創立記念にふさわしい画像を作成してみた

adb-mcpはMike Chambers氏によって開発されているAdobe PhotoshopやPremiereをAIエージェントで制御するためのPoC（概念実証）プロジェクトです。
Claude Desktopから自然言語でPhotoshopを操れるというので、試してみました。

事前準備

次のツールたちが必要なので、事前にセットアップしておきます。
各ツールのインストール方法については、各自でお願いします。

Python 3.x

pyenvでインストールされている3.12.0を使いましたが、Macなら標準インストールされていると思います（プリインストールPythonは未検証）。

uv

https://docs.astral.sh/uv/

こちらも0.6.14がインストールされていたので、そのまま使いました。

Node.js

https://nodejs.org/ja

24.3.0が動いていたのでそのまま使います。

Photoshop 26.0

これ以前では動かないようなので、必要ならアップデートをしてください。

UXP Developer Tools

Photoshopへプラグインをインストールするために使います。
Creative Cloudからインストールできます。

Claude Desktop

https://claude.ai/download

MCPクライアントとして使います。

セットアップ

GitHubのREADMEに沿ってセットアップしていきます。

まずはZIPをダウンロードして展開するか、gitが使えるならgit cloneします。以後の説明で、このフォルダをadb-mcpフォルダと呼びます。

MCPサーバーの起動

adb-mcpフォルダにあるmcpフォルダをターミナル.appへドロップします。
（これをすることで、GitHubのREADMEに書かれている手順のうち、cd mcpを飛ばせます）

uv run mcp dev ps-mcp.py

「パッケージをインストールしていいですか？」的なことを聞かれたらyで進めましょう。

無事起動すると次のようなメッセージが表示されます。

🔗 Open inspector with token pre-filled:
   http://localhost:6274/?MCP_PROXY_AUTH_TOKEN=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
   (Auto-open is disabled when authentication is enabled)

🔍 MCP Inspector is up and running at http://127.0.0.1:6274 🚀

このメッセージの中にある、次のようなMCP_PROXY_AUTH_TOKENパラメーター付きのURLへアクセスしてください。

http://localhost:6274/?MCP_PROXY_AUTH_TOKEN=XXXXXXXXXXXXXXX〜

アクセスするとMCP Inspectorの画面が表示されますので、左のサイドバーにあるConnectボタンをクリックします。

最初はエラーが出るかもしれませんが、少し待つと接続できるはずです。

Claude Desktopの設定

Claude DesktopがMCPサーバーへ接続できるように設定をします。（1度設定すれば、この手順はスキップしてOKです）
Claude Desktopが起動している場合、完全に終了させてから進めましょう。

ターミナル.appで新しいタブを作成し、次のコマンドを実行します。

uv run mcp install --with fonttools --with python-socketio --with mcp --with requests --with websocket-client ps-mcp.py

もしエラーになる場合は、最初にadb-mcpフォルダ内にあるmcpフォルダをDockのターミナル.appへドラッグ＆ドロップしてから実行してみてください。

プロキシサーバーの起動

adb-mcpフォルダ内にある、adb-proxy-socketをターミナル.appへドラッグ＆ドロップします。
新しいターミナルウィンドウが開くと思いますので、続けて次のコマンドを実行してプロキシサーバーを起動します。

npm install
node proxy.js

この手順を一度やっている場合、npm installの部分は不要です。
起動が無事終了すると次のようなメッセージが表示されると思います。

adb-mcp Command proxy server running on ws://localhost:3001

Photoshopの開発者モードを有効化

Photoshopを起動します。
設定→プラグインにある「開発者モードを有効にする」のチェックをONにして、Photoshopを再起動しておきます。

すでにチェックがONになっている場合は、そのまま次へ進みます。

Photoshop MCP Agentのインストールと有効化

続けてUX Developer Toolsを起動します。
最初に「Enable Developer Mode」について聞かれたら、「Enable」をクリックして進めてください。

何もプラグインが追加されていない場合は画面中央、すでにプラグインがある場合はウィンドウ右上にある「Add Plugin」をクリックしてください。

ファイル選択で、adb-mcpフォルダ内にある「uxp → ps → manifest.json」を選択します。Premiereで使う場合psの替わりにprフォルダのmanifest.jsonを選択しましょう。

Photoshop MCP Agentというプラグインが読み込まれたら、「Load」をクリックしてください。

「Plugin Load Successful」と下に通知が表示され、表示が変われば正常に読み込みが完了しています。
エラーが出る場合、Photoshopが起動しているか確認しましょう。

Photoshopへ切り替えると、Photoshop MCP Agentというプラグインウィンドウが表示されていると思います。
ボタンがConnectとなっている場合は、クリックしてプロキシサーバーと接続してください。
（接続されれば、Disconnectという表示になるはずです）

レッツトライ！

準備お疲れさまでした。では早速試していきましょう。

バッチ処理の代わりになるか

まずは次のよくある作業をしてもらうことにします。

• 画像をCMYKへ変換
• 解像度を再サンプルせずに350dpiへ変更
• PSDとして指定したフォルダへ保存

たまに外部連携の許可を求めるダイアログが表示されるため、適切に許可を与えてください。

次のようなつれない返事が返ってきました。

どうやらAPIが対応していないようですね。自然言語で操作できるとはいえ、結局は自然言語の指示をAIがAPIに翻訳しているにすぎないため、致し方ありません。
とりあえずできることをリスト化してもらいました。

テキトーな指示で画像を作成してもらう

テキトーな指示でどうなるかを試してみます。

Instagramへ投稿するクールな画像を作成してください。

で、完成した画像がこちら：

クールかといえば賛否両論あると思いますが、単に画像生成と異なり、文字が文字としてきちんと挿入ができますね。
ただし、文字が切れていることが感知できないため、調整は必要です。

最後に

というわけで、今日7月7日はクラスメソッドの創立記念日です。記念日に相応しい画像をつくってもらって終わりにしましょう。

今日7/7はクラスメソッド株式会社の22回目の設立記念日です。
ウェブサイトでブランドの雰囲気を確認し、Photoshopで開かれているドキュメントを利用して、記念日に相応しいクールな画像を作成してください。
ウェブサイト: https://classmethod.jp

で作成された画像がこちら：

堂々と「クラスメソッド株式会社の22周年記念日にふさわしいクールな画像を作成いたしました！」と伝えてきましたが、最後に追加したグラデーションで文字が見えなくなってしまいました。
レイヤーを見るとやはり細かい指示をしていないせいか、文字がはみ出ていますね。
FireFlyも使ってほしいところです。

追加の指示で修正してもらいましょう。

* レイヤー: グラデーション 2のブレンドモードを焼き込みに変更してください。 
* レイヤー: 22周年メインタイトルがドキュメントからはみ出ているため、フォントサイズを小さくしてください。
* 背景はブランドの特徴から画像を生成してください。

経過を見ると、どうやら文字がはみ出ているという計算はできるようです。

で、修正した画像がこちら：

画像生成してもらいましたが、背景の上にあるグラデーションがあって見えなくなってしまったため、追加で修正してもらいます。

背景が見えないため、レイヤー: グラデーション 1を非表示にしてください。

で最終的な画像がこちら：

というわけで完成です！