イラスト制作時にベースカラーの塗りを「ベタ塗り調整レイヤー＋マスク」で管理すると、後から色を変更しやすくなります。
しかし、対象のレイヤーが多いと1つずつ変更する手間がかかります。
この記事は、変数名でレイヤーを更新する拡張機能DITTOの旧操作記録です。単独のJSXコード例ではなく、CEPのパネルを使う構成を紹介しています。2026年10月24日時点で、現行Photoshopへの導入・実行は確認していません。
拡張機能「DITTO」とは
作者Elliot Jacksonの配布ページでは、色・文字列・フォントサイズ・表示状態などを変数で扱うPhotoshop拡張機能として説明されています。以下は旧記事で扱った項目で、現行版での全項目の動作保証ではありません。
- Fill（塗り）
- TEXT（文字列）
- Visibility（表示・非表示）
- Font Size（フォントサイズ）
- Font Family（フォントの種類）
- Font Color（フォントの色）
- Line Height（行の高さ）
- X, Y（座標）
旧記録では、あらかじめ設定した変数名に基づいて対象レイヤーを更新します。まず原本を別名保存したコピーで、対象2枚と変数名を付けない比較用1枚を用意し、対象だけが変わるか確認してください。
DITTOの配布と旧インストール記録
STEP 1：ファイルのダウンロード
作者の配布ページは、拡張機能とインストール説明を含むZIPを案内しています。導入前に、入手したZIP内の説明で対応するPhotoshop・OSとファイル構成を確認してください。今回は配布ページへの接続を確認しましたが、ZIPの取得・内容確認・インストールはしていません。
旧手順：インストーラーを実行する前の確認
- 旧記事では
install.jsxを次のScriptsフォルダーへ置く方法を記載していました。配布物の実際のファイル名と手順を優先し、インストーラーだけを元フォルダーから分離しないでください。依存ファイルの有無は今回未確認です。
C:\Program Files\Adobe\Adobe Photoshop CC ＜バージョン＞\Presets\Scripts- 対応環境と同梱説明を確認できた場合に、案内された方法でインストーラーを実行します。Scriptsへの常設が必要か、［ファイル］→［スクリプト］→［参照］から実行するかも同梱説明に従います。上のパスは旧CC版の例です。
旧手順：手動配置とエラーの切り分け
旧記事にはHTMLフォルダーをDittoへ変更して次のCEP拡張機能フォルダーに置く手順があります。ただし、これであらゆる導入エラーが直るわけではありません。エラー文、対応版、同梱ファイル、読み込み条件を確認し、配布説明で確認できない手動配置は進めないでください。UXP用のプラグインフォルダーとは別です。
C:\Users\＜ユーザー名＞\AppData\Roaming\Adobe\CEP\extensions旧版でのDITTOの使い方
STEP 1：DITTOパネルを開く
- ウィンドウ → エクステンション → Ditto を選択します。
STEP 2：変更したい要素を選択
- プルダウンメニュー から Fill（塗り） を選択します。
- 入力欄 に任意の変数名を入力します（例：
BaseColor）。- ※ DITTOパネルの入力欄では先頭に
#を付けずに入力してください。
- ※ DITTOパネルの入力欄では先頭に
STEP 3：レイヤー名に変数を指定
- 色を変更したいベタ塗りレイヤー の名前に、先頭に
#を付けた変数名（例：#BaseColor）を設定します。
STEP 4：色を指定して更新
- パネル右側の入力欄に指定したいカラーコード（例：
ffff00）を入力します。 - 更新ボタンをクリックします。
旧手順では変数名の付いたレイヤーが更新されます。対象の塗り色と比較用レイヤーを確認し、想定外の変更があれば保存せずコピーを閉じてください。通常のピクセルレイヤーやロックされた対象も同じように扱えるとは確認していません。
補足
- 設定した変数は最上位のレイヤー情報に保持されます。
- 「Load Variables」をクリックすると保存された変数を読み込めます。
旧記事に掲載したプロパティと入力例
| 設定項目 | 指定例 |
|---|---|
| Fill（塗り） | 29adf1 |
| TEXT（文字列） | 好きな文字列 |
| Visibility（表示・非表示） | on または off |
| Font Size（フォントサイズ） | 20px |
| Font Family（フォントの種類） | 小塚ゴシック Pr6N |
| Font Color（フォントの色） | 29adf1 |
| Line Height（行の高さ） | 46px |
| X（X座標） | 640 |
| Y（Y座標） | 480 |
Photoshopの他の操作方法は関連記事をご参照ください。
レイヤーを操作するスクリプトは、ほかにもあります。
まとめ
- DITTOを使うことで複数のベタ塗りレイヤーを一括で変更できます。
- レイヤーごとにカラーピッカーを開く手間を削減できます。
- レイヤー名に変数ルールを適用することで効率的なカラー管理が可能です。
掲載GIFと入力例は過去の記録です。現行版への対応、フォント名の指定形式、px指定の解釈、変数を保存したPSDの再読み込みは未検証です。導入できることと、制作物が意図どおり更新されることを分けて確認してください。
よくある質問：DITTOでベタ塗りレイヤーの色を一括変更する
DITTOとは、何ですか？
Photoshop用の拡張機能です。旧記録では、あらかじめ設定した変数名に基づいて対象レイヤーを更新します。まず原本を別名保存したコピーで、対象2枚と変数名を付けない比較用1枚を用意し、対象だけが変わるか確認してください。ベタ塗り調整レイヤー＋マスクで管理したベースカラーの塗りを、後から1つずつ変更する手間を減らせます。
DITTOで、何を一括で変更できますか？
旧記事では、Fill（塗り）、TEXT（文字列）、Visibility（表示・非表示）、Font Size（フォントサイズ）、Font Family（フォントの種類）、Font Color（フォントの色）、Line Height（行の高さ）、X・Y（座標）を変更する項目を紹介しています。旧記事の指定例では、Fillは色のコード、Visibilityはonとoff、Font Sizeは20px、Font Familyは小塚ゴシック Pr6Nのようなフォント名、Font Colorは色のコード、Line Heightは46px、Xは640、Yは480のように指定します。
どうやってインストールしますか？
作者が配布するZIP内のインストール説明と対応版を確認してください。旧記事のinstall.jsxの配置例は、今回配布物の内容を再確認できていません。インストーラーだけを移動せず、同梱説明の方法に従います。
インストール時にエラーが出たときは？
まずエラー文と対応版、ZIP内のファイル構成、拡張機能の読み込み条件を確認します。本文のHTMLフォルダーをDittoへ変更する方法は旧記録で、すべてのエラーの解決策としては扱いません。
DITTOの使い方を教えてください。
旧版の手順では、ウィンドウ → エクステンション → Dittoを選んでDITTOパネルを開きます。プルダウンメニューからFill（塗り）を選択し、入力欄に任意の変数名を入力します（例：BaseColor）。DITTOパネルの入力欄では、先頭に#を付けずに入力してください。次に、変更したいベタ塗りレイヤーの名前に、先頭に#を付けた変数名（例：#BaseColor）を設定します。パネル右側の入力欄に、指定したいカラーコード（例：ffff00）を入力し、更新ボタンをクリックすると、設定した変数名が付いたレイヤーの色が一括で更新されます。
設定した変数は、保存されますか？
旧記事では、設定した変数は最上位のレイヤー情報に保持されると説明しています。今回、保存後の再読み込みは検証していません。「Load Variables」をクリックすると、保存された変数を読み込めます。
記事の手順は、今のPhotoshopでも使えますか？ 最新はどこで確認しますか？
2026年10月24日に作者の配布ページへの接続と公開説明を確認しました。今回はZIP内容、現行Photoshopへの導入、パネル表示、各プロパティの変更を確かめていません。本文はCEP方式の旧記録で、UXPや単独JSXの例とは異なります。配布元の対応環境を確認し、原本を残したコピーで試してください。
