マトリョーシカ6人姉妹を見立てたアコーディオンUIです

単なる隠す・出すではない

アコーディオン（開閉式）は、多くの情報をコンパクトにまとめ、ユーザーが必要な情報だけを展開できるUIです。これにより、スクロールを減らし、視覚的な負荷を軽減できます。アイデア次第では、情報伝達のリズムやテンポをデザインできます。
 
それでは、アコーディオンUIを活用できるコンテンツをいくつかご紹介します。
 

1. よくある質問 (FAQ) 形式

これは最も一般的な使い方です。質問リストを閉じられた状態で表示し、ユーザーが知りたい質問をクリックしたときだけ回答を展開できます。ページ全体が質問と回答で埋め尽くされるのを防げます。
 

2. ステップ・バイ・ステップのプロセス

複数の手順からなる手続きを説明するのに役立ちます。申し込み手順、設定ガイドなど「ステップ1」「ステップ2」…と区切り、各ステップの内容をアコーディオン内に格納します。ユーザーは今どのステップにいるのかが明確になります。
 

3. 製品・サービス仕様

製品のスペックやプランの比較などに利用できます。「基本情報」「技術仕様」「対応OS」「レビュー」など、属性ごとの見出しをアコーディオンのヘッダーにし、詳細をその中に含めます。ユーザーは必要な情報を見つけやすくなります。
製品ページを簡潔に保てます。
 

4. 記事・レシピなどの目次

長文コンテンツのナビゲーションとして活用できます。記事の大見出しを表示し、クリックすると該当セクションへジャンプできます。ユーザーは記事全体の構成を把握しやすくなります。
 

5. カテゴリ別の一覧・リスト

大量のアイテムやカテゴリを整理して表示するのに便利です。複数のカテゴリ（例: 洋服の「トップス」「ボトムス」「アウター」など）のリストをアコーディオンのヘッダーにし、カテゴリをクリックすると、それに属するアイテムのリストが表示できます。フィルタリング機能と似た役割を果たし、画面のスペースを有効活用できます。