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

このツールでできること

画像を読み込むと代表色が抽出され、明度順に並んだストップとしてランプ上に置かれます。ストップはドラッグでも矢印キーでも動かせ、色は HEX 欄かカラーピッカーで差し替えられます。ランプを変えるたびにプレビューが更新されるので、元画像・適用後・左右分割を切り替えながら「色がどれだけ動いたか」を確認できます。結果は JSON・CSS・ランプ PNG として書き出せます。

作画のどの工程で使うか

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

使い方

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

入力項目の意味

抽出色数

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

抽出方法

バランス(K-means・既定)は面積の大きい色を中心に代表色をまとめ、階調のなだらかなランプになりやすい方法です。アクセント重視(メディアンカット)は色空間を占有範囲で分割するため、面積は小さくても目立つ差し色をストップとして残しやすくなります。

ストップ

ランプ上の色の基準点です。位置は 0% が最も暗い側、100% が最も明るい側に対応します。ストップとストップの間は直線的に補間されます。

位置

ストップの左からの割合(%)です。元画像の輝度がこの位置に読み替えられるので、暗部を広く取りたければ暗い色のストップを右へ寄せます。

比較モード

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

比較モードで何を見るか

• 元画像は変換前、適用後はランプを当てた結果です。左右分割は 1 枚の中に前後を並べるモードで、境界のスライダーを動かすと同じ場所の色がどれだけ動いたかを直接比べられます。
• 見るのは 3 点です。暗部が黒に潰れていないか、ハイライトが飛んでいないか、中間の階調が濁っていないか。潰れと飛びは端のストップの色を内側に寄せると収まります。
• 中間が濁るのは、離れた色相どうしを 1 区間で結んでいるためです。濁って見える明るさに対応する位置へ中間色のストップを足すと直ります。位置は 0% が暗部、100% が明部です。
• 透明部分は元画像の透明度がそのまま残るので、切り抜き素材に当てても背景が復活することはありません。
• プレビューは長辺 760px に縮小した画像での変換です。原寸の書き出しではないので、細部の階調は CSP で当てた結果が最終になります。

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

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

1. [グラデーションマップ]ダイアログの[カラーバー]の下に並ぶ点が[ノード]です。ノードをタップして選ぶと、右側で[位置]・[色]を設定できます。
2. 選んだノードの[位置]欄に、このツールのストップの位置(%)を入力します。左右ドラッグでも動きますが、数値を写すなら欄に直接入れるのが確実です。
3. 同じノードを選んだまま[色]で[指定色]を選び、カラー表示部をタップして[色の設定]ダイアログを開き、[HEX]欄にこのツールの HEX を入力します。ノードの色は[メイン描画色]・[サブ描画色]からも指定できます。
4. ストップの数だけノードが要ります。[カラーバー]の下の空欄をタップすると新しいノードが増えるので、位置と色を同じ手順で入れます。
5. 余ったノードは、選んで[ノードを削除]を押すか、上下にドラッグして外します。ストップの数・順番・位置・色を揃えれば、このページのプレビューとほぼ同じ変換になります。
6. 見え方が合わないときは[混色モード]と[輝度の補正]を見直します。ノード間の補間方法を切り替える設定で、このツールの補間(sRGB の直線補間)に近いのは[通常]です。

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

• ダイアログの[グラデーションの追加]を押すと、[カラーバー]に表示中のグラデーションが、選択中のグラデーションセットの一番下に追加されます。次からは[グラデーションリスト]でダブルタップするだけで呼び出せます。
• リストの中身は[上へ]/[下へ]で並べ替え、[グラデーションの置き換え]で上書き、[グラデーションの複製]で複製、[グラデーションの削除]で削除できます。セット自体は[メニュー表示]から追加したり素材として登録したりできます。
• 効果が強すぎるときは補正レイヤー側で調整します。レイヤーパレットで[不透明度]を下げれば元の色が透け、[合成モード]を変えれば元の絵の陰影を残したまま色だけを乗せられます。
• 一部にだけ効かせたいときは、補正レイヤーに自動で付くレイヤーマスクを使います。マスクを選んで描画・消去すると、補正の効果と元の画像の見え方のバランスを調整できます。
• ランプ 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 空間を占有範囲の広い箱から順に中央値で分割する方式で、どちらも結果を明度順に並べ替えたものをストップの初期値にします。

精度と対象外のこと

色の補間は sRGB の値をそのまま直線で結ぶ方式で、OKLab のような知覚的に等歩度な補間ではありません。離れた色相どうしを結ぶと、中間で彩度が落ちて濁ることがあります。気になる場合は、間に中間色のストップを足して制御してください。

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

画像・入力データの扱い

画像の読み込み、代表色の抽出、変換のすべてをブラウザ内で行い、画像や作ったランプを外部に送信することはありません。抽出色数と比較モードの選択はブラウザの localStorage に保存されますが、読み込んだ画像は保存されず、ページを閉じると消えます。

CLIP STUDIO PAINT とはどんなソフトか

CLIP STUDIO PAINT(クリップスタジオペイント)は、株式会社セルシスが開発しているイラスト・マンガ・アニメーション制作用のペイントソフトです。汎用の画像編集ソフトとの違いは、ペン入れに向いた筆圧設定、コマ割りとフキダシ、トーン、3D 素材、パース定規といった、紙と印刷を前提にした制作機能が最初から入っている点にあります。Windows・macOS・iPad・iPhone・Android・Chromebook で動きます。

体験版と購入の選択肢

• 公式サイトで無料の体験版が配布されています。描き味と必要な機能を自分の環境で確かめてから判断できます。
• グレードは PRO と EX の 2 つで、複数ページのマンガ原稿を 1 つの作品としてまとめて扱う機能が要るかどうかが主な分かれ目です。
• 買い方は買い切りの一括払いと、月額・年額のプランがあります。使える端末の種類と台数はプランによって変わります。
• 価格・プランの構成・対応端末は改定されることがあるため、最新の条件は公式サイトで確認してください。

このツールと CLIP STUDIO PAINT の関係

このページのツールはブラウザだけで動くので、CLIP STUDIO PAINT を持っていなくても計算や書き出しはそのまま使えます。ただしここで得られるのは CLIP STUDIO PAINT へ持ち込むための材料で、作ったランプは、CLIP STUDIO PAINT のグラデーションマップ補正レイヤーへ写して使います。考え方の部分は他のペイントソフトにも流用できますが、数値と書き出しは CLIP STUDIO PAINT に合わせて作ってあります。