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