プログレッシブディスクロージャーとは？意味・UI例・段階的開示の使い方

プログレッシブディスクロージャー（Progressive Disclosure）とは、最初からすべての情報を見せず、ユーザーの状況や操作に合わせて必要な情報を段階的に開示するUI設計です。日本語では「段階的開示」または「進行開示」と呼ばれます。

初めてアプリを開いた瞬間に、50個の機能ボタンが並んでいる。設定画面を開いたら、100個のオプションが一覧表示されている。フォームを開いたら、20個の入力項目が待ち構えている——これらはすべて「全部見せれば伝わる」という誤解から生まれるUIです。

人間の脳は、一度に処理できる情報量に限界があります。すべてを同時に見せることは、ユーザーに「全部理解してから使え」と命令することと同じです。結果として、ユーザーは圧倒されて離脱するか、重要な機能を見落としたまま使い続けます。

よくある失敗は「機能を隠すと気づかれない」という恐怖から、すべてを最初から表示してしまうことです。しかし、情報を増やすほど、ユーザーが実際に「見る」情報は減ります。

このページでは、UX心理の理論説明ではなく、フォーム、設定画面、オンボーディング、詳細設定などの画面設計で「何を最初に見せ、何を後から開示するか」を決めるための実務ルールとして整理します。背景理論から確認したい場合は、段階的開示のUXリファレンスも参照してください。

Progressive Disclosureと関連語の違い

検索では「progressive disclosure」「段階的開示」「進行開示」が混在します。UIXHEROでは、次のように整理します。

つまり、Progressive Disclosureは特定のUI部品名ではありません。アコーディオンやタブは実装手段であり、設計上の問いは「今見せるべき情報か、必要になってから見せるべき情報か」です。

1. 原則の定義

ユーザーが現在のタスクに必要な情報だけを最初に提示し、詳細・高度な情報は必要になったタイミングで段階的に開示する設計手法。

本質は「情報の時間的な設計」です。何を見せるかだけでなく、「いつ見せるか」を設計することで、ユーザーは圧倒されることなく、必要な情報に必要なタイミングでたどり着けます。Appleの設定アプリが「一般」「プライバシー」などのカテゴリから始まり、タップするごとに詳細が現れる構造がその典型例です。

Resource Articleとしての焦点は、概念の説明だけではありません。初期表示、開示トリガー、詳細領域、戻りやすさ、情報の匂いまで含めて、実装前の判断基準に落とし込むことです。認知負荷を下げるために隠す一方で、入口のラベルや要約には情報の匂いを残し、ユーザーが「開く価値がある」と判断できる状態を作ります。

2. いつ使うか（適用場面）

特に重要になるケース

• オンボーディング: 新規ユーザーに全機能を一度に見せると圧倒される。最初は核となる1〜2機能だけを見せ、習熟度に合わせて徐々に機能を開示する。
• 設定・詳細オプション: 「基本設定」と「詳細設定」を分け、ほとんどのユーザーが触らない高度な設定は折りたたんで隠す。
• 複雑なフォーム: 入力項目が多い場合、ウィザード形式（ステップ分割）で1画面に表示する項目数を絞る。
• コンテンツの要約と詳細: 記事一覧では見出しと概要だけを見せ、「続きを読む」で全文を開示する。

トレードオフが起きる場面

• 発見可能性の低下: 隠しすぎると「そんな機能があったのか」とユーザーが気づかない。パワーユーザーが必要とする機能は、隠しすぎず「見つけられる場所」に置く必要がある。
• ステップ数の増加: ウィザード形式は1画面の情報量を減らせるが、ステップ数が増えると「いつ終わるのか」という不安を生む。進捗表示（ステップインジケーター）が必須。

3. なぜ重要か（設計判断の核）

進行開示は「情報を隠す」のではなく、「情報を適切なタイミングに届ける」設計である。

設計判断の基準

• 「この情報は、ユーザーが今このタスクを完了するために必要か？」→ Noなら、後のステップか詳細エリアに移動する。
• 「この画面を初めて見るユーザーが、次に何をすべきかを迷わず理解できるか？」→ Noなら、情報を絞り込む。

