メインコンテンツへ移動
AIチュートリアル

palette-from-image-aiで画像を実用的なカラーパレットに変換する方法

画像領域を分析し、知覚距離に基づいて色をクラスタリングし、色の役割を割り当て、デザイン、ゲーム開発、Web、クリエイティブ制作向けのパレットを書き出せる、ポータブルなWindowsアプリケーションpalette-from-image-aiのインストール方法と使い方を解説します。

palette-from-image-aiで画像を実用的なカラーパレットに変換する方法

palette-from-image-aiとは?

palette-from-image-aiは、画像を実用的なカラーパレットに変換するポータブルなWindowsデスクトップアプリケーションです。スクリーンショット、写真、ゲーム画面のキャプチャ、テクスチャ、絵画、その他の対応画像ファイルを解析し、意味のある色を順序付けて抽出できます。

単純なRGBサンプリングスクリプトとは異なり、このアプリケーションはデバイス上で動作するビジョンモデルを使用して画像を領域に分割し、CIEDE2000の知覚距離によるLAB色空間で色をクラスタリングします。そして、画像内で占める割合に基づいて色を順位付けします。その結果、ほぼ同一のスウォッチを複数返すのではなく、意味のあるアクセント、シャドウ、ハイライト、背景色を保持したパレットを作成できます。

アプリケーションはオフラインで動作し、アカウントやランタイムのインストールは不要です。プロファイルは実行ファイルと同じ場所に保存されます。Windows 10およびWindows 11に対応し、.exeファイルとmodels/ディレクトリを含むアーカイブとして配布されます。

主な機能

  • 領域認識抽出:サンプリング前に画像を分割し、異なる視覚領域を確実にパレットへ反映します。
  • 知覚ベースのクラスタリング:単純なRGB類似度ではなく、LAB色空間とCIEDE2000を使用します。
  • 役割タグ付け:スウォッチにベース、アクセント、シャドウ、ハイライト、ニュートラルのラベルを付けます。
  • ハーモニーモード:類似色、補色、トライアド、スプリットコンプリメンタリーに対応します。
  • パレット操作:5~16個のスウォッチを選択し、色のロック、個別ピクセルのサンプリング、スウォッチの並べ替えを行えます。
  • バッチ処理:画像フォルダーを処理し、ファイルごとに1つのパレットを作成します。
  • パレット比較:Palette Diffを使用して、2つのパレット間で色がどのように変化したかを確認できます。
  • オフライン動作:アップロード、アカウント、テレメトリー、外部ネットワークへの接続は不要です。
  • GPUアクセラレーション(オプション):対応環境ではDX12パスを使用し、大きな画像をより高速に処理できます。
  • 柔軟なエクスポート:HEX、RGB、HSL、LAB、ASE、GPL、CSS変数、JSON、PNG、ACO、SKETCH、SVG形式で出力できます。

システム要件

対応する最小オペレーティングシステムは、64ビット版Windows 10 21H2です。推奨環境は、Windows 11 23H2以降、AVX2対応の8コアプロセッサー、16 GBのRAM、4 GBのVRAMを搭載した専用DX12 GPU、SSDです。

統合型DX11 GPU、またはCPUのみでも動作します。READMEによると、CPUでは4K画像の処理に約5~8秒、GPUアクセラレーションを有効にした場合は約1.2秒かかります。別途ランタイム、Python、Node.jsのインストールや管理者権限は必要ありません。

インストールと初回起動

1. アーカイブをダウンロードする

palette-from-image-aiプロジェクトページからWindowsアーカイブをダウンロードします。アーカイブには、アプリケーションに必要な実行ファイルとモデルファイルが含まれています。

2. フォルダー全体を展開する

Windowsエクスプローラーのすべて展開コマンドを使用し、ドキュメントや専用のツールディレクトリなど、自分が所有するフォルダーを選択します。ZIPファイル内から実行ファイルを起動しないでください。モデルファイルはmodels/ディレクトリに置いたままにする必要があり、圧縮アーカイブからは正しくメモリマップできません。

3. アプリケーションを起動する

