情報を隠すことで、クリック数（インタラクションコスト）が増えませんか？

確かにクリック数は増えますが、「認知的負荷（探す大変さ・読む疲れ）」は減ります。ユーザーにとっては「画面が複雑すぎて何もできない」状態の方が苦痛であるため、適切なクリック増加は許容されます。

何段階まで隠していいですか？

基本は2段階（概要→詳細）が理想です。3段階以上（メニューの中のメニューの中の...）になると、ユーザーは迷子になり（Navigation Fatigue）、情報を探すのを諦めてしまいます。

「レイジーローディング」と同じですか？

似ていますが、目的が異なります。レイジーローディングは技術的なパフォーマンス向上（表示速度）が目的ですが、段階的開示は心理的なユーザビリティ向上（理解しやすさ）が目的です。

すべての情報を「もっと見る」に隠していいですか？

いいえ。ユーザーがクリックするかどうかは、最初に見えている情報（情報の匂い：Information Scent）で判断します。魅力的な要約や、クリックする価値を予感させるトリガーがなければ、隠された情報は永遠に読まれません。

SEOへの悪影響はありますか？

Googleはタブやアコーディオン内のテキストもインデックスしますが、最初から表示されているテキストの方が重要度は高く評価される傾向にあります。最重要キーワードは隠さずに表示すべきです。

段階的開示 (Progressive Disclosure)

この記事の要点（UIXHERO視点） UIXHEROでは、段階的開示を「好奇心のペース配分、情報の封印解除」と捉える。本記事では、一度に全てを見せてユーザーを圧倒する愚を避け、興味と行動に応じて情報を小出しにすることで、見かけのシンプルさと機能の深さを両立させる設計を整理する。

段階的開示とは？

段階的開示とは、一度にすべての情報を提示するのではなく、 「最初は基本機能だけを見せ、詳細は必要な時にユーザーのリクエストに応じて表示する」 という情報設計の手法です。これにより、初心者は圧倒されずにタスクを完了でき、エキスパートは必要な詳細情報にアクセスできるという、両方のニーズを満たすことができます。

なぜ重要なのか

人間が一度に処理できる情報量には限りがあります（認知的負荷）。設定画面に100個の項目が並んでいると、ユーザーは「難しそう」と感じて離脱します。情報の優先順位をつけ、段階的に見せることで、スクリーンは整理され、ユーザーは迷わず行動できます。

日常の例

新聞の見出し : まず見出し（要約）を見て、興味があれば記事の本文を読む。
博物館の展示 : 最初に目に入るのは大きなキャプション。近づくと詳細な説明文が読める。
エレベーターの操作盤 : 通常は行き先階ボタンだけが見えているが、蓋を開けると「非常停止」や「運転切り替え」などの管理者用ボタンがある。

UXデザインでの活用事例

1. 「もっと見る」とアコーディオン

長い文章やリストを省略し、興味のあるユーザーだけが展開できるようにします。ブログのトップページや、Amazonの商品説明（スペック詳細）などで使われます。

2. 高度な設定 (Advanced Settings)

多くのアプリでは、一般的なユーザーが必要とする設定のみを表示し、マニアックな設定は「詳細設定」の中に隠しています。これは初心者の誤操作を防ぐ効果もあります。

3.ウィザード形式

長い入力フォームを、1ページずつ（ステップごとに）分割して表示するのも一種の段階的開示です。

実装例: 詳細設定の段階的開示

最初はシンプルな設定のみを見せ、エキスパートユーザー向けにオプションを展開するUIパターンです。

Interactive Example (Live)

const ProgressiveSettings = () => {
  const [showAdvanced, setShowAdvanced] = useState(false);
  const [quality, setQuality] = useState('high');

  return (
    <div className="p-8 bg-muted/30 rounded-xl max-w-md mx-auto">
      <h3 className="text-lg font-bold text-card-foreground mb-4">Export Settings</h3>
      
      {/* 
        [Primary View]
        全てのユーザーが必要とする、最も重要な設定項目。
        シンプルで迷わない。
      */}
      <div className="mb-6">
        <label className="block text-sm font-medium text-foreground mb-2">Image Quality</label>
        <div className="flex bg-card rounded-lg p-1 shadow-sm border border-border">
          {['low', 'medium', 'high'].map((q) => (
            <button
              key={q}
              onClick={() => setQuality(q)}
              className={`flex-1 py-2 text-sm rounded-md capitalize transition-colors ${quality === q ? 'bg-primary/20 text-blue-700 font-bold' : 'text-muted-foreground hover:bg-muted/30'}`}
            >
              {q}
            </button>
          ))}
        </div>
      </div>

      {/* 
        [Disclosure Trigger]
        興味のあるユーザーだけがアクセスできる「入り口」。
        負担にならないよう控えめに配置する。
      */}
      <div className="border-t border-border pt-4">
        <button
          onClick={() => setShowAdvanced(!showAdvanced)}
          className="flex items-center text-sm text-primary hover:text-blue-800 focus:outline-none"
        >
          <svg
            className={`w-4 h-4 mr-1 transform transition-transform duration-200 ${showAdvanced ? 'rotate-90' : ''}`}
            fill="none" viewBox="0 0 24 24" stroke="currentColor"
          >
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
          </svg>
          {showAdvanced ? 'Hide Advanced Options' : 'Show Advanced Options'}
        </button>

        {/* 
          [Secondary View]
          高度な設定項目。初期状態では隠されているため、認識負荷をかけない。
        */}
        {showAdvanced && (
          <div className="mt-4 pl-4 border-l-2 border-blue-100 space-y-4 animate-in slide-in-from-top-2 duration-200">
            <div>
              <label className="block text-xs uppercase text-muted-foreground font-bold mb-1">Format</label>
              <select className="w-full p-2 bg-card border border-border rounded text-sm">
                <option>JPG (Default)</option>
                <option>PNG</option>
                <option>WEBP</option>
              </select>
            </div>
            <div>
              <label className="flex items-center text-sm text-muted-foreground">
                <input type="checkbox" className="mr-2 rounded text-blue-500" />
                Remove Metadata (EXIF)
              </label>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

render(<ProgressiveSettings />);

実践ガイドライン (Practical Guidelines)

実装チェックリスト

頻繁に使われる機能を隠してしまっていないか？（80:20の法則を適用）

「もっと見る」や「詳細」のボタンは、クリック可能であることが明確か？

隠されている情報は、本当に「二次的」な情報か？

倫理的配慮 (Ethical Considerations)

重要な情報を隠さない : 契約条件、送料、プライバシー設定など、ユーザーの意思決定に必須の情報を「もっと見る」の中に隠すのは不誠実です（ダークパターンになり得ます）。
発見可能性 : あまりに深く隠しすぎると、機能が存在すること自体に気づかれません。「高度な設定」があること自体は示唆する必要があります。

参考文献

Nielsen, J. (2006). "Progressive Disclosure." Nielsen Norman Group. NNGroup Article
Spool, J. M. (2005). "The Power of Progressive Disclosure." User Interface Engineering. UIE Archive

ページを読み込み中...