60:30:10 配色比率分析ツール

60:30:10 配色比率分析ツールとは？

60:30:10 配色比率分析ツールは、アップロードした画像の色を近いグループごとにまとめ、どの色味が画面の土台になっているか、どの色が中間のつなぎ役か、どの色がポイントを作っているかを整理するツールです。単に上位3色を抜き出すのではなく、近い色味をひとつのファミリーとしてまとめ、実際の画面印象をより近く読めるように設計しています。

分析結果では、主色60%、補助色30%、アクセント色10%への近さを示すスコアに加え、どのグループが60に近いか、アクセント色が不足しているか多すぎるか、画面の一か所に集まっているか広く散っているかまで確認できます。プレゼン資料、サムネイル、イラスト、Web UI、シーンリファレンスの分析に活用できます。

こんな場面で使えます

• アニメーションシーンの分析 — 特定のシーンがなぜ安定して見えるのか、ポイントカラーがどこで効いているのかを読みたいとき
• ブランド／サムネイルのリファレンス整理 — 参考画像の色構造を、数値とグループ単位で素早く分解したいとき
• UIモックの確認 — ボタンのアクセント色が広がりすぎていないか、主色と補助色の分離が弱くないかを確認したいとき
• ポスター・バナーのデザイン — 背景、補助領域、アクセントポイントが適切に分かれているかを素早く診断したいとき
• カラースクリプトの学習 — 好きな画像の配色と配置パターンを再現できる言葉で記録したいとき

主な機能

• 近い色味の自動グループ化 — 淡いバリエーションまでまとめてひとつの色グループとして見せるため、目で感じる印象に近い解釈ができます。
• 60:30:10 近接スコア — 実際の画像比率が理想的な配分にどれだけ近いかを、スコアと文章で知らせます。
• 主色・補助色・アクセント色の役割カード — 各役割の代表色、比率、特徴、改善ヒントを一枚のカードにまとめて表示します。
• アクセント色配置ヒートマップ — アクセント色が一か所に集まっているのか、画面全体に散っているのかを一目で確認できます。
• 背景色を弱めるモード — 白背景や大きな無彩色面で主色判定がぶれやすいときに、補正分析ができます。
• HEX/RGB/HSL コード確認 — 代表色コードを好きな形式に切り替えて確認し、コピーできます。

使い方

1. 画像アップロード — 分析したいシーン、サムネイル、ポスター、UIキャプチャ画像をアップロードします。
2. 分析モードを選ぶ — 大きな白背景や黒背景がある場合は、デフォルトの 背景色を弱める モードのまま使うのがおすすめです。
3. スコアと役割を確認 — 上部の適合度スコアと主色・補助色・アクセント色の比率を先に読みます。
4. ヒートマップとインサイトを確認 — アクセント色がどこに集まっているか、減らすべきか増やすべきかを文章ガイドで確認します。
5. コードを参考にする — 役割カードや色グループに表示された HEX/RGB/HSL の値をデザイン作業に活用します。

分析はどのように行われますか？

このツールは画像を縮小サンプリングし、透明ピクセルを除外したうえで、まず色クラスターを作り、その後に近い色同士を統合します。こうして得た代表色グループを基準に、主色・補助色・アクセント色の役割を分け、各グループが占める面積を計算します。

アクセント色は単に3番目に大きな色を選ぶのではなく、画面内で面積が小さくても彩度とコントラストが高く、視線を引く可能性が高いグループを優先候補として探します。その後、画像全体をグリッドに分け、アクセント色がどの位置にどれだけ分布しているかを計算し、ポイントが集まっているか散っているかも説明します。

結果は参考用の解釈ツールです。シーンの物語性、照明、遠近感、ブランド意図まで自動で判断するものではないため、最終的なデザイン判断は文脈と合わせてご確認ください。

よくある質問