明らかに誰も買わない「おとり」を置くのは無駄ではないですか？

無駄ではありません。その選択肢の役割は「売れること」ではなく「比較対象になること」だからです。もし「おとり」が全く売れなくても、それがあることで高単価なターゲット商品の売上が20%伸びるなら、その「おとり」は素晴らしい仕事をしています。UXデザインでは、各要素の役割（Role）を正しく定義することが重要です。

おとり効果はいつでも効きますか？

いいえ、条件があります。「支配関係（Dominance）」が明確でないと効きません。おとりがターゲット商品に比べて「明らかに劣る」ことが一瞬で分からないと、単に選択肢が増えて迷うだけ（決断疲れ）になります。ユーザーが直感的に「こっちの方が絶対お得だ」と比較可能な属性（価格や容量など）で構成する必要があります。

ユーザーにおとりだとバレたらどうなりますか？

さすがに「松（1万円）・竹（5000円）・おとり（9900円で低品質）」のような露骨な設計はお客様を馬鹿にしていると捉えられ、ブランドの信頼を損ないます。おとりはあくまで自然なラインナップの一部として、「ちょっと割高だけど、ニーズがあるかもしれない」レベルに留めるのがマナーです。

一番安い商品を「おとり」にすることはできますか？

可能です。例えば「機能制限版（無料）」をあえて不便に設計し、「有料版（快適）」への移行を促すのも広義のおとり効果（コントラスト効果）です。しかし、無料版の体験が悪すぎると、有料版への期待値も下がって離脱されるので、バランスが難しい高等戦術です。

真ん中のプラン（竹）が一番売れるのはおとり効果ですか？

おとり効果と「極端の回避性（松竹梅の法則）」の合わせ技です。人は一番高いものへの抵抗感と、一番安いものへの不安感を持つため、無難な真ん中を選びがちです。ここにさらに「上のプランとほぼ変わらない性能」などのお得感を演出する（おとり効果）ことで、真ん中、あるいは上のプランへの誘導を強化できます。

おとり効果 (Decoy Effect)

この記事の要点（UIXHERO視点） UIXHEROでは、おとり効果を「比較対象への不満を利用した、本命への誘導」と捉える。本記事では、あえて劣った選択肢（おとり）を混ぜることで、ターゲット商品のコスパを際立たせる価格設計の妙技を整理する。

おとり効果とは？

映画館のポップコーンのサイズ選びを想像してください。 Sサイズ（$3）とLサイズ（$7）だと、「$7は高いな、Sでいいか」と思います。ここにMサイズ（$6.5）を追加します。すると、「MとLで$0.5しか違わないなら、Lの方が断然お得だ！」と考え、Lサイズを選ぶ人が急増します。このMサイズこそが、売る気のない「おとり（Decoy）」であり、Lサイズを魅力的に見せるための引き立て役です。

UXデザインでの活用事例

1. 料金プランの「松竹梅」

サブスクリプションで、「Basic（安価・低機能）」と「Pro（高価・高機能）」の間に、「Plus（Proに近い価格だが、機能はBasic寄り）」を置くことで、Proプランへの誘導（アップセル）を強化します。

2. 特典付きセット販売

電子書籍の販売で、「電子書籍のみ：$20」「紙の本のみ：$40」「電子＋紙セット：$40」と提示すると、誰も「紙の本のみ」を買いませんが、この選択肢があることで「セットが無料みたいでお得！」と感じさせることができます（ダン・アリエリーの実験）。

3. 不採用案の提示

デザインのプレゼンで、本命のデザインAを通したい時、あえて質の低いデザインB（おとり）を混ぜておくことで、クライアントに「Aが良い」と確信を持って選ばせることができます（ただし、Bが選ばれないように注意が必要です）。

実装例: ポップコーンのサイズ選び

選択肢が2つの場合と、おとり（Mサイズ）がある場合。ユーザーが「Lサイズ」を選ぶ確率（お得感）がどう変わるかのデモです。

