行ボタン
各行に編集、詳細、削除、複製、送信、承認などの操作を置きます。
行ボタンは、一覧に並ぶ1件ごとのデータに対して、その場で次の操作へ進めるための導線です。Roundtableでは「どの行に何の操作を置くか」「状態や権限で表示を変えるか」「押した後に詳細、ダイアログ、確認、実行のどれへ進むか」を言葉にしておくと、発注者、実装者、AIに指示する人の認識を合わせやすくなります。
この機能でできること
一覧テーブルやカード一覧の各行に、詳細、編集、削除、複製、メール送信、承認、差し戻し、ステータス変更、PDF表示などの操作を配置できます。利用者は対象データを見ながら、その行だけに関係する処理をすぐ実行できます。
1件ごとのデータに対する操作を、対象行の近くに置くための機能です。
画面全体や検索結果全体の操作はページボタン、1行単位の操作は行ボタンとして分けると、操作対象の誤解を減らせます。
よくある利用場面
一覧から詳細や編集へ進む
顧客、案件、申込、予約、請求などの一覧で、対象行の詳細確認や編集画面を開きます。
行ごとの実行処理を置く
メール送信、承認、差し戻し、複製、PDF作成など、対象データ1件だけに実行する処理を配置します。
状態に応じて操作を変える
未送信なら送信、申請中なら承認、完了済みなら閲覧のみなど、状態や権限に合わせてボタンを出し分けます。
プロンプト例
ボタン名、対象行、表示条件、確認の有無、完了後に一覧を更新するかをセットで伝えると、操作対象がぶれにくくなります。
プロンプト
申込一覧の各行に行ボタンを追加してください。ボタンは詳細、編集、複製、送信、承認、削除です。送信は未送信の行だけ、承認は申請中の行だけ表示してください。削除は管理者だけ表示し、押したときは確認モーダルを出してください。処理完了後は現在の検索条件を保ったまま一覧を再表示してください。
この機能を使うときのポイント
操作対象その行だけに対する操作か、検索結果全体に対する操作かを分けます。
表示条件権限、ステータス、期限、入力済み項目、承認状態によって出すボタンを決めます。
確認が必要な操作削除、送信、承認、差し戻しなど取り消しにくい処理は、確認モーダルやダイアログを挟みます。
ボタン数の整理操作が多い場合は主要操作だけを常時表示し、補助操作はメニューや詳細画面へ寄せます。
この機能を実装するときのコツ
管理側では、標準一覧やオリジナル画面の行操作として詳細、編集、削除、ajax-link、download-link、確認モーダル、ダイアログを組み合わせます。公開側では、ログイン不要の利用者が押してよい操作か、暗号化URLや本人確認が必要な操作かを先に分けます。行ボタンは一覧の横幅を圧迫しやすいため、モバイルでは縦積み、主要操作のみ表示、または詳細画面へ移す判断も必要です。