固定アクションバー
保存、戻る、次へ、送信などの主要操作を画面下部や上部に固定します。
固定アクションバーは、入力フォームや詳細画面が長い場合でも、保存、戻る、次へ、送信、承認などの主要操作を常に押せる位置に置くUIです。Roundtableでは、どの操作を固定するか、補助操作と主操作をどう分けるか、スマホで画面内容を隠さない余白をどう確保するかを先にそろえてから実装範囲を決めます。
この機能でできること
長い登録フォーム、確認画面、詳細編集、承認画面、公開申込フォームなどで、利用者が画面の下までスクロールしても主要ボタンを見失わないようにできます。戻る、下書き保存、次へ、保存する、送信する、承認するなどを画面上部または下部に固定し、操作の迷いと押し忘れを減らします。
どの画面でも「次に押すボタン」が同じ場所にある状態を作ります。
主操作、戻る操作、補助操作の置き場所をそろえると、発注者、実装者、AIに指示する人が「どの操作を常時表示するか」を同じ前提で話せます。
よくある利用場面
長い入力フォーム
顧客登録、申込、アンケート、見積作成などで、スクロール中も保存や次へを押せるようにします。
確認・送信画面
入力内容を確認しながら、戻る、修正する、送信するなどの操作を常に見える場所に置きます。
承認・対応画面
申請詳細や問い合わせ履歴を読み進めても、承認、差し戻し、返信保存などの主要操作へすぐ移れます。
プロンプト例
固定する位置、表示するボタン、主操作の色、戻るボタンの扱い、スマホ時の並び方、固定バー分の余白をまとめて伝えると、画面ごとの操作位置がばらつきにくくなります。
プロンプト
公開申込フォームの画面下部に固定アクションバーを追加してください。左側に戻る、右側に下書き保存と送信するを配置し、送信するを主操作として強調してください。スマホではボタンが折り返しても本文を隠さないように下余白を確保し、確認画面でも同じボタン配置にしてください。管理側の編集画面でも同じ固定バーの見た目を使ってください。
この機能を使うときのポイント
固定する操作戻る、保存、次へ、送信、承認など、常に表示する必要がある操作だけに絞ります。
主操作の位置右側や下部など、画面内で一貫した場所に置き、補助操作と見た目を分けます。
本文との重なり固定バーが入力欄、エラー文、最終行を隠さないように、下余白や上余白を確保します。
スマホ表示幅が狭い画面ではボタン数、折り返し、押しやすい高さ、固定位置を確認します。
この機能を実装するときのコツ
固定バーは画面ごとの個別CSSで作り込まず、戻る領域と主操作領域を持つ共通構造に寄せます。Ajax保存や次へボタンを使う場合は、既存のボタン処理に固定バー用の見た目を付けるだけにし、保存処理自体は画面側の通常ルールを使います。固定表示にした分、本文の最下部が隠れない余白、モーダルやトースト通知との重なり、スマホでのキーボード表示時の見え方まで確認します。