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

2026年9月29日2026年10月3日

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

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

UDT は Creative Cloud デスクトップアプリの「Apps」から入れる
「Create Plugin…」でテンプレート（ps-starter など）から作る。最低の版は 23.0.0
「•••」のメニューの Load で読み込み、Watch で保存のたびに自動で読み直す
配るときは Package で .ccx を作る

この記事は、Adobe の UXP for Photoshop の公式ドキュメント（developer.adobe.com と GitHub の AdobeDocs/uxp-photoshop、2026年9月29日に確認）にもとづいています。

当方には Photoshop が無いため、実行の再現は含まず、画面の名前は英語版の表記です。

UDTを入れる

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

手で設定するときは、次の場所に settings.json（中身は {“developer” : true}）を置きます。

OS	場所
Windows	%CommonProgramFiles%/Adobe/UXP/Developer
macOS	/Library/Application Support/Adobe/UXP/Developer

プラグインを作る

UDT で「Create Plugin…」を押す
Plugin Name・Plugin Id・Plugin Version を入れる
Host Application で Photoshop、Host Application Version を選ぶ
Template を選ぶ（素の JavaScript の ps-starter、React の ps-react-starter など）
保存先のフォルダーを選んで作る

UXP のプラグインは Photoshop 23.0.0 より前では動かないため、最低の版は 23.0.0 と入れるよう案内されています。

manifest.json

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

公式ドキュメントの例（一部）です。

{
    "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"
    }
}

項目	意味
manifestVersion	5（Photoshop 23.3.0 以降で全機能を使える）
id	プラグインの ID。外に配るときは公式に発行されたものに変える
host	対応するアプリ（PS）と最低の版
entrypoints	“type”: “command”（メニューのコマンド）と “type”: “panel”（パネル）
requiredPermissions	クリップボード・ネットワークのドメイン・ファイルなど、使う権限を宣言する

Adobe「Manifest v5」をもとに作成

v5 では、entrypoint の処理が Promise を返せるようになり、待ち時間の上限は300ミリ秒です。

読み込んで試す

UDT のプラグイン名の横の「•••」から操作します。

操作	働き
Load	Photoshop に読み込む
Watch	ファイルの変更を見張り、保存のたびに自動で読み直す
Reload	読み直す
Debug	Chrome のデバッガーに似た画面で、止める・1行ずつ進める
Logs	ログを見る
Package	配布用の .ccx を作る

UDT のウォークスルーをもとに作成

配る

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

外に配る前に、Developer Distribution portal で正式な ID を取り、manifest.json の id に入れます。

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

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

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