ユーザーが使いやすいUIデザインを設計するには、心理学の手法を取り入れるのも有効です。
そして心理学を取り入れるには、UIデザインと相性の良い法則や理論を理解することが必要です。

今回は、UIデザインの概要、UIデザインに心理学を取り入れる必要性を解説した後、法則や理論をどう取り入れるか具体的にイメージできるように解説していきます。

UIデザインを進化させるために活用できる心理学の法則・理論を10種類紹介するので、デザイン設計時の参考にしてください。

UIデザインとはユーザーがUIをストレスなく使えるように設計すること

UIとは「ユーザーインターフェース」を指す言葉で、“プロダクトやサービスがユーザーと接するところ”という意味です。そしてUIデザインは、ユーザーがUIをストレスなく操作ができるようにデザイン設計をすることです。

UIデザインをきちんと設計すると、自社のプロダクトやサービスを使うユーザーはストレスを感じることなく利用目的を達成できます。
ストレスなく情報収集できる体験を得られれば、そのユーザーがリピーターになってくれる可能性は高いでしょう。

UIデザインの詳細は、以下の記事で詳しく解説しています。

■関連記事:
UI（ユーザーインターフェース）デザインの大切さとは？今後のトレンドも踏まえて解説

なぜUIデザインに心理学を取り込むのか

UIデザインに心理学を取り入れる上で知っておきたいのが、デザインの欲求階層説です。デザインの欲求階層説とは、人の欲求を段階的に示した心理学の考え方「マズローの欲求段階説」をデザイン分野に応用させた考え方です。

デザインの欲求階層説は、以下の5階層で構成されています。

1. 機能性の欲求：ユーザーが求めている基本機能を満たす段階
2. 信頼性の欲求：デザイン・機能に一貫性を持たせ、安心感や信頼感を与える段階
3. ユーザビリティの欲求：ユーザーの使い勝手をよくすることで、使用時のストレスを解消する段階
4. 上達の欲求：作業効率の改善や生産性の向上で満足度を高める段階
5. 創造性の欲求：自分なりの使い方を見いだしてもらうことで、愛着を持ってもらう段階

ユーザーとプロダクト・サービスの深いつながりを構築していくには、デザインの欲求階層説を1～5の順に満たしていく必要があります。

そして、各階層でユーザーの欲求を満たしていく上で大切になるのが、人の心の理解につながる心理学の考え方というわけです。

UIデザインの設計に心理学を取り入れる3つのメリット

UIデザイン設計に心理学の考え方を取り入れると、以下の効果やメリットが得られます。

1.人の思考パターンを理解できる

素晴らしいユーザー体験につながるUIデザインを設計するには、先述のとおり人の心を理解した上でデザインの欲求階層説を順に満たしていくことが大切です。

プロダクトやサービスのユーザーには、さまざまな価値観や感情（心）があります。

場合によっては、プロダクトやサービスの提供側が想像できない真逆の価値観や行動パターンを持つ人もいるため、設計時にその全てを想像するのはかなり難しいでしょう。

しかし、ユーザーの思考や行動パターンを理解することで価値観や行動パターンの想像の精度は上がるはずです。
ユーザーの思考や行動パターンを理解するには、まず心理学の考え方を通じて人が無意識に感じることや行動などの法則を知り、寄り添うことが大切です。

なお、心理学を指す英語のpsychologyを分解すると、「心（psycho）＋科学や法則（logy）」になります。
法則から人の心を科学的に理解すれば、デザインの欲求階層説を満たすために実装すべきデザインもおのずと見えてくるでしょう。

2.ユーザーの使いやすいUIが分かる

例えば、自社がユーザーの心の動きや行動パターンを理解しないまま、自社の価値観や視点だけでUIデザイン設計を行ったと仮定します。

この場合、ターゲットユーザーと自社の思考・価値観が同じであれば、大きな問題は起こらないかもしれません。

ただし、ユーザーと自社の価値観が真逆だった場合、ユーザーにとってかなり使いづらい的外れの製品・サービスを提供する可能性があります。結果として、ユーザーが不満を感じることもあるでしょう。

心理学の法則や考え方を通じて、作り手である自社と異なる、ユーザーの価値観や気持ちを理解する姿勢が大切です。

