競合サイトをパクれということですか？

いいえ。パクるのは「構造（パターン）」であって、デザイン（装飾やブランド）ではありません。例えば「左上にロゴがあってクリックするとHomeに戻る」という構造はパクるべきですが、ロゴの色や形まで真似するのは盗作です。

独自性を出してはいけないのですか？

出すべきですが、場所を選びましょう。ユーザーが頻繁に使うユーティリティ（検索、カート、ログイン）で独自性を出すと混乱を招きます。逆に、ランディングページのFVやキャンペーンサイトなど、感情を動かす場所では独自性が武器になります。

「普通のデザイン」だと飽きられませんか？

ユーザビリティにおいて「飽きる（Boring）」は褒め言葉です。ユーザーはツールの操作にワクワクしたいのではなく、ツールを使って何かを成し遂げたいのです。道具（UI）は透明であるべきで、目立つべきはコンテンツです。

イノベーションはどうやって起こせばいいですか？

既存のパターンよりも「圧倒的に便利」な場合のみ、新しいルールを導入してください。少しの改善なら学習コストが勝ってしまいます。TinderのスワイプUIのように、直感的で強力なメリットがある場合だけ、ヤコブの法則を破る価値があります。

BtoBアプリでも同じですか？

BtoBこそ一貫性が重要です。Excel的な操作（グリッド編集、ショートカットキー）など、業務ですでに慣れ親しんだメンタルモデルを踏襲することで、導入時の教育コスト（オンボーディング）を大幅に削減できます。

ヤコブの法則 (Jakob's Law)

この記事の要点（UIXHERO視点） UIXHEROでは、ヤコブの法則を「ユーザーの学習コストを最小化するために、あえて既存の慣習に従うべきであるという原則」と定義する。本記事では、車輪の再発明（独自のUI）が招く学習コストの増大を避け、標準的なパターンを踏襲することで、コンテンツそのものにスポットライトを当てる戦略を整理する。

ヤコブの法則とは？

Nielsen Norman Groupの創設者ヤコブ・ニールセンが提唱した法則です。ユーザーはWebの大半の時間を「あなたのサイト以外」で過ごしています。そのため、彼らは他の大多数のサイトと同じような動作（ナビゲーション、検索、リンクの色など）を、あなたのサイトにも期待します。

車輪の再発明をする必要はありません。 「普通であること」は、使いやすさにおける最大の武器 です。

なぜ重要なのか

独自すぎるUIは、ユーザーに「学習」を強要します。ユーザーがサイトを訪れる目的は、UIの操作方法を学ぶことではなく、コンテンツを見たり商品を買ったりすることです。学習コスト（Cognitive Load）が高いと、ユーザーは目的を達成する前に離脱してしまいます。

典型的なパターンの例

ロゴをクリック : トップページに戻る。
虫眼鏡アイコン : 検索機能が開く。
ハンバーガーメニュー : モバイルでのナビゲーション展開。
カートアイコン : 右上にある買い物かご。
青い下線テキスト : クリック可能なリンク。

インターフェースの革新について

ヤコブの法則は「常に同じものを作れ」と言っているわけではありません。GoogleマップやTinderのスワイプのように、明らかに優れた新しい体験（イノベーション）がある場合は、既存のパターンを壊す価値があります。しかし、大抵の場合、ナビゲーションやフォームなどの基本要素においては、標準に従うのが安全です。

実装例: 「標準的UI」と「独自の学習が必要なUI」

ECサイトの商品カードを例に、慣れ親しんだ配置がいかに見やすいかを比較するデモです。

Interactive Example (Live)

const JakobsLawDemo = () => {
  const [mode, setMode] = useState('standard'); // standard vs creative

  return (
    <div className="p-8 bg-muted rounded-xl flex flex-col items-center gap-6">
      
      {/* 切替スイッチ */}
      <div className="flex bg-card rounded-lg p-1 shadow-sm">
        <button
          onClick={() => setMode('standard')}
          className={`px-4 py-2 text-sm font-bold rounded transition-all ${mode === 'standard' ? 'bg-primary text-primary-foreground shadow' : 'text-muted-foreground hover:bg-muted/30'}`}
        >
          Standard (Familiar)
        </button>
        <button
          onClick={() => setMode('creative')}
          className={`px-4 py-2 text-sm font-bold rounded transition-all ${mode === 'creative' ? 'bg-purple-600 text-white shadow' : 'text-muted-foreground hover:bg-muted/30'}`}
        >
          Creative (Unfamiliar)
        </button>
      </div>

      {/* デモ表示エリア */}
      <div className="w-64 bg-card rounded-lg shadow-lg overflow-hidden transition-all duration-300">
        
        {mode === 'standard' ? (
          // Standard UI: 誰でも一瞬で理解できる
          <div>
            <div className="h-40 bg-gray-300 w-full flex items-center justify-center text-muted-foreground">Image</div>
            <div className="p-4">
              <h3 className="font-bold text-lg mb-1">Cool Sneaker</h3>
              <p className="text-muted-foreground text-sm mb-3">Running shoes</p>
              <div className="flex justify-between items-center">
                <span className="font-bold text-xl">$99</span>
                <button className="bg-primary text-primary-foreground px-4 py-2 rounded-full text-sm font-bold hover:bg-primary/90">
                  Add to Cart
                </button>
              </div>
            </div>
          </div>
        ) : (
          // Creative UI: 独自性は高いが、どこを見ればいいか悩む
          <div className="relative h-72 bg-gray-900 text-white p-6 flex flex-col justify-between text-center group cursor-pointer overflow-hidden">
             <div className="absolute inset-0 bg-purple-900 opacity-50 group-hover:opacity-70 transition-opacity"></div>
             <div className="relative z-10">
               <span className="text-3xl font-thin tracking-widest block mb-4 border-b border-white pb-2">$99</span>
               <h3 className="font-serif italic text-2xl rotated-text">Cool Sneaker</h3>
             </div>
             
             <div className="relative z-10 text-xs text-gray-300 mt-4">
               Hover to discover functionality
               {/* 隠されたボタン（発見困難） */}
               <div className="mt-4 opacity-0 group-hover:opacity-100 transition-opacity duration-500 border border-white px-2 py-1 rounded text-white">
                 Purchase Sequence Initiate
               </div>
             </div>
          </div>
        )}
      </div>

      <p className="text-sm text-muted-foreground max-w-sm text-center">
        {mode === 'standard' 
          ? "標準的な配置：画像、タイトル、価格、ボタンの位置が予測通り。迷わず購入できます。"
          : "独創的な配置：確かにクールですが、「値段はどこ？」「どうやって買うの？」と考える時間が発生します。"}
      </p>

    </div>
  );
};

render(<JakobsLawDemo />);

実践ガイドライン (Practical Guidelines)

実装チェックリスト

一般的なUIコンポーネント（検索、カート、メニュー）は、期待される場所に配置されているか？

独自性（Creativity）を発揮する場所と、ユーザビリティ（Usability）を優先する場所を区別できているか？

ユーザーを驚かせるとき、その驚きはポジティブなものか？単なる混乱か？

倫理的配慮 (Ethical Considerations)

模倣と盗作 : 「慣例に従う」ことと「他社のデザインを丸パクりする」ことは違います。構造やパターンは共有しつつ、ブランディング（色、フォント、声のトーン）で差別化を図るべきです。
現状維持バイアス : ヤコブの法則に縛られすぎて、全ての改善を「ユーザーが慣れていないから」と却下するのは危険です。時には、古い慣習（例：フロッピーディスクの保存アイコン）をアップデートする勇気も必要です。

参考文献

Nielsen, J. (2000). "Jakob's Law of Internet User Experience." Nielsen Norman Group. NNGroup Link
Krug, S. (2000). Don't Make Me Think. New Riders. Amazon

ページを読み込み中...