Webの開発市場は飽和状態なため、消費者はその選択肢の多さに目移りしています。名刺代わりのWebサイトを持っているだけでは、もはや競争力はありません。もっと直接的なセールスツールとして作用する必要があります。「いつか見てくれるだろう」という運は計画のうちには入らないのです。
心理学がデザインに有用であることは既知の事実です。特定の心理的なきっかけをいくつか使うことで、消費者の選択に影響を与えることができます。つまり、望ましい方向や行動へとユーザーをそっと促すことができますし、更に言うと、投資した以上の十分な見返りも得られるのです。
Webサイトのデザインで売り上げを伸ばせることがわかったところで、その目的に合った特別なテクニックと効果を調べていきましょう。
系列位置効果

Image credit: plugandplaydesign.co.uk
Hermann Ebbinghaus氏によって定義されたこの心理学用語は、ユーザーは連続した項目の最初と最後の項目を思い出しやすいことを意味します。これはユーザーが大きく注意を向ける位置によって、さらに「初頭効果」と「新近効果」の2つに分けることができます。
初頭効果とは、項目を思い出すための労力が少なくて済むため、ユーザーは最初の項目を正確に思い出しやすいという傾向を指します。先入観と非常によく似ていて、初頭効果は、1番目の情報がそれに続く情報よりも重要であると考えやすいという心理を前提としています。
一方、新近効果の背後には、最後に見た項目は短期記憶に保存されているため思い出しやすいという理論があります。
項目や情報を特定の順番で並べることでユーザーの行動がコントロールできることを、系列位置効果がはっきりと示しています。それでは売り上げを伸ばすより良いデザインを作成するための、いくつかのステップを見てみましょう。
高価な項目から並べる

Image credit: coglode.com
系列位置効果を活用する方法のひとつは、有料会員プランの中のもっとも高価な項目を最初に置いて消費者の注意を引きつけることです。

Image credit: adobe.com

Image credit: goget.com.au
しかし、ターゲットとなる消費者のことは忘れないようにしてください。あまり高価すぎるアイテムは1番目に置かないようにしましょう。経験豊かな買い手や目の肥えた人々には効果がありません。通常商品の範囲内での現実的な価格に留めるようにしましょう。

Image credit: microsoft.com
ナビゲーションメニューの再構築
Webサイトのタイプに関係なく、ナビゲーションメニューの最初と最後には、もっとも重要なリンクを置くことを覚えておきましょう。これは強調したい情報を多くクリックしてもらうのに役立ちます。
おそらく「私たちについて(About Us)」の情報、サービスや商品ページ、カスタマーサポート、「お問い合わせ(Contact)」ボタン、お得情報などが当てはまるでしょう。

Image credit: oxagile.com

Image credit: amazon.com

Image credit: ebay.com

Image credit: ausopen.com
重要なメリットを示す
初頭効果を最大限に活用するもうひとつの方法は、重要なメリットを1番最初に置くことです。取り引きの決め手が送料無料でも、お試し無料であっても、顧客にそれを大声で訴えてください。ユーザーがWebサイトを閲覧したときに、これらの情報をもっとも記憶に残るものにしましょう。

Image credit: hulu.com

Image credit: ikea.com

Image credit: hm.com
コンテンツの順序を最適化する
ランディングページのデザインでは、コンテンツを系列位置効果に基づいた順番で並べましょう。つまりページの最初のセクションで、ビジネスが提供する利益などの購入の鍵となる情報を伝え、最後はCTAボタンを提示するのに使うのです。

Image credit: adobe.com

Image credit: slack.com
フォン・レストルフ効果(孤立効果)

Image credit: coglode.com
「孤立効果」とも呼ばれるフォン・レストルフ効果は、ユーザーは他から孤立した目立つものを記憶することを表します。珍しいアイテムを見込み客にはっきりと覚えてもらうために、光、色、サイズ、環境、画像、アニメーション、言葉、音の表現に注意を向けましょう。
CTAボタンを強調する
あなたが提供するのがプロダクトであれサービスであれ、その目的はWebサイトを訪問中のユーザーに特定の行動してもらうことです。それはたいていの場合、「私たちについて」「もっと調べる」「すぐに購入する」「デモを依頼する」「登録する」「探す」といったCTAボタンを押してもらうことでしょう。その可能性を最大限にするために、以下のようにしてボタンを目立たせてください。
コントラストの強い色やサイズを使う

Image credit: adidas.com

Image credit: zapier.com

Image credit: nurx.com
CTAボタンの周りのスペースを大きくする

Image credit: grail.com

Image credit: askarvi.com

Image credit: credifiable.com
背景の画像を不鮮明にする

Image credit: boxx.ai

Image credit: gamingmonk.com

Image credit: ziffyhomes.com
最初に売りたいアイテムを強調する
フォン・レストルフ効果を適切に使って、もっとも高価なものや、ベストセラー、新商品、といった特定のアイテムにユーザーの注意を向けることができます。

Image credit: wix.com

Image credit: zendesk.com

Image credit: nike.com

Image credit: amazon.com

Image credit: kfc.com
選択のパラドックス

Image credit: coglode.com
「選択のパラドックス」も消費者の行動をコントロールする効果を持つひとつです。心理学者のBarry Schwartz氏が名付けたこの心理学的傾向によれば、多すぎる選択肢は決断できない状態を招き、その結果売り上げが下がることになります。
何を選ぶか決断することで顧客を疲れさせないために、以下のすすめを覚えておいてください。
CTAボタンの数を制限する

Image credit: puma.com
無限スクロールの使用を避ける
無限スクロールを使用する代わりに、ページを分けるか、「もっと読み込む」ボタンを使って表示させるアイテムの数をユーザーが調整できるようにしましょう。

Image credit: ebay.com
トップページで表示する商品数を減らす

Image credit: wizzair.com
スマートフィルターを使って表示アイテムの数を減らす

Image credit: thebodyshop.com
ツァイガルニク効果

Image credit: coglode.com
この心理傾向もWebデザイナーが無視できない戦術のひとつです。心理学者のBluma Zeigarnik氏によれば、完了していないタスクはすでに完了したものよりも人の記憶に残りやすく、何度も繰り返しそれについて考え続けるといいます。
会員登録やオンラインでの購入、またはプロフィール入力であっても、タスクを完了するためのモチベーションを見込み客に与えることは理にかなっています。やり方は次のとおりです。
プログレスバーを表示する

Image credit: songkick.com

Image credit: quora.com

Image credit: facebook.com
ユーザーにインセンティブを与える(新しいバッジ獲得など)

Image credit: envato.com

Image credit: credly.com

Image credit: thecn.com
取り消し不可能な変更について警告する

Image credit: pinterest.com

Image credit: instagram.com
まとめ
消費者が特定の商品を購入し、Webサイトを繰り返し訪れてくれるかはデザイナー次第です。開発中のWebサイトがどのようなものかによって、ここで述べた戦術が使えるか、他の心理学的法則を頼るべきかが変わってきます。
しかし、これらの心理学のテクニックだけに従うことはしないでください。ある特定の道筋を消費者に辿ってもらえるよう懸命に説得するときには、その目的がユーザーが目標を達成できるサイト作りであることを忘れないようにしましょう。この目標が達成されている限り、コンバージョン率を上げ、収益チャネルを拡大し、消費者の離脱率を低く抑えることができます。