トラストフォーマット(信頼される書式)は、WEBデザインの心理技術です。
今回は、トラストフォーマットの様々な要素のひとつである「色」について取り上げます。
目次
1.成約率が上がるボタンの色とは!?
WEBページの色を考えるときに、一番悩むのがボタンの色ではないでしょうか?
注文やダウンロードなどの成約(コンバージョン)率を左右するのはボタンの色次第、と言っても過言ではありません。
では、何色のボタンにすればいいのか?
実は、クリックされやすいボタンの色は、 灰色 → 緑色 → 青色 というように、時間とともに変わってきています。
その理由は、詳しくは別記事、トラストフォーマットの重要ポイント【ABテスト】に譲りますが、つまりは、色のトラスト(信頼)が時間とともに変わってくるということです。
2.顧客のパターン認識を知ろう!
パターン認識とは人が外部からの情報を認識する際の過程を表す情報処理です。
顧客は同じ色のボタンを押していくうちに、知らず知らずのうちに学習して、これは購入するボタンだ!と信頼(トラスト)していくのです。
つまり導き出されるのは何かというと、、、
顧客が学習してパターン認識した色を使うのが一番コンバージョンが安定する!ということです。
オリジナリティ溢れるデザインよりも自分の顧客がどのOSに順応しているのか、どんな学習をしてきたのか、それを踏まえてボタンの色を選ぶといいですね。
みなさんの顧客は一体何色のボタンを押すのか?自分のターゲット層を考えてください。
どの色がいい?ではなく、信頼(トラスト)されている色は?ということです。
3.補色効果を知ろう!
ボタンの色についてご説明しましたが、次にお伝えしたいことは「ボタンの色だけで判断してはいけない」ということです。
一般的に「緑色のボタンがクリック率が高い」と言えても、そのページ全体の配色によっては逆の結果が出る場合もあります。
例えば、この例↓
なぜ、緑より赤のボタンの方がクリック率が高かったかというと、ページ全体の色のコントラストのせい。
背景、リンク、ボタンを全て類型色にしてしまうと、ボタンが緑色だろうが青色だろうが、クリック率は下がってしまうのです。
ボタンが目立たなくなってしまったのですね。
緑色の文字に挟まれた赤色のボタンが目立つようになる、これを補色効果といいます。
ポイントは、強調色と60度にある色を使うということ。
赤色を強調文字や背景に使う場合、リンクやボタンは緑色もしくは青色を使うとクリック率が上がるということになります。
そして青色メインのページには赤色や緑色のボタンを使おうということです。
ページのメインの色と60度の位置にある色をボタンに使ってみてください。
Adobe Colorのトライアド機能を使えば、簡単に色を調べることができます。
4.配色比率にも気を配ろう!
「補色や強調色を使えばいいんだ!」とばかりにたくさんの色を使ってしまうと、ド派手で怪しげなサイトになってしまいかねません。
そこで、考慮していただきたいもう一つのポイントが配色比率です。
「70:25:5の法則」と言われるように、ベースカラー・メインカラー・アクセントカラーを ベースカラー70%、メインカラー25%、アクセントカラー5% となるように配色してみましょう。
簡単に言うと、
・ベースカラー:ページ全体のベースとなる色(背景色など)。白や灰色など鮮やかさのない色がおすすめ。
・メインカラー:テキストの色。黒や濃い灰色。
・アクセントカラー:顧客のパターン認識に基づいた色。
このようにして色を決めたら、その中の、例えばアクセントカラーだけを変えてABテストしてみてください。
ABテストを重ねることで、クリック率・コンバージョン率が上がっていくことでしょう。
5.まとめ
顧客のパターン認識をリサーチし、信頼(トラスト)している色を見つけましょう。
そして補色効果を踏まえた上で、配色比率に気を配り、あなたのサイトのクリック率・コンバージョン率を上げていきましょう。
トラストフォーマットを学べるセミナー開催します。
セミナーの詳細はこちら!