ドア・イン・ザ・フェイスとは?
訪問販売員がいきなりドアを開けて大きな要求をし、目の前でドアをバタンと閉められる(拒絶される)状況から名付けられました。 人は誰かの要求を断ることに少なからずストレスや罪悪感を感じます。 その後「じゃあ、これならどうですか?」と小さな要求(実は本命)を出されると、「相手が譲歩してくれたのだから、こちらも譲歩しなければ(返報性の原理)」という心理が働き、OKしてしまいやすくなります。
UXデザインでの活用事例
1. 寄付やチップの提案
「毎月5,000円の寄付をお願いします」と提示し、「いいえ」と断られた直後に、「では、今回だけの500円の寄付はいかがですか?」とポップアップを出すと、最初から500円を頼むよりも成功率が上がります。
2. ダウンセル (Down-sell)
商品をカートに入れたまま離脱しようとしたユーザーに対し、安価な代替品や「10%OFFクーポン」を提示するのは、購入という大きなハードルを下げて(譲歩して)、コンバージョンを拾う典型的なテクニックです。
3. レビュー依頼
「アンケート(所要時間10分)にご協力ください」と頼み、断られた(×ボタンを押した)瞬間に、「では、星評価(1クリック)だけでもお願いします」と頼むと、高確率で評価してもらえます。
実装例: 無理な要求からの譲歩
高額プランを断った直後に廉価プランを提案された時の、心理的な受け入れやすさ(安堵感)を体験するデモです。
Interactive Example (Live)
const DoorInFaceDemo = () => { const [step, setStep] = useState('initial'); // initial, high_req, refused, accepted_low, accepted_high 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> {step === 'initial' && ( <button onClick={() => setStep('high_req')} className="bg-primary text-primary-foreground px-6 py-2 rounded font-bold"> 詳細を見る </button> )} {step === 'high_req' && ( <div className="animate-in zoom-in bg-gradient-to-b from-yellow-50 to-white p-6 rounded-xl border border-yellow-200 text-yellow-900 dark:text-yellow-900"> <div className="text-4xl mb-2">💎</div> <h4 className="text-xl font-bold text-yellow-800 mb-2">プラチナプラン</h4> <p className="text-sm text-yellow-800 mb-4 font-bold"> 全ての機能が無制限!<br/> 圧倒的な成長をお約束します。 </p> <div className="text-3xl font-black text-yellow-900 mb-6">¥50,000 <span className="text-sm font-normal">/月</span></div> <div className="space-y-3"> <button onClick={() => setStep('accepted_high')} className="w-full bg-yellow-400 text-yellow-900 font-bold py-3 rounded-lg hover:bg-yellow-500" > 申し込む </button> <button onClick={() => setStep('refused')} className="w-full text-muted-foreground text-sm underline hover:text-muted-foreground" > 高すぎるので結構です </button> </div> </div> )} {step === 'refused' && ( <div className="animate-in slide-in-from-bottom bg-card p-6 rounded-xl border-2 border-green-100 shadow-2xl relative"> <div className="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs font-bold whitespace-nowrap"> 🙇 お待ちください! </div> <p className="text-sm text-muted-foreground mt-4 mb-4"> ご予算に合いませんでしたか?<br/> では、基本機能に絞った<strong>「ライトプラン」</strong>はいかがでしょう? </p> <div className="text-2xl font-black text-green-500 mb-4">¥980 <span className="text-sm font-normal text-muted-foreground">/月</span></div> <div className="space-y-3"> <button onClick={() => setStep('accepted_low')} className="w-full bg-green-600 text-white font-bold py-3 rounded-lg hover:bg-green-600 shadow-lg transform hover:scale-105 transition" > それなら申し込む </button> <button onClick={() => setStep('initial')} className="text-xs text-muted-foreground" > それでも要らない </button> </div> <div className="mt-4 text-xs bg-muted/30 p-2 rounded text-left"> <span className="font-bold">解説:</span><br/> 5万円を見た後だと、980円が「タダ同然」に見えませんか?(アンカリング効果も働いています)。そして断った直後の提案なので「話くらいは聞いてやるか」という心理になります。 </div> </div> )} {(step === 'accepted_high' || step === 'accepted_low') && ( <div className="animate-in fade-in py-8"> <div className="text-6xl mb-4">🎉</div> <p className="font-bold text-card-foreground"> {step === 'accepted_high' ? 'すごい!太っ腹ですね!' : 'ご契約ありがとうございます!'} </p> <button onClick={() => setStep('initial')} className="mt-6 text-blue-500 underline text-sm">リセット</button> </div> )} </div> ); }; render(<DoorInFaceDemo />);
倫理的配慮 (Ethical Considerations)
- 不快感 : あまりにも非常識な要求を最初に突きつけると、ユーザーは「バカにされている」と感じて怒り出したり、即座に離脱したりします。最初の要求も(断られる前提とはいえ)ある程度の正当性が必要です。
- 信頼の損失 : 常に二重価格(定価を高額に設定し、常に割引して売る)のような見せ方を繰り返すと、「どうせまた裏があるんだろう」と信用されなくなります。