美プロを更に魅力的に。Webサイトのデザイン・UXに活用できる心理学手法を紹介！

こんにちは！HRビジネスパートナー事業部 美プロ制作の大木です。
今年もあと少しになりますが、令和元年やキャッシュレス元年と、短い月日で新たなスタートを切る出来事ばかりでしたね！私もそろそろキャッシュレスを取り入れていこうかなと考えています。

余談はさておき、早速本題にいきたいと思います。
Webの開発市場はいま飽和状態で、ユーザはその選択肢の多さに目移りしてしまうことも少なくありません。そこで、Webサイトには人の心理をついた工夫が施され、望ましい方向や行動へとユーザをそっと促しています。

そんな工夫や心理的なきっかけは、私が担当している美容業界専門の求人サイト「美プロ」にも取り入れられています。

普段私が行っている業務にも関連するWebデザイン・UX(ユーザが得られる体験)において、実際に活用している心理学手法をご紹介していきます！

手法1：系列位置効果

?系列位置効果という手法は、ユーザは連続した項目(リスト形式)のうち、最初と最後の項目を思い出しやすいことで、ユーザが大きく注意を向ける位置によって、さらに「初頭効果」と「親近効果」の2つに分けることができます。

初頭効果では最初に示された項目に、そして親近効果では最後に示された項目が印象に残りやすく、後の判断に大きな影響を与えるとされています。
この効果を利用して項目や情報を特定の順番で並べることで、ユーザの行動を導くことが可能になります！

強調したい情報をより多くクリックしてもらうために用いられ、美プロのナビゲーションメニューにも活用されています。

[PC版]

[スマホ版]

実際の使用例は、こんな感じです。このメニューの順番も、ただ並べたのではなく、系列位置効果によるユーザの行動をイメージしながら決めています。
ナビゲーションメニューの最初と最後には重要とするリンクを置くことで、多くクリックしてもらうことにつながるのです。

手法2：フォン・レストルフ効果(孤立効果)

?フォン・レストルフ効果は、ユーザは他から孤立した目立つものを記憶するという現象で、新しいことを記憶していく場合、よく見るようなものよりも、場違いで際立ったものの方が記憶に残りやすいという効果になります。

どのWebサイトにも言えることですが、すべてのボタンを同系色にするのではなく、重要なボタンは色や大きさ、グラデーションをつけるなどして「浮く工夫」や「目立つ工夫」をすることがポイントです。

[PC版]

[スマホ版]

ボタン一つとはいえ工夫がされていれば、ユーザにとって快適な体験になると思います！

手法3：ツァイガルニク効果

?ツァイガルニク効果とは…人間は達成したことよりも、達成できなかったことや中断していることの方をより記憶しているという現象。

一時期、テレビCMを中心に「続きはWebで！」というキャッチコピーが流行したのを皆さん覚えていますか？
これは、ツァイガルニク効果を応用したもので、「続きが気になる！」というユーザの心理をうまく利用しています。
また、多くのニュースサイトやブログが導入していますが、ニュース記事では内容の一部だけ読ませておいて、「続きは会員登録をすれば読むことができます」と、会員登録に誘導するケースもあります。

美容に関する記事サイト「美プロPLUS」でもツァイガルニク効果を利用して読ませる工夫を取り入れています。

[PC版]

[スマホ版]

ユーザに「最後まで読みたい！」という心理を上手く利用することがポイントになります！
近年では、ツァイガルニク効果を露骨に行うことは、ユーザに嫌うこともありますので、使用の方法には注意が必要です。

日々試行錯誤な美プロ制作

一口にデザイン・UXといってもそこには心理学的・経済学的アプローチなど、さまざまな要素が絡み合っていて、世の中のサービスではこれらの手法を上手く応用しています。もちろん、美プロでもです。

美プロには基調としているテーマカラーがあり、ひとつの「ブランド」を築いています。
目立つから、一般にとってセオリーだからといって、そのブランドにあわない手法をただ入れるだけになっては意味がありません。

「美プロにあわせてどのようにブラッシュアップをしていくのか」が制作として重要なポイントのひとつ。
上司の秋葉マネージャーと一緒に相談したり、互いに提案したりしながら、試行錯誤の日々です。

手法は知っているだけではなく活用しなければ意味がないので、美プロや美プロPLUSでは、こうした技術をうまく応用して取り入れて、これからもたくさんの方たちに美プロを利用していただきたいと思っています！

以上、美プロ制作の大木でした。