情報を「段階的に伝える」UI
ユーザー自身で“理解の深さ”を調整できる仕組み。すなわち情報の主導権をユーザーに渡すUI。
目的：
・一度に全部見せない（圧迫感を減らす）
・興味のある箇所だけ展開（主体性を保つ）
・構造的に関連づけて提示できる（情報の階層を見せる）
・情報の呼吸が作れる
※これはリアルでも応用できます。
理解の余白を設けることで伝わりやすい。
伝わりやすいUIとは、“全部伝える”ことではなく、“必要なときに必要な量を伝える”こと。伝達の観点から、3つの心理的効果があります。
3つの心理効果
認知負荷が下がる
一度に多くの情報を出さないことで、脳が疲れにくい。見出しだけで全体像をつかみ、詳細は後から吸収できる。
事例：FAQページ・よくあるご質問
「料金はどのように決まりますか？」
「契約後のサポート体制は？」
などを折りたたむことで、ユーザーは自分に関係のある質問だけ見れます。
→ 読む前に理解できるUI
自己決定感が加わる
ユーザー自身が操作し情報を開く、選択ができる。受動的に読まされるのではなく、自ら取りに行く体感に変わる。
※採用ページ
「仕事内容」「求める人物像」「1日の流れ」などを段階的に開く。求職者は関心領域に集中できる。
→ 興味ある読みものを選べる
注意のリズムが生まれる
スクロールだけでは単調になりがちな体験を、開閉という行動でリズム化。開いた瞬間に意識が集中し、閉じた瞬間に理解が整理される。
※制作事例ページ
「課題」→「提案」→「成果」をアコーディオンで分ける。
クリックするたびに、プロセスを理解するテンポが生まれる。
→ 「読む」から「体感する」へ変換
・開閉アニメーションが遅い。操作ストレスでリズムが崩れる
・見出しの文言が抽象的。何を開くのかわからない。
・同時に複数開ける構造。情報が氾濫して階層が崩壊。
→目的と開閉スピード制御が必要。
ワークフローページ
「ヒアリング」「デザイン」「運用」 の各工程をアコーディオン化。見出しに「感情×目的」の軸を入れた。
コンセプトは方向性を一緒に探す時間。開くと工程の詳細・制作裏話・UX意図を小見出しで整理できる。
→ 制作の裏側まで見えるUIになり、共感を呼ぶかも