そもそもカラーパレットとは何か。なぜ色を絞るのか
カラーパレットとは、その商品ページやブランドで「使ってよい色」をあらかじめ決めた、少数の色のセットです。色を無制限に使うのではなく数色に絞ることで、見る人の頭が混乱せず、ブランドらしさが一目で伝わります。色を決めることは制約ではなく、印象を設計するための土台です。
葛飾北斎の「神奈川沖浪裏」は、藍・白・薄い肌色など、ごく限られた色数だけで世界的な美しさを生んでいます。色数が少ないからこそ、画面に強い秩序とまとまりが生まれるのです。色を絞ることは貧しさではなく、洗練です。
サザエさん一家を思い出してください。サザエは黄系の服、カツオは赤系、ワカメは水色──毎回ほぼ同じ配色だからこそ、シルエットだけで誰か分かります。ブランドの色も同じで、「いつ見ても同じ色」が積み重なって初めて、記憶に残る一貫性になります。
色の3つの軸とは。HSV（色相・彩度・明度）をやさしく
色は「色相・彩度・明度」という3つのつまみで表せます。これをHSV（Hue=色相／Saturation=彩度／Value=明度）と呼びます。色を「赤っぽい」「薄い」と感覚で語る代わりに、この3軸で考えると、色の調整も他人への共有も一気に正確になります。
- 色相（Hue／いろあい）：赤・青・緑といった「色味そのもの」。円環で表され、化粧品では青みで清潔感、ピンクで可愛らしさ、ベージュで肌なじみといった連想が働きやすい色味です。
- 彩度（Saturation／あざやかさ）：色の鮮やかさ。高いとビビッドで元気な印象、低いとくすんで上品・落ち着いた印象になります。大人向けコスメは彩度を少し落とすと高見えしやすい傾向です。
- 明度（Value／あかるさ）：色の明るさ。高いと軽やか・透明感、低いと重厚・高級感。同じピンクでも明度を上げれば軽く、下げれば落ち着きます。
色相＝色味、彩度＝鮮やかさ、明度＝明るさ。この3語をセットで覚えると、デザイナーへの修正依頼が「もっと可愛く」ではなく「彩度を少し下げて、明度はそのまま」と具体的に伝えられます。
ブランドの色はどう決めるのか。パレットの組み方
パレットは「主役の色を1つ決め、それに合う色を数色だけ足す」という順番で組みます。最初から完璧な5色を探すのではなく、ブランドの主役色を決め、その色相・彩度・明度を基準に背景・文字・アクセントを派生させると、自然にまとまったパレットになります。
最低限そろえたい5つの役割
| 役割 | 使いどころ | 決め方の目安 |
|---|
| 主役（メインカラー） | ロゴ・見出し・ボタンなどブランドの顔 | ブランドの印象を決める1色。最初に決める |
| 副（サブカラー） | 主役を支える2色目 | 主役と相性のよい近い色相、または控えめな反対色 |
| アクセント | 「購入」ボタンなど一番押させたい一点 | 主役と差がつく目立つ色。多用しない |
| 背景 | ページのベース面 | 彩度を抑えた明るい色や白に近い色 |
| 文字 | 本文・見出しの文字 | 背景としっかり明度差がつく濃い色 |
色を選ぶときは、化粧品らしい連想を「軽く」意識する程度で十分です。青みで清潔感、ピンクで可愛らしさといった連想はありますが、色そのものが効果・効能を生むわけではないので、断定的な訴求は避けます。どの色が何を連想させるかの深い話は、別記事「ブランドカラーと色彩心理」に譲ります。
商品ページで色をどう配分するか。60-30-10の法則
色は「選ぶ」だけでなく「配分」が大切です。広く使うベースカラーを60%、それを支えるメインカラーを30%、ここぞの一点に使うアクセントカラーを10%──この60-30-10の比率で配ると、まとまりと強弱が同時に手に入ります。比率が崩れると、ページはうるさく見えたり、逆にのっぺり見えたりします。
ベース60%・メイン30%・アクセント10%。アクセントは一点に絞るほど効く- ベース60％：背景や余白など、ページの大部分を占める色。淡く落ち着いた色や白を選ぶと、他の色が映えます。
- メイン30％：見出しの帯や写真、区切りなどブランドの主役色。ページ全体の性格を決めます。
- アクセント10％：「カートに入れる」ボタンや限定マークなど、一番見てほしい一点だけに使う色。少ないからこそ目を引きます。
アクセントカラーを「目立つから」とあちこちに使うのは逆効果です。10%を超えて広げると、どこを見ればいいか分からなくなり、肝心の購入ボタンが埋もれます。アクセントは「ページで一番押させたい一点」に絞ってこそ機能します。
文字が読みにくいのはなぜか。コントラスト（明度差）
色がきれいでも、背景と文字の明度差（コントラスト）が足りないと文字は読めません。コントラストとは背景と文字の明るさの差のことで、化粧品ページにありがちな「淡いピンクの背景に白に近い文字」は、おしゃれに見えても読めない代表例です。色相がおしゃれかどうかより、まず明度差を確保することが先です。
- 明るい背景には濃い（明度の低い）文字、暗い背景には明るい文字を合わせる。
- 淡い色どうし・濃い色どうしの組み合わせは、明度差が小さく読みにくいので避ける。
- 本文の文字色は、雰囲気を優先しすぎず、まず「離れて見ても読めるか」で判断する。
コントラストは「美しさ」ではなく「読めるか（=売れるか）」の問題です。スマホを腕いっぱいに離して、文字がすっと読めれば合格。読みづらければ、色味ではなく明度差をまず疑ってください。
Plottellならブランドの色をどう扱えるか
ここまでの「主役・副・アクセント・背景・文字を決め、60-30-10で配る」という作業は、本来そこそこ手間がかかります。Plottellのブランドキットは、参考にしたいサイトのURLや画像を渡すだけで、主役色・副色・アクセント色・背景色・文字色を自動で抽出し、商品ページの各セクションへ一貫した配色として反映できます。色の仕組みと比率を理解したうえでブランドキットを使えば、誰が作っても「いつ見ても同じ色」のページを素早く量産できます。
