JND（丁度可知差異）とは何ですか？

Just Noticeable Differenceの略で、人が「違い」として認識できる最小の差のことです。この閾値を超えない限り、ユーザーは変化に気づきません。

割引率は何％がいいですか？

一般的に「20％以上」でないと、お得感を感じにくいと言われています（あくまで目安です）。また、「100の法則」があり、単価が低い商品は「％（20%OFF）」で、高い商品は「額（5000円引き）」で表示した方が、数字が大きく見えて魅力的に感じられます。

視覚以外にも適用されますか？

はい。音の大きさ、重さ、明るさ、味覚、時間の感覚など、あらゆる知覚に適用されます。アプリの通知音を大きくする場合も、元の音量に対して一定の比率で上げないと変化に気づかれません。

改悪（値上げなど）を隠すには？

倫理的な問題はさておき、法則上は「JND以下」で少しずつ変化させることで、ユーザーに気づかれずに変更を行うことが可能です（例えば、毎日0.1秒ずつ表示速度が遅くなっても、誰も文句を言いません）。

フェヒナーの法則との違いは？

基本的にセットで扱われます。「刺激の変化量と感覚の大きさは対数関係にある（刺激が強くなるほど、鈍感になる）」という法則で、ウェーバーの法則をより一般化したものです。

ウェーバーの法則 (Weber's Law)

この記事の要点（UIXHERO視点） UIXHEROでは、ウェーバーの法則を「変化の隠蔽と露見、比率のマジック」と捉える。本記事では、値上げやリデザインを「気づかせない」ための隠密作戦と、逆にセールを「気づかせる」ためのインパクト設計を、JND（丁度可知差異）という閾値を使って科学的に制御する方法を整理する。

ウェーバーの法則とは？

1kgの重りに100g足しても違いに気づきませんが、10gの重りに100g足せば誰でも気づきます。これは、人間が感知できる変化（弁別閾：JND）は、絶対量ではなく、元の量に対する「比率」で決まるからです。 Webサイトの表示速度改善や、ロゴのリニューアル、価格の値上げ・値下げにおいて、「どれくらい変えればユーザーが反応するか（または反応しないか）」を決定する重要な指標となります。

UXデザインでの活用事例

1. 劇的なリデザイン vs 段階的な改善

ユーザーは急激な変化を嫌います（現状維持バイアス）。既存のUIをリニューアルする場合、ウェーバーの法則に従い、ユーザーが違和感を感じない程度（JND以下）の小さな変更を積み重ねていくことで、反発を招かずにデザインを刷新できます（GoogleやFacebookの手法）。

2. 表示速度の体感

10秒かかっていた処理を8秒にしても（20%短縮）、ユーザーは「速くなった」と気づきにくいかもしれません。しかし、1秒の処理を0.8秒にすれば（同じ20%でも）、サクサク感の違いを体感しやすくなります。元の待ち時間が長いほど、劇的な改善をしないとユーザーは気づきません。

3. 価格改定の心理

値上げをする時は、ユーザーが気づかない程度（JND以下）で少しずつ上げるのが定石です。逆に、セールで「安い！」と思わせたい時は、JND以上の大幅な割引（通常は20%以上と言われる）を提示しないと、ユーザーの行動を変えるほどのインパクトを与えられません。

実装例: 違いがわかるか？

2つの円の「大きさ」の差を徐々に広げていき、人間がどの時点で「あ、違う！」と認識できるか（JND）を体験するデモです。

Interactive Example (Live)

const WeberLawDemo = () => {
  const [diff, setDiff] = useState(0); // 0% to 50%
  
  // Base size: 100px
  const baseSize = 80;

  return (
    <div className="p-8 bg-card rounded-xl shadow-lg border max-w-md mx-auto text-center">
      <h3 className="font-bold text-card-foreground mb-6">大きさの違い識別テスト</h3>

      <div className="mb-8 h-40 flex items-center justify-center gap-12">
        {/* Reference Circle */}
        <div className="flex flex-col items-center gap-2">
          <div 
             className="bg-primary/100 rounded-full shadow-md transition-all duration-300"
             style={{width: baseSize, height: baseSize}}
          ></div>
          <span className="text-xs text-muted-foreground">標準 (100%)</span>
        </div>

        {/* Comparison Circle */}
        <div className="flex flex-col items-center gap-2">
          <div 
             className="bg-primary/100 rounded-full shadow-md transition-all duration-300"
             style={{
               width: baseSize * (1 + diff/100), 
               height: baseSize * (1 + diff/100)
             }}
          ></div>
          <span className="text-xs text-muted-foreground">比較 ({100 + diff}%)</span>
        </div>
      </div>

      <div className="bg-muted/30 p-6 rounded-xl border border-border">
        <label className="block text-sm font-bold text-foreground mb-2">
          差の割合: {diff}%
        </label>
        <input 
          type="range" 
          min="0" 
          max="50" 
          step="1"
          value={diff}
          onChange={(e) => setDiff(Number(e.target.value))}
          className="w-full h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer accent-blue-600"
        />
        <div className="flex justify-between text-[10px] text-muted-foreground mt-1">
          <span>0% (同じ)</span>
          <span>50% (1.5倍)</span>
        </div>

        <p className="mt-6 text-sm text-muted-foreground min-h-[3em]">
          {diff < 5 && "まだ違いがほとんど分かりません。"}
          {diff >= 5 && diff < 10 && "うーん、少し違う気がする...？"}
          {diff >= 10 && diff < 20 && "はい、右の方が少し大きいです（JND到達）。"}
          {diff >= 20 && "明らかに右の方が大きいです！"}
        </p>
      </div>

      <div className="mt-4 text-xs text-muted-foreground text-left">
        ウェーバー比は刺激の種類によりますが、視覚的な大きさの場合、一般的に約10%前後の差がないと瞬時に識別するのは難しいと言われています。
      </div>

    </div>
  );
};

render(<WeberLawDemo />);

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

実装チェックリスト

リニューアルを実施する際、ユーザーが混乱しないよう段階的な変更を検討したか？

割引キャンペーンを行う際、その割引率はユーザーが知覚できる閾値（約20%以上など）を超えているか？

重要なアラートや通知は、背景とのコントラスト差が十分にあり、確実に気づかれるようになっているか？

倫理的配慮 (Ethical Considerations)

ステルス値上げ（シュリンクフレーション） : 価格を据え置いたまま、ユーザーが気づかない程度（JND以下）に少しずつ内容量を減らす手法は、短期的にはリピート購入を維持できるかもしれませんが、発覚した時に「騙された」という強い不信感を招き、ブランド毀損につながるリスクがあります。

参考文献

Weber, E. H. (1834). De Tactu: Annotationes Anatomicae et Physiologicae.
Interaction Design Foundation (n.d.). "Weber’s Law: Just Noticeable Differences." IDF Article

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