Webサイト・アプリでの色効果を知ろう

Webサイト・アプリにおいてクリック率・成約率などに大きな影響があると言われるのが「色効果」。どこでどんな色を使えば良いのか、パーツごとの基本的な色効果についてまとめました。

抑えておきたい色の基本な心理効果

まずは人間が色から感じ取る基本な心理効果をおさえておきましょう。

一覧にするとわかりますが、同じ色でも効果が真逆になることがあります。例えば、赤なら「興奮、高揚」といったポジティブな効果もあれば、赤信号のように「警戒」を呼ぶこともあります。

これらの色の使いわけは、サイト内でしっかりとルーツ決めしておく必要があります。

サイト・アプリ内でアクションと規定するボタンは、適切な色を使うことでクリックしやすくなります。

代表的な色のボタン効果は下記のようになります。

感情効果は一般的なもので、サイト・アプリの色設定によっても異なります。注意したいのは、「移民の違うボタンを同じ色にしない」という点です。

例えば、決定ボタンを赤にした場合、キャンセルボタンも赤だとユーザーは混乱してしまいます。その場合は、青やグレーなどなるべく反対の色を使うとユーザーのクリックへの不安を軽減できます。

最近はサイト・アプリでも重要な役割を持つのが通知です。通知はサイト・アプリとの「コミュニケーションの場」なので、ボタンと同じくらい細心の注意をもってカラーリングをすべきパーツです。

通知については、同じ役わりである「道路信号」を思い浮かべると良いでしょう。

同じ赤でもボタンではクリック効果を呼びますが、通知の場合は基本的に「何かのアクションの前後に起こること」なので、赤信号と同じ警戒心を呼びます。

例えば、ユーザー登録情報を更新した後に赤い通知アラートが出てくる「失敗したのかも」と思い込んでしまいます。こうした影響を踏まえて、通知の色効果を決めていきましょう。

一番センスが必要になるのがラベル（カテゴリ、タグなどのデザイン）のカラーリングです。

カテゴリ、タグなどは、「コンテンツ内の情報」でもあり「アクションボタン」でもあります。例えば、当サイトでのタグで言えば「SEO」というコンテンツを表すラベルでもあり、「SEO記事へのリンク」というボタン効果も併せて持ちます。

また、コンテンツでもありボタンでもあるいう特性上、サイト・アプリ全体との調和を求められる要素なので、サイト全体のカラーバランスを取りつつ、しっかりアクションボタンとして主張するようにカラーリングするのがベストです。

タグなどのラベルカラーリングについてはいろんなサイトの実例を参考にするのが、色効果を学ぶための近道と言えます。

サイト・アプリでは必ずといっても過言ではないほど使うのがテーブル（表）です。情報を整理して比較しながら見ることが出来るテーブルですが、色効果によって見栄え・受け取る感覚が全く異なってきます。

例えば、文字や数字が多いようなテーブルであれば、グレーや薄い緑、青などの「文字の邪魔にならない色」が効果的です。一方で、「価格表」や「時間割」などの文字を目立たせたいテーブルの場合は、赤や緑などの強い色を使うことで、数字に目が行きやすくなる効果が見込めます。

また、テーブルにおいては「ヘッダ」「罫線」「背景」などのパーツの色使いも非常に重要です。特に罫線は表の見易さにも直結するため、使っている色効果を考えながらバランスを取る必要があります。

Webサイト・アプリでの色効果について見てきました。

色効果については専門的な知識があるとより高い効果を生むことができますが、知識がなくても基本的なことを知っていれば誰でも簡単に導入できる方法です。

普段なんとなく決めている色も、色効果を考えてカラーリングをすることで、クリック率や成約率に大きく影響をするので、ぜひ色々試してみてください。

「ウェブサイト構築」の記事