クリスタ用グラデーションマップ作成ツール

このツールでできること

画像を開くと、画像から取り出した色とプレビューが表示されます。編集中のグラデーションはそのまま残ります。取り出した色で作り直すときは「再抽出」か「抽出色でストップを作り直す」を押してください。バー上の色のポイントを「ストップ」と呼びます。位置はドラッグや矢印キーで、色はHEX欄（#から始まる色の番号）で変えられます。編集内容はJSONで保存・復元できます。

• CSP公式マニュアル: グラデーションマップの設定 — ノード・混色モード・輝度の補正。2026-09-06確認
• Adobe公式: カラー設定と変換方法 — 公式資料・2026-09-06確認

こんなときに使えます

• グレースケールで塗った絵に、後から一括で色を乗せる下地を作るとき
• 既存のイラストの配色を、別の色調へ寄せた案を試すとき
• 影・中間・ハイライトの色を数値として決めて、シリーズを通して使い回すとき

使い方

1. 画像を読み込み、代表色を確認します。抽出色でランプを作るときは「再抽出」か「抽出色でストップを作り直す」を押します。現在のストップを置き換える操作なので、残したい編集は先にJSONで保存します。
2. ランプのハンドルをドラッグして、暗い側と明るい側の色の分かれ目を調整します。矢印キーで 1%、Shift と一緒に押すと 10% ずつ動きます。
3. ランプの空いている場所をクリックすると、その位置に見えている色でストップが追加されます。ヘッダーの「ストップを追加」でも、間隔が最も広い場所に追加できます。
4. 各行の HEX 欄で色を、右の数値欄で位置(%)を細かく指定します。
5. プレビューの表示を 左右分割 にし、スライダーを動かして適用前後を比べます。
6. JSON・CSS・ランプ PNG を書き出すか、表示されている HEX と位置を CSP のグラデーションマップへ写します。

入力項目の意味

抽出色数

画像から取り出す代表色の数(2〜12)です。取り出した色は明度順に並べられ、そのままストップの初期配置になります。

抽出方法

迷ったら「バランス(K-means)」を選んでください。画像で多く使われている色を中心に取り出します。小さな面積の差し色も残したいときは「アクセント重視(メディアンカット)」を試してください。

ストップ

グラデーションバー上の、色と位置を決めるポイントです。0%は元画像の暗い部分、100%は明るい部分に対応します。ポイントの間は、色が少しずつ変わるようにつながります。

位置

色のポイントを、バーの左から何%の場所に置くかを指定します。暗い色に置き換える範囲を広げたいときは、暗い色のポイントを右へ動かします。

比較モード

元画像・適用後・左右分割の 3 種類です。左右分割では境界のスライダーを動かして、同じ場所での適用前後を直接比べられます。

比較モードで何を見るか

• 元画像は変換前、適用後はランプを当てた結果です。左右分割は 1 枚の中に前後を並べるモードで、境界のスライダーを動かすと同じ場所の色がどれだけ動いたかを直接比べられます。
• 暗い部分が黒一色になっていないか、明るい部分が白一色になっていないか、途中の色が濁っていないかを確認します。暗い部分は左端の色を少し明るく、明るい部分は右端の色を少し暗くすると、細部が見えやすくなります。
• 離れた色をつなぐと、途中の色が濁って見えることがあります。そのあたりに色のポイントを追加して調整しましょう。0%側は元画像の暗い部分、100%側は明るい部分に対応します。
• 透明部分は元画像の透明度がそのまま残るので、切り抜き素材に当てても背景が復活することはありません。
• プレビューは長辺 760px に縮小した画像での変換です。原寸の書き出しではないので、細部の階調は CSP で当てた結果が最終になります。

[グラデーションマップ]の補正レイヤーへ写す

[レイヤー]メニュー→[新規色調補正レイヤー]→[グラデーションマップ]を選ぶと、選択中のレイヤーの上にグラデーションマップの色調補正レイヤーが作られます(PRO/EX の機能)。[編集]メニュー→[色調補正]から直接かける方法と違い、補正レイヤーは適用後も設定を変えられ、レイヤーパレットのアイコンをダブルタップすれば同じダイアログを開き直せます。

