この記事の要点(UIXHERO視点) UIXHEROでは、非注意性盲目を「スポットライトの外側にある、透明な世界」と捉える。 本記事では、ユーザーの視線とタスクの動線上に情報を置く「コンテキスト配置」と、本当に重要な警告は強制的に割り込む「中断の勇気」を整理する。
非注意性盲目とは?
有名な「見えないゴリラ」の実験があります。 被験者に「白いシャツを着たチームのパスの回数を数えてください」と指示すると、その最中にゴリラの着ぐるみを着た人が画面を堂々と横切っても、約半数の人が気づきません。 人間は「見ようとしたもの」しか見えません。ユーザーがタスクに集中している時、画面の隅に表示されるヘルプや広告は、文字通り「存在しない」かのように扱われます。
UXデザインでの活用事例
1. 文脈に沿ったエラー表示
ユーザーがフォーム入力に集中している時、画面最上部にエラーメッセージを出しても気づかれません。 入力欄のすぐそば(インライン)にエラーを表示しないと、ユーザーは「なぜ進めないのか」分からず混乱します。
2. 邪魔をする勇気(モーダル)
本当に重要な通知(データ消失の危険など)は、ユーザーの集中を強制的に中断させる「モーダルダイアログ」で表示する必要があります。 「慎み深い通知」は、集中しているユーザーには届きません。
3. ヒントのタイミング
ユーザーが特定の機能を使おうとした「その瞬間」にツールチップを表示するのが最も効果的です。 関係ないタイミングで表示されるオンボーディングツアーは、ただのノイズとして無視(または即座に「×」を押される)されます。
実装例: 注意のスポットライト
一点に集中している時、周囲の変化にどれだけ鈍感になるかを体験するデモです。
Interactive Example (Live)
const GorillaDemo = () => { const [step, setStep] = useState('intro'); // intro, task, result const [score, setScore] = useState(0); const [gorillaVisible, setGorillaVisible] = useState(false); const [noticed, setNoticed] = useState(false); // Simple counting task useEffect(() => { if (step === 'task') { const interval = setInterval(() => { setScore(s => s + 1); }, 800); // Gorilla appears at 3s const timer1 = setTimeout(() => { setGorillaVisible(true); }, 3000); // Gorilla leaves at 6s const timer2 = setTimeout(() => { setGorillaVisible(false); }, 6000); const finishTimer = setTimeout(() => { setStep('result'); }, 7000); return () => { clearInterval(interval); clearTimeout(timer1); clearTimeout(timer2); clearTimeout(finishTimer); }; } }, [step]); return ( <div className="p-8 bg-card rounded-xl shadow-lg border max-w-md mx-auto"> <h3 className="text-center font-bold text-card-foreground mb-6">集中力テスト</h3> {step === 'intro' && ( <div className="text-center"> <p className="mb-4 text-sm text-muted-foreground"> これから画面中央に数字が表示されます。<br/> <strong>「偶数」が表示された回数</strong>を正確に数えてください。<br/> (※数字はランダムに切り替わります) </p> <button onClick={() => {setStep('task'); setScore(0);}} className="bg-primary text-primary-foreground px-8 py-3 rounded-full font-bold"> スタート </button> </div> )} {step === 'task' && ( <div className="h-48 relative flex items-center justify-center bg-muted/30 rounded-xl overflow-hidden border"> {/* The Task Item (Spotlight) */} <div className="text-6xl font-black text-primary animate-pulse"> {Math.floor(Math.random() * 99)} </div> {/* The Gorilla (Unexpected Item) */} {gorillaVisible && ( <div className="absolute top-4 right-4 text-4xl animate-bounce cursor-pointer transition-opacity duration-1000" onClick={() => setNoticed(true)} > 🦍 <span className="text-xs block bg-black text-white px-1">Here!</span> </div> )} <div className="absolute bottom-2 text-xs text-muted-foreground">数字に集中してください...</div> </div> )} {step === 'result' && ( <div className="animate-in fade-in text-center"> <p className="mb-4 font-bold">終了!</p> <div className="bg-muted p-4 rounded-lg mb-4 text-left"> <p className="font-bold mb-2">質問:</p> <p className="mb-4">画面の右上に<strong>「ゴリラ」</strong>が出現したのに気づきましたか?</p> {noticed ? ( <p className="text-green-500 font-bold">→ 「はい、クリックしました!」(素晴らしい周辺視野です)</p> ) : ( <p className="text-destructive font-bold">→ 「えっ、ゴリラなんていた?」(これが非注意性盲目です)</p> )} </div> <p className="text-xs text-muted-foreground"> ユーザーは「タスク(偶数を数える)」に集中している時、それ以外のものを無視します。<br/> 「目立つ場所に置いたから気づくはず」というのは設計者の思い込みです。 </p> <button onClick={() => {setStep('intro'); setNoticed(false);}} className="mt-6 text-blue-500 underline text-xs">もう一度</button> </div> )} </div> ); }; render(<GorillaDemo />);
倫理的配慮 (Ethical Considerations)
- 重要な通知の見落とし : 「同意する」ボタンを押させることに集中させ、その近くにある重要な免責事項や「定期購入になる」旨の小さな文字を読ませないようにする(非注意性盲目を利用する)デザインは不誠実です。