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