Interactive Example (Live)

const DecoyEffectDemo = () => {
  const [hasDecoy, setHasDecoy] = useState(false);
  
  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="flex justify-center gap-4 mb-8">
        <button 
           onClick={() => setHasDecoy(false)}
           className={`px-4 py-2 rounded text-sm font-bold ${!hasDecoy ? 'bg-primary text-primary-foreground' : 'bg-muted'}`}
        >
          A. 2択 (S or L)
        </button>
        <button 
           onClick={() => setHasDecoy(true)}
           className={`px-4 py-2 rounded text-sm font-bold ${hasDecoy ? 'bg-pink-600 text-white' : 'bg-muted'}`}
        >
          B. おとり有り (S, M, L)
        </button>
      </div>

      <div className="flex justify-center items-end gap-3 h-40 mb-6">
        
        {/* Small */}
        <div className="w-20 bg-orange-100 dark:bg-orange-950 border border-orange-300 dark:border-orange-800 rounded-t-lg mx-1 flex flex-col justify-end pb-2 relative hover:bg-orange-200 dark:hover:bg-orange-900 cursor-pointer h-24 text-orange-900 dark:text-orange-200">
          <div className="text-2xl">🍿</div>
          <div className="font-bold text-sm">S</div>
          <div className="font-bold text-lg">$3.00</div>
        </div>

        {/* Medium (The Decoy) */}
        {hasDecoy && (
          <div className="w-24 bg-muted border border-border rounded-t-lg mx-1 flex flex-col justify-end pb-2 relative hover:bg-muted cursor-pointer h-32 animate-in fade-in">
            <div className="absolute -top-8 left-0 right-0 text-[10px] text-pink-600 font-bold">おとり(Decoy)</div>
            <div className="text-3xl">🍿</div>
            <div className="font-bold text-sm">M</div>
            <div className="font-bold text-lg text-muted-foreground">$6.50</div>
            <div className="text-[10px] text-muted-foreground">中途半端...</div>
          </div>
        )}

        {/* Large (Target) */}
        <div className="w-28 bg-orange-500 text-white border-orange-600 rounded-t-lg mx-1 flex flex-col justify-end pb-2 relative shadow-lg hover:bg-orange-600 cursor-pointer h-40 transform transition hover:scale-105">
           {hasDecoy && <div className="absolute top-2 right-2 text-xs bg-yellow-400 text-black px-1 rounded font-bold">お得!</div>}
          <div className="text-4xl">🍿</div>
          <div className="font-bold text-lg">L</div>
          <div className="font-bold text-2xl">$7.00</div>
        </div>

      </div>

      <p className="mt-4 text-xs text-muted-foreground bg-muted/30 p-3 rounded">
        {hasDecoy 
          ? "「MとLであまり値段が変わらないなら、Lの方が絶対お得だ！」と思いませんか？これが非対称な支配（Asymmetric Dominance）です。" 
          : "S($3)とL($7)だと、価格差が気になり、安価なSを選ぶ人が多くなります。"}
      </p>

    </div>
  );
};

render(<DecoyEffectDemo />);

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

実装チェックリスト

「おとり」は、売りたい商品（ターゲット）と価格が近く、かつ魅力が低い設定になっているか？

選択肢が増えすぎて、逆に「決断疲れ」や「選択のパラドックス」を起こしていないか？

ユーザーの予算感を無視した高額商品への誘導になっていないか？

倫理的配慮 (Ethical Considerations)

廃棄物の増加 : 食品サイズでおとり効果を使い、消費者が食べきれないLサイズを注文させて廃棄を増やすことは、環境倫理的に問題があります。
不誠実な選択肢 : 明らかに誰も選ばないような酷い条件の「おとりプラン」を作成し、正規プランを良く見せる手法は、ユーザーを小馬鹿にしていると受け取られかねません。

参考文献

Ariely, D. (2008). Predictably Irrational: The Hidden Forces That Shape Our Decisions. HarperCollins. Amazon

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