アコーディオン
長い説明や設定項目を折りたたみ、必要な部分だけ開けます。
アコーディオンは、説明文、詳細条件、設定項目、注意事項などを見出し単位で折りたたみ、利用者が必要な部分だけを開いて確認するためのUIです。Roundtableでは「何を見出しに分けるか」「初期状態で開く項目はあるか」「開いた中で入力や保存を行うか」を先に決めておくと、画面の情報量と操作範囲を整理しやすくなります。
この機能でできること
長いヘルプ、FAQ、設定フォーム、詳細検索条件、権限別の説明、レコード詳細の補足情報などを、折りたたみ見出しに分けて表示できます。すべてを一度に見せないため、画面を短く保ちながら、必要な情報へすぐ到達できるようにできます。
情報量の多い画面を、見出し単位で読みやすくする部品です。
利用頻度の高い主要操作まで隠してしまうと見つけにくくなるため、常に見せる項目と折りたたむ項目を分けて考えます。
よくある利用場面
設定項目の整理
通知、表示、権限、連携などを見出しで分け、必要な設定だけを開いて確認します。
FAQ・ヘルプ
質問や説明見出しだけを並べ、知りたい項目を開いたときに回答や補足を表示します。
詳細検索・補足情報
普段は使わない検索条件、履歴、注意事項、詳細メモを折りたたんで画面を軽くします。
プロンプト例
「設定画面の項目が長いので、通知設定、表示項目、権限設定をアコーディオンに分けたい」のように、見出し名、初期状態、中に入れる項目、複数同時に開けるかをセットで伝えます。
プロンプト
顧客設定画面にアコーディオンを追加してください。見出しは「通知設定」「表示項目」「権限設定」とし、初期表示では通知設定だけを開いてください。各見出しの中には説明文と設定項目を入れ、複数の見出しを同時に開ける形にします。
この機能を使うときのポイント
見出しの分け方通知、表示、権限のように、利用者が中身を予想できる単位で分けます。
初期状態全て閉じる、先頭だけ開く、エラーがある項目を開くなど、表示開始時の状態を決めます。
開閉ルール複数同時に開けるか、1つだけ開くか、閉じられない項目を作るかを確認します。
入力と保存折りたたみ内で入力する場合、保存前の未入力やエラーをどう見せるかを決めます。
この機能を実装するときのコツ
初回は、説明表示や設定分類のように状態管理が少ない用途から作ると確認しやすくなります。入力フォームを中に入れる場合は、開閉しても入力値が消えないこと、エラー時に該当アコーディオンが見えること、スマホで見出しと入力欄が読みやすいことを合わせて確認します。