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

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

Adobe PhotoshopやPremiereをAIエージェントで制御するできるadb-mcpを試してみました。

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として指定したフォルダへ保存

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

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

申し訳ありませんが、現在利用可能なPhotoshop MCP Server APIには、以下の機能が含まれていません:CMYKカラーモードへの変換機能、画像解像度を変更する機能、現在のAPIでは、新しいドキュメントの作成時にカラーモードと解像度を指定することはできますが、既存のドキュメントのカラーモードや解像度を変更する機能は提供されていません。

どうやら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へ投稿するクールな画像を作成してください。

完璧です!Instagramに投稿するクールな画像が完成しました。作成した要素:1.未来的なネオンシティの背景 - サイバーパンク風の夜景でビジュアルインパクトを演出 2.メインタイトル「FUTURE」 - 大きく目立つ白いテキストにマゼンタのストロークとドロップシャドウでエフェクト 3.サブタイトル「IS NOW」 - シアンカラーで現代感を表現 4.装飾要素 - 抽象的な幾何学模様とネオン効果でさらなる未来感を追加 5.ハッシュタグ - 底部に控えめに配置してInstagram投稿に最適化 この画像は1080x1080のInstagram正方形フォーマットで、モダンなサイバーパンク美学を取り入れたエンゲージメントの高いビジュアルになっています。各レイヤーは個別に調整可能なので、必要に応じてさらなるカスタマイズも可能です!

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

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

最後に

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

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

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

adb-mcp-anniversary-image1.jpg

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

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

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

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

確認したところ、テキストが右端で2128ピクセルまで伸びており、ドキュメント幅1920ピクセルからはみ出ています。テキストレイヤーを70%にスケールダウンしてサイズを調整します:

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

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

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

最終的な22周年記念画像の構成:✅ 完成した要素:✨ クラスメソッドのブランド特徴を反映したAI生成背景画像 🎯 適切なサイズに調整された「22th ANNIVERSARY」タイトル 🏢 会社名「クラスメソッド株式会社」 📅 設立記念日「2025.7.7」 💡 企業モットー「技術をもっと経営の中心に」 🎉 お祝いメッセージ「~ おめでとうございます ~」 🎨 焼き込みブレンドモードによる洗練された視覚効果 🔘 装飾的なデザイン要素 これでクラスメソッド株式会社の22周年設立記念日にふさわしい、プロフェッショナルで印象的な記念画像が完成しました。ブランドの技術的な特徴とAWS関連のビジネス領域を反映した背景により、企業イメージに合った記念日画像となっています。

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

というわけで完成です!

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.