優先順位の考え方

• 1. 主要タスクに必要な情報（最優先）: ユーザーが今やろうとしていることを完了するための最小限の情報。
• 2. 次のステップへの誘導: タスク完了後に何をすべきかが明確に示されているか。
• 3. 詳細・高度な情報: 必要な人が「もっと見る」「詳細設定」などで自分から開きに行ける場所に置く。

例外条件

• 法的な同意（利用規約・プライバシーポリシー）など、ユーザーが判断するために必要な情報を「シンプルにするため」に隠すのは倫理的に問題がある。透明性が求められる情報は開示を優先する。

4. 具体の設計ルール（チェックリスト）

最低ライン（Must - これ守らないと危険）

これがないと、ユーザーは情報の洪水に溺れます。

初期表示の情報量が絞られているか: 画面を開いた時に表示される情報が、そのユーザーの「今のタスク」に必要なものだけに絞られているか？全ての機能・設定・オプションが一度に表示されていないか？
詳細への導線が明確か: 隠した情報へのアクセス方法（「詳細を見る」「設定を開く」「もっと見る」など）が、必要なユーザーに見つけられる場所にあるか？完全に隠れていないか？
ウィザード形式に進捗表示があるか: 複数ステップのフォームやフローでは、「全部で何ステップあり、今どこにいるか」を示すステップインジケーターがあるか？

理想ライン（Better - できると強い/プロの品質）

「必要な時に必要なものが現れる」と感じられる状態です。

ユーザーの習熟度に応じて開示が変わるか: 初回利用時はガイダンスを表示し、慣れたユーザーには非表示にするなど、使用履歴や習熟度に応じて表示する情報量を調整しているか？
コンテキストに応じた詳細開示があるか: ユーザーが特定の操作をした時（エラーが起きた時、特定の設定を変更した時など）に、関連する詳細情報が自動的に表示されるか？
「戻れる」設計になっているか: ウィザード形式で前のステップに戻れるか？詳細を開いた後に元の状態に戻れるか？ユーザーが探索を恐れずに進める設計になっているか？

5. UI例

同じ「アカウント設定」でも、進行開示の有無でユーザーの感じる「使いやすさ」が大きく変わります。

改善プロセス

1. 情報の優先度分類: 画面内の全情報を「80%のユーザーが使う」「20%が使う」「5%以下が使う」の3段階に分ける。
2. 段階の設計: 「80%」は常時表示、「20%」はアコーディオン・タブ・詳細リンクで開示、「5%以下」は別ページ・詳細設定画面に移動する。
3. 導線の確認: 隠した情報へのアクセス方法が、必要なユーザーに「見つけられる」かを確認する。完全に隠れていないか？

6. 関連リンク

• 関連リファレンス（理論）: 段階的開示のUXリファレンス, 認知負荷
• 用語集（定義）: 段階的開示, 認知負荷, 情報の匂い, 情報過多
• 関連するUI原則（横）: 単純化 (Simplicity), チャンク化 (Chunking), 情報密度の最適化 (Information Density), スキャンしやすさ (Scannability), 検索・フィルター (Search & Filter)
• 関連するUIコンポーネント: Dropdown Menu（ドロップダウンメニュー）, Command Palette（コマンドパレット）, Filter（フィルター）, Accordion（アコーディオン）, Sheet（シート）, Context Menu（コンテキストメニュー）, Tooltip（ツールチップ）, Popover（ポップオーバー）, Hover Card（ホバーカード）, Floating Panel（フローティングパネル）

7. まとめ

今日から直せる一手 今担当している画面を開き、「この画面で80%のユーザーが使わない要素」を1つ特定してください。それをアコーディオン・詳細リンク・別ページのいずれかに移動しましょう。画面がすっきりし、残った要素がより目立つようになります。

チームに共有するなら一言 「全部見せることは、何も見せないことと同じだ。ユーザーに必要なのは、今必要な情報だけだ。」