creatersnest143

ECサイトを作りたい人必見!購買意欲を高めるデザインの法則


ユーザーはそのページを7秒で判断すると言われています。
では、購買意欲を高めるならまずは視覚で勝負!
ECサイトのデザインにでは法則が存在する。
あとは消費者の心を心理学で操作する!

ファーストビューのポイント

web_402

ECサイトを作成するにあたってトップページ、あるいはランディングページにあたるファーストビューの部分はユーザーが
1番に目にする部分です。
一般的にWebサイトはしっかり見るかどうかを7秒で決めてしまうと言われています。
ではまずはファーストビューで「見てもらう」ためのポイントを3つご紹介します。
1、キャッチコピー
2、キービジュアル
3、デザイン

キャッチコピーで心理をつく

流行物が気になってしまう効果のことをバンドワゴン効果といいます。
人は流行ものには感心を抱きます。
「話題の」「大人気の」などのコピーを目にすると商品がより魅力的に感じ購買意欲をそそられます。
「話題の」と見るだけでなんだか特別で価値があるようにイメージを受けます。
こういった心理をつくキャッチコピーは他にも沢山あります。
シャルパンティエ効果は違うように見えても実は同じですが言い方で随分違うという効果です。
例えば、「コラーゲン1g配合」と、「コラーゲン1000mg配合」どちらが特に見えますか?
文字で見ると断然「コラーゲン1000mg配合」の方が大量に感じまたお得感もでます。
といったようにキャッチコピーも心理をつくと購買意欲を高めることができます。

キービジュアルは人の顔

キービジュアルとは、ウェブサイトのデザインや他の媒体のデザインにおいても中心となるイメージ画像のことです。
そのため、一番目立つところに大きく配置されることが多いです。
また、使用するイメージ画像には、インパクトやメッセージ性が求められます。
ECサイトでは主力になる商品画像やサービス名がこれにあたります。
では、ここにも心理学を加えてみましょう。
脳には顔を認識するための専門領域があると言われています。
これは遠くからでも人の顔を素早く識別できるのはこの能力と言われています。
なのでWebのページに人の顔があるとつい目を奪われます。またこの顔を認識したときにその人の目線にも注目します。
ということは目線の先に商品を配置するとついつい見てしますという効果もあります。

web_400

デザインは色で操作

Webの基本はベースカラーをまず決め、そこへメインカラーとアクセントカラーのこのおおまかな3つの色をまず決めます。
おすすめはベース70:メイン25:アクセント5の割合がバランスよく閲覧できるサイトになります。
では、キレイなサイト、かっこいいサイトを作成すれば売上げにつながるのでしょうか?
もちろん商材によってはターゲットが違うのでそういったサイトでもいいかもしれません。
ただ、ECサイトでは「商品」が分かりやすくないといけません。
こだわるところは、「ユーザーにわかりやすいデザイン」である必要があります。
特にECサイトは情報量が必要です。商品名や商品詳細や値段に加え購入ボタンにキャンセルボタン・・・
これらをまとめる上でもシンプルでわかりやすいというデザインが大前提になってきます。
でもそれで購買意欲はわくのでしょうか?
色の役割を考えてみましょう。
実際によく言われている購買意欲を高める効果のあるのが「赤」です。
「赤」には情熱的・注目・あたたかい・食欲増進などがプラスの心理ですが、一方マイナスの心理もあります。
それは、安っぽい・危険・注意・刺激的など。
でも楽天などの購買意欲を高めたいサイトは赤を使用しています。赤には買いたいと感じる色だという認識はあるようですね。
ただマイナスの効果もあるようにあまり大げさに使用すると危険な感じで注意したいサイトに見えるかもしれません。
ただ、わざとマイナスの効果も利用し、「安売りサイト」「刺激的なサイト」というのも作成できそうですね。

コンバージョンへ繋げる「購入ボタン」の法則は?

メジャーなECサイトの購入ボタン(カートボタン)はどうなっているのでしょうか?
Amazon・楽天市場・yahoo!ショッピング・ポンパレモール・DeNAショッピングほとんどが暖色系です。
「黄色」「オレンジ」「赤」など全て暗色系になっています。
これは購買意欲を高めるからだと言われています。
これだけ大手のモールで取り入れられているのでECサイトを作成するならこの暖色系ボタンは取り入れたいですね。

web_401

 

 

 

まとめ

購入してもらうためにはまず、ファーストビューで立ち止まってもらわなければいけません。
そのために、3つ紹介しましたがこれをまとめてみましょう。
女性が驚いている目線の先にはインパクトのある商品があり、「話題のコラーゲン1000mg配合」とキャッチコピーが入る。
といった形でしょうか。
何気なく目にしていたECサイトやモールもちゃんとした心理学や法則があるんですね。

 

デザイナーはソフトのスキルを上げることも必要ですが、色々学ばなければいけませんね。
でも色々な法則や考え方手法はたくさんありますが、実際はサイトを立ち上げてからがECサイトは勝負です。
運用が始まってから最適化して育てて行くものです。
より購入意欲を高めるデザインはどれなのか?ボタン1つバナー1つでも改善していくとあなただけの法則が見つかるかもしれません。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


yamatama

紙面のデザイナーからWebデザイナーに転身。紙媒体とWebの違いに戸惑いながら制作・Web解析を学んできました。 現在はフリーで活動中。 一児の母(小学生の娘)

Next ArticleCSS3でアニメーション!画像を回転させる方法