【保存版】Web制作の現場で駆使する「UI/UXの心理学」12の法則
デザインは「感覚」ではなく「科学」
Webサイトやアプリの制作において、「使いやすい」「わかりやすい」という言葉は頻繁に使われます。しかし、何をもって「使いやすい」とするのか、その基準は曖昧になりがちです。なぜなら、「使いやすさ」は個人の主観や目的によって大きく左右されるためです。
私たちデザイナーがwebサイトを設計する際、実は個人のセンスや感覚だけに頼ることはありません。そこには、先人たちの数多くの実験や研究によって裏付けられた「行動心理学」や「認知科学」の法則が存在します。
ユーザーが画面を見たとき、脳はどう反応し、どんな行動をとるのか。
この記事では、私たちが実際の案件において、コンバージョン率の向上や離脱率低下などの具体的な成果を出すために意識している「UI/UX 12の法則」を徹底解説します。
用語の由来や具体的な実用例もあわせてご紹介しますので、ぜひサイト改善の参考にしてみてください。
1.ヒックの法則
ヒックの法則（Hick’s Law）
「選択肢が増えれば増えるほど、人は意思決定に時間がかかる」
由来：心理学者のウィリアム・エドマンド・ヒックらの実験により定式化。「選択肢の数」と「決定までの時間」の関係性を示しました。
人は選択肢が多すぎると、選ぶのが面倒になり、最終的に「選ばない（離脱する）」という行動をとります。これを「決定麻痺」と呼びます。ユーザーにかかる負荷を抑えるためには、ときにあえて選択肢を減らす判断が必要になります。
【実用例】
- ECサイトの「今すぐ購入」
カートに入れる手間すら省き、1クリックで完了させる究極の選択肢削減です。 - ランディングページ (LP)
申し込みにつなげたいページでは、ヘッダーのメニュー（会社概要やブログへのリンク）をあえて削除し、「問い合わせる」か「閉じる」かの二択に絞ります。 - ブログの「人気の記事TOP5」
膨大な記事の中から「皆によく見られているもの」だけを提示することで、記事を選ぶストレスを軽減しています。
2.フィッツの法則
フィッツの法則（Fitts’s Law）
「ターゲットへの到達時間は、距離と大きさで決まる」
由来：心理学者ポール・フィッツが1954年に提唱。人間工学の分野で、物理的な動作予測モデルとして確立されました。
簡単に言えば、「近くて大きいボタンは押しやすく、遠くて小さいボタンは押しにくい」ということです。当たり前に聞こえますが、スマホサイトでの重要性は絶大です。
【実用例】
- 画面下部の固定ボタン
スマホを持つ手の親指が最も自然に届く範囲（サムゾーン）に、最も重要な「購入・申込」ボタンを配置します。 - ボタンの余白
テキストリンクではなくボタン形状にする際、クリックできる判定範囲（余白）を目に見える範囲より少し広めに設定し、操作ミスを防ぎます。 - 重要でないボタンの配置
誤操作を防ぎたい「退会」や「削除」ボタンは、あえて小さく、または押しにくい場所に配置することもあります。
3.ミラーの法則
ミラーの法則（Miller’s Law）
「人が短期的に記憶できる情報の塊は、7つ前後※である」
由来：認知心理学者ジョージ・ミラーの論文「マジックナンバー7±2」に由来。人間の短期記憶の限界を示しています。
※現代説では4つ前後が有力
一度に多くの情報を見せられると、ユーザーの脳は処理しきれず、情報を無視してしまいます。きちんと情報を受け取ってもらうためには適切な分割が必要です。
【実用例】
- 電話番号やカード番号
09012345678 ではなく 090-1234-5678 と区切ることで、11桁の数字ではなく「3つの塊」として認識させます。 - ナビゲーション
グローバルメニューの項目数が7つを超えると、ユーザーは全体像を把握しづらくなります。項目が多い場合は「製品情報」「サポート」などの大項目でグルーピングします。 - ブログの段落
長い文章はなかなか読んでもらえません。3〜4行ごとに改行や見出しを入れるのも、情報を幾つかの塊にして読みやすくする工夫です。
4.テスラーの法則
テスラーの法則（Tesler’s Law）
「どんなシステムにも、それ以上減らせない複雑さが存在する」
由来：コンピュータ科学者ラリー・テスラー（AppleやXeroxに在籍）が提唱。「複雑性保存の法則」とも呼ばれます。
複雑さを完全になくすことはできません。重要なのは、その複雑な処理を「ユーザー」にやらせるか、「システム（開発側）」が肩代わりするかです。
【実用例】
- 住所自動入力
郵便番号を入れるだけで住所が出る機能。データベース照合という「複雑さ」をシステムが担い、ユーザーの文字入力を減らしています。 - 航空券予約サイト
裏側では膨大なフライトデータと空席状況を照合する超複雑な処理が行われていますが、ユーザーには「出発地・目的地・日付」というシンプルな入力欄しか見せません。
5.ゲシュタルトの法則
ゲシュタルトの法則（Gestalt Principles）
「人は個々の要素ではなく、まとまり（全体）として認識する」
由来：20世紀初頭のドイツで生まれた「ゲシュタルト心理学」。人間の視覚認知の特性を体系化したものです。
「近接」「類似」「閉合」など複数の要因でまとまりを認識します。これを利用すると、線で囲わなくてもグループを表現できます。
【実用例】
- 近接（グループ化）
見出しとその下の本文の距離を近づけ、次の見出しとの距離を離すだけで、文章の構造が直感的に伝わります。 - 類似（パターン認識）
お問い合わせフォームで、必須項目にすべて「赤いアスタリスク（*）」をつけることで、ユーザーは「赤い印＝必須」と学習し、瞬時に理解します。 - 閉合（形状補完）
たとえ図形の一部が欠けていたり、線が途切れていたりしても、脳が無意識のうちにその間を補い、全体として完結した形として捉えようとします。
6.フォン・レストルフ効果
フォン・レストルフ効果（Von Restorff Effect）
「似たものが並んでいると、他と異なる特徴を持つものが記憶に残る」
由来：ドイツの精神科医ヘドヴィヒ・フォン・レストルフの研究。「孤立効果」とも呼ばれます。
すべてを目立たせようとすると、結果として何も目立たなくなります。強調したい一点だけを「異質」にする必要があります。
【実用例】
- 料金プラン表
「松・竹・梅」の3プランがある時、売りたい「竹（真ん中）」のプランだけ背景色を変えたり、少し大きく表示したりして視線を誘導します。 - 通知バッジ
アプリアイコンの右上に付く「赤い丸」。全体と異なる色と形状で、強烈に注意を引きます。 - CTAボタン
青ベースのサイトであれば、購入ボタンを補色（反対色）であるオレンジや黄色にすることで、ボタンの存在感を際立たせます。
7.シリアルポジション効果
シリアルポジション効果（Serial Position Effect）
「人はリストの『最初』と『最後』を最も記憶しやすい」
由来：ドイツの心理学者ヘルマン・エビングハウスの研究。「初頭効果」と「親近効果」から成ります。
中間の項目は記憶から抜け落ちやすい傾向があります。 注意すべきポイントであると同時に、狙った項目を印象付けるのにも役立ちます。
【実用例】
- アプリのタブバー
最も利用頻度の高い「ホーム」を一番左に、コンバージョンに関わる「問い合わせ」を一番右に配置します。 - 商品の特徴リスト
箇条書きでメリットを伝える際、一番言いたい最強のメリットを1番目に、ダメ押しのメリットを最後に書き、中間に細かい仕様などを挟みます。
8.ヤコブの法則
ヤコブの法則（Jakob’s Law）
「ユーザーは、あなたのサイトよりも、他のサイトで多くの時間を過ごしている（他と同じように動くことを期待する）」
由来：ユーザビリティの権威ヤコブ・ニールセンが提唱。ニールセン・ノーマン・グループの創設者です。
ユーザーはWebサイトに「他の多くのサイトと同じような動き」を期待しています。独創的すぎるUIは、ユーザーにとって「使い方がわからない」ストレスになります。
【実用例】
- ECサイトの配置
カートアイコンは右上、ロゴクリックでトップへ戻る。これはAmazonや楽天で学習済みのルールであり、変えるべきではありません。 - 検索フォーム
虫眼鏡アイコンを検索機能として使う。これを「？」マークや独自のアイコンにすると、ユーザーは検索機能だと気づけません。 - フォーム入力
エラーが出た際に赤文字で表示するのも、世界共通のメンタルモデル（思い込み）に従っています。
9.ピークエンドの法則
ピークエンドの法則（Peak-End Rule）
「体験の印象は、最も感情が動いた時（ピーク）と、終了時（エンド）だけで決まる」
由来：行動経済学者ダニエル・カーネマン（ノーベル賞受賞者）が提唱。
体験の長さや平均点は重要ではありません。「終わりよければ全てよし」の格言は科学的に正しいのです。
【実用例】
- 完了画面（サンクスページ）
入力が面倒なフォーム（マイナス体験）の後、送信完了画面で「お疲れ様でした！」という労いの言葉や、心地よいアニメーションを表示することで、後味を良くします。 - 404エラーページ
ページが見つからないというマイナスの体験に対し、ユーモアのあるイラストや丁寧な案内を表示することで、ネガティブな感情を緩和します。 - クーポンの配布
ECサイトの決済後に「次回使えるクーポン」を配布する。
10.美的ユーザビリティ効果
美的ユーザビリティ効果（Aesthetic-Usability Effect）
「見た目が美しいデザインは、使いやすいと感じられる」
由来：1995年、日立製作所デザイン研究所の黒須正明氏と鹿志村香氏の研究で明らかになりました。
人は美しいものに対して、機能的にも優れていると錯覚します。多少の使いにくさがあっても、デザインが良ければ許容されやすくなります。
【実用例】
- アプリのデザイン
銀行のアプリなどでデザインが古臭いと、ユーザーは「セキュリティは大丈夫か？」と機能面まで疑います。モダンなデザインは「信頼」を作ります。 - AppleのUI
洗練された外観が、ユーザーに「多少操作に迷っても、それは自分の使い方のせいだ（製品は悪くない）」と思わせるほどの信頼感を与えています。
11.ドハティのしきい値
ドハティのしきい値（Doherty Threshold）
「応答時間が0.4秒（400ミリ秒）以内であれば、ユーザーは生産的になり、夢中になる」
由来：IBMの研究者ウォルター・ドハティが1982年に発表。
人間とコンピュータの対話において、反応が遅いとユーザーの集中力は途切れます。逆にサクサク動くと、ユーザーは操作に没頭します。
【実用例】
- スケルトンスクリーン
YouTubeやFacebookなどで、読み込み中に表示される「グレーの骨組み」。真っ白な画面を見せるより体感待ち時間を短く感じさせます。 - ホバーエフェクト
マウスを乗せた瞬間にボタンの色が変わる。処理自体は始まっていなくても「あなたの操作を受け付けました」と0.4秒以内に視覚的に返答することが重要です。
12.目標勾配効果
目標勾配効果（Goal Gradient Effect）
「ゴールが近づくほど、人はやる気（モチベーション）が高まる」
由来：心理学者クラーク・ハルが1932年に行った、ネズミが餌に近づくほど速く走る実験に由来。
ゴールが見えないマラソンは誰も走れません。進捗を可視化することで、ユーザーはラストスパートをかけられます。
【実用例】
- ステップバー
会員登録フォームで「ステップ 2/3」と表示。「あと少しで終わる」と認識させることで、途中離脱を防ぎます。 - スタンプカード
「10個貯まると無料」のカードを渡す際、白紙から始めるのではなく、あらかじめ2個スタンプを押して渡すと、「すでに20%進んでいる」と感じ、継続率が高まります。 - SNSのプロフィール
「プロフィールの充実度：中級」のようなメーターを表示し、「あと少し情報を追加すれば完璧になります」と入力を促します。
法則を知っているだけでは意味がない
いかがでしたか。
どれもどこかで見たことのある工夫やデザインではないでしょうか。
これら12の法則は、世界のトップ企業がUIデザインに取り入れている強力なメソッドです。しかし、最も重要なことは「法則を知っていること」ではなく、「企業のビジネス課題やターゲットに合わせて、どの法則を適用すべきか判断すること」です。
すべての法則を詰め込めば良いサイトになるわけではありません。時には「情報を隠す（ヒックの法則）」ことと「一覧で見せる」ことのバランス調整が必要になったり、ターゲット層によってはヤコブの法則をあえて崩してインパクトを狙う戦略が必要な場合もあります。
私たちデザイナーは、単に感覚でレイアウトしたり好みでデザインしているのではなく、こうした心理学的な裏付けとビジネス視点を持って、企業の「伝わるサイト」「売れるサイト」を設計しています。
- 「今のサイト、なんとなく使いにくい気がする」
- 「離脱率が高くて困っているが、原因がわからない」
- 「ロジカルな裏付けのあるデザイン提案が欲しい」
もしそのようなお悩みがあれば、ぜひ一度ご相談ください。
御社のサイトを診断し、最適な改善案をご提案いたします。
