この記事の要点（UIXHERO視点） UIXHEROでは、変動報酬を「脳のハッキング、熱狂のエンジン」と捉える。 本記事では、固定された報酬よりも「ランダムな揺らぎ（当たり外れ）」がドーパミンを過剰に放出させ、ユーザーをその行動に釘付けにするメカニズムを整理する。
変動報酬とは？
バラス・スキナーの実験（スキナー箱）で、ネズミがレバーを押すとペレット（餌）が出る装置を使いました。 「押すと必ず出る」場合、ネズミは満腹になると押すのをやめます。 しかし「押すと出たり出なかったりする（ランダム）」場合、ネズミは熱狂的になり、餌が出なくてもレバーを押し続けました。 予測不能性は、脳を興奮させ、行動を強烈に習慣化させます。これをWebに応用したのがSNSのフィードやガチャです。
UXデザインでの活用事例
1. 無限スクロールとフィード
FacebookやTikTokのフィードをスクロールするのは、「次は面白い動画が出るかもしれない」という変動報酬を期待しているからです。ほとんどが退屈な投稿でも、たまに当たる「ホームラン」のために指を動かし続けます。
2. ログインボーナス（ガチャ）
単に「毎日1ポイント」あげるよりも、「おみくじを引いて最大100ポイント」にする方が、ユーザーは毎日アクセスしたくなります。結果を知りたいという好奇心が行動をドライブします。
3. 通知の不確実性
「あなたへのメッセージがあります」という通知は、中身が「好きな人から」なのか「スパム」なのか開くまで分からないため、気になって仕方なくなります。
実装例: ドーパミンの実験
固定報酬のボタンと、変動報酬（ギャンブル）のボタン。 どちらが「もう一度押したい」と思わせるかを体験するデモです。
Interactive Example (Live)
const VariableRewardDemo = () => { const [points, setPoints] = useState(0); const [lastReward, setLastReward] = useState(null); const [mode, setMode] = useState('fixed'); // fixed, variable const handleClick = () => { let reward = 0; if (mode === 'fixed') { reward = 10; } else { // 0 to 50 random const rand = Math.random(); if (rand < 0.2) reward = 0; // 20% miss else if (rand < 0.8) reward = 10; // 60% normal else reward = 50; // 20% big hit } setPoints(p => p + reward); setLastReward(reward); }; return ( <div className="p-8 bg-card rounded-xl shadow-lg border max-w-md mx-auto text-center"> <div className="bg-gray-900 text-white p-4 rounded-lg mb-6 font-mono text-xl shadow-inner"> SCORE: {points} </div> <div className="flex justify-center gap-4 mb-8"> <button onClick={() => {setMode('fixed'); setPoints(0); setLastReward(null);}} className={`px-3 py-1 rounded text-xs border ${mode === 'fixed' ? 'bg-primary text-primary-foreground' : 'bg-card'}`} > 固定報酬 (安定) </button> <button onClick={() => {setMode('variable'); setPoints(0); setLastReward(null);}} className={`px-3 py-1 rounded text-xs border ${mode === 'variable' ? 'bg-destructive text-destructive-foreground' : 'bg-card'}`} > 変動報酬 (ギャンブル) </button> </div> <div className="h-24 flex items-center justify-center mb-6"> {lastReward !== null ? ( <div className="animate-in zoom-in duration-200"> <div className={`text-4xl font-black ${lastReward === 50 ? 'text-yellow-500 scale-150' : lastReward === 0 ? 'text-muted-foreground' : 'text-blue-500'}`}> +{lastReward} </div> {lastReward === 50 && <div className="text-yellow-600 font-bold text-xs uppercase tracking-widest mt-1">Big Win!</div>} {lastReward === 0 && <div className="text-muted-foreground text-xs mt-1">Miss...</div>} </div> ) : ( <div className="text-gray-300 text-sm">押してね</div> )} </div> <button onClick={handleClick} className={` w-full py-4 rounded-xl font-bold text-xl text-white shadow-lg active:scale-95 transition-all ${mode === 'fixed' ? 'bg-primary/100 hover:bg-primary' : 'bg-gradient-to-r from-red-500 to-orange-500 hover:brightness-110'} `} > {mode === 'fixed' ? '10ポイント貰う' : '運試しをする！'} </button> <p className="mt-6 text-xs text-muted-foreground"> {mode === 'fixed' ? "「押せば10もらえる」と分かっていると、すぐに飽きて作業になります。" : "「次は50出るかも？」「ハズレた、悔しい！」という感情の起伏が、ボタン連打を誘発します。"} </p> </div> ); }; render(<VariableRewardDemo />);
実践ガイドライン (Practical Guidelines)
実装チェックリスト
倫理的配慮 (Ethical Considerations)
- 射幸心の煽りすぎ : ガチャやルートボックス（Loot Box）のような変動報酬は、ギャンブル依存症と類似した脳の状態を作り出します。未成年への課金誘導などは多くの国で法規制の対象となっています。
- ダークパターン : 「通知バッジがあるのにアプリを開いたら何もなかった（空振り）」というような、偽の変動報酬でアプリを開かせる行為は、ユーザーの信頼を破壊する最悪のUXです。