心理学によって人の心や思考・行動パターンが分かると、使いやすさ・使いにくさ、メリット・デメリットの両方が理解しやすくなります。
また、自社の押しつけにならない使いやすさかどうかも判断しやすくなるでしょう。

3.UXにつなげる方法を見つけやすい

例えば、「（ユーザーが）商品を買って満足する」「商品に満足して他者におすすめする」というUX（ユーザーエクスペリエンス）を達成するためにWebサイトを設計すると仮定します。

この場合に最適なUIデザインは、以下のようにユーザーの属性や嗜好によって大きく変わってきます。

• お年寄り：アイコンや説明文が大きい、簡単な操作で買いものができる
• 情報感度が高い人：雑誌に掲載されたことや、インフルエンサーが利用していることがトップページなどで紹介されている
• 慎重派の人：アイテム画像を360度回転できる、価格やサイズ比較が容易にできる　など

デザイン設計時に心理学の考え方を取り入れると、「ターゲットユーザーの思考や行動パターン×プロダクトの結果・目的」の組み合わせから最も効果的なUXにつながるUIデザインを見つけやすくなります。

また、実装したいUIデザインが複数ある場合、心理学を知っていると機能やデザインを絞り込みやすくなるでしょう。

UIデザインに生かせる10種類の心理学の法則

心理学の法則や理論にはさまざまな種類があります。この章では、UIデザインに生かしやすい10種類の心理学理論・法則について、概要と活用ポイントなどを解説します。

1.カクテルパーティー効果

カクテルパーティー効果とは、多くの情報が飛び交う中にあっても自身に関係がある情報と思われるものには、自然と注意が向くという心理効果です。

カクテルパーティー効果を活用した例としては、例えばDM（ダイレクトメール）などのタイトルに、顧客の名前や、「30代男性向け」「東京在住の方」などのペルソナに沿ったワードを入れる方法があります。こうすると、日々大量のDMが届く人にも、自分向けの情報だと認識させやすくなります。結果、メールの開封率やサイト訪問などの行動率に良い影響を与えます。

ペルソナを取り入れたタイトル例としては、以下のようなものがあります。

• シニア世代の2人旅を応援！貸し切り温泉付きプラン
• 20種類のワインが飲み放題！女子会プラン
• 女子大生の一人暮らしにおすすめの家電セット

なお、ペルソナに対するカクテルパーティー効果を狙うなら、以下のように具体的な人物像（ペルソナ）を設定しましょう。

• 性別：女性
• 年齢：25歳～30歳ぐらい
• 職業：OL
• 年収350万円～450万円
• 予算：1人あたり4,000円～6,000円
• 飲食店に希望すること：おいしいワインが充実、財布を気にせず飲める、ゆったりとしたソファーがある　など

2.系列位置効果

系列位置効果とは、下記のように一連の情報や項目が並んでいる場合、最初と最後の位置にあるものが記憶に残りやすいという心理効果です。なお、最初に見たものが覚えやすいことを「初頭効果」、最後が覚えやすいことを「親近効果」と呼びます。

• キーマカレー
• バターチキンカレー
• グリーンカレー
• レッドカレー
• イエローカレー

上記の中で系列位置効果が高いのは、最初の「キーマカレー」と、最後の「イエローカレー」です。一方で、最初と最後以外の中央に並ぶ「バターチキンカレー」「グリーンカレー」「レッドカレー」は、ユーザーの記憶に残りづらいということになります。

ブログなどの文章でも、要点を「最初」、まとめを「最後」に述べることで、記事内のポイントがユーザーの記憶に残りやすくなります。

なお、Webサイトなどで選択肢が多い場合、セレクトボックスがよく使われます。セレクトボックスは初頭効果が働きやすい仕組みです。よく選ばれる担当者名を一番上にしたり、おすすめ商品を一番上にしたりすると効果的です。

3.コントラスト効果

コントラスト効果とは、似たデザインのものが並ぶ中で特定のものだけを目立たせることによって、印象を操作する心理効果です。

例えば、モノトーンの画面の中で「Next」のボタンだけをオレンジ色など彩度の高い色にすれば、「次はどこを押せば良いのだろう？」とユーザーが迷う可能性を低くすることができるかもしれません。

コントラスト効果は周囲のルールや法則と異なる要素を入れることで、特定のものだけを目立たせる手法のため、効果を高めるにはWebサイトやアプリ全体に使う色やデザインをあえて絞ることが大切です。

