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