段階的開示（プログレッシブディスクロージャー）入門｜情報過多を防ぐUI設計

こんにちは！UIデザイナーのYunyです。

プロダクトの機能を充実させようとするほど、画面上の入力項目やボタンの数は増えていきます。
しかし、親切心のつもりですべての選択肢を1画面に並べてしまうと、かえってユーザーを混乱させてしまいます。

自分自身も以前、業務管理画面のUI設計で大きな失敗をした経験があります。
「設定項目をすべて見せておけば迷わないだろう」と考え、1画面に20項目以上の入力欄や注釈テキストを詰め込んで提案したところ、クライアントから「どこから手を付ければいいか分からない」「威圧感があって使うのが怖い」と指摘され、全面的なレイアウト見直しになりました。

この「多機能にしたいが、画面はシンプルに保ちたい」という矛盾を解決する原則が、プログレッシブディスクロージャー（Progressive Disclosure：段階的開示）です。
今回は、情報過多を防ぐ基本概念から、実務で使える4大展開パターン、隠しすぎて失敗しないための境界線ルールまで具体的に整理します。

1. プログレッシブディスクロージャーとは？情報過多を防ぐ基本概念

プログレッシブディスクロージャーは、ユーザビリティの第一人者であるヤコブ・ニールセン（Jakob Nielsen）が体系化したインタラクション設計の標準原則です。
画面の初期状態では「80%のユーザーが日常的に使う基本的な情報・操作」だけをクリーンに表示し、残りの「20%のユーザーだけが求める高度な設定や二次的情報」は、ユーザーが能動的にクリックやタップを行ったときに初めて表示します。

この設計が極めて有効な理由は、UIデザインが常に抱えている「使いやすさと多機能性のジレンマ」を論理的に解消できる点にあります。
初心者にとっては画面がシンプルで操作を学習しやすく（Learnability）、上級者にとっては必要なときに高度な機能へ素早くアクセスできる効率性（Efficiency of use）を両立できます。

なぜ「全部並べるUI」は破綻するのか？

画面上に選択肢を無秩序に並べると、人間の脳は強い認知負荷（Cognitive Load）を感じて処理落ちを起こします。
心理学における「ヒックの法則」が示す通り、人間が選択肢の中から1つを選び出すまでの時間は、画面上の選択肢の数が増えるほど対数的に増加します。

さらに、人間のワーキングメモリ（作業記憶）が一度に保持できる情報数は、一般に「4±1個」程度と限られています。
最初から20個の設定項目を視界に突きつけられると、ユーザーは何が重要なのかを判断できず、操作を諦めて画面を閉じてしまいます。

そのため、優れたUIデザイナーは「画面に何を置くか」よりも「初期表示から何を隠し、どのタイミングで見せるか」に細心の注意を払って設計します。
必要な情報が必要な瞬間にだけ目の前に現れる状態を作ることが、プログレッシブディスクロージャーの本質です。

2. 段階的に開示する4大UIパターンと使い分け基準

プログレッシブディスクロージャーを実際の画面に落とし込む際、情報の性質や作業コンテキストに応じて適切なUIパターンを選択する必要があります。
実務で頻繁に使われる代表的な開示パターンは、以下の4つのアプローチに分類されます。

① インライン展開（アコーディオン / 詳細トグル）

同一画面のレイアウトを保ったまま、ボタンの押下によってその場（インライン）で領域が広がるパターンです。
「高度な設定を表示」「FAQの回答を見る」のように、前後の文脈を保ったまま少しの追加情報を取り出したい場面に最も適しています。

コンポーネントを設計する際は、アコーディオンの開閉状態（展開前 / 展開後）を縦並びのレイアウトで構築します。
開閉トリガーには回転するChevronアイコン（下向き・上向き）を添え、クリックで領域が展開することを視覚的に示します。
ただし、展開時にページ全体の高さが変わり、後続の要素が下へ押し出されるため、頻繁に開閉する項目を縦に何十個も連続して並べる構成は避ける必要があります。

② レイヤード展開（モーダル / ボトムシート / ドロワー）

現在の画面の上に半透明のオーバーレイを敷き、別のサーフェス（階層）を重ねて詳細情報を表示するパターンです。
複雑な絞り込みフィルターや、項目の詳細編集、確認ダイアログなど、元の画面から一時的に集中を切り替えて行う作業に適しています。

レイヤード展開を採用する場合、PCでは画面中央に浮遊するモーダル、スマートフォンでは親指で操作しやすいボトムシート（ハーフモーダル）を活用するのが実務の標準です。
作業が完了したら「保存」または「閉じる」操作で迷わず元の画面へ復帰できるため、ユーザーが現在地を見失うリスクを最小限に抑えられます。

③ ステップ式展開（マルチステップフォーム / ウィザード）

アカウント登録や購入手続き、初期設定などの長い入力プロセスを、論理的な手順（ステップ1、ステップ2、ステップ3）に分割して順番に開示するパターンです。
全30項目の入力欄が1画面に連なる巨大なフォームを、1画面あたり3〜5項目ずつに分解して提示することで、ユーザーの心理的抵抗を大幅に軽減できます。

ステップ式展開を機能させるためには、全体のステップ数と現在の進捗を示す「ステッププログレスバー」の併設が必須です。
「あとどれくらいで完了するのか」という全体像が見えているからこそ、ユーザーは途中で挫折せずに次のステップへと進むことができます。

④ オンデマンド展開（ツールチップ / ヘルプアイコン / ポップオーバー）

