3行でわかるヤコブの法則
- ヤコブの法則 :ユーザーは他のサイトで覚えた操作パターンが、自分のサイトでも通用することを期待する
- UIでの活用 :ナビゲーション、フォーム、EC、管理画面で学習コストを下げられる
- 設計の要点 :頻繁に使う機能ほど、既知パターンに合わせて設計する
ヤコブの法則(Jakob's Law)とは、ユーザビリティ研究の第一人者であり Nielsen Norman Group の創設者であるJakob Nielsen(ヤコブ・ニールセン)が2000年ごろに提唱した法則です。ユーザーはWebの大半の時間を「あなたのサイト以外」で過ごしており、そこで身につけた操作パターン(メンタルモデル)を、あなたのサイトにも当てはめようとします。
要するに:良いUIとは、目新しいUIではなく、期待通りに使えるUIである。
この記事の要点
- ヤコブの法則の定義と、「普通のデザイン」が最強である理由
- EC・SaaS・フォームへの具体的な活かし方
- メンタルモデルとの関係
- 独自性を出してよい場所と守るべき場所の判断基準
ヤコブの法則とは
| 項目 | 内容 |
|---|---|
| 英語名 | Jakob's Law |
| 提唱者 | Jakob Nielsen(Nielsen Norman Group創設者) |
| 時期 | 2000年ごろ |
| 分野 | ユーザビリティ・HCI(ヒューマン・コンピュータ・インタラクション) |
| 一言で | ユーザーは他のサイトと同じ操作性を期待している |
左上のロゴをクリックするとトップページに戻る。虫眼鏡アイコンをクリックすると検索が開く。カートアイコンは右上にある——これらはWebの「暗黙のルール」です。独自の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デザインに活かす方法
タップして拡大表示クリックして拡大表示
1. ユーティリティ機能ほど既知パターンを優先する
検索、カート、ログイン、ナビゲーションなど、ユーザーが頻繁に使う機能は標準的なパターンに従いましょう。独自の配置や動作は学習コストを増やし、離脱の原因になります。
2. 一貫性を保つことで学習コストを減らす
サイト全体で同じパターンを維持します。ページごとにナビゲーション構造が異なったり、リンクの色が変わったりすると、ユーザーは毎回「これは何?」と考えなければなりません。
3. ブランド独自性は、操作体系ではなく視覚表現で出す
独自性を表現したい場合は、操作方法や配置ではなく、カラー・タイポグラフィ・トーン・ビジュアルなど視覚的な要素で差別化しましょう。UIの骨格は標準に従い、装飾でブランドらしさを出すのが正しいアプローチです。
設計チェックリスト
- ロゴは左上にあり、クリックするとトップページに戻るか
- 検索、カート、ユーザーメニューは期待される場所(通常は右上)にあるか
- ナビゲーションの構造は競合サイトや業界標準と大きく異ならないか
- リンクはリンクらしく見えるか(色・下線などの視覚的手がかり)
- 独自性を発揮する場所と、ユーザビリティを優先する場所を区別できているか
よくある質問
競合サイトをパクれということですか?
いいえ。パクるのは「構造(パターン)」であって、デザイン(装飾やブランド)ではありません。「左上にロゴがあってクリックするとHomeに戻る」という構造は踏襲すべきですが、ロゴの色や形まで真似するのは盗作です。構造やパターンは共有しつつ、ブランディング(色・フォント・声のトーン)で差別化を図りましょう。
「普通のデザイン」だと飽きられませんか?
ユーザビリティにおいて「飽きる(Boring)」は褒め言葉です。ユーザーはツールの操作にワクワクしたいのではなく、ツールを使って何かを成し遂げたいのです。道具(UI)は透明であるべきで、目立つべきはコンテンツです。Appleの製品が「シンプルで普通」なのに評価されるのは、この原則を徹底しているからです。
独自性を出してはいけないのですか?
出すべきですが、場所を選びましょう。ユーザーが頻繁に使うユーティリティ(検索、カート、ログイン)で独自性を出すと混乱を招きます。逆に、ランディングページのFVやキャンペーンサイトなど、感情を動かす場所では独自性が武器になります。
まとめ
ヤコブの法則は、ユーザーは他のサイトで培った操作パターン(メンタルモデル)を自分のサイトにも期待するという法則であり、「普通であることの価値」を説いた設計原則です。
- ヤコブの法則 :ユーザーは他のサイトと同じ操作性を期待する
- UXでの重要性 :標準パターンに従うことで学習コストを最小化し、信頼感を生む
- UIへの活かし方 :ロゴ・ナビゲーション・検索・カートを期待される場所に配置する
- 独自性との両立 :ユーティリティ機能は標準に従い、感情表現で差別化する
次に読む
- ヒックの法則とは — 選択肢の数と意思決定時間の関係
- フィッツの法則とは — ターゲットの大きさと距離がUIに与える影響
- 反復・一貫性 — サイト全体でパターンを統一する原則
- Navigation(ナビゲーション) — 標準的なナビゲーション構造の実装
