並び替えUI
表示順、メニュー順、優先順位をドラッグ操作や上下ボタンで変更します。
並び替えUIは、一覧、メニュー、表示ブロック、優先順位、作業順などを、利用者が画面上で直感的に変更するためのUIです。Roundtableでは、何を並び替えるか、保存する順序項目は何か、ドラッグだけでなく上下ボタンも必要か、公開側に見せる順序と管理側の操作順をどうそろえるかを先に整理してから実装範囲を決めます。
この機能でできること
表示順、メニュー順、カテゴリ内の優先順位、トップページの掲載順、よく使う項目の順番、作業ステップの並びなどを、管理画面や公開ページ上で変更できます。ドラッグ操作で大きく入れ替え、上下ボタンで細かく調整し、保存後は一覧や公開表示に同じ順番を反映できます。
順番をデータとして扱い、画面ごとの手作業修正を減らします。
並び替え対象と保存先を明確にすると、発注者、実装者、AIに指示する人が「どの順番を誰が変えられるか」を同じ前提で話せます。
よくある利用場面
表示順の管理
お知らせ、商品、事例、FAQ、バナー、資料などを、公開ページに出す順番で並べます。
メニューやカテゴリの整理
サイドメニュー、ヘッダーリンク、カテゴリ、フォーム項目などを、利用者が見やすい順番に調整します。
優先順位や作業順の変更
対応タスク、承認順、工程、チェックリストなど、先に処理したいものを上へ移動します。
プロンプト例
並び替え対象、操作方法、保存タイミング、同順位を許すか、公開側への反映範囲、権限をまとめて伝えると、単なる見た目のドラッグではなく運用できる順序管理になります。
プロンプト
FAQカテゴリ一覧に並び替えUIを追加してください。各行の左にドラッグハンドルを表示し、キーボードやスマホでも調整できるよう上下ボタンも置いてください。並び替え後は「表示順を保存」ボタンでsort項目へ保存し、公開FAQページにも同じ順番を反映してください。編集できるのは管理者だけにし、同じカテゴリ内だけで並び替えられるようにしてください。
この機能を使うときのポイント
並び替え対象レコード全体、カテゴリ内、公開中だけ、選択中グループだけなど、動かせる範囲を決めます。
操作方法ドラッグ操作だけにせず、上下ボタンや番号入力も必要かを確認します。
保存タイミング移動した瞬間に保存するか、最後に保存ボタンでまとめて反映するかを決めます。
公開側への反映管理側で変えた順番が、一覧、公開ページ、印刷、CSVなど、どこに反映されるかをそろえます。
この機能を実装するときのコツ
順序は画面表示だけで入れ替えず、`sort` などの保存項目を持たせてデータとして管理します。ドラッグ中の見た目、上下ボタン、保存前の変更表示、保存失敗時の戻し方をそろえ、対象外のカテゴリや権限外の行を動かせないようにします。大量データでは全件並び替えではなく、カテゴリ内や現在の絞り込み範囲だけを対象にするなど、保存範囲を明確にします。