
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
こちらも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を非表示にしてください。
で最終的な画像がこちら:
というわけで完成です!