UIXHERO
#439
心理学・認知バイアス
#439

段階的開示

段階的開示

別名・表記:Progressive Disclosure

UIXHERO Definition

最初は最も重要な情報だけを表示し、詳細や高度な機能はユーザーのリクエストに応じて段階的に開示する手法。認知負荷を下げ、初心者を圧倒しないための設計原則。

概要

情報を提示する際、初心者に必要な「基本」と、上級者が必要とする「詳細」を分け、最初は基本だけを見せて、ユーザーの要求に応じて段階的に詳細を開示するデザイン手法。 「一度にすべてを見せると、ユーザーは情報量に圧倒されて混乱する」という問題を解決するためのアプローチ。認知負荷は下がるが、インタラクションコストは増える可能性がある。

UXでの活用

  • アコーディオンUI: 「よくある質問」などで、質問文だけを一覧表示し、クリックした時だけ回答を表示することで、全体の視認性を高める。
  • 「もっと見る」ボタン: コンテンツを省略表示し、興味があるユーザーだけが続きを読めるようにすることで、画面のスクロール量を減らす。
  • 設定ウィザード: 複雑な設定を一画面に詰め込まず、ステップバイステップで必要な情報だけを入力させていくUIデザイン。

💡 使いどころ

複雑な設定画面や、多機能なダッシュボード。「詳細設定」として隠しておき、必要な人だけが開けるようにする。

⚠️ 注意点・誤用

本当に重要な機能を隠してしまうと、ユーザーは存在に気づかない(カバレッジの問題)。「何が隠されているか」がラベルから推測できるようにする。

具体例

  • 「もっと見る」ボタン
  • アコーディオンメニュー
  • Basic mode / Advanced mode
出典・参考文献:
  • Nielsen, J. (2006). Progressive disclosure. Nielsen Norman Group.
  • Norman, D. A. (2013). The Design of Everyday Things: Revised and Expanded Edition. Basic Books.
  • Sweller, J. (1988). Cognitive load during problem solving: Effects on learning. Cognitive Science, 12(2), 257–285.
  • Tidwell, J. (2010). Designing interfaces: Patterns for effective interaction design. O'Reilly Media.
作成: 2026年1月26日
更新: 2026年2月14日

読んだ内容を、自分の画面に当てるとき

UIXHEROは、記事を書くほかに、画面の検品・判定、デザインシステムの構築、実装と改善の伴走を受けています。何を頼めばいいか決まっていない段階の相談も、同じ窓口で受けます。

UIXHEROに頼めることを見る

※ 記事の内容についての質問や、書いてほしいテーマの要望も同じ窓口で受けています

この記事をシェアする
シェア: