ミラーの法則
人が一度に覚えておける項目はおよそ 7±2 個。ただし本当に効くのは数ではなく「意味のあるかたまり（チャンク）」に分けること。
Miller's Law
なぜ効くか
George Miller の 1956 年の論文「The Magical Number Seven」は、短期記憶の容量が項目の種類によらず 7 前後に見える、という観察をまとめたもので、同時に「1 桁ずつ覚えるより、意味のある単位にまとめると覚えられる量が増える」ことを指摘した。UI に持ち込むときに「メニューは 7 個まで」と読むのは誤りで、Miller 自身が数の限界を主張したわけではない。役に立つのは後半のチャンキングで、電話番号をハイフンで区切る、6 桁のコードを 1 桁ずつのマスに分ける、長いフォームを 3 段階に割る、設定項目を見出しで群に分ける、といった形で現れる。区切りは記憶の負担を減らすだけでなく、入力位置の確認（今何桁目か）も助ける。
UIでの当て方
- 01長い数字や識別子は、意味のある単位で区切って表示・入力させる（電話番号・カード番号・確認コード）。
- 02項目が多い一覧や設定は、見出しで 3〜6 個ずつの群に分け、群の中では並びの規則（頻度順・五十音順）を揃える。
- 03長いフォームは段階に分け、今どの段階かを常に示す。1 段階に入れる欄は一画面で見渡せる数に留める。
- 04候補一覧や検索結果は「商品／記事／カテゴリ」のように種類で群にし、群の見出しを飛ばして読めるようにする。
誤用・反例
- 「7 個まで」を機械的に当てはめてナビを削り、必要な入口を隠す。
- 区切りを見た目だけに使い、入力欄では区切り文字の入力を弾いてエラーにする。
この原則を体現するパーツ
- 入力
ワンタイムコード入力
OTP Input
6桁の区切り入力フォーム。1文字入力で次マスへ自動移動、Backspaceで前へ戻る。全桁入力で確認演出、ペースト時は各マスに自動分配。
- JS
- 入力
入力マスク
Input Mask
電話番号を入力すると自動整形（03-1234-5678 形式）。数字以外は無視され、入力がスムーズになる。
- JS
- 入力
ステップフォーム解説あり
Multi-Step Form (Wizard)
3ステップ（基本情報→住所→確認）を進捗バー付きで切り替え。次へ/戻るボタンと必須チェックを備え、最後に入力内容を確認表示する。
- JS
- クリック
インセットグループリスト実例あり
Inset Grouped List
iOS の設定画面の型。角丸の白いグループを灰色の地に浮かせ、セクション見出し・アイコン・値・シェブロン・トグルを行に並べる。トグルはその場で切り替わる。
- JS
- クリック
サイドバーナビ解説あり
Sidebar Navigation
セクション見出し付きの縦型ナビ。折りたたみグループはクリックで開閉し、現在の項目は藍色でハイライトされる。管理画面やダッシュボードの定番。
- JS
- ホバー
グループ分けサジェスト
Grouped Search Suggestions
入力に応じて候補を「商品／カテゴリ／記事」の見出し付きで出す。↑↓ で見出しをまたいで移動し、Enter で確定。何が起きるかは行の右に「商品ページ」「一覧」と示す。
- JS
- 静的
サイトマップ型フッター
Sitemap Footer
4カラムのリンク群・言語切替・SNS アイコン・法務リンクをまとめたフッター。320px では2カラムに畳まれ、法務リンクは横に流れます。
- CSSのみ
出典
- Nielsen Norman Group別サイト ↗チャンキングが読みやすさ・記憶を助ける理由と、テキスト・数字での実例。
- Laws of UX別サイト ↗Miller's Law の項。Miller（1956）の原典を参照している。