効果的なメールとランディング ページに適切な色を選択する

公開: 2014-08-28

色は強力です。感情を伝え、注意を引き、ムードを作り、主張することができます。 また、あなたのメールを群衆から際立たせることもできます. しかし、さらに重要なことは、色を適切に組み合わせることで、オンライン マーケティング キャンペーンがあらゆるタイプの対象者にとってアクセスしやすく、読みやすいものになることです。 色がメッセージを伝えるさまざまな方法を見て、ビジュアル アクセシビリティのためのベスト プラクティスとオンライン ツールを調べてみましょう。

カラーボックス ムードを設定する

色は、メールやランディング ページに全体的な印象を与えるのに最適です。 The Logo Company によると、一般的に次の特徴が各色に関連付けられています。

  • 赤:興奮、エネルギー、大胆さ、ロマンス
  • 緑:平和、成長、健康、自然
  • 青:信頼、信頼、強さ、冷静
  • オレンジ:友好的、陽気な自信、創造性
  • 黒:強さ、パワー、精度
  • 白:きれい、シンプル、簡単

もちろん、色が意味するものは時間の経過とともに変化する可能性があります.1940年代までは、女の子ではなく小さな男の子がピンクを着ていました. また、世界中を旅するにつれて、影響が変化する可能性があります。 世界中の視聴者に向けてマーケティングを行っている場合、同じ色でも視聴者によって意味が異なる可能性があることに注意してください。 たとえば、紫は日本では特権と富の色ですが、ブラジルでは喪の色であることがよくあります。 中国では、赤は幸運と幸福を意味します。 他の文化では、戦争、危険、または欲望を意味する場合があります。

色を組み合わせる

メールやウェブのデザインでは、読者を重要なメッセージや行動を促すフレーズに誘導する上で、色も重要な役割を果たします。 色が多すぎると気が散る可能性があります。 色が少なすぎると、メッセージがわかりにくくなったり、面白くなくなったりする可能性があります。 色は、メッセージの階層全体を設定できます。 何か (ボタンなど) が明るい色で背景に対して目立つ場合、最初に自動的に目が引き付けられます。

メールランディングページ
このメールは、派手になることなくお祝いの声明を出します. ランディング ページも、メールの全体的なデザインと配色にマッチしています。

この一致するメールとランディング ページの色について、何か他の点に気付きましたか? 色はかなり補完的です。 つまり、彼らはカラー ホイールの反対側に住んでいます。 2 つの色を組み合わせて見栄えがする (そして互いに際立つ) ものを見つけたい場合は、補色から始めるのが最適です。 この例では、行動喚起 (CTA) ボタンとしてより鮮やかな赤も使用しています。

色相環上で隣接する 3 つの色の組み合わせは、類似配色として知られています。 赤、赤オレンジ、オレンジと同様に、黄色、黄緑、緑はよく一緒に見えます。 黒とグレーの色合い、または赤とピンクを組み合わせるなど、単色の配色を使用することもできます。 色付きの背景のテキストが完全に判読できるように、十分なコントラストがあることを確認してください。

読みやすい状態に保つ

効果的なメールに適した色を選択する場合、視覚障害のある人はデザインを操作するのが難しい場合があることを覚えておくことが重要です。 カラーユニバーサルデザイン(CUD)は、もともと日本で開発されたデザインシステムで、デザイナーがさまざまなタイプの色覚を持つ人々を考慮できるようにすることを目的としていました. カラー ユニバーサル デザインの基本原則は次のとおりです。

  • 実際の照明条件や使用環境を考慮して、あらゆる色覚の人が識別しやすい配色を選択してください。
  • 色だけでなく、形や位置、線種、配色パターンを組み合わせることで、色の違いが分からない方も含めたすべてのユーザーに、さまざまな形で情報を伝えることができます。
  • ユーザーがコミュニケーションで色の名前を使用することが期待される場合は、色の名前を明確に述べてください。
  • 視覚的に親しみやすく美しいデザインを目指します。

男性の約 8%、女性の約 1% に何らかの色覚異常が見られるため、コントラストの高い要素を使用することをお勧めします。 Adobe Photoshop は、そのソフト プルーフ機能で CUD をサポートしています。デザイナーは、さまざまな種類の色覚異常を持つ人々にとって画像がどのように見えるかを確認するのに役立ちます。

また、色覚異常シミュレーターなどのオンライン ツールを使用して、色覚異常のある人にグラフィックがどのように見えるかを確認することもできます。

Act-On のロゴが 3 つの主要なタイプの視覚障害にどのように変換されるかを次に示します。

プロタノピアのロゴ
黄体色: 赤色が見えない、または緑色または青みがかった緑色と区別できない。

デュテラノピアのロゴ
重度色覚障害: 緑が見えない、または赤との区別がつかないこと。

Tritanopia-act-on-ロゴ
三色覚異常:青と黄、青と緑、黄と紫の区別がつかない。

アクセシビリティ カラー ホイールのようなツールを使用して、選択した色の組み合わせをテストします (背景に対するテキストなど)。 組み合わせがさまざまな種類の色覚異常にどのように見えるか、および明るさとコントラストが World Wide Web Consortium (W3C) によって定義された基準とどのように比較されるかを理解するのに役立ちます。 W3C サイトには、障害を持つ人々がインターネットにアクセスできるようにするためのガイドラインとリソースが他にもあります。

ブランドを反映する

メール メッセージとランディング ページをデザインするときは、ブランドを継続的に強化することも重要です。 全体的なブランディング カラー パレットを念頭に置き、従来のルック アンド フィールとは異なる場合でも、視聴者が認識できる方法で行います。 メール キャンペーンで使用する色やデザイン要素は、ブランドと正確に一致または反映している必要はありませんが、全体的なスタイルとトーンを反映する必要があります。 この種の一貫性は、読者の心に自信を持たせるのに役立ちます。

カナダ国旗
ああ、カナダ。 あなたは群衆の中で目立ちます。

たとえば、カナダの新しいスパム対策法に関する Act-On ウェビナーの電子メールとランディング ページを作成する場合、カナダの国旗をデザインに取り入れたいと思うでしょう。 結局のところ、赤は力強い色であり、カナダが緋色のカエデの葉に勝るものはありません。

代わりに、メールでブランド アイデンティティを強化する色とデザイン要素を使用し、それらをランディング ページにも適用しました。 そうすれば、読者は、これ自体がある種のスパム メッセージではないことを確信できます。

アクション・オン・メール・ランディング・ページ
しかし、すべての中で最も重要な色の考慮事項は次のとおりです。 メールキャンペーンでさまざまな色の組み合わせをテストしましたか? さまざまなボタンの色のオプションを試しましたか? ランディング ページの A/B テストを実行しましたか? テストは、顧客や見込み客の心に響くものを発見するための最良の方法であり、結果がそれを物語っています。

メールマーケティングを始めたばかりですか? この無料のツールキットですぐに始めましょう:

メール マーケティング ツールキットの使用を開始する