淡い色でかわいくしたいのに、文字まで見えにくくなってしまいます。
PORT編集部やわらかさと読みやすさの両立で迷いますよね。背景は淡くても、文字は濃くして大丈夫です。配色例と色の役割を比べながら整えましょう。
やさしい・かわいい配色は、淡い背景と濃い本文を分けると作りやすくなります。かわいさは小さな差し色や形で加え、日付や価格まで淡くしないようにしましょう。
パステルカラーとは？
パステルカラーとは、一般に明るく淡い色を指す呼び名のことです。例えば、淡いピンクや水色を、広い背景に使います。
くすみカラーとは？
くすみカラーとは、一般に鮮やかさが抑えられた色を指す呼び名のことです。例えば、灰色に近づいたピンクにも、明るいものと暗いものがあります。
#FAEFF3パステルのような明るく淡い方向。
#B48F9Eくすみの方向。暗さだけを意味する言葉ではない。
どんなかわいさを目指す？
元気でポップなかわいさと、落ち着いた大人のかわいさは違います。「かわいい」だけで色を選ぶ前に、「ふんわり」「自然」「明るく元気」などの方向を決めましょう。
| 方向性 | 試しやすい色の使い方 |
|---|---|
| ふんわり、やわらかい | 明るい背景＋少量の淡いピンクや紫 |
| 自然で、ほっとする | ベージュ＋落ち着いた緑 |
| 明るく、元気 | 白い背景＋鮮やかな差し色を少量 |
鮮やかな色も、使う量が少なければかわいらしい目印になります。必ず全てをパステルにする必要はありません。
3つの配色例を見る
淡い色同士で読みにくくしない
広い面の雰囲気を決める。
日時・価格も含め、必要な情報を読む。
かわいさは小さな色や形で加える。
好きな色で、小さな作品を作ろう。
好きな色で、小さな作品を作ろう。
日付・価格・注意事項は小さくなりやすいので、特に淡い文字を避けましょう。タイトルが読めても、必要な情報が埋もれていると使いやすいデザインにはなりません。
Webの通常の文字では、背景とのコントラスト比4.5：1以上がWCAGの基準です。大きな文字には別の基準があります。色の名前や見た目の印象だけで合否は分からないので、コントラストチェックのツールで、実際の文字色と背景色の組み合わせを確認しましょう。
参考：W3C「Contrast (Minimum)」。色だけで意味を伝えない考え方はW3C「Use of Color」も参考にしています。
パステルとくすみの違い
一般にパステルカラーは明るく淡い色、くすみカラーは鮮やかさが抑えられた色を指します。ただし、厳密な統一基準がある呼び名ではありません。くすんだ色にも明るいものと暗いものがあります。
「もう少し落ち着かせたい」なら彩度を、「背景に使いたいので明るくしたい」なら明るさを調整します。言葉だけで判断せず、実際の色を見て選びましょう。色相・彩度・明度の記事では、この違いを段階的な図で確認できます。
ピンクも黄色も水色も入れたいのですが、全部使うと子どもっぽくなります。
PORT編集部色の明るさや鮮やかさを近づけ、広い背景は1色にしてみましょう。ほかの色は小さな飾りへ回すと、色を楽しみながら整理できます。
色以外もやわらかく整える
淡い背景でやわらかさを作る。
同じ情報でも、配色で違う方向を試せる。
- 角丸や丸い図形は、全てに付けず一部で使う
- 文字を詰めず、見出しと本文に余白を作る
- イラストの線や写真の色味をそろえる
- 本文は読みやすい書体と太さを選ぶ
- 飾りが内容より目立たないようにする
かわいい飾りを増やしたくなっても、まず内容を読める状態にしましょう。色・形・余白を全部盛り込むより、繰り返すルールを少なく決めるとまとまります。反復の基本も参考になります。
同系色で練習する
好きな色を選び、明るい背景・中間の飾り・濃い本文の3段階を作ります。同じカードへ当てはめ、スマホサイズで日付まで読めるか見てみましょう。読みづらければ、まず文字を濃くし、飾りを減らして調整します。
届けたい人に合わせる考え方は、女性向けデザインの配色でも詳しく紹介しています。
