この記事の要点（UIXHERO視点） UIXHEROでは、親近性バイアスを「新しい学習に対する、脳の拒絶反応」と捉える。 本記事では、奇抜な独自性を捨て、標準的なUI（ヤコブの法則）を採用することで、学習コストをゼロにする「見慣れたデザイン」の強さを整理する。
親近性バイアスとは？
人間は、新しいものや未知のものに対しては警戒心を抱き、馴染みのあるものに対しては安心感や好意を抱きます（単純接触効果とも関連）。 UXにおいては、奇抜で新しいUIよりも、見飽きたような標準的なUIの方が「使いやすい」と評価される傾向があります（ヤコブの法則）。
UXデザインでの活用事例
1. 標準アイコンの採用
「検索」には虫眼鏡、「設定」には歯車、「メニュー」にはハンバーガーアイコンを使います。これらは世界中で見慣れているため、学習コストゼロで意味が伝わります。独自性を出そうとしてこれらを変えると、ユーザーは混乱します。
2. プラットフォームの作法に従う
iOSアプリならiOSの、AndroidアプリならMaterial Designのガイドライン（作法）に従うことで、ユーザーは「いつものアプリと同じ感覚」で操作でき、安心感を覚えます。
3. リブランディング時の注意
ロゴやUIを刷新する際、急激に全く違うデザインにすると、既存ユーザーの親近性バイアスと衝突し、反発（アレルギー反応）を招くことがあります。Googleなどの大企業が、ロゴを少しずつ段階的に変化させるのはこのためです。
実装例: 慣れと直感
「見慣れたアイコン」と「新しいアイコン」。 同じ機能を果たすボタンでも、認知にかかる時間（迷い）がどれくらい違うか体験するデモです。
Interactive Example (Live)
const FamiliarityBiasDemo = () => { const [mode, setMode] = useState('standard'); // 'standard' or 'unique' return ( <div className="p-8 bg-muted/30 rounded-xl max-w-md mx-auto"> <div className="flex justify-center gap-4 mb-8"> <button onClick={() => setMode('standard')} className={`px-4 py-2 rounded-full text-sm font-bold ${mode === 'standard' ? 'bg-primary text-primary-foreground' : 'bg-card border text-muted-foreground'}`} > A. Standard UI (Familiar) </button> <button onClick={() => setMode('unique')} className={`px-4 py-2 rounded-full text-sm font-bold ${mode === 'unique' ? 'bg-purple-600 text-white' : 'bg-card border text-muted-foreground'}`} > B. Unique UI (Unfamiliar) </button> </div> <div className="bg-card p-4 rounded-xl shadow-lg border h-64 flex flex-col relative overflow-hidden"> {/* Mock App Header */} <div className="border-b pb-2 mb-4 flex justify-between items-center"> <div className="font-bold text-foreground">My App</div> {/* Menu Icon */} <button className="p-2 hover:bg-muted rounded"> {mode === 'standard' ? ( // Hamburger (Standard) <svg className="w-6 h-6 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" /></svg> ) : ( // Diamond Grid (Unique) <svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4L4 12l8 8 8-8-8-8z" /></svg> )} </button> </div> {/* Mock App Content */} <div className="flex-grow flex items-center justify-center gap-6"> {/* Add Button */} <div className="text-center"> <button className={`w-12 h-12 rounded-full flex items-center justify-center shadow-md mb-2 transition-transform active:scale-95 ${mode === 'standard' ? 'bg-primary/100 text-white' : 'bg-yellow-400 text-black'}`}> {mode === 'standard' ? ( // Plus (Standard) <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg> ) : ( // Star (Unique for 'Add'?) <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" transform="rotate(45 12 12)" /></svg> )} </button> <span className="text-xs text-muted-foreground">Add New</span> </div> {/* Settings Button */} <div className="text-center"> <button className={`w-12 h-12 rounded-full flex items-center justify-center shadow-md mb-2 transition-transform active:scale-95 ${mode === 'standard' ? 'bg-muted text-foreground' : 'bg-pink-300 text-white'}`}> {mode === 'standard' ? ( // Gear (Standard) <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg> ) : ( // Triangle (Unique for 'Settings'?) <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 20l9-16H3l9 16z" /></svg> )} </button> <span className="text-xs text-muted-foreground">Settings</span> </div> </div> </div> <p className="text-center text-xs text-muted-foreground mt-6 leading-relaxed"> {mode === 'standard' ? "標準的なアイコンは、脳が考えることなく瞬時に意味を理解できます（認知負荷が低い）。" : "独自なアイコンは「これは何だろう？」と考える一瞬のコストが発生します。かっこいいですが、使いやすさは低下します。"} </p> </div> ); }; render(<FamiliarityBiasDemo />);
倫理的配慮 (Ethical Considerations)
- イノベーションの阻害 : 親近性を重視しすぎると、新しいけれど優れたデザイン（例：iPhone登場時のフルタッチ操作）の芽を摘んでしまう恐れがあります。慣れるまでの学習コストを払ってでも導入する価値があるか、慎重に判断する必要があります。
- 悪い慣習の踏襲 : ユーザーが慣れているからといって、使いにくいレガシーなUIや、差別的な用語を使い続けることは正当化されません。