展開したフォルダーを開き、.exeファイルをダブルクリックします。実行ファイルが署名されていないため、Windows SmartScreenに警告が表示される場合があります。ダウンロード元を信頼できる場合は、詳細情報を選択してから実行を選びます。

初回起動時、アプリケーションは./cache/に小さなシェーダーキャッシュを作成します。通常、約3秒かかります。次回以降はキャッシュを使用するため、より速く起動します。

4. フォルダー構成を維持する

このアプリケーションはポータブルなため、インストーラー、レジストリの変更、PATHの変更、システム全体で使用するランタイムはありません。実行ファイルとmodels/ディレクトリは同じ場所に置いてください。アプリケーションを削除するには、終了してから展開したフォルダーを削除します。

基本操作:最初のパレットを作成する

  1. 画像を開く。PNG、JPG、WEBP、BMP、TIFF、GIF、AVIFファイルをアプリケーションウィンドウへドラッグするか、ファイル > 画像を開くを選択します。
  2. スウォッチ数を選択する。スライダーで5~16色を選択します。5個はミニマルなインターフェースに適しており、8個は一般的なアートディレクションに、12~16個は細かなテクスチャの表現に適しています。
  3. 必要に応じてハーモニーモードを選択する。抽出した色に意図した色彩関係を持たせたい場合は、類似色、補色、トライアド、スプリットコンプリメンタリーを選択します。
  4. 役割を確認する。自動的に付与されたベース、アクセント、シャドウ、ハイライト、ニュートラルのラベルを確認します。ワークフローで異なる用語を使用する場合は、ラベルを編集できます。
  5. 重要な色をロックする。ブランドカラーや必須の素材色を維持する必要がある場合は、スウォッチを追加または選択し、再抽出する前にロックコントロールをクリックします。
  6. 結果を調整する。スウォッチをドラッグして並べ替えたり、スポイトサンプラーで正確なピクセルを選択したり、高度な設定で重複除去のしきい値を調整したりできます。
  7. パレットをエクスポートする。エクスポートを選択し、ワークフローに必要な形式を選びます。スウォッチストリップを右クリックしてHEXとしてコピーを選択することもできます。

エクスポート例

このアプリケーションは、デザインツール、開発ワークフロー、ドキュメント、アセットパイプライン向けの形式を出力できます。たとえば、CSS変数をスタイルシートへコピーできます:

--color-1: #xxxxxx;

スクリプト化したワークフローでは、JSONは16進数値の単純なリストより多くの情報を保持できます。色の役割や重みも含められます。コマンドラインインターフェースからCSSパレットを直接書き出すこともできます。

palette-from-image-ai.exe --input foo.png --count 8 --format css --out palette.css

ASEとACOのエクスポートはAdobeのワークフロー向け、GPLはGIMPとInkscape向けです。PNGまたはSVGのスウォッチシートは、文書、プレゼンテーション、チーム内の共有に便利です。

バッチモードの使用

バッチフォルダーモードでは、画像を1枚ずつ開く代わりに、ディレクトリ全体を処理できます。対応ファイルを含むフォルダーをアプリケーションに指定すると、画像ごとに1つのパレットが作成されます。バッチ処理はマルチスレッドで実行され、ローカルSSD上で最も効果を発揮します。

READMEには、セグメンターがメモリマップドファイルアクセスに依存するため、ネットワークドライブではバッチ処理が停止する場合があると記載されています。その場合は、バッチジョブを開始する前に画像セットをローカルフォルダーへコピーしてください。

高度なパレット制御

再抽出の前にスウォッチをロックする

ソース画像、スウォッチ数、その他の設定を変更しても色を維持したい場合は、ロックしたスウォッチを使用します。ブランドカラー、既存のUIカラー、指定された素材色などに便利です。スウォッチをロックしたら、パレットを再抽出し、残りの色をその色を中心にアプリケーションで生成します。

重複除去のしきい値を調整する

しきい値は、近似した重複色をどの程度積極的に統合するかを制御します。READMEでは、彩度の高い写真画像で結果が平坦に見える場合、約2.0まで下げることを推奨しています。フラットデザインやピクセルアートには、4.0前後の値が推奨されています。最適な設定はソースと、保持したい変化量によって異なります。