4.ツァイガルニク効果

ツァイガルニク効果とは、「すでに完了したこと」よりも「完了していないこと・できなかったこと・中断したこと」のほうが記憶に残りやすい、気になりやすいという心理効果です。

この効果を取り入れることで、Webサイトの別ページやリンク先へのアクセスを高めることができます。

具体的には、以下のような活用例が挙げられます。

• オンライン学習サイトで未完了のプログラムを表示させる ⇒ 早く完了させたくてウズウズする
• テレビCMの最後に表示される「続きはWebで」 ⇒ 続きが見たくてウズウズする
• 健康食品の特徴をクイズ形式で解説する ⇒ 答えが知りたくてウズウズする
• 1ページ目の最後を「なぜ○○は注目されたのでしょうか？」と疑問形にする ⇒ 注目された理由が気になりウズウズする　など

なお、ツァイガルニク効果は、心理的リアクタンスという「緊張感などから自由になりたい気持ち」にアプローチするものです。
ただ、Webページ内で何度も疑問形が続いたり、クイズやゲームをしないと情報にアクセスできなかったりするだけでは、ユーザーにストレスがかかり良い印象を持たれません。

ツァイガルニク効果につながるUIデザイン設計をする際は、ユーザーの負担を増やしすぎない配慮も必要です。

5.ヒックの法則

ヒックの法則は、選択肢が多いほど迷いやすくなり、決断まで時間がかかるという心理的な法則です。その結果生じるのが、ユーザーにおける認知負荷の問題です。

例えば、通販サイトでおすすめの洋服を「1ページに100着」表示させるデザインにした場合、ユーザーは自分が欲しいものを絞り込むまでに、多くの情報をチェックする必要あります。

商品を決めるまでに長い時間がかかってしまうと、認知負荷による疲れやストレスなどから、当初抱いていた購買意欲が低下する可能性が出てくるでしょう。

この問題を防ぐには、例えばWebサイトにアクセスしたときの初期表示数を30件にとどめ、画面に慣れた段階でユーザーが60件や90件といった表示件数を選択する形式をとることなどが挙げられます。また、商品をカテゴリ分けするのもおすすめです。

6.決定回避の法則

決定回避の法則は、選択肢が多いほど決断を回避するという心理的な法則です。先述のヒックの法則との違いは、ユーザーが決断まで至らないことです。そのため、通販サイトなどでは、特に意識する必要があります。

決定回避の法則は、大量の情報や商品がユーザーに多大な認知負荷をかけることで起こります。もし認知負荷によって「このショップは自分に合わない」などのネガティブな感情が生まれた場合、ユーザーはページから離脱してしまいます。

通販ページで多くの商品を取り扱うことは良いことです。ただし、ユーザーに認知負荷をかけ、決定回避させてしまうような見せ方を避ける必要があります。

7.美的ユーザビリティ効果

美的ユーザビリティ効果とは、プロダクトやサービスの見た目が良ければ、ユーザーのポジティブな感情から、多少の使いにくさが許容されるという心理効果です。場合によっては、見た目が洗練されているだけで「うまく機能するはずだ」と思ってもらえます。

UIデザイン設計の世界では、機能や使い勝手が重視されることがほとんどです。しかし、多くのユーザーは、「美しい」や「かわいらしい」などの情緒的な側面において使い勝手を評価する傾向があります。

Webサイトを設計する際は、見た目にも気を使うことでUIデザインとしても評価されやすくなるでしょう。

8.アフォーダンス

アフォーダンスとは、画面やプロダクトの色・形状などからユーザーがその使用方法を直感的に理解できることです。

例えば、「検索窓にキーワードを入れて虫眼鏡のボタンをクリックするとそのキーワードについて検索できる」「下線付きのURLをクリックするとリンク先に飛べる」などが挙げられます。

UIデザイン設計でアフォーダンスを意識すれば、操作性の向上につながります。また、最小限の説明でユーザーが意味を理解してくれる点も利点です。

アフォーダンスの観点でデザイン設計をする場合は、多くのユーザーがほかのWebサイトやサービスで経験していることをいたずらに変えず、慣例に沿うよう意識することが大切です。

