タブ切替

詳細、履歴、添付、設定などの情報を同じ画面内で切り替えます。

タブ切替は、同じ対象に紐づく複数の情報を、ページ移動せずに見比べるためのUIです。Roundtableでは「何を同じ対象として扱うか」「どのタブを最初に開くか」「タブを切り替えても入力中の状態を残すか」を先に言葉にしておくと、画面構成と実装範囲のずれを減らせます。

この機能でできること

顧客、案件、予約、請求、プロジェクトなどの詳細画面で、基本情報、対応履歴、添付ファイル、設定、コメント、関連データを同じ画面内に整理できます。情報を一度に並べすぎず、利用者が今見たい内容へすぐ切り替えられるため、画面の密度を保ちながら作業しやすくできます。

同じ対象の情報を、意味ごとの面に分ける部品です。 タブは画面を増やさずに情報を整理できますが、別の業務手順や別レコードを扱う場合は、詳細ページやサイドパネルに分けた方が分かりやすいことがあります。

顧客・案件詳細 基本情報、対応履歴、添付、請求、メモを同じ詳細画面で切り替えて確認します。

設定画面 基本設定、通知設定、権限、表示項目などをタブに分け、設定項目を探しやすくします。

成果物・レポート 要件、業務フロー、画面案、DB設計、テスト結果などを、同じプロジェクト内で切り替えます。

「顧客詳細画面に、詳細、履歴、添付、設定の4タブを置きたい」のように、対象画面、タブ名、各タブの表示項目、初期表示、保存や更新の扱いをセットで伝えます。

プロンプト 顧客詳細画面にタブ切替を追加してください。タブは「詳細」「履歴」「添付」「設定」とし、初期表示は詳細にします。履歴タブでは対応履歴を時系列で表示し、添付タブでは登録済みファイルと追加ボタンを表示してください。

対象顧客1件、案件1件、設定画面全体など、タブで切り替える情報の基準を決めます。

タブ名詳細、履歴、添付、設定のように、利用者が中身を予想できる短い名前にします。

初期表示最初に開くタブ、エラー発生時に戻すタブ、URLや保存後に維持するタブを確認します。

入力状態タブを切り替えたときに入力途中の内容を残すか、保存前の警告を出すかを決めます。

初回は、表示だけのタブと更新できるタブを分けて考えると整理しやすくなります。すべてのタブに保存処理や検索、ファイル追加を同時に入れると確認範囲が広くなるため、まずは主要タブの表示と切替を作り、更新処理、添付追加、権限制御、URL保持は必要度の高いものから追加します。