画面上のテキストに添えられた「？」アイコンやリンクに対して、ホバーまたはタップしたときだけ小さな吹き出しを表示するパターンです。
専門用語の解説や、パスワードの文字数条件、入力例の補足など、「知りたい人だけが読めばよい補助情報」をスマートに配置できます。

ツールチップの最大のメリットは、主要なUIのレイアウトや文字量を一切圧迫しない点にあります。
ただし、スマートフォンのようなタッチデバイスではホバー操作が存在しないため、タップで表示・枠外タップで非表示となるインタラクションを正しく設計することが重要です。

段階的開示の4大UIパターン比較まとめ

3. 隠しすぎて失敗しないための「3つの境界線ルール」

プログレッシブディスクロージャーは強力な設計原則ですが、使い方を誤ると「必要な機能が見つからない不親切なUI」に転落します。
画面をシンプルにしたい一心で重要な情報まで奥深くに隠してしまう設計ミスを防ぐため、以下の3つの境界線ルールを実務の基準として設定してください。

ルール①：80%のユーザーが必要とするPrimary情報は絶対に隠さない

プログレッシブディスクロージャーの基本は、「主要タスク（Primary）は露出させ、例外タスク（Secondary）を段階化する」ことです。
大多数のユーザーが利用する検索窓、主要アクションボタン、基本的な入力項目をアコーディオンやモーダルの奥に隠してはなりません。

自分自身も過去のレビューで、「画面をスッキリさせたい」という理由から、配送先住所の入力フォーム全体をアコーディオンの中に隠してしまったことがあります。
その結果、ユーザーテストで「どこに入力すればいいのか分からない」と全員が迷ってしまい、Primary情報の不可視化がどれほど致命的かを実感しました。
隠してよいのは、あくまで「知らなくても目的を達成できる高度なオプション」だけに限定します。

ルール②：開示トリガーのラベルは具体的に記述する

ボタンやリンクのテキストが「詳細」「その他」「設定」のように抽象的すぎると、ユーザーはその中に何があるのかを推測できません。
中身が分からないボタンをわざわざクリックしてくれるユーザーはごく少数です。

開示トリガーのラベルには、展開されるコンテンツの内容を具体的に予告する文言を用います。
たとえば、「詳細」ではなく「詳細な通知タイミングを設定する」、「その他」ではなく「配送日時の指定オプションを開く」のように記述します。
何が表示されるのかが事前に予測できるからこそ、ユーザーは目的を持って安心してクリックできます。

ルール③：展開状態から迷わず戻れる「閉じる導線」をセットにする

情報を開示するトリガーを設置したら、それと対になる「折りたたむ」「閉じる」ための導線を必ずセットで設計します。
一度展開したアコーディオンが二度と閉じられなかったり、開いたモーダルの閉じるボタンが見当たらなかったりすると、ユーザーは画面を元に戻せずストレスを抱えます。

アコーディオンであれば再度のクリックで元のコンパクトな状態に戻り、モーダルであれば右上「×」ボタンだけでなく背景オーバーレイのタップやESCキーでも閉じられる可逆性を担保します。
「いつでも初期のクリーンな状態に戻れる」という安心感があるからこそ、ユーザーは自由に画面を探索できます。

4. 次のステップ：あわせて深掘りしたい知見

プログレッシブディスクロージャーをさらに深く実務に応用するためには、関連する認知心理学の基礎理論や、パーツ設計のルールをあわせて押さえておくことが効果的です。
以下の記事でも、画面設計の根拠となる基準を詳しく解説しています。

人間が選択肢に直面したときの意思決定負荷や、情報のチャンキング原則を理論的に学びたい方は、こちらの記事も参考にしてみてください。

UIデザインに効く認知心理学の法則5選｜ヒック・フィッツ・ヤコブの実務応用

UIデザインの意思決定を感覚論から論理的な設計へ変える認知心理学の法則5選（ヒック、フィッツ、ヤコブ、ミラー、フォン・レストルフ）を解説。現場のFigma実務ですぐに使える設計基準を網羅します。

段階的開示をカードコンポーネントの中で展開する際の枠線やシャドウ、余白のバランス感覚を掴みたい方は、以下の記事で具体的な整理基準を確認できます。

カード型UIの設計ルール｜枠線・影・余白の使い分けと情報整理術

カード型UIの設計ルールと情報整理のコツを現役デザイナーが解説。枠線・影・背景色・余白の境界線4パターンの使い分けから、詰め込みすぎを防ぐ視覚階層、クリック領域のアクセシビリティまで具体的に整理します。

レイヤード展開（モーダルやボトムシート）をスマートフォン実務で破綻なく実装したい場合は、以下の使い分けマトリクスが役立ちます。

モーダル・ボトムシートの使い分け基準｜スマホで失敗しないUI選定ルール

スマホUIでモーダル、ボトムシート（ハーフモーダル）、ドロワー、画面遷移のどれを使うべきか迷っていませんか？操作の不可逆性と情報量の2軸で整理したUI選定マトリクスを現役デザイナーが詳しく解説します。

まとめ：段階的な情報開示が使いやすさと多機能性を両立させる

UIデザインにおける「親切さ」とは、持っている情報をすべて一度に差し出すことではありません。
初期表示ではユーザーの目的達成に必要な主要タスクを明快に整え、詳細な設定や補助情報を求めるユーザーにだけ適切なタイミングで次の選択肢を提供する設計が大切です。

画面が情報過多で整理がつかなくなったときは、ぜひ「どの情報を初期に表示し、何を段階的に開示できるか」という視点でレイアウトを見直してみてください。