以下のように、アフォーダンスを考慮しない設計とならないよう注意しましょう。

• 文字やURLに下線が付いているのに、クリックしてもリンク先に飛べない
• 広告バナーかと思ったら、ただの画像だった
• 通常のマウス操作では画面スクロールができない　など

9.フレーミング効果

フレーミング効果とは、同じ意味でも表現方法を変えるだけで印象が変わるという心理効果です。この効果は、情報のどこに枠（フレーム）を当てはめるかでユーザーの意思決定が変わってくることから、フレーミング効果と呼ばれます。

フレーミング効果を実証するために、医療現場による治療方法の意思決定などで実験も行われています。例えば、以下の2つは手術に関して表現は異なりますが同じ意味を示す情報です。

1. 術後1ヵ月の死亡率は10％です
2. 術後1ヵ月の生存率は90％です

この情報を各グループの被験者に示した結果、①の死亡率に基づく情報よりも、②の生存率に基づく情報を提供したほうが、手術の選択率が高かったことが分かっています。

出典：
McNeil, B. J., Pauker, S. G., Sox Jr, H. C., & Tversky, A. (1982). 23On the Elicitation of Preferences for Alternative Therapies. Preference, Belief, and Similarity, 583.

フレーミング効果は、UIデザイン設計にも活用できます。例えば、旅行代理店が自社のキャンペーンにより多くのユーザーが申し込んでほしいと考える場合、1よりも2のタイトルにしたほうが、切迫感が伝わりやすくなるでしょう。

1. 9月30日までのキャンペーンです！ぜひご利用ください！
2. キャンペーン終了まであと3日！ぜひこの機会をお見逃しなく！

10.目標勾配効果

目標勾配効果とは、「ゴールが近づいている」と実感するほど、やる気が促進される心理効果です。

例えば、Webサービスの会員登録をする場合、ユーザーは、以下のようにたくさんの情報を入力する必要があります。

• メールアドレス
• ユーザーID
• 本人の氏名
• 住所
• 電話番号
• 生年月日
• 勤務先企業名
• 勤務先住所……　など

これらの入力項目を一つのページにずらずらと並べると、「いつになったら入力が終わるのだろう？」といった不安や違和感がユーザーに生じやすくなります。

そこで、ページの上部に進捗の分かるステップを以下のように表示させると、ユーザーは「あと少しで終わる」といったポジティブな気持ちになりやすくなります。

• STEP1.ログイン情報を入力
• STEP2.個人情報を入力
• STEP3.勤務先情報を入力
• STEP4.入力完了・送信

目標勾配効果によってユーザーの意欲を高めるには、具体的な回数やステップ、完了までの残り時間などを示し、それらの情報から「あと少しでゴールだ！」と感じてもらえる工夫が必要です。

ユーザーからの意見には対応するべき？

心理学の研究では、人や動物などの行動の回数を測定した上で、統計結果から法則などを見つけます。そのため、心理学は確かに科学的ではありますが、研究から見つかった法則が全てのユーザーに当てはまるものではありません。

心理学におけるこの基本的な考え方は、UIデザイン設計に心理学を活用しても、全てのユーザーが使いやすいデザインになるとは限らないことを意味します。

そのため、もしWebサイトの大幅なリニューアルを行えば、これまで直感的に探せていた情報が見つからなかったり、情報収集に時間がかかったりするなどの認知負荷がユーザー側に生じる可能性があります。

しかし、認知負荷は、Webサイトへの親しみやすさによって軽減されます。プロダクトやサービスが購買意欲などを著しく低下させるものでなければ、基本的にユーザーは使い方に慣れていくという考え方もできます。

もしWebサイトのリニューアル直後などにクレームが来た場合でも慌てず、UIやUXを著しく低下させているものから適宜改善していくとよいでしょう。

まとめ

ユーザーにとって直感的で分かりやすいUIデザインを設計するには、記事内で紹介した「デザインの欲求階層説」を順番に満たしていくことが大切です。また、ユーザーの欲求を満たすには、心理学を通じて人の思考パターンを理解したり、どのようなUIが使いやすいかを想像したりすることが大切です。

今回は、UIデザインに生かしやすい10種類の心理学の法則を紹介しました。これから自社のUIデザインを見直す際は、記事内の法則に合った設計ができているかを、一つずつ確認してみてください。