この記事の要点（UIXHERO視点） UIXHEROでは、ヒックの法則を「選択肢の数と複雑さを減らすことで、ユーザーの意思決定を加速させるための原則」と定義する。 本記事では、チャンキング（小分け）や段階的開示を駆使して、ユーザーの認知リソースを守り、スムーズな決断へとエスコートする引き算の美学を整理する。
ヒックの法則とは？
1952年、心理学者ウィリアム・ヒックとレイ・ハイマンによって定式化された法則です。 「意思決定にかかる時間は、選択肢の数と複雑さに比例（対数的に増加）する」 というものです。
簡単に言えば、 「選択肢が多すぎると、人は迷ってしまい、選ぶのが遅くなる（あるいは選ぶのをやめる）」 ということです。
よくある誤解
「選択肢は常に少ない方がいい」わけではありません。 ヒックの法則は、単純な意思決定（メニューから選ぶなど）には当てはまりますが、創造的な作業や複雑な分析が必要な場面（家を探す、小説を書くなど）には必ずしも適用されません。 また、 「階層化」 することで、選択肢の総数が多くても、一度に判断する数を減らすことができます。
UXデザインでの活用事例
1. ナビゲーションメニュー
トップメニューに項目を20個並べるのではなく、5〜7個の親カテゴリーに分類し、ドロップダウンで詳細を表示します。
2. サインアップフォーム
入力項目を減らす。「Twitterでログイン」などのソーシャルログインを提供し、アカウント作成の選択肢（決断コスト）を減らします。
3. おすすめ（Curated Options）
「人気トップ3」や「本日のおすすめ」を提示することで、優柔不断なユーザーの決断をサポートします。
実装例: 選択肢の数と決断のしやすさ
シンプルなメニューと、複雑なメニューを比較するデモです。 目的のアイテムを見つけるまでの「精神的な疲れ」の違いを感じてください。
Interactive Example (Live)
const HicksComparison = () => { const [selected, setSelected] = useState(null); // 4つの選択肢 (Simple) const simpleOptions = ['Home', 'Products', 'About', 'Contact']; // 20個の選択肢 (Complex) const complexOptions = [ 'Home', 'News', 'Products', 'Services', 'Solutions', 'Pricing', 'Customers', 'Resources', 'Blog', 'About', 'Careers', 'Contact', 'Support', 'Partners', 'Events', 'Press', 'Legal', 'Privacy', 'Sitemap', 'Login' ]; return ( <div className="p-8 bg-card rounded-xl flex flex-col gap-8"> {/* ケース A: シンプルな選択肢 */} <div> <h4 className="font-bold text-foreground mb-2 flex items-center"> <span className="bg-green-100 text-green-700 text-xs px-2 py-1 rounded mr-2">Low Cognitive Load</span> Simple Options (4 items) </h4> <div className="flex gap-2 p-4 bg-muted/30 rounded border border-border/50"> {simpleOptions.map(opt => ( <button key={opt} onClick={() => setSelected(opt)} className={`px-4 py-2 rounded text-sm font-medium transition-colors ${selected === opt ? 'bg-primary text-primary-foreground' : 'bg-card text-muted-foreground hover:bg-muted border border-border'}`} > {opt} </button> ))} </div> </div> {/* ケース B: 複雑な選択肢 */} <div> <h4 className="font-bold text-foreground mb-2 flex items-center"> <span className="bg-red-100 text-red-700 text-xs px-2 py-1 rounded mr-2">High Cognitive Load</span> Complex Options (20 items) </h4> <div className="flex flex-wrap gap-2 p-4 bg-muted/30 rounded border border-border/50"> {complexOptions.map(opt => ( <button key={opt} onClick={() => setSelected(opt)} className={`px-3 py-1 rounded text-xs transition-colors ${selected === opt ? 'bg-primary text-primary-foreground' : 'bg-card text-muted-foreground hover:bg-muted border border-border'}`} > {opt} </button> ))} </div> <p className="text-xs text-muted-foreground mt-2"> "Contact" を探してみてください。上のリストより時間がかかりませんでしたか？ </p> </div> </div> ); }; render(<HicksComparison />);
実践ガイドライン (Practical Guidelines)
実装チェックリスト
倫理的配慮 (Ethical Considerations)
- ダークパターン : ユーザーに特定の行動（高いプランの購入など）をさせたいがために、安価なプランを見つけにくくするなど、意図的に選択肢を複雑にする行為は避けるべきです。
- 過度な単純化 : 必要な情報まで隠してしまい、逆にユーザーが迷子になる（何を選べばいいかわからない）状態を作らないよう注意が必要です。