ユーザーにとって、より分かりやすく使いやすいプロダクトを設計するためには、ユーザー心理に寄り添ったUI UXデザインが必要です。
「良いUI UXデザインとは？」を考える上で指針となる、心理学などをベースとした法則・ルールがあるのをご存じでしょうか？

この記事ではその中から、特に押さえておくべき15の法則・ルールをピックアップ。
デザインへの生かし方と一緒に解説します。

UIデザイン、UXデザインとは？

本題となる法則・ルールを紹介する前に、そもそもUIデザイン・UXデザインとは何か、を押さえておきましょう。

UIデザインとは？

「UIデザイン（ユーザーインターフェースデザイン）」とは、ユーザーがプロダクトをスムーズに使えるように、ユーザーとサービスの接点（UI）をデザインすることです。
UIとは、例えばサイトの見た目から、文字、画像・動画やアニメーション、ボタンなどの機能、入力フォームに至るまで、ユーザーが見るもの、触れるもの全てを指します。

UIデザインにおける「デザイン」は、表層のビジュアルデザインだけを指すのではありません。
見た目もUIデザインの一部ではありますが、それ以上に構造や効果といった機能面を設計していくことが、UIデザインの大切な要素なのです。


■参考記事：UIについては以下の記事で詳しく解説しています。以下の記事もぜひご覧ください！
【今さら聞けない】ユーザーインターフェース（UI）とは？UXとの関係性までやさしく解説

UXデザインとは？

「UXデザイン（ユーザーエクスペリエンスデザイン）」は、ユーザーがプロダクト利用によって得る体験全ての設計を意味します。

UIデザインはUXデザインの一部です。
UIデザインがユーザーとの接点（＝利用時）のみを扱うのに対して、UXデザインは利用後のユーザーの感情や、利用前の期待感をデザインすることも包含します。


■参考記事：UXについては以下の記事で詳しく解説しています。以下の記事もぜひご覧ください！
ユーザーエクスペリエンス（UX）とは？〜UIとの違いから具体事例まで〜

デザイン作成に法則やルールが重要な理由

UIデザインもUXデザインも「ユーザー」という言葉が含まれています。
どちらも「ユーザー、つまり人がプロダクトを利用してどう感じるか？」が重要なポイントとなります。

今回紹介する法則・ルールは、心理学的な見地から人の感情や行動の傾向を明らかにしたものです。
法則・ルールを意識してデザインすることで、よりユーザーが心地よいと感じ、プロダクトをまた使いたいと動機づける効果が期待できます。

押さえておきたいUI UXデザインの15の法則・ルール

それではここから、デザイナーが知っておきたいUI UXデザインの法則・ルールを1つずつ見ていきましょう。

1. アフォーダンス

アフォーダンスとは、物の見た目や色、形状などから、その使用・操作方法をユーザーが直感的に理解できるようデザインする考え方です。

例えばエレベーターのボタンはアフォーダンスの概念が生かされています。
私たちは使い方を教えてもらったり、説明書を読んだりすることなく「直感的に」ボタンを押しています。
これは、「◀▶（開）」「▶◀（閉）」のように見た目で「ボタンを押すとどうなるか？」が分かりやすいからです。

アフォーダンスのUIデザインへの生かし方

• Webサイト内のテキストリンクは、青色・下線で表出する
• 検索窓には虫眼鏡マークをつける

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

美的ユーザビリティ効果とは、見た目が魅力的なプロダクトはユーザビリティも高いと認識されやすくなる効果を意味します。

細かな使い勝手に多少問題や不便な点があったとしても、見た目が洗練されていることでユーザーが寛容になり、「うまく機能するはずだ」と思ってもらえるのです。

美的ユーザビリティ効果のUIデザインへの生かし方

• Webサイトで特にユーザーの目に入る機会が多いTOPページのデザインや使用画像にとことんこだわる

■参考記事：ユーザビリティについては以下の記事で詳しく解説しています。以下の記事もぜひご覧ください！
ユーザビリティとは？定義や分析手法、改善手法まで分かりやすく解説！

