高級感を出したくて黒と金にしたのに、派手で安っぽく見えてしまいました。
PORT編集部色の組み合わせだけでなく、金の量や明るさ、余白も関わります。まず飾りを減らし、濃い色と控えめな差し色に整理してみましょう。
高級感を出すなら黒と金、と考えがちですが、その2色を使うだけで仕上がるわけではありません。文字や飾りが多く、金色が広い面にあると、落ち着いた印象から離れることもあります。この記事では、暗い配色と明るい配色の両方から、控えめな上質さを作る方法を紹介します。
高級感のある配色は、色数と強調を絞り、濃淡や余白で落ち着きを作ると整えやすくなります。黒と金は選択肢の1つで、濃い緑や淡いベージュでも表現できます。
どんな高級感かを決める
重厚なホテルの案内と、自然素材の上質な雑貨では、似合う色が違います。まず「重厚」「静か」「自然」「洗練」など、狙う印象を具体的にしましょう。価格が高そうに見えることと、内容が伝わることは分けて考える必要があります。
| 方向性 | 試す配色 |
|---|---|
| 重厚で落ち着いた印象 | 濃い青・黒に近い色＋少量の差し色 |
| 自然で穏やかな印象 | アイボリー＋深い緑＋茶 |
| 明るくすっきりした印象 | 白・薄いベージュ＋濃い灰色 |
3つの配色を見比べる
金色を使うなら、量を絞る
季節のコースをご案内します。
季節のコースをご案内します。
画面の単色は、金属そのものの光沢を持ちません。黄色寄りの色を広く使うと「金」より「黄」の印象になることもあります。グラデーションや質感で金属らしく表現できますが、装飾を増やしすぎないようにしましょう。
本文を細い金色文字にすると読みにくい場合があります。金色風は飾りに、本文は白系や濃色にするほうが調整しやすくなります。
色と一緒に整える3つ
情報を詰め込まない
タイトル、短い説明、必要な案内に絞ります。内容が多いなら、削るのではなく、詳細ページへ分ける方法も考えましょう。
余白を広く使う
端ぎりぎりまで文字を置かず、見出しと本文の間も空けます。余白は「高級に見せる飾り」ではなく、内容を落ち着いて見てもらうための場所です。余白の取り方で具体例を確認できます。
文字と写真の品質をそろえる
細すぎる文字や粗い写真は、配色だけでは補えません。本文は読みやすい太さを残し、写真は暗くつぶれていないか、色味が合っているかを見ます。
黒背景で読みにくくしない
黒に近い背景へ濃い灰色の文字を置くと、文章が埋もれます。白系の本文を使い、小さな注釈まで見えるか確認しましょう。全ての文字を真っ白にする必要はありませんが、薄くしすぎないことが大切です。
Webの通常の文字では、背景とのコントラスト比4.5：1以上がWCAGの基準です。大きな文字には別の基準があります。色の名前や見た目の印象だけで合否は分からないので、コントラストチェックのツールで、実際の文字色と背景色の組み合わせを確認しましょう。
参考：W3C「Contrast (Minimum)」。色だけで意味を伝えない考え方はW3C「Use of Color」も参考にしています。
濃い背景だと高級に見えますが、長い説明文が読みにくい気がします。
PORT編集部短い見出しは濃い背景、説明文は明るい背景という分け方もあります。全部を暗くする必要はありません。読む量に合わせて背景を選びましょう。
まずは1枚で試す
架空のレストラン案内を、濃い青の背景と明るいベージュの背景で2枚作ってみましょう。文字と写真を同じにすると、色が与える違いを比較できます。最後に差し色を小さなボタンへ足します。
配色の役割は、ベース・メイン・アクセントカラーでも確認できます。
