自分でイラストを描いた後、「この配色って、客観的に見るとどうなってるんだろう？」って気になることありませんか？制作中は感覚で色を選んでいるので、完成後に振り返ると「意外とこの色が多かったんだ」とか「アクセントカラーが弱かったかも」って発見があります。
スポイトで色を拾うだけだと、全体の配色バランスは分かりません。「どの色が、どのくらいの面積を占めているのか？」を数値で把握できたら、自分の配色の癖や改善点が見えてくるはずです。
そんなわけで、イラストをアップロードするだけで、色の構成比率を円グラフで可視化できる『キャラ配色アナライザー』を開発しました。すべての処理がブラウザ内で完結するので、未公開の作品でも安心して分析できます。
配色バランスを知りたかった話
イラストを描いていると、感覚で色を選んでいることが多いんですよね。「この色、いい感じかも」って塗っていって、完成した後に「でも客観的に見ると、どんなバランスなんだろう？」って気になります。
スポイトで色を拾っても、それは「その色が使われている」ことしか分かりません。「どの色が、どのくらいの面積を占めているのか？」という構成比率を知ることで、自分の配色の癖や、改善点が見えてくるはずです。
そんなわけで、色の構成比率を円グラフで可視化するツールを作りました。
どんなツール？
イラスト画像をアップロードすると、使われている色の種類とその構成比率を円グラフとリストで表示するツールです。
自分のイラストの配色バランスを数値で確認したい時に使えます。背景色など不要な色を分析から除外する機能もあるので、キャラクター本体の配色に絞って分析できます。
できること
- 画像をドラッグ＆ドロップするだけで分析開始、サーバーに送信されない
- 分析結果を円グラフとパーセンテージで可視化
- 人間の知覚に近い「CIELAB色空間」とk-meansクラスタリングで色を抽出
- プレビュー画像上の不要な部分（背景など）をクリックして除外
- 除外した色をリストで管理、いつでも復帰可能
- 分析された色のHEXコードをワンクリックでコピー
- すべての処理がブラウザ内で完結、未公開作品でも安心
- PCでもスマートフォンでも利用可能
使い方
基本的な流れは3ステップです。
- 画像をアップロードする
分析したいイラスト画像を左側のエリアにドラッグ＆ドロップするか、クリックしてファイルを選択し ます。画像はサーバーに送信されず、ブラウザの中だけで分析されます。
- 分析結果を確認＆設定を調整する
右側に色の構成比を示した円グラフとカラーリストが表示されます。左側のパネルで「抽出する色の数」をスライダーで調整できます。
- 不要な色を除外する（任意）
背景など、キャラ本体と関係ない色を除外したい場合は、左側のプレビュー画像上の該当箇所をクリックします。クリックした領域の色が除外リストに追加され、分析結果がリアルタイムで更新されます。
分析結果の活用方法
分析結果を使って、いろんな気づきが得られます。
- 自分の作品を客観視する: 完成したイラストを分析してみると、「思っていたより特定の色に偏ってるな」「アクセントカラーが弱かったかも」など、自分の配色の癖や改善点を発見できます。
- 配色の引き出しを増やす: 自分の過去の作品を分析して、「なぜこの配色は心地良いのか」を考えてみましょう。メインカラーとサブカラーの比率、アクセント色の使い方などを数値で把握することで、感覚的だった「 センス」を具体的な「テクニック」として学べます。
- 配色リファレンス集を作る: いろんなイラストを分析して、その結果をストックしていくと、自分だけの配色リファレンス集が完成します。「元気なキャラは暖色系の比率が高い」「クールなキャラは無彩色をうまく使っている」など、実践的な配色ルールを学べます。
※配色見本として他人の作品を分析する場合は、私的利用の範囲に留めるなど、著作物の利用規約にご配慮ください。
分析の仕組み
シンプルな見た目ですが、精度の高い分析のために技術を工夫しています。
人間の感覚に近い「CIELAB色空間」: 一般的なRGB値ではなく、人間の色の知覚モデルに近い「CIELAB」という色空間で色の計算を行っています。これで、「機械的に色が近い」ではなく「人間が見て色が似ている」と感じるピクセル同士を、より正確にグループ化できます。
平均色を賢く見つける「k-meansクラスタリング」: イラストには無数の色やグラデーションが存在します。その中から「イラストを代表する色」を抽出するために、k-meansというクラスタリング技術を利用しています。画像内のピクセルを自動的に指定された数の色のグループに分類し、それぞれのグループの平均的な色を抽出しています。
安心のブラウザ完結
このツールは、プライバシーを最優 先に設計しています。画像の選択から分析、結果の表示まで、すべての処理がブラウザ内部で完結します。
画像データが外部のサーバーに送信・保存されることは一切ありません。オフラインの状態でも動作するので、未公開作品や個人的なイラストも、情報漏洩の心配なく安心して使えます。