3. 目標勾配効果（エンダウド・プログレス効果）

目標勾配効果とは、目標の達成に近づくほどやる気が促進される効果です。
「勾配（こうばい）」は傾きを意味し、目標達成が近づくにつれてモチベーションが向上することを表しています。

この効果を狙って、目標に向かって着実に前進していることを可視化するなど、進捗していると認識できる状態を作っておく、といった仕掛けをするとよいでしょう。

目標勾配効果のUIデザインへの生かし方

• 会員登録の入力フォームで、すでに取得している個人情報は自動入力しておく
• 会員登録ページで、ページ上部に「入力」「確認」「登録」などのステップを表示する
• ゲームアプリで、レベルアップまでの必要ポイントを示す

4. 系列位置効果

系列位置効果とは、人が物事を記憶する際、情報の最初と最後は覚えやすく、中間は忘れやすい傾向にあることを指します。
ちなみに、はじめに見たものが記憶に残りやすい現象を初頭効果、最後に見たものが記憶に残りやすい現象を親近効果と呼びます。

ブログなどの文章でも、最初に要点を、最後にまとめを述べることで、ユーザーの記憶に残りやすくなります。
UIデザインでも、ユーザーに印象づけたいものを最初と最後に配置することで、系列配置効果を生かせます。

系列位置効果のUIデザインへの生かし方

• ECサイトのトップページ上部に「注目商品」などの情報を出して印象づける
• ECサイトの商品画面最後に「今なら○％OFF」「初回送料無料」など、決定を後押しする情報を入れる

5. ドハティの閾値（しきいち）

ドハティの閾値とは、人が物事を認識して行動に移るまでにかかる値を指し、それはおよそ0.4秒以内と言われています。
このことから、プロダクトのシステム応答が0.4秒を超える場合、ユーザーはストレスを感じてしまう傾向があります。

皆さんも、リンクをクリックしたときに画面の読み込みが遅いと、いらだちを覚えてブラウザを閉じてしまった経験があるのではないでしょうか。
特に近年はネットワーク環境も進歩し、人々がスピーディなシステム応答に慣れてしまった結果、以前よりも許容できる時間がより短くなっているそうです。

ドハティの閾値のUIデザインへの生かし方

• Webサイトのページ移動や読み込みにかかる時間を短縮する
• どうしても0.4秒以上かかる動作の場合は、「読み込み中」などの表示でシステムの動きを可視化する

6. 孤立効果（フォン・レストルフ効果）

孤立効果とは、その名の通り周囲から孤立したように異なる特徴があるものに対して、強い印象を抱きやすくなる効果です。

例えば、囲碁の白石が盤上にずらりと並んでいて、その中に1つだけ黒石が置かれていたら、黒の方に視線が行きやすいでしょう。
碁石の中に将棋の駒が1つだけあっても、印象に残りやすくなると思います。

このように、色や形など、同じカテゴリの中に「異質なもの」があると目立つのです。

孤立効果のUIデザインへの生かし方

• メディアサイトの文章内で特に重要な箇所は、テキストに色をつける・テキストを太字にする
• ページ内で最もクリックしてもらいたいボタンだけ、他のボタンより大きなサイズにする

7. ツァイガルニク効果

ツァイガルニク効果とは、すでに完了したことよりも、できなかったことや中断してしまったことの方が記憶に残りやすい効果です。

例えば、友人から「相談がある」と話しかけられた直後「…いや、やっぱりやめとく」と言われて、どうしようもなく気になってしまった経験はないでしょうか？
このように中途半端な状態に対して人は気持ち悪さを感じ、結果的に記憶に残りやすくなるそうです。

ツァイガルニク効果のUIデザインへの生かし方

• 英語やプログラミングなどのオンライン学習サイトで、未完了のプログラムが分かるように表示させる

8. 単純接触効果（ザイアンス効果）

単純接触効果とは、何度も接触することでその対象に興味を持ったり、好印象を抱いたりするようになる心理効果を指します。
「会う回数やSNSの連絡回数を増やすことで、相手に好きになってもらいやすくなる」のような恋愛テクニックとしてよく用いられます。

