Amazonで商品を見るセール会場へ

Photoshop│UXPプラグインの作り方|UXP Developer Toolで最小構成から

UXP プラグインは、Photoshop にパネルやメニューのコマンドを足す、今の方式の拡張機能です。

作るときは、Adobe の UXP Developer Tool(UDT)を使います。

  • UDT は Creative Cloud デスクトップアプリの「Apps」から入れる
  • 「Create Plugin…」でテンプレート(quick-layers-starter など)から作る。対応する版は利用するAPIとmanifestに合わせる
  • Photoshopを起動し、Load & Watchで読み込む。manifestの変更後はUnloadして読み込み直す
  • 配るときは Package で .ccx を作る

この記事はAdobe公式資料をもとに、UDTでテンプレートを作成して読み込む流れを説明します。2026年10月24日に、現行のUDT入門手順とManifest v5の資料を照合しました。

本記事の手順は実機で再現していません。画面名は公式資料の英語表記で、UDTの版によって配置やテンプレート名が異なります。

目次

UDTを入れる

  1. Creative Cloud デスクトップアプリを開く
  2. 「Apps」から UXP Developer Tools を入れる
  3. 初めて起動すると Developer Mode を有効にするよう求められるので、「Enable」を押す(管理者の権限が要る)

UDTからDeveloper Modeを有効にできない場合は、UDTを終了して次の場所にsettings.json(中身は {“developer” : true})を作成し、UDTを起動し直します。手動設定にも管理者権限が必要です。

OS場所
Windows%CommonProgramFiles%/Adobe/UXP/Developer
macOS/Library/Application Support/Adobe/UXP/Developer
スポンサーリンク

プラグインを作る

  1. UDT で「Create Plugin…」を押す
  2. Plugin Name・Plugin Id・Plugin Version を入れる
  3. Host Application で Photoshop、Host Application Version を選ぶ
  4. Templateを選ぶ(現行のPhotoshop入門例はquick-layers-starter。汎用テンプレートにはquick-starterやreact-starterもある)
  5. 保存先のフォルダーを選んで作る

Photoshopを起動し、UDTが検出したHost Application Versionを確認します。以前の入門資料には23.0.0の例がありますが、すべてのプラグインに同じ最低版を設定するわけではありません。下のManifest v5の例は23.3.0を指定しています。利用するAPIに、さらに新しい版が必要なら対応する最低版を引き上げます。

manifest.json

プラグインの設定は manifest.json に書きます。

公式ドキュメントの例から設定項目を抜粋したものです。これだけではパネルは作れません。まずテンプレート一式を使い、生成されたentrypoints、HTML、JavaScriptを残したまま設定を確認してください。

{
    "manifestVersion": 5,
    "id": "YOUR_ID_HERE",
    "name": "Name of your plugin",
    "version": "1.0.0",
    "main": "index.html",
    "host": {
        "app": "PS",
        "minVersion": "23.3.0"
    }
}
項目意味
manifestVersion5(基本となるv5機能の要件はPhotoshop 23.3.0以降。後から追加されたAPIや権限には別の最低版がある)
idプラグインの ID。外に配るときは公式に発行されたものに変える
host対応するアプリ(PS)と最低の版
entrypoints“type”: “command”(メニューのコマンド)と “type”: “panel”(パネル)
requiredPermissionsクリップボード・ネットワークのドメイン・ファイルなど、使う権限を宣言する
Adobe「Manifest v5」をもとに作成

Manifest v5では、pluginのdestroyやpanelのcreate・show・hide・destroyなどのライフサイクル処理でPromiseを扱えます。公式資料の300ミリ秒のタイムアウトはこれらのentrypointメソッドに関する説明で、プラグイン全体の処理時間を300ミリ秒に制限する意味ではありません。

読み込んで試す

Photoshopを起動した状態で、UDTにホストとして表示されることを確認します。現行の入門手順ではプラグイン行のLoad & Watchで読み込みます。旧版ではLoadとWatchが分かれています。manifest.jsonを変更した後は、自動更新だけに頼らずUnloadしてから読み込み直してください。quick-layers-starterで読み込みを確認するには、生成されたindex.htmlの見出しLayersをPhotoshop Layersへ変更して保存し、Photoshop側のパネル見出しも変わるかを確認します。変わらない場合は、保存したファイルがUDTに登録したプラグインのものか、ホストが起動中か、Load & Watchが有効かを確認してください。

操作働き
Load / Load & Watch起動中のPhotoshopに読み込む。Load & Watchは変更の監視も開始する
WatchHTMLやJavaScriptなどの変更を監視して再読み込みする。manifest変更はUnloadして読み込み直す
Reload読み直す
DebugChrome のデバッガーに似た画面で、止める・1行ずつ進める
Logsログを見る
Package配布用の .ccx を作る
UDT のウォークスルーをもとに作成

配る

配布の形式は .ccx で、中身は zip ですが、自分で作らず UDT の Package で作るよう案内されています。

