menu

あらためて整理しておきたい、Webサイトにおける「色」の効果

ディレクター心得

ECサイトの制作プラットフォームを提供しているShopifyのリサーチ結果によれば、ユーザーの購買は商品を見つけてからおおむね90秒以内で無意識的に判断され、その判断の62%~90%が色に基づくとされています。また、約84%のユーザーがモノを買う時の第一の理由として「色」を挙げているというデータもあります。

Webサイトの配色はユーザーの行動を促すうえで非常に大切な要素です。さらに、平面的なシンプルなフラットデザインがトレンドの主流となった今、配色の重要性はますます増していると言えるかもしれません。それぞれの色にはどんな特徴があり、どんな使い方が効果的なのでしょうか。

・購入ボタンなどに使いたい「赤」&「オレンジ」
色彩心理学では「赤」は見る人の意欲を促し、アドレナリンを分泌させる効果があるとされています。また同系色の「オレンジ」も同様に見る人を明るく前向きな気持ちにする効果があると指摘されています。

ECサイトなどで購入・予約ボタンを設置する場合は、こうした特性を利用して赤やオレンジを使うのが効果的かもしれません。ある企業のABテストでは、購入ボタンを緑から赤に変更したところクリックスルー率が21%向上したというデータがあります。さらに別の企業サイトでも登録ページへ遷移するボタンを青からオレンジに変更したところクリック率が大幅に改善された事例があります。

・高級感&上品なイメージの訴求にマッチする「紫」
「紫」は気持ちを落ち着かせ、高級感や上品なイメージを喚起する効果があるとされています。また、他の色との組み合わせ次第では非常に印象に残りやすいのも紫の特徴です。

シニア向けの高付加価値商材を扱うWebサイトやラグジュアリーなイメージを大切にしたい高級化粧品などの販売サイトは紫をメインカラーとすると効果的かもしれません。実際こうしたジャンルの有力サイトでは紫をメインカラーとして、サブカラーに白や黒を用いた配色が多く用いられています。

・商品画像を引き立たせ、フラットデザインにも相性のいい「白」
清潔感や純粋なイメージを与える「白」はどんな色とも相性が良く、他の要素を引き立てることができます。スポーツメーカーやアパレル関連のECサイトでは商品画像を強調するために白スペースが積極的に使われています。また、年齢性別問わず多くのユーザーに支持されている「無印良品」のネットストアやamazonのWebサイトも白を基調としています。

小野 良勝 代表取締役

投稿一覧

横浜の制作会社アイティネットの代表取締役。WEB、モバイル、DTP、デジタルサイネージを事業展開。それぞれの特性を活かした メディアミックスを得意とする。iPhoneやiPadを活用したBtoB向けのアプリケーションを開発。モチベーションの高い人や異業種との交流がたまらない。華の47年組。趣味はオートキャンプ

より効果的な定性データを得るためのユーザビリティテストの実施ポイント

Webサイトに動画コンテンツを取り入れるメリット&実際の制作費

関連記事

  1. Webサイトの文章に+αの効果をもたらすフォントサイズ&位置の工…

    特定の文字や語句を強調する場合、Boldやアンダーラインが使われることが多くなりますが、タイポグラフ…

  2. スマートフォンを意識したWebライティングのコツ

    ソーシャルメディアと相性が良いスマートフォンでは、質の高い記事がFacebookやTwitterで拡…

  3. WordPressの効果を最大化する、レンタルサーバー選びのポイ…

    WordPressを利用するうえで最低限必要となるのが、「Apache」と「MYSQL」の両方に対応…

  4. Webサイトの完成度を高める、バナー&各種パーツのギャラリーサイ…

    広告やランディングページでユーザーの興味・関心を引き立てるバナーはもちろん、アイコンやタブをはじめと…

  5. スクロールエフェクトを実装できる、おすすめjQueryプラグイン…

    画面のスクロールにあわせて写真やサムネイル、テキストを自由に動かすことができるスクロールエフェクト。…

  6. 不正アクセスや脆弱性・バックアップ対策も。セキュリティ対策プラグ…

    デザインの自由度が高く、プラグインによって豊富な機能を拡張できるWordPressは世界中のWebサ…

  7. Web運用を委託した方がいい企業5つの特徴!!と、1つの注意点

    Webサイト運用って何かと手間がかかるので、出来れば制作会社に委託したいと考えている企画担当の方が多…

  8. 手軽に作ってWebサイトにアクセントを。無料のGif画像作成サー…

    複数の静止画を組み合わせてコマ送りで表示することによって、画像に動きをつけることができるGif。We…

PICKUP

PAGE TOP