もちろん、対象が人ではなくプロダクトでも同様の効果に期待できるので、デザインにも応用可能です。

単純接触効果のUIデザインへの生かし方

• サイト名称やロゴを印象に残りやすいものにして、まずは覚えてもらう。
  その後、接触回数を増やして「最近、このロゴをよく見るな」と感じてもらう
  （広告露出を増やすなどマーケティング施策との連携も必要）

9. ヒックの法則

ヒックの法則とは、一言で表すと「選択肢が多いと迷いやすくなる」ということです。
「T = a + b log2（n+1）」という数式で意思決定にかかる時間（T）を導けますが、ここでは選択肢（n）が多いほどTが大きくなる、と理解するだけで大丈夫でしょう。

例えば「渋谷 ランチ」と検索して、「渋谷のランチにおすすめのお店100選」のような記事が出てきたら、「とてもじゃないけど選べる気がしない」と思ってしまうでしょう。
ただ、逆に「おすすめのお店2選」だと少な過ぎて信用できない印象を与えてしまうので、適切な数にする必要があります。
※「具体的な適切数」はケースバイケースなので、競合調査やアンケート調査、ユーザーインタビューなどのリサーチを元に仮説立てします。

ヒックの法則のUIデザインへの生かし方

• フードデリバリーサイトで、1ページに表示する商品数を多くし過ぎない、おすすめの商品を目立たせてユーザーが選びやすい工夫をする
• ECサイトなど、どうしても選択肢が多くなる場合はカテゴリ分けしてユーザーの効率的な選択を促す

10. ミラーの法則

ミラーの法則とは、人が15～30秒の間覚えられる情報の数は7±2（ = 5～9）である、という法則です。
近年では、4±1（ = 3～5）との研究結果も出ていますが、いずれにしろ短期記憶の際の容量には限界があることを示しています。

よく例として挙げられるのは電話番号です。
「03××××××××」と10桁の数字が並んでいるだけでは、7±2を超えているので一度に記憶するのは困難ですが、「03-××××-××××」のようにハイフンで区切ると覚えやすくなります。

ミラーの法則のUIデザインへの生かし方

• 電話番号やIDなど数字の羅列で示す情報はハイフンで区切る

11. フィッツの法則

フィッツの法則とは、プロダクトに対して何かしらのアクションを起こしたいときに、その対象が大きく、近くにあるほど短時間で操作できるという法則です。

例えばご自身のスマートフォンで、さまざまなアプリを操作してみてください。
タップしたいボタンが大きいほど、また画面の下の方にある（指からの距離が近い）ほど、スムーズにアクションできると思います。
人がスマートフォンを操作するとき、どのように指を動かしているかをイメージし、このフィッツの法則に当てはめて考えると、ユーザーがアクションを起こすまでの時間をより短くできます。

フィッツの法則のUIデザインへの生かし方

• ナビゲーションやコンバージョンに関わるボタンなど、特にアクションを起こしてほしい対象は大きく、指から近くを意識して設計する
• 上記とは逆に、削除やリセットに関わるボタンなど、落ち着いて考えた後にアクションしてほしい対象は、指から少し離れた位置に配置する

12. ピーク・エンドの法則

ピーク・エンドの法則とは、人が何かを経験したとき「ピーク＝最も感情が高ぶったとき」と「エンド＝最後」の出来事によって印象が決定づけられるという法則です。

例えば、顧客との商談で、全体を通してあまり良い反応を得られていなかったとしましょう。
しかし、相手が商品に対して大きく心を揺さぶられた瞬間（ピーク）が1度あって、商談の終わり際（エンド）に共通の趣味の話で大いに盛り上がりました。
このような場合、全体としてはいまいちな商談だったかもしれませんが、「ピーク」と「エンド」が良かったので受注の可能性は高くなると言えます。

ピーク・エンドの法則のUIデザインへの生かし方