1. [グラデーションマップ]ダイアログの[カラーバー]の下に並ぶ点が[ノード]です。ノードをタップして選ぶと、右側で[位置]・[色]を設定できます。
2. 選んだノードの[位置]欄に、このツールのストップの位置(%)を入力します。左右ドラッグでも動きますが、数値を写すなら欄に直接入れるのが確実です。
3. 同じノードを選んだまま[色]で[指定色]を選び、カラー表示部をタップして[色の設定]ダイアログを開き、[HEX]欄にこのツールの HEX を入力します。ノードの色は[メイン描画色]・[サブ描画色]からも指定できます。
4. ストップの数だけノードが要ります。[カラーバー]の下の空欄をタップすると新しいノードが増えるので、位置と色を同じ手順で入れます。
5. JSONは、このツールで編集を再開するための保存ファイルです。クリスタには直接読み込めません。クリスタには位置とHEXの数値を手で写すか、グラデーションのPNG画像を開いてスポイトで色を拾ってください。同じ設定でも両者の見え方は異なる場合があるため、クリスタ側でも確認しましょう。
6. CSPの[混色モード]には[通常]・[知覚的]・[Photoshop互換]があります。[通常]から比較を始め、結果を確認してください。[輝度の補正]を設定できるのは[知覚的]の場合だけです。モードを合わせても、本ツールとの画素単位の一致は保証されません。

グラデーションセットへ登録して再利用する

• ダイアログの[グラデーションの追加]を押すと、[カラーバー]に表示中のグラデーションが、選択中のグラデーションセットの一番下に追加されます。次からは[グラデーションリスト]でダブルタップするだけで呼び出せます。
• リストの中身は[上へ]/[下へ]で並べ替え、[グラデーションの置き換え]で上書き、[グラデーションの複製]で複製、[グラデーションの削除]で削除できます。セット自体は[メニュー表示]から追加したり素材として登録したりできます。
• 効果が強すぎるときは補正レイヤー側で調整します。レイヤーパレットで[不透明度]を下げれば元の色が透け、[合成モード]を変えれば元の絵の陰影を残したまま色だけを乗せられます。
• 一部にだけ効かせたいときは、補正レイヤーに自動で付くレイヤーマスクを使います。マスクを選んで描画・消去すると、補正の効果と元の画像の見え方のバランスを調整できます。
• ランプ PNG はキャンバスに読み込んでスポイトで色を拾えます。JSON にはストップの位置・色と CSS 文字列が入りますが、CSP のグラデーションセットの形式ではないため、ファイルとして読み込ませることはできません。

詳しい仕組み

適用後の色は、元画像の各画素の輝度をランプ上の位置に読み替えて決まります。輝度は 0.2126 × R + 0.7152 × G + 0.0722 × B で、これを 0〜255 の 256 段へ量子化し、あらかじめ作っておいた 256 段ぶんの参照表を引いて色を得ます。ストップ間の補間は RGB 値の直線補間で、透明度は元画像の値をそのまま残します。ストップは常に位置の昇順に並べ替えられ、0〜100% の範囲へ丸められます。代表色の抽出は、長辺 160px へ縮小した画素に対して行います。バランス(K-means)は RGB 空間の重心探索、アクセント重視(メディアンカット)は OKLab 空間を占有範囲の広い箱から順に中央値で分割する方式で、どちらも結果を明度順に並べ替えたものをストップの初期値にします。

確認できること・できないこと

2つの色の間は、RGBの数値が一定の割合で変わるようにつなぎます。見た目の色の変化が均等になるとは限りません。離れた色をつなぐと途中がくすんで見えることがあるので、その位置に別の色のポイントを足して調整してください。

• CLIP STUDIO PAINT のグラデーションセット(.grd などのファイル)としては書き出せません。位置と HEX を手で写す形になります。
• CSP のグラデーションマップが内部で使う明度の求め方と、ここで使う輝度式が完全に一致する保証はありません。見え方が違う場合はストップの位置で調整してください。
• プレビューは縮小画像に対する変換なので、細部の階調は原寸と多少異なります。合成モードやレイヤーの不透明度も扱いません。

画像・入力データの扱い

画像はブラウザ内で処理します。編集したストップは端末内へ保存され、設定リンクにも含まれます。JSON読み込みは完成したストップを復元し、元画像やすべての抽出条件は含みません。新しい画像を開いてもストップは維持され、抽出色一覧と比較プレビューが更新されます。編集内容を置き換えるときだけ「再抽出」や「抽出色でストップを作り直す」を使います。