ヤコブの法則(Jakob's Law)とは、ユーザーは他のサイトで多くの時間を過ごしているため、それらのサイトで培った操作パターン(メンタルモデル)が自分のサイトでも通用することを期待する、という法則です。
要するに「ユーザーは、あなたのサイトで新しい操作方法を学びたくない」という法則です。
左上のロゴをクリックするとトップページに戻る。虫眼鏡アイコンをクリックすると検索が開く。カートアイコンは右上にある——これらはWebの「暗黙のルール」です。独自性を追求してこれらを変えると、ユーザーは混乱し、離脱します。この記事では、ヤコブの法則の定義・UXにおける重要性・UIデザインへの具体的な活かし方を、UIXHEROの3レイヤー構造に沿って解説します。
この記事でわかること
- ヤコブの法則の定義と提唱者(ヤコブ・ニールセン)
- UXデザインにおけるヤコブの法則の重要性
- 「普通のデザイン」が最強である理由
- UIデザインへの具体的な活かし方(ナビゲーション・フォーム・EC設計)
UIXHEROではUI設計を UX心理(Why) → UI原則(What) → UIコンポーネント(How) の3レイヤーで体系化しています。
- 心理学を理解する → UX心理119法則
- 設計原則を学ぶ → UIデザイン原則65
- 実装パターンを知る → UIコンポーネント完全ガイド
→ サイト全体の入口は UIデザイン完全ガイド から
ヤコブの法則とは
ヤコブの法則(Jakob's Law)とは、ユーザビリティ研究の第一人者であり Nielsen Norman Group の創設者である Jakob Nielsen(ヤコブ・ニールセン)が提唱した法則です。ユーザーはWebの大半の時間を「あなたのサイト以外」で過ごしており、そこで身につけた操作パターン(メンタルモデル)を、あなたのサイトにも当てはめようとします。
| 項目 | 内容 |
|---|---|
| 英語名 | Jakob's Law |
| 提唱者 | Jakob Nielsen(Nielsen Norman Group創設者) |
| 時期 | 2000年ごろに Jakob Nielsen が提唱したことで知られる |
| 分野 | ユーザビリティ・HCI(ヒューマン・コンピュータ・インタラクション) |
| 一言で | ユーザーは他のサイトと同じ操作性を期待している |
要するに:ヤコブの法則 = 「車輪を再発明するな。普通であることが強い場面が多い」
独自のUIパターンを発明すると、ユーザーに「学習」を強要することになります。ユーザーがサイトを訪れる目的は、UIの操作方法を学ぶことではなく、コンテンツを見たり商品を買ったりすることです。 道具(UI)は透明であるべきで、目立つべきはコンテンツ です。
なぜUXデザインで重要なのか
ヤコブの法則がUXデザインで重要な理由は3つあります。
1. 学習コストが離脱率を決める
独自すぎるUIは、ユーザーに「使い方を理解するための認知コスト」を強要します。「このボタンは何をするんだろう?」「ナビゲーションはどこにあるんだろう?」と考えている間に、ユーザーは目的を忘れ、離脱します。標準的なパターンに従えば、ユーザーは「すでに知っている」状態でサイトを使い始めることができます。
2. 「普通」は信頼感を生む
ユーザーは見慣れたUIに対して安心感を抱きます。ECサイトでカートアイコンが右上にあれば「ちゃんとしたサイトだ」と感じますが、独自の位置に配置されていると「このサイト大丈夫か?」と不安になります。標準的なパターンは、無意識レベルでの信頼性を高めます。
3. BtoBこそ一貫性が重要
BtoBアプリでは、ユーザーは業務で毎日使うツール(Excel、Slack、Salesforceなど)のメンタルモデルを持っています。これらと似た操作性(グリッド編集、ショートカットキーなど)を踏襲することで、導入時の教育コスト(オンボーディング)を大幅に削減できます。
UIデザインにおけるヤコブの法則の具体例
ヤコブの法則は「期待される場所に、期待されるものを置く」ことで適用されます。
典型的なパターン(守るべき慣習)
| パターン | ユーザーの期待 |
|---|---|
| ロゴ(左上) | クリックするとトップページに戻る |
| 虫眼鏡アイコン | 検索機能が開く |
| ハンバーガーメニュー | モバイルでナビゲーションが展開する |
| カートアイコン(右上) | 買い物かごを確認できる |
| 青い下線テキスト | クリック可能なリンク |
| ×ボタン(右上) | モーダルや通知を閉じる |
ケース1:ECサイトの商品カード
標準的なパターン : 画像 → タイトル → 価格 → 購入ボタンという配置。ユーザーは一瞬で「何がいくらで、どうやって買うか」を理解できます。
独自のパターン : 価格が上部に大きく、タイトルが斜体、購入ボタンがホバーで出現。クールかもしれませんが、「値段はどこ?」「どうやって買うの?」と考える時間が発生します。
ケース2:SaaSのダッシュボード
業務アプリでは、左サイドバーにナビゲーション、上部にヘッダー(検索・通知・ユーザーメニュー)という配置が標準です。この構造を崩すと、ユーザーは「管理画面っぽくない」と感じ、学習コストが跳ね上がります。
ケース3:フォームの入力順序
名前 → メールアドレス → パスワード → 確認ボタンという順序は、ほぼすべてのサインアップフォームで共通です。この順序を「パスワード → 名前 → メール」に変えると、ユーザーは混乱し、入力ミスが増えます。
ヤコブの法則とメンタルモデル
ヤコブの法則はメンタルモデルという概念と密接に関連しています。
| 項目 | ヤコブの法則 | メンタルモデル |
|---|---|---|
| 定義 | ユーザーは他のサイトと同じ操作性を期待する | ユーザーが持つ「物事はこう動くはず」という内的なモデル |
| 焦点 | デザイナーが守るべき「慣習」 | ユーザーの頭の中にある「期待」 |
| 関係 | メンタルモデルに沿った設計をせよ、という原則 | ヤコブの法則の心理学的基盤 |
ユーザーのメンタルモデルとUIの挙動が一致すれば、ユーザーは「直感的に使える」と感じます。不一致があると、「使いにくい」「わからない」という印象を与えます。
イノベーションとヤコブの法則
ヤコブの法則は「常に同じものを作れ」と言っているわけではありません。
新しいパターンを導入してよいケース
- 圧倒的に便利な場合 : Google Mapのドラッグ操作やTinderのスワイプUIのように、直感的で大きなメリットがある場合は、慣習を崩してでも新しいパターンを導入する価値があることがあります。
- 感情を動かす場面 : ランディングページのFVやキャンペーンサイトなど、ユーザビリティよりも感情的なインパクトを優先する場面では、独自性が武器になります。
守るべきケース
- ユーティリティ機能 : 検索、カート、ログイン、ナビゲーションなど、ユーザーが頻繁に使う機能では、標準に従うべきです。
- BtoBアプリ : 業務効率が最優先。学習コストは導入の障壁になります。
ヤコブの法則をUIデザインに活かす方法
ヤコブの法則を理解したうえで、UIXHEROの3レイヤー構造に沿って設計へ接続します。
UX心理(Why) ヤコブの法則:ユーザーは他のサイトと同じ操作性を期待している
↓
UI原則(What) 反復・一貫性:サイト全体でパターンを統一する 既知パターンの活用:業界標準のUIパターンを採用する
↓
UIコンポーネント(How) Navigation(ナビゲーション) / Header(ヘッダー) / Footer(フッター)
設計チェックリスト
- ロゴは左上にあり、クリックするとトップページに戻るか
- 検索、カート、ユーザーメニューは期待される場所(通常は右上)にあるか
- ナビゲーションの構造は競合サイトや業界標準と大きく異ならないか
- リンクはリンクらしく見えるか(色・下線などの視覚的手がかり)
- 独自性を発揮する場所と、ユーザビリティを優先する場所を区別できているか
関連するUI原則
- 反復・一貫性 — サイト全体でパターンを統一する
- 既知パターンの活用 — 業界標準のUIパターンを採用する
- 視覚的階層 — 重要な要素を目立たせる
- ルール化して再利用する — デザインシステムで一貫性を担保する
関連するUIコンポーネント
- Navigation(ナビゲーション) — 標準的な構造を踏襲する
- Header(ヘッダー) — ロゴ・検索・ユーザーメニューの配置
- Footer(フッター) — 期待される情報(連絡先・リンク集)を配置
- Card(カード) — 商品・記事の標準的な表示パターン
よくある質問
競合サイトをパクれということですか?
いいえ。パクるのは「構造(パターン)」であって、デザイン(装飾やブランド)ではありません。「左上にロゴがあってクリックするとHomeに戻る」という構造は踏襲すべきですが、ロゴの色や形まで真似するのは盗作です。構造やパターンは共有しつつ、ブランディング(色・フォント・声のトーン)で差別化を図りましょう。
「普通のデザイン」だと飽きられませんか?
ユーザビリティにおいて「飽きる(Boring)」は褒め言葉です。ユーザーはツールの操作にワクワクしたいのではなく、ツールを使って何かを成し遂げたいのです。道具(UI)は透明であるべきで、目立つべきはコンテンツです。Appleの製品が「シンプルで普通」なのに評価されるのは、この原則を徹底しているからです。
独自性を出してはいけないのですか?
出すべきですが、場所を選びましょう。ユーザーが頻繁に使うユーティリティ(検索、カート、ログイン)で独自性を出すと混乱を招きます。逆に、ランディングページのFVやキャンペーンサイトなど、感情を動かす場所では独自性が武器になります。
まとめ|ヤコブの法則は「ユーザーの期待に沿う」設計原則
ヤコブの法則は、ユーザーは他のサイトで培った操作パターン(メンタルモデル)を自分のサイトにも期待するという法則であり、「普通であることの価値」を説いた設計原則です。
本記事では、ヤコブの法則の定義・UXにおける重要性・UIデザインへの活かし方を解説しました。
- ヤコブの法則とは、ユーザーは他のサイトと同じ操作性を期待するという法則
- UXデザインでは、標準的なパターンに従うことで学習コストを最小化できる
- UIでは、ロゴ・ナビゲーション・検索・カートを期待される場所に配置する
さらに体系的に学びたい方は、以下のハブ記事から各レイヤーを深掘りできます。
- UX心理119法則 — UIデザインの「なぜ」を理解する
- UIデザイン原則まとめ — 心理法則をUI設計ルールに翻訳する
- UIコンポーネント完全ガイド — 原則を実装可能なUIパターンにする
ヤコブの法則とは、ユーザーは他のサイトで培った操作パターン(メンタルモデル)が自分のサイトでも通用することを期待するという法則であり、UIデザインにおける「一貫性」「標準パターンの踏襲」のユーザビリティ原則としての根拠です。
UXデザインを体系的に学ぶ
UX心理の「Why」を理解したら、次は「What(UI原則)」と「How(UIコンポーネント)」も学ぼう。
- UIデザイン完全ガイド — UX心理・UI原則・UIコンポーネントの3レイヤーを一本化
- UIデザイン原則まとめ — 心理法則をUI設計のルールへ翻訳する65原則
- UIコンポーネント完全ガイド — 原則を「実装可能な部品」として形にする60コンポーネント
- UX心理学まとめ — UIデザインの「なぜ」を説明する119法則