本文へ移動
つまずき地図Vibe Dev Navigator
メニュー

AIでサービスをつくる、非エンジニアのための実践ガイド

UI・動きカタログ

アコーディオン

Accordion

質問や見出しを押すと、その下へ説明が広がるUIです。

危険度: 通常情報整理

今すぐ使う

見た目と使いどころを確かめる

まず動きを試し、意図に合うかを見てください。停止しても内容が分かる設計です。

動きを試す

アコーディオン

短い見出しの下に、選んだ項目の内容が縦へ展開されます。

AIへの依頼文

アコーディオンを追加する依頼

危険度:通常

内容と対象をひと目確認してから使うと安心です。

分かる範囲で2か所だけ

自分の状況を入れる

空欄のままでもコピーできます。秘密情報は書かずにお試しください。

コピーされる依頼文を確認
目的:
補足情報を必要なときだけ開ける、分かりやすいアコーディオンを追加する。

現在の状態:
【ここに、何をしたらどうなったかを書く】

今回依頼すること:
見出しを押すと対応する内容だけが開閉するアコーディオンを追加してください。開閉状態を文字と支援技術へ伝え、キーボードで操作できるようにしてください。

変更してよい範囲:
【ここに、変更してよい画面やファイルを書く】

変更しない範囲:
情報の削除、見出し順の変更、重要な注意事項の初期非表示化は行わない。

完了条件:
- 見出しと開く内容の対応が明確である
- キーボードだけで開閉できる
- 開閉状態が見た目以外でも伝わる

実装前に確認すること:
- 対象とするファイル、現在の差分、関連する設定を読み取り、変更計画を短く示す
- 判断できない点があれば、変更する前に止めて質問する

実装後に報告すること:
- 変更したファイルと変更理由
- 実行した確認と、その結果
- 未解決の点や追加で確認が必要な点

使う前に確認
使った後に確認

10秒で分かる説明

短い見出しの下に、選んだ項目の内容が縦へ展開されます。

向いている場面

  • 補足説明が長い
  • よくある質問をまとめる

確かめる

使いすぎと操作の妨げを防ぐ

見た目の気持ちよさより、読みやすさと操作しやすさを優先します。

向いていない場面

  • 最初に必ず読むべき注意事項
  • 項目が少なく、そのまま表示した方が短い場合

アクセシビリティ

  • 見出しをキーボードで操作できるようにする
  • 開いているか閉じているかを支援技術へ伝える

理解する

名前と仕組みを知る

AIへ伝えるときに役立つ名前と、実装で確認するポイントです。

別名・探すときの言葉

折りたたみ・開閉パネル・よくある質問

実装時の確認

  • 見出しと内容の対応を一意にする
  • 開閉アイコンだけを操作対象にしない