この記事の要点(UIXHERO視点) UIXHEROでは、共感ギャップを「冷静な自分と感情的な自分の間にある断絶」と捉える。 本記事では、ユーザーがパニックや怒りの状態(Hot)にある時でも、致命的なミスを犯さないようサポートする防衛的UIを整理する。
共感ギャップとは?
お腹が一杯の時にスーパーに行くと、「来週はお菓子を控えよう」と本気で思いますが、空腹になるとその決意は簡単に崩れます。 このように、現在の感情状態(ステート)が、未来の自分の行動予測と乖離してしまう現象を「共感ギャップ」と呼びます。 UXデザインでは、ユーザーが「冷静な時」と「焦っている/怒っている時」で全く別人のように振る舞うことを前提にする必要があります。
UXデザインでの活用事例
1. 「怒りの送信」防止
深夜に感情的なメッセージを送って翌朝後悔するのを防ぐため、「送信を取り消す」機能や、不適切な言葉が含まれている場合に「本当に送信しますか?」と一呼吸置かせる警告は、Hot状態のユーザーをCoolダウンさせます。
2. 事前コミットメント
冷静な時(Cold状態)に、未来の自分の行動を縛る設定をさせます。例えば、投資アプリで「相場が暴落しても、24時間は解約できない」ロック機能を設けることで、パニック売りを防ぎます。
3. 文脈に合わせたUI
ユーザーが「ヘルプ」を探している時は、おそらく「困っている(イライラしている)」というHot状態です。そこで可愛らしいマスコットが冗談を言ったりすると、火に油を注ぎます。緊急時は、無駄を削ぎ落とした事務的な対応が求められます。
実装例: 空腹時の買い物と共感ギャップ
現在の状態(Normal / Hungry)によって、ユーザーの選択(クリックする商品)がどう変わるか、そして未来の自分がどう感じるかをシミュレーションするデモです。
Interactive Example (Live)
const EmpathyGapDemo = () => { const [state, setState] = useState('normal'); // normal, hungry const [cart, setCart] = useState([]); const [showResult, setShowResult] = useState(false); const items = [ { name: '🥗 サラダ', type: 'healthy' }, { name: '🍎 りんご', type: 'healthy' }, { name: '🍔 ハンバーガー', type: 'junk' }, { name: '🍟 ポテトL', type: 'junk' }, { name: '🍰 ケーキ', type: 'junk' }, ]; const addToCart = (item) => { setCart([...cart, item]); }; const checkout = () => { setShowResult(true); }; const reset = () => { setCart([]); setShowResult(false); setState('normal'); }; // State-dependent filtering/highlighting logic (simulating attention bias) // When hungry, junk food looks more attractive (larger, brighter) 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-4">来週の食料品の買い物</h3> {!showResult ? ( <> <div className="flex justify-center gap-4 mb-6 bg-muted p-2 rounded-lg inline-flex mx-auto"> <button onClick={() => setState('normal')} className={`px-4 py-1 rounded text-sm ${state === 'normal' ? 'bg-card shadow text-primary font-bold' : 'text-muted-foreground'}`} > 満腹 (冷静) </button> <button onClick={() => setState('hungry')} className={`px-4 py-1 rounded text-sm ${state === 'hungry' ? 'bg-card shadow text-destructive font-bold' : 'text-muted-foreground'}`} > 空腹 (Hot) </button> </div> <div className="grid grid-cols-2 gap-3 mb-6"> {items.map((item, i) => { const isJunk = item.type === 'junk'; const isHighlighted = state === 'hungry' && isJunk; return ( <button key={i} onClick={() => addToCart(item)} className={` p-3 border rounded-lg transition-all hover:bg-muted/30 ${isHighlighted ? 'border-destructive/50 bg-destructive/10 scale-105 shadow-md font-bold' : 'border-border'} `} > {item.name} </button> ); })} </div> <div className="border-t pt-4"> <div className="text-sm text-muted-foreground mb-2">カゴの中身: {cart.length}点</div> <button onClick={checkout} disabled={cart.length === 0} className="bg-primary text-primary-foreground w-full py-2 rounded-lg font-bold disabled:bg-gray-300"> 購入する </button> </div> </> ) : ( <div className="animate-in zoom-in"> <h4 className="font-bold text-xl mb-4">翌日(冷静になった時)...</h4> <div className="bg-muted/30 p-4 rounded-lg text-left mb-6 font-mono text-sm"> {cart.map((item, i) => ( <div key={i} className={`flex justify-between ${item.type === 'junk' ? 'text-destructive' : 'text-green-500'}`}> <span>{item.name}</span> <span>{item.type === 'junk' ? '後悔...' : 'Good!'}</span> </div> ))} </div> {state === 'hungry' ? ( <p className="text-destructive font-bold"> 「なんでこんなにジャンクフードばかり買ったんだ...」<br/> <span className="text-xs text-muted-foreground font-normal">これが共感ギャップです。空腹時の判断は信用できません。</span> </p> ) : ( <p className="text-primary font-bold"> 「バランスの良い買い物ができた!」<br/> <span className="text-xs text-muted-foreground font-normal">冷静な状態での判断は、未来の満足に繋がります。</span> </p> )} <button onClick={reset} className="mt-6 text-muted-foreground text-xs underline">やり直す</button> </div> )} </div> ); }; render(<EmpathyGapDemo />);
倫理的配慮 (Ethical Considerations)
- 衝動買いの誘発 : タイムセールや「残りわずか」の表示で意図的にユーザーを焦らせ(Hot状態にし)、冷静な判断力を奪って購入させる手法は、売上は上がっても顧客の信頼(LTV)を損なう諸刃の剣です。