progressive-disclosure

プログレッシブディスクロージャー - 適切なタイミングで適切な情報を見せる

プログレッシブディスクロージャーは、情報や操作を時間の経過に沿って順序立て、ユーザーが必要とするタイミングで必要なものだけを見せるインタラクションデザイン手法です。ユーザーが受け入れる準備ができるまで複雑さを先送りすることで、認知負荷を軽減します。

このスキルを使う場面

• 複雑な製品のオンボーディングを設計するとき
• 機能が豊富なインターフェースをシンプルにするとき
• 複数ステップのフォームやウィザードを作成するとき
• 管理パネルや設定ページを構築するとき
• 既存のユーザーに新機能を紹介するとき
• サポートへの問い合わせや混乱を減らすとき

主な概念

ディスクロージャーの階層

Level 0: Essential (always visible)
    |
    v
Level 1: Important (one click away)
    |
    v
Level 2: Useful (accessible but hidden)
    |
    v
Level 3: Advanced (buried intentionally)

80/20の法則を適用する

ユーザーの80％が必要とするのは、機能の20％です。その20％を目立つように表示し、残りを段階的に見せます。

+------------------------------------------+
|  Primary Actions (20%)                   |
|  [Action 1] [Action 2]                   |
+------------------------------------------+
|  v Advanced Options                      |
|    +------------------------------------+|
|    | Secondary (30%)                    ||
|    | [Option 3] [Option 4]              ||
|    +------------------------------------+|
|    |  v More Options                    ||
|    |    +------------------------------+||
|    |    | Tertiary (50%)              |||
|    |    | [Rare settings...]          |||
|    |    +------------------------------+||
|    +------------------------------------+|
+------------------------------------------+

プログレッシブディスクロージャーの種類

種類	仕組み	例
クリックして表示	展開／折りたたみ	「もっと見る」セクション
ホバーして表示	ツールチップ／ポップオーバー	ホバー時のヘルプテキスト
スクロールして表示	画面下に配置	長文コンテンツ
時間ベース	遅れて導入	機能のお知らせ
スキルベース	使用に応じて解除	高度な機能
役割ベース	権限レベル	管理者向けコントロール

分析フレームワーク

ステップ 1：現在のインターフェースを確認する

ユーザーに表示されるすべての要素をリストアップします。

要素	ユーザーのニーズ	頻度	現在の表示状態
[Element 1]	[Need]	[Daily/Weekly/Rare]	[Always/Sometimes/Hidden]
[Element 2]	[Need]	[Daily/Weekly/Rare]	[Always/Sometimes/Hidden]

ステップ 2：優先度で分類する

                    HIGH
                     |
    +----------------+----------------+
    |                |                |
    |  ESSENTIAL     |  CONTEXTUAL    |
    |  Always show   |  Show when     |
    |                |  relevant      |
FREQUENCY           |                NEED
    |                |                |
    |  ACCESSIBLE    |  HIDE          |
    |  One click     |  Deep menus    |
    |  away          |                |
    +----------------+----------------+
                     |
                    LOW

ステップ 3：ディスクロージャーのパターンを設計する

段階	表示するもの	次の段階を表示する方法
初期表示	[Core elements]	[Trigger to Level 1]
レベル 1	[Secondary elements]	[Trigger to Level 2]
レベル 2	[Advanced elements]	[Trigger to Level 3]

ステップ 4：理解度をテストする

• 展開しなくても、ユーザーは主要なタスクを完了できますか？
• 必要なときに、ユーザーは高度な機能を見つけられますか？
• 「展開」の手がかりは明確ですか？

出力テンプレート

## Progressive Disclosure Design

**Interface:** [Name] **Date:** [Date]

### Element Inventory

| Element | Priority  | Disclosure Level | Reveal Trigger |
| ------- | --------- | ---------------- | -------------- |
| [E1]    | Essential | Always visible   | -              |
| [E2]    | Important | Level 1          | [Trigger]      |
| [E3]    | Advanced  | Level 2          | [Trigger]      |

### Disclosure Hierarchy

**Level 0 (Always visible):**

- [Element list]

**Level 1 (One interaction):**

- Trigger: [How user reveals]
- Contents: [Element list]

**Level 2 (Two interactions):**

- Trigger: [How user reveals]
- Contents: [Element list]

### User Flow

1. User sees: [Initial state]
2. To access [feature], user: [Action]
3. System reveals: [New state]

### Success Metrics

| Metric               | Before  | After Target |
| -------------------- | ------- | ------------ |
| Task completion rate | [X%]    | [Y%]         |
| Time to complete     | [X sec] | [Y sec]      |
| Support tickets      | [X/mo]  | [Y/mo]       |

実例

例 1：Gmail のメール作成

レベル 0：宛先、件名、本文、送信 レベル 1：CC、BCC（「Cc」をクリックして表示） レベル 2：書式設定ツールバー（「A」をクリックして表示） レベル 3：機密モード、送信日時の設定（メニュー）

ほとんどのユーザーは CC／BCC を必要としないため、デフォルトでは非表示です。

例 2：Notion のプロパティ

レベル 0：ページのタイトルとコンテンツ レベル 1：基本プロパティ（クリックして展開） レベル 2：プロパティの追加、プロパティの設定 レベル 3：データベースビュー、リレーション、ロールアップ

新規ユーザーにはシンプルなページが表示され、上級ユーザーは複雑な機能を利用できます。

例 3：iPhone のカメラ

レベル 0：シャッターボタン、カメラの切り替え レベル 1：スワイプしてモードを切り替え（ビデオ、ポートレートなど） レベル 2：タップして露出／フォーカスを調整 レベル 3：高度なオプションは設定アプリで操作

ベストプラクティス

推奨事項

• 主要な操作をすぐに見えるようにする
• 展開できることを示す明確な手がかり（「もっと見る」、矢印など）を使う
• ディスクロージャーの状態に関するユーザーの設定を記憶する
• 深く隠れた機能には検索やフィルターを用意する
• 新規ユーザーと経験豊富なユーザーの両方でテストする

避けること

• 必須の機能を隠す
• よく使うタスクに何度もクリックを要求する
• 製品内で一貫性のないディスクロージャーパターンを使う
• 展開のきっかけが分かりにくいナビゲーション
• 見つけられないほど隠しすぎる

開示のための機能

パターン	使用する場面
「さらに表示」リンク	テキストコンテンツ、リスト
シェブロン／矢印	展開可能なセクション
「...」メニュー	アクション、オプション
タブ	並列するコンテンツカテゴリ
ホバーで表示	ツールチップ、補助的なアクション
モーダル／ドロワー	複雑なサブフロー

他の手法との組み合わせ

手法	組み合わせ方
ヒックの法則	各階層で表示する選択肢を減らす
認知負荷	ワーキングメモリの限界を考慮する
ハロー効果	まず重要な要素を磨き上げる
Jobs-to-be-Done	ユーザーのジョブを軸に整理する

リソース

• プログレッシブ・ディスクロージャー - Nielsen Norman Group
• Webインターフェイスのデザイン - Bill Scott