プログレッシブ・ディスクロージャ
最初は必要最小限だけを見せ、求められたときに詳細を段階的に開く。初心者の迷いを減らしつつ、上級者の機能も失わない。
Progressive Disclosure
なぜ効くか
Jakob Nielsen が 1990 年代から使ってきた設計手法で、根拠は「一度に見せる情報が多いほど、どれを見ればいいかの判断に時間がかかり、誤りも増える」という観察にある。すべてを最初から並べると、めったに使わない設定が毎回の操作の邪魔になり、逆に隠しすぎると存在に気づかれない。要点は「主要な操作は隠さず、二次的なものは 1 手で開ける場所に置く」こと。Web UI では、FAQ の折りたたみ、主ボタンの隣の▼から出る別動作、AI の推論過程の折りたたみ、フォルダの開閉、編集者アイコンの「+4」、フォームの段階分けとして現れる。開く操作には何が出るかの手掛かり（矢印・件数・ラベル）が要る。
UIでの当て方
- 01画面に出す項目を「全員が毎回使う」「一部が時々使う」に分け、後者は折りたたみ・メニュー・次の段階に送る。
- 02隠した内容の存在は見せる。「+4 人」「4 秒 思考しました ▸」のように、開く前に中身の量と種類を予告する。
- 03開閉の状態は aria-expanded で伝え、開いた内容は開閉ボタンの直後に置いて読み上げ順を保つ。
- 04段階を増やしすぎない。1 回開けば目的の情報に届く深さに留め、開いた先にさらに折りたたみを置かない。
誤用・反例
- 主要な操作（購入・保存・検索）をメニューの奥に隠し、画面を空にしすぎる。
- 折りたたみの中に必須の注意事項（料金・解約条件）を入れ、開かないと気づけない状態にする。
この原則を体現するパーツ
- クリック
アコーディオン解説あり
Accordion
クリックで項目が開閉し、アイコンが回転。一度に1つだけ開く排他制御で高さを抑える。
- JS
- クリック
ネイティブ開閉アニメ（details）
Native Details Disclosure
HTMLの<details>だけで、中身がふわっと高さアニメーションしながら開閉する。::details-contentとcalc-size()でJSなしのアコーディオン。
- CSSのみ
- クリック
思考ステップ開示
Chain-of-Thought Disclosure
「4秒 思考しました」の折りたたみをタップすると、AIの推論ステップが1つずつチェックされながら展開する。ChatGPT/Claude系の定番。
- JS
- クリック
スプリットボタン
Split Button
主操作ボタンの右端に▼トグルが連結し、押すと別動作（名前を付けて保存など）のメニューが開く。外側クリック・Escで閉じる。
- JS
- クリック
ツリービュー
Tree View
フォルダを開閉できるファイルツリー。クリックでフォルダが開き、キャレットが回転する。階層はインデントで表現し、キーボード（矢印キー）でも操作できる。
- JS
- ホバー
アバターグループ
Avatar Group
共同編集者のアイコンが少しずつ重なって並び、末尾に「+N」で残数を表示。ホバー/タップで扇状に広がって全員が見える。
- JS
- 入力
ステップフォーム解説あり
Multi-Step Form (Wizard)
3ステップ（基本情報→住所→確認）を進捗バー付きで切り替え。次へ/戻るボタンと必須チェックを備え、最後に入力内容を確認表示する。
- JS
- クリック
サイドバーナビ解説あり
Sidebar Navigation
セクション見出し付きの縦型ナビ。折りたたみグループはクリックで開閉し、現在の項目は藍色でハイライトされる。管理画面やダッシュボードの定番。
- JS
関わるカテゴリ
出典
- Nielsen Norman Group別サイト ↗Jakob Nielsen による段階的開示の定義・利点・失敗例。