ヤコブの法則
利用者は他のサイトで過ごす時間のほうが長い。だから自分のサイトも、他の多くのサイトと同じ動きをすることを期待している。
Jakob's Law
なぜ効くか
Jakob Nielsen が 2000 年に示した経験則で、根拠は「人は既に知っている使い方を新しい場所にも持ち込む」という学習の性質にある。ログイン画面のメール欄・パスワード欄・「パスワードをお忘れですか」の位置、商品カードの画像・名前・価格・カートボタンの順、三本線を押すとメニューが横から出る、一覧の上端で引っ張ると更新される、といった型は、どのサイトでも同じだから説明なしで使える。独自の並びにすると、見た目は新しくても利用者は既存の型で操作しようとして失敗する。逆に、型を守れば学習コストをほぼゼロにでき、独自性はそれ以外の場所（内容・言葉・品質）で出せばよい。
UIでの当て方
- 01ログイン・登録・カート・チェックアウトなど「どのサイトにもある画面」は、広く使われている並びと文言をそのまま使う。
- 02ナビの現在地・パンくず・戻るの位置は、利用者が最初に探す場所（左上・上部・下端）に置き、動かさない。
- 03モバイルのジェスチャー（横スワイプで削除・引っ張って更新・下端タブ）は、OS の標準に合わせて向きと結果を揃える。
- 04型を変えるときは、変える理由を実測（迷い・失敗の減少）で示せる場合に限り、変えた箇所には案内を添える。
誤用・反例
- 差別化のために、送信ボタンを左・キャンセルを右にするなど、慣習と逆の配置にする。
- 「他社もやっている」を理由に、悪い型（閉じにくいポップアップ、偽のカウントダウン）まで真似る。
この原則を体現するパーツ
- 入力
ログインフォーム
Login Form
メール・パスワード・「ログイン状態を保持」チェック・送信ボタン・パスワード再発行リンクを備えた定番のログイン画面。送信すると短いローディング演出が出る。
- JS
- クリック
商品カード解説あり
Product Card
画像・お気に入り♥・SALEタグ・ブランド・商品名・星評価・価格（元値は取り消し線）・カート追加ボタンを収めたEC定番の商品カード。ホバーでふわっと持ち上がる。
- JS
- クリック
カート
Shopping Cart
サムネ・商品名・数量ステッパー（−／＋）・削除×を持つ明細行と、小計・送料・合計のサマリーを備えた買い物カゴ。数量変更や削除で行の金額と合計がその場で再計算される。
- JS
- クリック
チェックアウト画面実例あり
Checkout Flow
配送→支払い→確認の3ステップ。左に住所フォーム／支払い方法の選択カード、右に固定の注文サマリ。狭い画面ではサマリが上部の折りたたみになる。CTA の脇に安心の一言。
- JS
- クリック
ハンバーガーメニュー解説あり
Hamburger Menu
三本線アイコンが × に変形しながらメニューが横からスライドイン。iframe内対応のposition:absolute実装。
- JS
- ドラッグ
引っ張って更新
Pull to Refresh
リストを上端で下に引っ張るとインジケータが伸び、閾値を超えて離すと更新スピナーが回って新着が差し込まれる。SNS/ニュースアプリの定番ジェスチャー。
- JS
- 静的
パンくずリスト解説あり
Breadcrumb
「ホーム › カテゴリ › … › 現在地」と階層をたどれるパンくず。最後の項目は現在地として aria-current で示し、リンクにはしない。
- CSSのみ
- クリック
タブバー解説あり
Tab Bar
画面下部に固定するモバイル定番のタブバー。アイコン＋ラベルの項目をタップすると選択が切り替わり、現在地が藍色で示される。
- JS
関わるカテゴリ
出典
- Nielsen Norman Group別サイト ↗Jakob Nielsen 本人による法則の説明と、慣習に従う理由。
- Laws of UX別サイト ↗Jakob's Law の項。心的モデルとの関係を整理している。