顧客に満足感を与えるプロダクトを開発するには、UXデザインの法則を理解することが重要です。UXデザインに心理学を取り入れることで、顧客のニーズや行動パターンを把握しやすくなります。
この記事では、UI・UXデザインの法則や成功事例、UI・UXデザインに心理学を取り入れるメリットを紹介します。UXデザインを学習している方や、WebサイトのユーザビリティをUI・UXデザインの観点から高める方法が知りたい方は、ぜひ参考にしてみてください。
UXデザインとは？
UXデザインとは、「顧客体験」を意味する「ユーザーエクスペリエンス」の略称です。商品やサービスを通してユーザーが得られる体験をプロダクトに実装します。
たとえばECサイトでは、商品を探しやすい設計や、お気に入りリストに入れてから購入手続きまでスムーズに完了できる導線づくりなどユーザーの体験を指します。
ちなみに、UXと混同されやすいUIとは「ユーザーインターフェース」の略称です。UIはユーザーと商品・サービスの接点となる要素であり、ボタンや文字のフォントなど機能やデザインを指します。
UIの機能性が高まることで、UXの向上につながるといえます。UXデザインによってユーザーの満足度が高まり、プロダクトで叶えたい成果を上げることができるでしょう。
押さえておきたいUI・UXデザインの法則19選
UI・UXデザインには、心理学をもとにした以下のような法則があります。
- アフォーダンス
- 美的ユーザビリティ効果
- 目標勾配効果（エンダウド・プログレス効果）
- 系列位置効果
- 孤立効果（フォン・レストルフ効果）
- ツァイガルニク効果
- ドハティの閾値（しきいち）
- ヒックの法則
- ミラーの法則
- ピーク・エンドの法則
- 単純接触効果（ザイアンス効果）
- フィッツの法則
- F型視線誘導の法則
- ゲシュタルトの法則
- カクテルパーティー効果
- 決定回避の法則
- フレーミング効果
- ヤコブの法則
- コントラスト効果
UI・UXデザインの法則を理解することで、プロダクトのユーザビリティを高めやすくなります。ユーザーの心理や行動パターンを踏まえたうえで、よりよいユーザー体験を目指せるWebデザインを実装しましょう。
アフォーダンス
アフォーダンスとは、ユーザーが操作方法を直感的に理解できるデザインのことです。Webデザインにアフォーダンスを取り入れることで、ユーザーは説明書を読まなくても形状や色などから視覚的にWebサイトの使用方法を理解できます。
たとえば、ボタンに立体感を持たせてクリックを促したり、虫眼鏡のアイコンを表示させて検索バーであることを認識させたりするなどです。アフォーダンスによってユーザーを指定の動作に誘導し、スムーズな操作性を実現できます。
美的ユーザビリティ効果
美的ユーザビリティ効果とは、ビジュアルの美しさによって操作の快適性を演出するデザイン効果です。ビジュアルの美しいWebデザインには、ユーザー満足度や作業の生産性を高める効果があります。
たとえば、Webサイトのトップページに美しさを感じる画像を表示したり、入力フォームのビジュアルデザインにこだわり洗練された印象を与えたりするなどです。
ビジュアルの美しさはユーザーにポジティブな印象を与えるため、商品・サービスに多少不便が生じても、寛容に受け止められやすくなります。
目標勾配効果（エンダウド・プログレス効果）
目標勾配効果とは、ユーザーが目標達成に近づくにつれて、最後までやり遂げるモチベーションを高めるデザイン効果です。エンダウド・プログレス効果ともいいます。
たとえば、ECサイトにおける獲得ポイントの表示や学習アプリの進捗状況の確認などに用いられています。会員登録などの手続きにおいてユーザーに残されたプロセスを表示する方法も、目標勾配効果を利用したUI・UXデザインです。
目標勾配効果を用いたUI・UXデザインは、リピート購入を促したりサービスの途中離脱を防いだりするのに効果的といえます。残りのプロセスや現状の到達度を可視化することで、ユーザーの目標達成意欲を高められます。
系列位置効果
系列位置効果とは、最初と最後に表示する情報がユーザーの記憶に残りやすいことを指します。Webサイトでは、重要な情報や要素をページの上部と下部に設置することで、ユーザーへの訴求力が高まります。
たとえば、トップページにキャンペーン情報を表示したり、ページの最下部にサービスの申し込みや商品の購入につながるリンクを設置したりするなどです。
最初に表示される情報を最も重要であると認識しやすい心理や、最後に見る情報は最も新しい記憶であることから思い出しやすいという理論に基づいた法則です。
孤立効果（フォン・レストルフ効果）
孤立効果とは、似た特徴のものが集まるなかでは異質なものが印象に残りやすいといったデザイン効果です。配色やデザインによるコントラストを用いて、ユーザーの注意や関心を引きつけます。
たとえば、会員登録画面や購入画面などに遷移するボタンのサイズやカラーを、周囲と変えるなどです。クリックを促したい部分や迅速に情報を伝えたい部分のみ、周囲と差をつけて強調します。孤立効果は、プロダクトの目的を達成する重要なUIにおいて活用されやすいデザインです。
ツァイガルニク効果
ツァイガルニク効果とは、完了したものよりも未完了のタスクのほうが記憶に残りやすいことを指しています。中断したり完了していなかったりする中途半端な状態が、ユーザーに緊張感や気持ち悪さを覚えさせます。
UI・UXデザインにおいては、学習アプリで中断した単元や、会員情報で未登録の項目を強調するなどのデザインに用いられる法則です。ユーザーは未完了である部分への意識が高まり、全てのタスクを完了させたいといった意欲が生まれやすくなります。
ドハティの閾値（しきいち）
ドハティの閾値とは、ユーザーが最も生産性を高められるシステムの応答時間は0.4秒以内であるといった法則です。リンクをクリックしてから0.4秒以上経過してもページの遷移や応答がないと、ユーザーはストレスを抱えて興味を失いやすくなる傾向があります。
プロダクト制作時には、ユーザーのよりよい体験のために、サーバーを強化したり、システムの応答を待つユーザーのストレスを低減させる仕掛けが必要です。たとえば、応答中に対応完了までにかかる残りの待機時間を予想して表示するなどです。
ドハティの閾値を意識したUI・UXデザインを行うことで、途中離脱やプロダクトに対するマイナスイメージを防ぐことができます。
ヒックの法則
ヒックの法則とは、ユーザーに提示された選択肢が多すぎると意思決定に時間がかかることを指します。多くの選択肢を与えられることで、ユーザーは決断するにあたってプレッシャーを感じやすくなります。
UI・UXデザインのポイントは、プロダクトの利用目的に応じて重要な要素を抜粋し、強調することです。たとえば、ECサイトで販売商品をカテゴリ別に分類して表示したり、おすすめ商品や人気商品を目立たせてユーザーに選択を促したりするなどです。
商品やコンテンツを選択する時間と負荷を減らすことで、ユーザーにスムーズな利用体験を提供できます。
ミラーの法則
ミラーの法則とは、人が短期的に記憶できる数が7つ程度であるといった法則です。7つに対して±2の幅があるといわれていることから、ユーザーに提示する情報量は5～9個を目安にするのが良いでしょう。
UI・UXデザインにおいては、複数のコンテンツやメニューを7つ程度に分類することがポイントです。ミラーの法則を意識することで、ユーザーが各項目を認識しやすかったり、情報が記憶に残りやすかったりします。
ピーク・エンドの法則
ピークエンドの法則とは、最も感情が高ぶった時と最後に体験したことが、プロダクトへの印象や評価に大きく影響することです。UI・UXデザインでは、マイナスな印象を与えかねないポイントにユーザーの関心を引く仕掛けをすることで、ピークのポイントに切り替えられます。
たとえば、入力情報を送信するまでの待機時間に、ユーモアのあるコンテンツや有益な情報を表示する手法です。感情がピークに達するポイントやサービス終了時に良質なユーザー体験を提供することで、総合的な満足度を高められます。
単純接触効果（ザイアンス効果）
単純接触効果とは、接触回数が多いものほど好意的に感じる心理効果です。ザイアンス効果とも呼ばれ、恋愛やマーケティングなど、さまざまなシーンで用いられています。
UI・UXをデザインにおいては、特定のロゴやキャラクターなどを各所に配置したり、広告などで繰り返し登場させたりする手法があります。ユーザーの興味を引きつけ、好印象を与えるのに効果的です。
UI・UXデザインでは、マーケティング効果を意識することも重要です。ユーザーの記憶に残りやすいUI・UXデザインを実装して、プロダクトの認知やイメージを高めましょう。
フィッツの法則
フィッツの法則とは、ユーザーのアクションに必要なUIが大きくて近くにあるほど、短時間で操作できるといった法則です。
たとえばスマートフォンのUI・UXデザインでは、親指でタッチしやすい部分に重要な要素を配置することがポイントです。使用頻度が高いコンテンツを画面下部に固定することで、ユーザーがスムーズに選択できます。
フィッツの法則を意識したUI・UXデザインによって、プロダクトの操作性が高まるでしょう。
F型視線誘導の法則
F型視線誘導の法則とは、ユーザーがプロダクトを利用する時の視線がアルファベットの「F」を書くように移動することです。
Webサイトにおいては、最初に左上へ視線が留まり、右上から左下へ、そこから画面右下に移動する傾向があります。そこからさらに下へ視線を動かしていく法則です。
F型視線誘導の法則から、Webサイトやアプリでは、訴求したい情報を上部に配置するのがおすすめです。特に強調したい要素は、左上に配置しましょう。下部に配置するほど読み飛ばされる可能性が高く、ユーザーの記憶にも残りにくいといえます。
ゲシュタルトの法則
ゲシュタルトの法則とは、人がものを見る時に「まとまり」として認識する傾向があることです。ゲシュタルトの法則には、「近接」「類同」「連続」といった3つの特徴があります。
人の脳は、近くにあるものや似ているもの、連続しているものをそれぞれまとまりとして認識するといった法則です。UI・UXデザインでは、類似したコンテンツを近くに配置したり、複数のメニューボタンを似た形状にデザインしたりする手法があります。
ゲシュタルトの法則を理解していることで、一体感があるワイヤーフレームの作成や、ユーザーが情報を認識しやすいUIデザインを提案できます。
カクテルパーティー効果
カクテルパーティー効果とは、騒がしく大勢の人がいるパーティー会場でも、自分に関係のある情報や会話は自然と聞き取れる現象をいいます。膨大な情報が溢れるなかでも、自分との関係が深い情報には自然と反応したり、注意や関心が向いたりする心理です。
UI・UXデザインでは、ペルソナに関する具体的なワードをキャッチコピーやアイキャッチに取り入れることで、ターゲットに強く訴求できます。たとえば、「通勤時間の学習で資格取得を目指す20代女性に向けた学習アプリ」などです。
UI・UXをデザインするうえで、ペルソナを意識した設計がカクテルパーティー効果を高めます。
決定回避の法則
決定回避の法則とは、選択肢が多すぎるとユーザーが決断できないことを意味しています。選択肢が多い場合に、決断に時間がかかる現象を意味する「ヒックの法則」とは異なり、決定回避の法則ではユーザーが最終的な意思決定に至りません。
たとえば、学習アプリが膨大なタスクを提示しても、ユーザーはタスクを選択できず利用しないまま離脱する可能性があるでしょう。ユーザーが積極的にアプリを使いたくなるように、「頻出問題」や「苦手克服メニュー」など、情報を絞って表示する仕組みが必要です。
決定回避の法則を意識したUI・UXデザインによって、ユーザーがプロダクトの使用目的を達成しやすくなります。
フレーミング効果
フレーミング効果とは、表現の仕方やフレームを当てるポイントがユーザーの意思決定に影響することです。フレーミング効果を意識することで、UI・UXデザインの訴求力が高まります。
たとえばプロダクトの無料トライアル期間を掲載する場合、「2ヶ月」よりも「60日間」と表現した方がユーザーは長く感じやすいでしょう。また、作業完了までのプロセスを「残り40%」とするのではなく「完了率60%」と表示することで、ユーザーのモチベーションを保ちやすいといえます。
ターゲットユーザーの心理を多角的に推測し、プロダクトへのストレスを解消したり、特別感を与えられたりする表現を用いることが大切です。
ヤコブの法則
ヤコブの法則とは、ユーザーが馴染みのあるプロダクトの特徴を、類似したプロダクトにも求める傾向があることです。新しくリリースされたプロダクトに慣れ親しんだプロダクトとの共通点があると、ユーザーは操作方法などを迅速に理解できます。
たとえば、InstagramとXでは、ホーム画面と検索画面のアイコンや配置が同じです。ユーザーは各SNSサービスにおいてそれぞれの操作方法を理解しようとする必要がありません。競合や親和性の高い商品・サービスから、ユーザーに馴染みやすいデザインを考案しましょう。
コントラスト効果
コントラスト効果とは、全体のデザインや配色のなかで特定の要素のみ目立たせ、印象をコントロールすることです。周囲とのコントラストによって、ユーザーの行動や視線を誘導できます。
たとえば商品特設サイトにおいて、白色を基調としたトップページに「商品情報はこちら」といった赤いボタンがあれば、ユーザーの視線を誘いやすいでしょう。商品情報を求めるユーザーにとって、どの部分をクリックすればよいか一目で分かるメリットがあります。
UI・UXデザインに心理学の法則を取り入れるメリット
UI・UXデザインに心理学の法則を取り入れると、以下のようなメリットがあります。
UI・UXデザインと心理学のつながりを理解することで、満足度の高いプロダクトを開発できるでしょう。
ユーザーの直感的な使いやすさを考慮したデザインにできる
心理学の法則からヒントを得て、ユーザーの心理を推測しやすくなります。そのため、UI・UXデザインに心理学の法則を取り入れることで、ユーザーに強く訴求できるデザインを実装しやすくなるのです。
たとえば、アフォーダンスやヤコブの法則を意識すると、ユーザーが情報や操作方法を認識しやすいデザインを提案しやすくなります。コンテンツを選択したり認識したりする負荷を軽減するUI・UXデザインによって、ユーザビリティを高められるでしょう。
デザインの改善策が見つかりやすくなる
心理学の法則を理解していると、UI・UXデザインの具体的な改善策を発見しやすくなります。ユーザーの意見からニーズや心理を読み解き、適切に改善することが可能です。
たとえば、情報量が多くてもユーザーが効率的に理解できるコンテンツにするには、F型視線誘導の法則やコントラスト効果などが参考になるでしょう。会員登録手続きの途中離脱が課題である場合は、目標勾配効果やツァイガルニク効果を用いたUI・UXデザインがおすすめです。
心理学の法則は、ユーザー満足度を高めるUI・UXを実装するにあたって、改善するべきポイントが明確になりやすいといえます。
ユーザーの使いやすいUIを理解できる
心理学の法則を理解することで、さまざまな価値観を持つユーザーが使いやすいと感じるUIをデザインできます。
UI・UXデザイナーという専門的な仕事をしていると、ユーザー目線に立ったデザインの確認がしづらくなってしまうこともあるでしょう。ユーザーテストなどで効果を測ることも重要ですが、心理学の法則を学ぶことで基礎的な部分を見直すきっかけを作ることができます。
たとえば、スタイリッシュなボタンをデザインしても、電子端末の操作が苦手なユーザーにはプロダクトを利用するハードルが高くなる可能性もあります。ユーザーの視点になり、心情や行動パターンに寄り添うことで、ユーザビリティの高いUI・UXを実装できます。
UXデザインの成功事例
UXデザインによってプロダクトの利用者が増えたり、社会的に意義のあるプロダクトに成長したりする可能性があります。具体的な事例からユーザビリティの高いUI・UXデザインを学びたい方は、ぜひ参考にしてください。
Slack
ビジネス用チャットアプリ「Slack」には、ユーザーが効率的にコミュニケーションを楽しめるUXデザインが実装されています。相手や状況に応じて、さまざまなコミュニケーションを気軽に図れる機能が充実したツールです。
たとえば、グループチャットやDM、短時間の音声通話ができるハドルミーティングなどの機能が備わっています。また、Slackにはリアクション機能が備わっており、ユーザーのメッセージに対して豊富なバリエーションのなかから複数の絵文字を選択して反応できます。
複数の機能がありますが、各機能がアイコンで表示されているため、直感的に利用することが可能です。オンライン上のコミュニケーションでも相手の反応を理解しやすく、ユーザー間の心理的な距離を縮めやすいでしょう。
あすけん
ダイエットサポートサービス「あすけんダイエット – 栄養士が無料であなたのダイエットをサポート」は、ユーザーが目的を達成しやすいUI・UXデザインを実装しています。
たとえば食事のタイミングと内容を記録する機能では、時間を表す太陽や月などのマークと、料理の写真を選択して入力します。ユーザーが機能の操作方法を理解しやすく、スムーズに記録できるデザインが特徴です。
また、スマートフォンアプリ版では起動後に現在の体重と目標体重が表示されるため、目標の達成度を迅速に把握できます。ユーザーがダイエットに対するモチベーションを維持しやすく、手軽にサービスを利用できるUI・UXデザインです。
Amazon
世界最大級のショッピングサイト「Amazon」では、商品の認知から購入までの購買行動をスムーズに完了できます。
たとえば、スマートフォンケースが欲しい場合、ユーザーはセール対象商品や人気ランキング、カテゴリー検索などから商品を探します。さまざまな価値観を持つユーザーが、それぞれの指標から商品を見つけ、検討できる設計です。
また、気に入った商品があれば「カート」に入れてキープし、購入を決断したら購入手続きへ進みます。オンライン上でも実際の購買行動と同じような流れで購入できることが特徴です。ユーザーの購買行動や商品を比較・検討する心理を理解したUI・UXデザインであるといえます。
UXデザイナーになるための勉強方法
UXデザイナーになるには、本やオンラインスクールなどで専門的な知識を勉強する必要があります。Webデザインの知識やデザインソフトの操作スキルなどを習得することで、UXデザイナーとしての一歩を踏み出しやすくなるでしょう。ここでは、UXデザイナーになるための勉強方法を解説します。
本で学ぶ
独学でUXデザインを学ぶなら、本から知識を得る方法があります。本は系統立てて解説されているため、自分が学びたい分野を体系的、効率的に理解しやすい学び方です。
学習に使う本を選ぶ際には、最新の内容であるかをチェックしましょう。出版から時間が経過していると、本の内容が現状のデザイン手法と乖離している可能性があります。
また、複数の本を同時に読み進めるのではなく、一冊ずつ着実に内容を理解していく方法がおすすめです。最初にUXデザインを包括的に解説した本で全体像を把握してから、細かい内容に特化した本で理解を深めるのが良いでしょう。
オンラインスクールで学ぶ
オンラインスクールには、時間や場所に捉われず、カリキュラムに沿って効率的に学べるメリットがあります。プロによる講義で専門的なスキルを身につけられ、自分のペースで継続的に学びやすい環境です。
女性向けキャリアスクールSHElikes（シーライクス）では、自分の好きな時にコース動画を見ながら、Webデザインに関する複合的な知識とスキルを身につけられ、現役デザイナーに質問ができるもくもく会などで疑問を解消することができます。
仕事や育児などで学習時間の確保が難しい方には、オンラインスクールがおすすめです。
UXデザインの法則を参考にプロダクトのユーザビリティを高めよう
UXデザインの法則に心理学の考え方を取り入れることで、ユーザビリティが高く訴求力があるプロダクトの開発を叶えることができます。ユーザーの心理状態や行動パターンを把握し、プロダクトを目標達成に導くUXデザインを実装しましょう。
UI・UXデザインを学ぶには、ライフスタイルに合わせて学習しやすいオンラインスクールの利用がおすすめです。SHElikesには、「UXデザイン」や「UIデザイン」などのコースがあり、実践的な内容でツールの使い方からデザインのポイントまで学ぶことができます。
SHElikesは、デザインの他にも、Webマーケティングやライティング、汎用性の高いビジネススキルなど、全45以上の職種スキルが学び放題です。気になる方は、ぜひ無料体験レッスンに参加してみてください。
