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サイトにアクセントを加える、ポップ&スタイリッシュなパター…

    Gif画像とあわせてWebサイトにアクセントを与えるのに効果的なのが、数多くのWebサイトで提供され…

  2. ツールを使って接客をシステム化。総合力に優れたWeb接客ツール3…

    シニア層のネットショッピングの利用拡大やECマーケットそのものの成長にあわせて、急速にニーズが高まり…

  3. 画像のタイプ・特徴にあわせて使い分けたいgjf、jpg、png

    Webサイト制作で画像を取り扱ううえで意外のおろそかになりがちなのが、画像の保存形式です。プロのフォ…

  4. 縦長レイアウトはもう古い?スクロールエフェクトを活用したWebサ…

    CSS3やHTML5によってWebサイトには以前にも増して多くの情報量を盛り込めるようになってきてい…

  5. あらためて整理しておきたい、ワイヤーフレームを作成するメリットと…

    キャッチコピーや画像、リンクボタン、SNSボタンなど、さまざまな要素が取り入れられるWebサイト。W…

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

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

  7. 画像編集をクラウド化して業務効率UP。無料オンライン画像編集ツー…

    コンテンツマーケティングがWebマーケティングの主流となり、Webサイトのあらゆる面に高いクオリティ…

  8. 業務効率を上げるWebディレクター向けテキストエディタ4選

    Webサイトの記事の確認・作成に限らず、デザイナーをはじめとした制作スタッフとの情報共有や、備忘録・…

PICKUP

PAGE TOP