1.はじめに
色にはそれぞれイメージがあることはご存知かと思います。
いわゆる色彩効果です。
心理学的にも研究されてきた色が与える力は、当然、ウェブサイトのデザイン・カラーリングにも影響を与えます。
くわえて、サイトの場合は製品やサービス、ブランドカラーなども意識しながら、ユーザーにとって受け入れやすく、使いやすいものでないと行けません。
いかにしてユーザーの滞在時間を引き伸ばし、コンバージョンをしやすい環境を作れるかどうか。
サイトのコンテンツと同じレベルで色も検討すべき課題となります。
今回は色の力でコンバージョン数を伸ばすために、実例を交え、それぞれの色が持つ力について考えていきたいと思います。
2.事例集
まずは実例集をご覧ください。
2-1. FACES OF NYFW
※現在、このサイトは閲覧できません。
華やかな写真を、あえてモノクロで表現。色は「見せ方次第」で変わります。
NYファッションウィークで行われるショーやその舞台裏の様子を写真や動画で紹介しているサイトです。
トップページは写真がタイル上に敷き詰められた構成。写真にマウスポインタを乗せると、その写真だけがカラー表示になります。それまでの静かな印象からのギャップも手伝って、写真からは、いっそう華やいだ印象を受けます。
ファッションショーの写真はそれ自体に惹きつける力があるので、それを上手く利用した、見る人に強い印象を与える作りですね。
2-2. KIRIN 別格
※現在、このサイトは閲覧できません。
商品のテーマカラーである金色を全面に押し出したサイトデザイン。
一面が金ですが、グラデーションのかかった市松模様になっていて単調という印象は受けない。
とにかく高級感が伝わってくる色使いで、文字の黒色も視認しやすくなっていますね。
黒が差し色になっていて、漆と金箔のようにどこか和風を感じさせるため、日本人にも受け入れやすい印象です。
商品の色使いに合わせることで、商品のコンセプト・セールスポイントを十二分にアピールしているといえます。
2-3. usioproject
http://usioproject.com/
サイトのデザインは青を基調とし、ファーストビューでは石垣島の魅力が視覚的に伝わるよう、写真を画面幅いっぱいに表示しています。また、スクロールしていくとグローバルメニューが出現しますので、サイトの目的やその他サービスメニューへの導線がわかりやすいUIとなっている点も重要です。
各コンテンツ表示も情報量がシンプルに、なおかつ文字サイズも大きく、クリック範囲も大きいので迷子になりません。
2-4. ユニクロ
https://www.uniqlo.com/jp/
ユニクロのグランドカラーである赤がアクセントになっています。製品を色相順に並べることによって、カラフルな製品も調和させている点は、店内ディスプレイと同様に一貫性を持っています。
その部分に顧客の好みや個性とのマッチング意識を強く感じさせられます。
製品をクリックすると、拡大表示されてディテールを見ることができ、洋服の繊維や、裁縫の仕方など細かな部分もチェックできる仕様となっていて、ユーザーの購買欲を刺激している点も見逃せないテクニックです。
2-5. 無印良品
https://www.muji.net/store/
無印良品のサイトは白を基調にしながらもコーポレートカラーであるえんじ色を力強く効果的に使ってわかりやすいサイトになっています。
セールもサービス内容もこのえんじ色で統一することでわずらわしい多色表現から開放されています。このあたりはユニクロとは一線を画し、無印ブランドが好きな人をとことん取り込もうとする意識が見え隠れしますね。
商品そのものはホワイトベースの上にシンプルに乗せることで、商品が際立つように構成しています。
2-6. アップル
https://www.apple.com/jp/
モノトーン+カラフルを効果的に使い分ける。
アップルはサイトもそうですが商品、パッケージ、広告などすべてモノトーンを基本としていますが、突然カラフルな要素を入れるような配色構成の手段をとっています。
そのほうがモノトーンとの比較で効果的に商品の魅力や広告の魅力なども出しているといえます。
現在のアップルのサイトは白に黒文字でアクセントの文字色に水色、一部商品や写真でカラフルな要素というパターンで統一しています。
3.それぞれの色がもつ特徴
3-1. 赤
・色の持つプラスのイメージ
情熱的、活動的、積極的、エネルギッシュ
・概要
精神面に大きな影響を与える色で、エネルギッシュなイメージを与えます。強調したいときや、食品などとの相性が良い色です。
3-2. 黄
・色の持つプラスのイメージ
幸福感、明るい、注意、希望
・概要
気分をアップしてくれる色であり、注意を促す色でもあります。また幸福感をもたらしてくれる色でもあるので、求人や子供系のサイトで活用できます。
3-3. オレンジ
・色の持つプラスのイメージ
活気、親近感、暖かい、健康
・概要
赤と黄色の両方の特徴を持つ色です。明るい気分になり、活動的なイメージを与えます。
3-4. ピンク
・色の持つプラスのイメージ
優しさ、かわいい、女性的
・概要
攻撃性を全く感じさせない色で、女性的なイメージを与えます。特に美しいというより、かわいさを表現したい場合に使いたい色です。
3-5. 白
・色の持つプラスのイメージ
清潔、清廉、純粋、シンプル
・概要
清潔さやリラックスといったイメージを持つ色です。理想の高さを示す色でもあり、思い切ったブランディングを行いたいときに使えます。
3-6. 青
・色の持つプラスのイメージ
誠実、さわやか、男性的、冷静
・概要
リラックス効果のある色として知られ、信頼感や安心感をイメージとして与えたい時に活用します。ビジネス系サイトで良くみられる色ですね。
3-7. 緑
・色の持つプラスのイメージ
自然、調和、寛容、健康、安らぎ
・概要
青と同様にリラックス効果のある色ですが、こちらはより根っこの部分で安心感を与えてくれます。頭脳に訴える色でもあるので、新しいサービスや製品を訴えたいときに活用できます。
3-8. 黒
・色の持つプラスのイメージ
力強さ、艶、洗練、都会的、上品、高級
・概要
どこか突き放した印象を与える色です。それゆえ高級感や重厚感を訴えたいときに活用できます。
4.まとめ
日本人的な話で▽まとめるのは若干気が引けますが、わずかな色の違いを敏感に感じとり、それぞれの色の名前をつけてきた文化的な背景がルーツにあるだけに、サイトに使う色はセンシティブなものとしてとらえるべきではないでしょうか。
成果の出るランディングページ作成ソフト「MeVIUS-メビウス-」について詳しく知りたい方はこちら!