カスタム色差関数を使用する

標準の知覚比較にはCIEDE2000が使用されますが、高度な機能ではCMCとCIE94もサポートされています。特定の制作パイプラインや比較方式で必要になる場合は、これらの代替方式が役立ちます。

GPUアクセラレーションを有効にする

互換性のあるシステムでは、DX12 GPUパスを有効にすると大きな画像をより高速に処理できます。GPU切り替えが利用できない場合、そのデバイスは対応するDX12コンピュートキューを公開していません。アプリケーションはCPUモードでも完全に利用できます。

プリセットと最近のパレットを使用する

プリセットマネージャーでは、ハーモニー、スウォッチ数、しきい値の設定を組み合わせて保存できます。最近のパレットには直近20個のパレットが保存され、復元できます。アートディレクションの複数の案を比較する際に便利です。

コマンドラインと監視フォルダーのワークフロー

CLIモードでは、ポータブル実行ファイルをスクリプトやビルド工程で利用できます。基本コマンドでは、入力ファイル、スウォッチ数、出力形式、保存先を指定します。

palette-from-image-ai.exe --input foo.png --count 8 --format css --out palette.css

CLIは--harmonyフラグにも対応しています。これにより、パレット生成時にスクリプトからハーモニースキームを指定できます。自動取り込みには、監視フォルダーがディレクトリを監視し、新しく追加された画像を処理します。

より良い結果を得るためのヒント

  • 可能な限り、きれいで適切にトリミングされた画像を使用してください。明瞭なソース画像は、雑然としたスクリーンショットよりも有用な領域分割を生成しやすくなります。
  • 多くのUIデザイン作業では、8個のスウォッチと補色ハーモニーを選択してください。実用的なベースカラー、ニュートラルカラー、アクセントカラーの構成になりやすくなります。
  • スウォッチ数を変更したり再抽出したりする前に、重要な色をロックしてください。
  • アートディレクションの変更後はパレット差分を使用して、どの色調が変化したかを確認してください。
  • ビルド工程で役割、重み、16進数値が必要な場合は、色だけでなくJSONとしてエクスポートしてください。
  • 正確なピクセル値が重要な場合は、スポイトサンプラーを使って手動で上書きしてください。
  • パフォーマンス向上のため、バッチ入力はローカルSSDに置いてください。
  • スポイトサンプラーでモニターのICCプロファイルを反映させたい場合は、カラーマネジメントを有効にしてください。

トラブルシューティング

  • SmartScreenの警告: 実行ファイルには署名がありません。提供元を信頼できる場合は、詳細情報を選択してから実行を選択してください。
  • モデルの読み込みに失敗する: models/ディレクトリが実行ファイルの隣に残っていること、アプリケーションをZIPから展開したことを確認してください。
  • 彩度の高い画像でパレットが平坦になる: 重複除去のしきい値を2.0まで下げて、もう一度抽出してください。
  • GPUコントロールが無効になっている: システムに対応するDX12コンピュートキューがない場合は、CPUモードを使用してください。
  • ASEの色がPhotoshopにすぐ表示されない: インポート後にPhotoshopを再起動してください。スウォッチがキャッシュされている可能性があります。
  • 大きなTIFFを開けない: 200メガピクセルを超える画像は、100メガピクセル未満に縮小する必要がある場合があります。16ビットTIFFへの対応はロードマップ項目です。

まとめ

palette-from-image-aiは、視覚的な参考資料を構造化されたパレットに変換する、オフラインで利用可能なポータブルツールです。領域分割、知覚クラスタリング、役割タグ付け、ハーモニー制御、スウォッチのロック、バッチ処理、幅広いエクスポート対応を備え、ウェブデザイン、ゲーム開発、イラスト、テクスチャ制作、シェーダー、制作ドキュメントに適しています。

まず、models/フォルダーを保持したままアーカイブを展開し、実行ファイルを起動して画像を開きます。スウォッチ数とハーモニー設定を調整し、ワークフローに必要な形式で結果をエクスポートしてください。