LPや入力フォームで使える行動心理学

この記事は[ウェブクルー Advent Calendar 2020](https://qiita.com/advent-calendar/2020/webcrew)の12日目の記事です。
昨日は@verdoyantさんの「[scalafmtのはじめかた](https://qiita.com/verdoyant/items/8a2c93c36428519fff4b)」でした。

# はじめに
サイト制作をする際に使いやすい、見やすいなどユーザーの心をつかむためにを行動心理学を用いることがあります。
ここではLPや入力フォームで使えそうな行動心理学を簡単にご紹介したいと思います。

# LP編
![lp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207762/bd26ff07-4652-f071-9632-005076453647.png)
LPで使えそうな行動心理学をご紹介します。

## アンカリング効果
アンカリング効果とは最初に見たものがその後の判断に影響を及ぼすという心理効果です。
最初から「3,000円」と書かれているより「
5,000円
→3,000円」と書かれていたほうが安くお得に感じます。

##スノップ効果
スノップ効果とは希少価値の高いものに惹かれ、魅力を感じるという心理効果です。
「期間限定！」「数量限定！」といった言葉がよく用いられます。

##バンドワゴン効果
バンドワゴン効果は前述したスノップ効果とは逆で、流行りや周りの評判を判断材料にして多数派に惹かれるという心理効果です。
「人気商品」「話題の」「流行りの」といった言葉がよく用いられます。

##ウィンザー効果
ウィンザー効果とは第三者から間接的に情報が伝わることで、より信憑性や信頼感が増すという心理効果です。
「口コミ」「レビュー」などのコンテンツがよく用いられます。

##ザイオンス効果
ザイオンス効果とは相手に何度も繰り返し接触することによって、だんだん好感度や評価などが高まっていくという心理効果です。
接触回数を増やす方法として「メールマガジン」「SNS」「チラシ」などがよく用いられます。


##シャルパンティエ効果
シャルパンティエ効果とは身近なものを使って例えられると心理的錯覚を起こすという心理効果です。
1kgの綿と1kgの石を持ち比べたとき、同じ重さのはずなのに綿の方が軽いと感じてしまうのもその効果の一つです。
有名な例として「ビタミンC2000mg配合」「レモン100個分のビタミンCを配合」というキャッチコピーがあります。ビタミンC2000mgはイメージしにくいですが、レモン100個分はレモンが具体的でイメージしやすくビタミンCが多く入っていそうと感じます。

# 入力フォーム編
![form.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207762/79e87168-e015-ac1c-bd73-a44ae1515f01.png)
入力フォームで使えそうな心理学をご紹介します。

##オッカムの剃刀
>オッカムの剃刀（オッカムのかみそり、英: Occam's razor、Ockham's razor）とは、「ある事柄を説明するためには、必要以上に多くを仮定するべきでない」とする指針。
（「オッカムの剃刀」『[フリー百科事典　ウィキペディア日本語版](https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8)』。2020年8月15日 (土) 00:21 UTC）

必要以上に多くの情報や選択肢を提示しないということです。
複雑なデザイン、過度なインタラクションは止めてシンプルでわかりやすい入力フォームを意識します。

##ヒックの法則
ヒックの法則は選択肢が増えるほど決定する時間が長くなってしまうという法則です。
10個から1個を選ぶより3個から1個を選ぶほうがユーザーストレスがありません。
選択肢を最小限に抑えることでストレスを軽減させ、入力フォームに集中できます。

##チャンキング
>心理学では、情報の断片を類似性など何らかの原理に基づいてより大きな情報の断片の中に統合する過程。
（「チャンキング)」『[フリー百科事典　ウィキペディア日本語版](https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8)』。2014年10月18日 (土) 00:32 UTC）

あるものを小さく砕いたり、大きくまとめたりして、わかりやすくするという方法です。
例えば電話番号は羅列された数字より数桁ずつ「-」で区切ることで、よりわかりやすくなります。関連する入力項目をまとめ、ブロックごとに分けてわかりやすくします。

##フィッツの法則
>フィッツの法則（フィッツのほうそく、英: Fitts's law）とは、マンマシンインタフェースにおける人間の動作をモデル化したもので、対象の領域に移動するのに必要な時間が対象部までの距離と対象物の大きさの関数となることを予測する。
（「フィッツの法則)」『[フリー百科事典　ウィキペディア日本語版](https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8)』。2017年9月29日 (金) 02:03 UTC）

対象の大きさ、対象までの距離・時間・速度の相関関係を説明するもので、「遠い・小さい→選びにくい」、「近い・大きい→選びやすい」という関係です。
送信ボタンまでの間隔を広くなりすぎないようにしたり、送信ボタンを大きくすることでスムーズに動作できます。

##アフォーダンス
>アフォーダンスは、物をどう取り扱ったらよいかについての強い手がかりを示してくれる。例えば、ドアノブがなく平らな金属片が付いたドアは、その金属片を押せばよいことを示している。逆に、引き手のついたタンスは、引けばよいことを示している。これらは、体験に基づいて説明なしで取り扱うことができる。
（「アフォーダンス」『[フリー百科事典　ウィキペディア日本語版](https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8)』。2020年8月21日 (金) 11:04 UTC）

説明しなくても見れば使い方が理解できるということです。
送信ボタンに影を入れてより押せそうなボタンにしたり、リンク文字は青文字に下線を入れたり、ユーザーに何ができるかわかりやすいデザインにします。

##カリギュラ効果
カリギュラ効果とは禁止されると興味がでて、やってみたくなる心理現象のことです。
「○○な人以外は□□しないでください」など、LPでもよく用いられています。
また、より多く選択してほしい時に選択を制限することで選択数が増える可能性があります。
「選択してください」と書くより「5つまで選択できます」と書かれたほうが総合的に選択数が増える可能性があります。

##進捗状況の提供
進捗状況を伝えることは、ゴールまでの労力をより少なく見せる効果があります。
入力フォームに進捗がわかるようにインジケータなどを設置します。

# さいごに
行動心理学を用いて、ユーザーに快適なコンバージョンしてもらいましょう。

<br>
<b>参考サイト</b>
・知らなきゃ損！ マーケティングに“効く”行動心理学9選
https://service.plan-b.co.jp/blog/marketing/2120/
・使いやすいフォームとは、心理学の原則に基づいたユーザビリティの改善方法
https://coliss.com/articles/build-websites/operation/work/hacking-usability-with-psychological-principles.html
・UX DAYS TOKYO（オッカムの剃刀）
https://uxdaystokyo.com/articles/glossary/ockhamsrazor/
・UX DAYS TOKYO（ヒックの法則）
https://uxdaystokyo.com/articles/glossary/hicks-hymans-law/

<br>
明日の記事は@hiro_moriさんです。
よろしくお願いします。


ウェブクルーでは一緒に働いていただける方を随時募集しております。
お気軽にエントリーくださいませ。

[開発エンジニアの募集](https://hrmos.co/pages/1004681658307198976/jobs/214)

[フロントエンドエンジニアの募集](https://hrmos.co/pages/1004681658307198976/jobs/210)