信頼感を出そうと青にしたのに、冷たく見えます。どこを変えたらいいですか？
PORT編集部青を広く使うと硬い印象になることもあります。色を全部替えなくても調整できます。配色例と面積、文字の読みやすさから考えてみましょう。
信頼感のある配色は、読みやすい濃淡と色の一貫性を土台にします。青や緑は候補ですが、内容・日程・料金・問い合わせ先が探さず読めることを優先しましょう。
配色とは？
配色とは、複数の色を選び、背景・文字・ボタンなどへ割り当てる作業のことです。例えば、白い背景に濃紺の文字を置き、申込ボタンを青にします。
コントラスト比とは？
コントラスト比とは、文字色と背景色の明るさの差を数値で表したもののことです。例えば、淡い背景と濃い文字の組み合わせをチェックツールで確認します。
#26384D必要な情報を濃い色で読ませる。
#275A87毎回同じ青で、進む場所を示す。
信頼感は、色だけでは決まらない
整った青いバナーでも、料金が小さすぎたり、日程が見当たらなかったりすると、申し込みに迷います。配色は内容を伝えるための手段です。情報の正確さ、説明の分かりやすさ、読みやすい文字と一緒に考えましょう。
| 整えること | 具体例 |
|---|---|
| 必要な情報 | 対象者・日程・料金を見つけやすくする |
| 色の一貫性 | 見出しやボタンは同じ役割なら同じ色 |
| 読みやすさ | 淡い背景に濃い文字を置く |
| 親しみやすさ | 専門用語を減らし、余白を残す |
試しやすい3つの配色
青を冷たく見せすぎない
内容・対象・料金・日時を具体的に書く。
本文、見出し、ボタンを共通ルールに。
価格の条件や注意事項も確認する。
内容・日程・料金をご案内します。
内容・日程・料金をご案内します。
青に少量のベージュや温かみのある写真を合わせる方法もあります。ただし、配色だけで無理に親しみを作るより、「初めての方も参加できます」など、読む人が知りたい言葉を添えることが大切です。
色の役割をそろえる
同じ種類のボタンは同じ色にし、注意事項・見出し・リンクのルールを決めましょう。ページごとにボタンの色が変わると、読む人は毎回使い方を探すことになります。
強調しすぎると、重要な場所が埋もれる
料金を赤、日時をオレンジ、見出しを青、ボタンを緑にすると、全部が目立って優先順位が分かりにくくなります。まず一番してほしい行動を決め、そこへ強調を集めましょう。
色を割り当てる方法は、ベース・メイン・アクセントカラーで説明しています。デザイン全体の見せ方は、見やすいレイアウトの作り方も参考になります。
小さな文字と注意事項を読む
赤枠だけでは、何を直すか分かりにくい。
色を見分けにくくても、必要な修正が分かる。
本文だけでなく、価格の条件や注意事項も十分な濃さにします。読みにくい薄い文字で情報を隠すような状態にならないように、スマホでも確認しましょう。
Webの通常の文字では、背景とのコントラスト比4.5：1以上がWCAGの基準です。大きな文字には別の基準があります。色の名前や見た目の印象だけで合否は分からないので、コントラストチェックのツールで、実際の文字色と背景色の組み合わせを確認しましょう。
入力エラーを赤枠だけで示さず、「メールアドレスを確認してください」と文字でも伝えます。色を見分けづらい人にも、何を直せばよいか分かる形にすることが大切です。
参考：W3C「Contrast (Minimum)」。色だけで意味を伝えない考え方はW3C「Use of Color」も参考にしています。
見た目は整ったのですが、どこをチェックすれば「分かりやすい」と言えますか？
PORT編集部初めて見る人が、内容・料金・日程・次の行動を探さずに見つけられるか確認しましょう。自分が読む人になったつもりで、スマホで上から見てみてください。
案内カードで練習する
架空の講座案内に、タイトル・対象者・日程・料金・申し込みボタンを入れます。背景は明るく、本文は濃い色に固定。次に見出しとボタンへ同じ青を使い、必要な情報を見つけられるか確認しましょう。
配色の出発点から確認したい方は、初心者向けの配色の基本へどうぞ。
