adb-mcpを使ってPhotoshopで創立記念にふさわしい画像を作成してみた
2025.07.07adb-mcpはMike Chambers氏によって開発されているAdobe PhotoshopやPremiereをAIエージェントで制御するためのPoC（概念実証）プロジェクトです。
Claude Desktopから自然言語でPhotoshopを操れるというので、試してみました。
事前準備
次のツールたちが必要なので、事前にセットアップしておきます。
筆者の環境は次の通りですが、各ツールのインストール方法については、各自で調べてみてください。
Python 3.x
pyenvでインストールされている3.12.0を使いましたが、Macなら標準インストールされていると思います（プリインストールPythonは未検証）。
uv
こちらも0.6.14がインストールされていたので、そのまま使いました。
Node.js
24.3.0が動いていたのでそのまま使います。
Photoshop 26.0
これ以前では動かないようなので、必要ならアップデートをしてください。
UXP Developer Tools
Photoshopへプラグインをインストールするために使います。
Creative Cloudからインストールできます。
Claude Desktop
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に翻訳しているにすぎないため、致し方ありません。
とりあえずできることをリスト化してもらいました。
Photoshop MCP Server APIでできること
Photoshop MCP Server APIで利用可能な機能をカテゴリ別に整理いたします：
ドキュメント操作
- 新規ドキュメントの作成（サイズ、解像度、カラーモード、背景色の指定）
- ドキュメント情報の取得（サイズ、解像度、カラーモード等）
- ファイルを開く（PSD等のPhotoshop対応形式）
- ドキュメントの保存（PSD、PNG、JPG形式）
- ドキュメントのクロップ（選択範囲に合わせて）
レイヤー操作
基本操作
- レイヤー一覧の取得
- 新規ピクセルレイヤーの作成
- レイヤーの削除、複製、リネーム
- レイヤーの表示/非表示切り替え
- レイヤーの移動（上下の階層変更）
- レイヤーグループの作成
- レイヤーの統合（全レイヤーを1つに）
レイヤー変形
- レイヤーの移動（X、Y座標の変更）
- レイヤーのスケール変更
- レイヤーの回転
- レイヤーの反転（水平、垂直、両方）
- レイヤーのラスタライズ
レイヤープロパティ
- ブレンドモードの設定
- 不透明度の設定
- 塗りの不透明度の設定
- クリッピングマスクの設定
- レイヤー境界の取得
テキスト機能
- 単行テキストレイヤーの作成
- 複数行テキストレイヤーの作成
- フォント、サイズ、色、位置の指定
- テキストの配置（左寄せ、中央寄せ、右寄せ）
選択範囲操作
選択範囲の作成
- 矩形選択
- 楕円選択
- 多角形選択
- 被写体の自動選択
- 空の自動選択
選択範囲の操作
- 選択範囲の反転
- 選択範囲のクリア
- 選択範囲に基づくコンテンツの整列
画像編集
基本編集
- 画像の配置（レイヤーへの画像配置）
- 背景の自動削除
- 選択範囲の塗りつぶし
- 選択範囲の削除
クリップボード操作
- 選択範囲のコピー
- 選択範囲のカット
- 統合コピー（すべての表示レイヤーを統合してコピー）
- クリップボードからの貼り付け
レイヤーマスク
- 選択範囲からレイヤーマスクの作成
- レイヤーマスクの削除
レイヤースタイル
- ドロップシャドウの追加
- 境界線（ストローク）の追加
- グラデーションオーバーレイの作成
調整レイヤー
- 明度・コントラスト調整
- カラーバランス調整
- 彩度・自然な彩度調整
- 白黒調整（カラーチャンネル個別調整、色調補正）
フィルター効果
- ガウシアンブラー
- モーションブラー
AI機能
- Adobe Firefly Generative AIによる画像生成
エクスポート
- 個別レイヤーのPNGエクスポート
- 複数レイヤーの一括PNGエクスポート
これらの機能を組み合わせることで、レイヤー構造を保持したまま複雑な画像編集作業を自動化できます。
テキトーな指示で画像を作成してもらう
テキトーな指示でどうなるかを試してみます。
Instagramへ投稿するクールな画像を作成してください。
で、完成した画像がこちら：
クールかといえば賛否両論あると思いますが、単に画像生成と異なり、文字が文字としてきちんと挿入ができますね。
ただし、文字が切れていることが感知できないため、調整は必要です。
最後に
というわけで、今日7月7日はクラスメソッドの創立記念日です。記念日に相応しい画像をつくってもらって終わりにしましょう。
今日7/7はクラスメソッド株式会社の22回目の設立記念日です。
ウェブサイトでブランドの雰囲気を確認し、Photoshopで開かれているドキュメントを利用して、記念日に相応しいクールな画像を作成してください。
ウェブサイト: https://classmethod.jp
で作成された画像がこちら：
堂々と「クラスメソッド株式会社の22周年記念日にふさわしいクールな画像を作成いたしました！」と伝えてきましたが、最後に追加したグラデーションで文字が見えなくなってしまいました。
レイヤーを見るとやはり細かい指示をしていないせいか、文字がはみ出ていますね。
FireFlyも使ってほしいところです。
追加の指示で修正してもらいましょう。
* レイヤー: グラデーション 2のブレンドモードを焼き込みに変更してください。
* レイヤー: 22周年メインタイトルがドキュメントからはみ出ているため、フォントサイズを小さくしてください。
* 背景はブランドの特徴から画像を生成してください。
経過を見ると、どうやら文字がはみ出ているという計算はできるようです。
で、修正した画像がこちら：
画像生成してもらいましたが、背景の上にあるグラデーションがあって見えなくなってしまったため、追加で修正してもらいます。
背景が見えないため、レイヤー: グラデーション 1を非表示にしてください。
で最終的な画像がこちら：
最終的なレイヤー構成：
というわけで完成です！
