モカとピンクの配色例｜面積で変えるやわらかさと落ち着き
モカとピンクを組み合わせるとき、色を決めただけでは全体の印象は定まりません。ピンクを背景に広く使えばやわらかい雰囲気に、モカを大きな見出し帯に使えば落ち着いた印象に寄せられます。ギフト雑貨の新作を知らせるWebバナーを例に、同じ色の面積を変えた2案と、文字・ボタンの配色を紹介します。
モカとピンクは、広く使う色から決める
モカはコーヒーを思わせる茶系の色ですが、明るさや赤みには幅があります。ピンクも淡さによって見え方が変わるため、今回は次の4色を例として固定します。HEX（ヘックス）は「#」と6桁の英数字でWeb上の色を指定する形式です。
- モカ：#715449 ― 深みのある茶色。見出し帯やボタンに使用
- 淡いピンク：#F1D3DB ― 広い背景にも使える穏やかな色
- アイボリー：#FFF9F5 ― 写真や文字の周囲に置く明るい色
- ダークブラウン：#302824 ― 本文や小さなラベルに使う文字色
モカ #715449 と淡いピンク #F1D3DB を主役にしながら、文字はダークブラウン #302824、余白はアイボリー #FFF9F5 で整えます。配色比率は決まりではなく、ここでは写真・文字を除いた色面のおおよその面積の目安として考えます。
同じ4色で比べる、面積の異なる2つのバナー
案1：ピンクを約65％使い、やわらかさを出す
- 全体の背景：約65％を淡いピンク #F1D3DB
- 商品写真を囲むカード：約25％をアイボリー #FFF9F5
- 見出しの一部と「新作を見る」ボタン：約10％をモカ #715449
- 本文と価格の説明：ダークブラウン #302824。ボタン内の文字はアイボリー #FFF9F5
商品写真の周囲を明るく保ち、短い見出しだけにモカを使います。ピンクの面積が広いため、ギフトの親しみやすさを表現したいときの候補です。ただし本文までピンクや薄い茶色にせず、濃い文字色で内容を読み分けられるようにします。
案2：モカの帯を約30％使い、落ち着きを強める
- 情報を置く背景：約60％をアイボリー #FFF9F5
- 上部の見出し帯：約30％をモカ #715449、タイトルはアイボリー #FFF9F5
- 「NEW」などの小さな表示：約10％を淡いピンク #F1D3DB、文字はダークブラウン #302824
- 説明文はダークブラウン #302824。下部のボタンはモカ #715449 にアイボリー #FFF9F5 の文字
見出しを濃い色面にまとめ、ピンクは小さな目印に絞ります。案1よりピンクの主張を抑えつつ、モカの面積で画面を引き締めたい場合に向きます。どちらの案も、重要なボタンの位置と文字の意味は色だけに頼らず明確に示します。
淡い色の境界と文字コントラストを確認する
コントラスト比は、文字と背景などの明るさの差を示す数値です。ダークブラウン #302824 と淡いピンク #F1D3DB は約10.37:1、モカ #715449 と淡いピンク #F1D3DB は約4.92:1、アイボリー #FFF9F5 とモカ #715449 は約6.56:1、ダークブラウン #302824 とアイボリー #FFF9F5 は約13.83:1です。いずれもWCAG（Webコンテンツを利用しやすくするための指針）のレベルAAで、通常サイズの文字に求められる4.5:1以上です。
一方、淡いピンク #F1D3DB とアイボリー #FFF9F5 の差は約1.33:1です。カードの境界を色だけで示さず、余白やモカ #715449 の細い枠線も検討しましょう。写真の上に直接文字を重ねる場合は、写真の明暗によって読みやすさが変わるため、実際の画像で確認する必要があります。
スマートフォンでは見出し帯や写真の配置が変わることがあります。縮小後もボタンと説明文が分かれているか確認してください。HueRollではHEXで色を調整し、選んだ色と白・黒のコントラストを確認できますが、任意の2色同士の比較やAA・AAAの自動判定はできません。隣り合う色の組み合わせは別の計算手段で確かめましょう。