• フードデリバリーアプリで、商品を選んだら料理を焼いているときの音が出るなど「美味しそう」と思ってもらえる仕掛けを用意（ピーク）する。
  また、決済後に次回使えるクーポンを配布（エンド）する。

13. ヤコブの法則

ヤコブの法則とは、ユーザーは普段よく利用していて馴染みのあるプロダクトと同じような挙動を、他のプロダクトにも期待する、という法則です。

SNSやチャットツールには、多くの人が日常的に使っているアプリがあります。
例えば、普段Instagramをよく利用しているユーザーが、今まで使ったことのないSNSアプリの利用をはじめたとしましょう。
このアプリがInstagramと同じような動作をし、操作感も似たものであれば、ユーザーにとっての体験価値が高まります。

ヤコブの法則のUIデザインへの生かし方

• 同ジャンルで利用者の多いアプリが存在する場合、UIデザインはそのアプリを参考にし、むやみに真新しさを求めない

14. F型視線誘導の法則

F型視線誘導の法則とは、ユーザーがWebサイトを見るときの視線の動きが「F」の形になることが多い、という法則です。
具体的には、視線が「画面の左上からスタート→右へ→左下へ→右へ→さらに下へ」のように動き、その軌跡がFに近い形になります。

視線が右に動いた後、一度左に戻って下へ移動するため、画面の左側・上側ほどよく見られるのが特徴です。

また、WebサイトのリピートユーザーはF型の動きをしやすく、初見ユーザーはまず全体を把握するために「Z型」の動きをしやすいと言われています。
また、書籍やパンフレットなど縦組みの媒体は「N型」の動きになる傾向があります。

F型視線誘導の法則のUIデザインへの生かし方

• メディアサイトで、特に見てほしい情報は左側・上側に配置する

15. ゲシュタルトの法則

ゲシュタルトの法則とは、人が何かを見るとき、無意識に「まとまり」として捉える傾向にある、という法則です。
人がまとまりと捉える要因は以下のように複数あり、これらを総称してゲシュタルト要因と呼びます。

• 近接の法則：近くにあるものはまとまりと捉える
• 類同の法則：形、色などが似ているものはまとまりと捉える
• 連続の法則：連続しているものはまとまりと捉える

…など10以上の法則があり、近年でも発見され続けていると言われています。

ゲシュタルトの法則のUIデザインへの生かし方

• Webサイトで、画像とその画像を説明するテキストはなるべく近くに配置し、まとまりとして認識してもらう
• ECサイトで、同じジャンルの商品はパーツのデザインを統一する

まとめ：デザインを学ぶなら、まずはUI UXデザインの法則・ルールを理解しよう

今回紹介した法則・ルールの多くが、偉大な先人が調査・実験を通して提唱した信頼性の高いものです。
その先人の中には、ヤコブの法則を生み出したヤコブ・ニールセンのように、UIやUX研究の第一人者もいます。

これらのUI UXの法則・ルールを知ることで、独学でも「デザインの基本的な考え方」を体系的に学べると言えます。
ぜひ、折に触れてこの記事を見直しながら、UI UXデザインの学びに役立ててください。

ニジボックスではサイト制作や開発における、情報設計やビジュアル設計、デザインガイドライン制作といったUIデザイン面に加えて、ユーザーテストなどによるUX観点でのご支援も行っております。

下記資料にて、ニジボックスがクライアント課題に伴走する中で、磨き上げてきたUI UXデザインのプロセスや支援事例の一端を資料として一部ご紹介しています。
ご興味を持たれた方はぜひ、下記ダウンロードリンクよりご参照ください！

■参考サイト
UIデザインをする上でのルール・概念
知っておきたいUI/UXデザインの法則１７選
実例から学ぶ！より良いUIを提供するためのデザイン法則まとめ
心理学の原則に基づいたUI/UXとは？ 「UXデザインの法則　最高のプロダクトとサービスを支える心理学」を要約！
UX・UIデザインには心理学が効果的！抑えておきたい法則8選
UI/UXデザイナーが知っておくべき心理学の原則
UXデザイナーが覚えておきたい８つの心理学手法