フレームワーク活用ガイドひとことで言うと#
ユーザーに最初から全部見せるのではなく、必要なものだけを、必要なタイミングで段階的に見せるUI設計の考え方。初心者は基本機能だけで使い始められ、上級者は必要に応じて詳細設定にアクセスできる。
押さえておきたい用語#
- 段階的開示
- 情報や機能を一度にすべて見せず、段階的に表示するUI設計パターンの総称。
- コンテキストトリガー
- ユーザーの操作や条件に応じて自動的に追加情報を表示する仕組み。例: 「法人」選択時に法人番号欄が出現。
- ウィザード形式
- 複雑な操作を1ステップずつ順番に進めるUI。フォームの分割表示が代表例。
- 認知負荷（Cognitive Load）
- ユーザーの脳にかかる情報処理の負担。一度に見せる情報量が多いほど増大する。
プログレッシブディスクロージャーの全体像#
こんな悩みに効く#
- 機能が増えて画面が複雑になり、初心者が使いこなせない
- 設定画面の項目が多すぎて、どこをいじればいいかわからないと言われる
- フォームが長すぎて途中離脱が多い
基本の使い方#
画面に含まれるすべての情報・機能を使用頻度と重要度で3段階に分類する。
- 必須（常時表示）: ほとんどのユーザーが毎回使う
- 重要（1クリックで表示）: 一部のユーザーが頻繁に使う
- 詳細（さらに深い階層）: 上級者がたまに使う
ポイント: ユーザー調査やアクセスログで実際の使用頻度を確認する。「開発者が大事だと思う」ではなく「ユーザーが実際に使う」を基準にする。
必須レベルの情報だけを初期表示にする。
- フォームなら必須項目だけ表示し、任意項目は「詳細設定」に隠す
- ダッシュボードなら主要KPIだけ表示し、詳細は展開式にする
- ヘルプはツールチップやインラインで表示し、詳細はリンク先に
目安: 初期表示で「これは何？」と思う要素が1つもないのが理想。
追加情報をどうやって表示するかのインタラクションを決める。
- クリック/タップ: 「詳細を見る」「もっと見る」ボタン
- ホバー: ツールチップ、プレビュー
- コンテキスト: 特定の条件を満たしたときに表示（例：「法人」を選んだら法人番号入力欄が出る）
- ウィザード形式: ステップごとに1画面ずつ進む
ポイント: 「隠れていること」がユーザーにわかるようにする。存在自体が見えないのは「隠す」ではなく「無い」と認識される。
具体例#
Before: タスク作成画面に「タイトル、説明、担当者、期限、優先度、ラベル、見積もり時間、繰り返し設定、依存関係、カスタムフィールド×5」が全部表示されていた。新しいタスクを1個作るのに画面をスクロールする必要があった。
After:
- 初期表示: タイトル＋担当者＋期限のみ（3項目）
- 「詳細を追加」クリック: 説明、優先度、ラベルが展開
- 「高度な設定」クリック: 見積もり時間、繰り返し、依存関係が展開
- カスタムフィールドは管理者のみ「カスタマイズ」から表示
結果: タスク作成の平均所要時間が42秒から18秒に短縮（57%高速化）。タスク作成数自体も1.5倍に増加。
Before: 保険の申し込みフォームが1ページに32項目。入力完了率は28%。ユーザーの多くが中盤で離脱。
After: 4ステップのウィザード形式に分割。
- ステップ1: 基本情報（名前・生年月日・性別）— 3項目
- ステップ2: 保障内容の選択 — スライダーで3項目を調整
- ステップ3: 健康に関する告知 — 該当する項目だけ表示（コンテキストトリガー）
- ステップ4: 支払い方法 — 2項目
プログレスバーで現在地を表示。各ステップで「戻る」ボタンを常設。
結果: フォーム完了率が28%から56%に向上（2倍）。平均入力時間は12分から8分に短縮。
Before: 写真編集アプリの編集画面にフィルター、トーンカーブ、カラーグレーディング、レイヤー、マスクなど40以上のツールが一覧表示。初心者の7日継続率は15%。
After: 3段階の段階的開示を導入。
- 基本モード（デフォルト）: フィルター、明るさ、コントラスト、彩度の4ツールのみ
- 「もっとツールを見る」: 色温度、シャープネス、ビネットなど12ツール
- 「プロモード」トグル: トーンカーブ、レイヤー、マスクなど全機能を解放
結果: 初心者の7日継続率が15%から38%に向上。上級者のプロモード利用率は92%を維持し、機能削除なしでシンプルさを実現。
やりがちな失敗パターン#
- 隠しすぎて見つからない — 重要な機能まで深い階層に埋めてしまうと、ユーザーが「この機能がない」と思ってしまう。よく使われる機能は1クリック以内でアクセスできるようにする
- 開示のヒントがない — 「詳細設定」のリンクが小さすぎたり目立たなかったりすると、存在に気づかない。追加情報があることを視覚的に示す（矢印アイコン、テキストリンクなど）
- 段階が多すぎる — 3回クリックしないと目的の設定にたどり着けないのは深すぎる。原則2段階までにとどめる
- 初心者と上級者の導線を分けない — 全員に同じ段階を強制すると、上級者は毎回展開操作が面倒になる。モード切替やショートカットで上級者の効率も確保する
まとめ#
プログレッシブディスクロージャーは、情報を段階的に見せることで「シンプルさ」と 「機能の豊富さ」 を両立する設計手法。すべてのユーザーに全機能を見せる必要はない。初心者は基本だけで使い始め、上級者は必要なときに深掘りできる。このバランスが良いUXの要になる。