自社の商品写真からブランドのカラーパレットを作る
商品とパッケージの写真から実際の色を取り出し、それぞれに役割を与え、広告、キャプション、エンドカードに載せる前に、すべての文字の組み合わせをWCAGのコントラストで確認します。
ロゴファイルはあってもカラーの一覧がない小規模ブランドは多くあります。色は商品そのものにあります。ボトル、ラベル、箱、生地などです。広告、サムネイル、キャプションのスタイルを作る段になると、写真から16進コードを目分量で拾い、うまくいくことを願うことになりがちです。
約10分で、より良い方法があります。実際の商品の写真から色を取り出し、それぞれに役割を与え、どの組み合わせが文字として読めるかを確認してください。無料のカラーパレット抽出ツールが、抽出と確認をブラウザ上で行うため、何もアップロードされません。
ムードボードではなく商品から始める理由
人は、棚の上や手の中での見た目で商品を認識します。パッケージの色に合った広告は、一目で同じブランドだと感じさせ、色がずれた広告は偽物のように見えます。商品から取った色は、ムードボードではなかなか表せない、実際に売っているものを正直に反映します。
物理的な商品がないサービスでも使えます。ベストなスクリーンショット、店舗の外観、チームの写真など、人がすでにあなたと結びつけているものを使ってください。
手順1: 写真を選んで切り抜く
きれいな写真を2、3枚選びます。背景がシンプルな商品、箱の正面、お気に入りのライフスタイル写真などです。そのうえで、しっかり切り抜いてください。抽出ツールは渡されたすべてのピクセルを数えるため、木のテーブルの上のボトルでは、テーブルがブランドカラーの1つとして返ってきます。商品とラベルに切り抜けば、パレットは商品そのものになります。
可能なら、日中の明るい光や柔らかい光で撮影してください。暖色のランプは白いパッケージをクリーム色に変えるため、抽出される色すべてにその色味が乗ります。
手順2: 5〜8色を抽出する
各写真を抽出ツールに入れ、きれいな商品写真なら5か6色、ごちゃごちゃした写真なら8色を指定します。似たピクセルをまとめ、各グループの平均色を、面積の大きい順に、画像に占める割合とともに一覧にします。開始点は固定されているため、同じ写真は常に同じパレットになります。白いボトルの赤いキャップのような小さく明るいアクセントは、平均化されて消えることなく、独自の色見本として残ります。
写真すべてを処理し、繰り返し現れる色を探してください。それがブランドの色です。1枚の写真にしか出てこない色は、たいてい背景か光の影響です。
手順3: すべての色に役割を与える
パレットは、各色に役割があって初めて役に立ちます。多くのブランドには4つ必要です。
- 背景: レイアウトの大部分を占める色。多くはパッケージのベースカラー、または明るいニュートラルカラーです。
- 文字: 背景の上で読める濃い色。ほぼ黒で十分です。コントラストチェックに通るなら、濃いブランドカラーの方が良い場合もあります。
- アクセント: 目立つ色。ボタン、価格のステッカー、強調したい一語に使います。
- 補助: ボックス、区切り線、補足テキスト用の1〜2色のニュートラルカラー。
写真から得られたすべての色を使おうとしないでください。役割のはっきりした5色の名前付きカラーがあれば、100本の広告でも統一感が保てます。12色では保てません。
手順4: 何かに使う前にコントラストを確認する
大型モニターで問題なく見える色の組み合わせも、日差しの中のスマートフォンでは読みにくいことがあります。弱視の方にはさらに読みにくくなります。W3Cのウェブコンテンツアクセシビリティガイドライン（WCAG）は、これを測る数値としてコントラスト比を定めています。1:1（同じ色を2回）から21:1（白地の黒）まであります。基準値は次のとおりです。
| 通常のテキスト | 大きいテキスト | |
|---|---|---|
| AA (SC 1.4.3) | 4.5:1 | 3:1 |
| AAA (SC 1.4.6) | 7:1 | 4.5:1 |
大きいテキストとは、WCAGの定義で18ポイント以上、または14ポイントの太字を指します。また、この数値は厳密な基準です。W3Cの1.4.3のガイダンスでは、計算された比率を四捨五入してはならないとされています。したがって4.499:1は4.5:1を満たしません。
WCAGはウェブコンテンツのために作られたもので、広告のためではありません。しかし、その考え方は、動画に焼き込まれたキャプションやエンドカードの文字など、画面上のあらゆる文字に当てはまります。
作成例
パッケージから、ネイビー#1a3c6e、クリーム#fdf6e3、オレンジ#e07a2eが得られたとします。
計算式は (L1 + 0.05) / (L2 + 0.05) です。L1は明るい方の色、L2は暗い方の色の相対輝度です。相対輝度は、黒の0から白の1までの値をとります。ネイビーは約0.046、クリームは約0.923、オレンジは約0.300です。
- クリーム地のネイビー文字: (0.923 + 0.05) / (0.046 + 0.05) = 0.973 / 0.096、丸めた値では約10.1、正確には10.16:1です。どのサイズでもAAAを満たします。これがメインの組み合わせです。
- クリーム地のオレンジ文字: (0.923 + 0.05) / (0.300 + 0.05) = 0.973 / 0.350、約2.78:1です。大きいテキストでも不合格です。オレンジはクリームの上で文字を載せるべきではありません。
- オレンジ地の黒文字: (0.300 + 0.05) / (0 + 0.05) = 0.350 / 0.05。丸めた値では7.0ですが、正確には6.99:1です。すべての文字でAAを満たしますが、AAAはわずかに届きません。ボタンのラベルには問題ありません。
- ネイビー地のクリーム文字: 最初の組み合わせと同じなので、同じ10.16:1です。前景と背景を入れ替えても比率は変わりません。
そのため、役割はほぼ自然に決まります。背景はクリーム、文字はネイビー、オレンジはアクセントの形状として、その上に黒い文字を載せます（ネイビー地のオレンジは3.65:1で、大きいテキストだけがAAを満たします）。抽出ツールは、この全体の表を一度に表示します。すべての色同士に加え、白と黒との組み合わせも示し、各セルはAAA、AA、大きいテキストのAA、不合格のいずれかで評価されます。
手順5: 一度書き留める
パレットをCSSのカスタムプロパティまたはJSONで書き出し、ロゴファイルの横に保存します。役割が決まったら変数名を役割に合わせて変えてください。--brand-bg、--brand-text、--brand-accentの方が、1か月後に--color-3を見るより分かりやすくなります。各色の下に、どの組み合わせが合格したかを1行書いておくと、誰もチェックをやり直さずに済みます。
既に持っている公式の値とも照らし合わせてください。写真から得られるのは、カメラが写した色です。それは印刷されたパッケージに近いものの、インクの仕様とは同一ではありません。印刷会社やデザイナーに正確な値があれば、そちらを優先してください。
広告と投稿でパレットを使う
- キャプションと字幕: 背景色の上にボックスを置き、その上に文字の色を載せるか、逆にします。先に組み合わせを確認してください。
- エンドカード: 背景色に、ロゴと一行のテキストを文字の色で載せます。アクセント色を、短い行動喚起の後ろのボタン形状に使えます。
- サムネイルとカバー: アクセントは1色、大きく読みやすい一語、そして背景を広く使います。
- パッケージのQRコード: パッケージより明らかに濃ければ、ブランドカラーも使えます。当社のQRコード生成ツールは、コントラストが低いと警告します。
Hermosoの役割
Hermosoは、AIマーケティングエージェントです。あなたの市場で既に成果を出している広告を調べ、ブランドに合った画像・動画広告を作り、ご自身のソーシャルアカウントに投稿と予約を行い、ご自身の広告アカウントで有料キャンペーンを実行します。ウェブサイトからブランドを追加すると、商品、ロゴ、パレットを学習します。キャプションとエンドカードは、依頼しない限りオフのままです。依頼した場合は、テキスト、ボックス、エンドカードの色を16進コードで設定できるため、ここで確認した組み合わせがそのまま公開されます。ウェブアプリで使えるほか、MCPサーバーを通じてClaude、ChatGPT、Cursorの中でも使えます。
よくある質問
商品の色の16進コードはどう調べればよいですか？
商品またはパッケージだけが写ったきれいな写真を切り抜き、カラーパレット抽出ツールに入れます。主要な色がHEX、RGB、HSLで表示されます。2、3枚の写真で試し、繰り返し出てくる色を残してください。
テキストに必要なコントラスト比はいくつですか？
WCAG 2.2では、レベルAAは通常テキストで4.5:1、大きいテキストで3:1が必要です。AAAは7:1と4.5:1です。大きいテキストは、18ポイント以上、または14ポイント太字以上です。
4.49:1でAAとして十分ですか？
いいえ。W3Cは、基準値と比較する際に比率を四捨五入してはならないとしています。したがって4.499:1は4.5:1を満たしません。
ブランドパレットには何色あるべきですか？
各色に役割を与えられる数で十分です。通常は背景、文字色、アクセント1色、ニュートラル1〜2色です。役割のはっきりした5色の名前付きカラーは、長いリストよりも広告の統一感を保ちます。
写真から取った色は正確ですか？
いいえ。それは、その光の下でカメラが記録した色です。商品には近いものの、印刷やインクの仕様とは同じではありません。公式の値があれば、それを使ってください。