外に配る前に、Developer Distribution portal で正式な ID を取り、manifest.json の id に入れます。Package後は、出力した.ccxを自分の環境にインストールし、パッケージ版でも動くことを確認してから配布します。Packageに失敗した場合はDetailsで原因を確認してください。この記事ではパッケージ作成・インストールの実機検証はしていません。

配り方内容
Creative Cloud Plugin MarketplaceDeveloper Distribution portal から出す
.ccx を直接渡す受け取った人がダブルクリックし、警告で「Install locally」を押す

パネルの要らない1回きりの処理なら、プラグインではなく UXP スクリプト(.psjs)でも作れます。

スクリプトとの違いは、PhotoshopのUXPスクリプト(.psjs)の書き方で紹介しています。

スポンサーリンク

まとめ

  • UDT は Creative Cloud の Apps から。初回に Developer Mode を有効にする
  • Create Pluginでテンプレートから作る。最低版はmanifestと使用APIの要件に合わせる
  • Load & Watchで試し、Debugで調べる。manifest変更後はUnloadして読み込み直す
  • 配るときは Package で .ccx。ID は公式に発行されたものにする

参考:Adobe「Set up developer tools」「Build Your First Plugin」「Manifest v5」「Packaging Your Plugin」「Distribution Options」(2026年10月24日照合)。

よくある質問:PhotoshopのUXPプラグインの作り方

UXPプラグインとは、何ですか?

Photoshopにパネルやメニューのコマンドを足す、今の方式の拡張機能です。作るときは、AdobeのUXP Developer Tool(UDT)を使います。

UDTは、どうやって入れますか?

Creative Cloudデスクトップアプリを開き、「Apps」からUXP Developer Toolsを入れます。初めて起動するとDeveloper Modeを有効にするよう求められるので、「Enable」を押します(管理者の権限が要ります)。手動設定が必要ならUDTを終了し、settings.json(中身は {“developer” : true})をWindowsなら%CommonProgramFiles%/Adobe/UXP/Developer、macOSなら/Library/Application Support/Adobe/UXP/Developerに作成して、UDTを起動し直します。

プラグインは、どう作りますか?

UDTで「Create Plugin…」を押し、Plugin Name・Plugin Id・Plugin Versionを入れます。Host ApplicationでPhotoshop、Host Application Versionを選び、Templateを選びます(現行のPhotoshop入門例はquick-layers-starter)。ホストの検出版を確認し、manifestの最低版は使用するAPIに合わせます。本記事のv5抜粋例は23.3.0です。

manifest.jsonには、何を書きますか?

記事の整理では、manifestVersionは5(基本要件はPhotoshop 23.3.0以降ですが、追加機能の最低版は個別に確認)、idはプラグインのID(外に配るときは公式に発行されたものに変える)、hostは対応するアプリ(PS)と最低の版、entrypointsは”type”: “command”(メニューのコマンド)と”type”: “panel”(パネル)、requiredPermissionsはクリップボード・ネットワークのドメイン・ファイルなど使う権限の宣言です。v5のPromise対応と300ミリ秒のタイムアウトは、panelのcreateなどのライフサイクル処理についての説明です。プラグイン全体の実行時間の上限ではありません。掲載JSONは抜粋なので、テンプレートのentrypointsやHTML、JavaScriptも必要です。

作ったプラグインは、どうやって試しますか?

Photoshopを起動してUDTで検出されることを確認し、Load & Watchで読み込みます。quick-layers-starterではindex.htmlの見出しLayersをPhotoshop Layersへ変更して保存し、パネルの見出しも変わるか確認します。manifest.jsonの変更後はUnloadして読み込み直します。旧版ではLoadとWatchが分かれています。Debugはデバッグ、Logsはログの確認、Packageは.ccxの作成に使います。

プラグインを、人に配るにはどうしますか?

配布の形式は.ccxで、中身はzipですが、自分で作らず、UDTのPackageで作るよう案内されています。外に配る前に、Developer Distribution portalで正式なIDを取り、manifest.jsonのidに入れます。配布前に、生成した.ccxを自分の環境へインストールしてパッケージ版の動作も確認します。配り方は、Creative Cloud Plugin Marketplace(Developer Distribution portalから出す)か、.ccxを直接渡す(受け取った人がダブルクリックし、警告で「Install locally」を押す)かの2通りです。

パネルが要らない1回きりの処理も、プラグインにするのですか? 記事の内容は最新ですか?

パネルの要らない1回きりの処理なら、プラグインではなく、UXPスクリプト(.psjs)でも作れます。スクリプトとの違いは、関連記事「PhotoshopのUXPスクリプト(.psjs)の書き方」で紹介されています。2026年10月24日にAdobe公式のUDT手順とManifest v5の説明を照合しましたが、実機での作成・読み込み・配布テストはしていません。画面名は公式資料の英語表記です。利用するUDTとPhotoshopの版に合わせ、公式資料を確認してください。

次に学ぶ・作業環境を選ぶ

学習を続けたい方や、作業環境を整えたい方は、目的に合うガイドをご覧ください。

Photoshopのおすすめ書籍

動作要件とPCの確認項目

周辺機器の優先度

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次