マイページ情報設計ガイド¶

1. 背景と目的¶

本ドキュメントは /docs/specifications/BtoB発注システム要件 (最新).csv で示されたマイページ関連要件（要件No.2,3,6-9,29,31,32,40-48,51-55）を、二層ナビゲーション構造で実装するための情報設計指針を整理する。
目的は多岐にわたる顧客向け情報（お知らせ、注文・請求、配送先、特典、キャンペーン等）を混在させず、会員ステータスやモードに応じた表示制御を利用者が理解しやすい形で提供することである。

上位ナビ（サイドバー）: マイページの主要業務単位ごとに「ダッシュボード」「注文・請求」「配送先・モード」「特典・ポイント」「キャンペーン／通知設定」を並べる。
各セクション内タブ／カード: 上位ナビで選んだ領域の中で、表示すべき情報密度に応じてタブ・カード・リストを組み合わせる。

上位セクション	サブタブ構成	対応要件	表示制御の要点
ダッシュボード	お知らせ / キャンペーン / クイックリンク	No.2,3,4,5	会員ステータス・導入状況・購入可否で内容を出し分ける
注文・請求	注文履歴 / 請求書DL / 予約状況	No.18-21,40,41	予約注文や請求書ダウンロード条件をバッジで提示
配送先・モード	既定発送先 / 新規登録 / モード設定	No.6-9,31,32	直送モード切替と発送先CSV出力を同画面で運用
特典・ポイント	残高 / 利用履歴 / 自動控除設定	No.43-48	有効期限順の並びと名称カスタムに対応
キャンペーン／通知設定	適用中 / 条件未達 / 営業向け共有	No.29,51-54	条件計算結果を即時反映し、差分を案内

お知らせカード: ログイン直後に会員ステータス別のお知らせを表示し切替できるようにする（No.2）。カードヘッダーでステータス名を明示し、複数ステータスがある場合は優先順位ルールを設定する。
キャンペーンバナー: 適用キャンペーンのみ表示（No.3）。カルーセル型にしてバナー毎に適用条件ラベルを付与。
クイックリンク: 「購入可能商品へ」「ユーザ直送モード切替」等、現在のモードや導入状況に応じて有効なアクションのみ表示（No.4-9）。

注文履歴タブ: 予約注文を含む場合は aggregate 親注文を前面に出さず、実受注である子注文を通常受注/予約受注でグルーピング表示し、各注文カードに「請求書DL可」バッジを付ける（No.18-21,41）。
請求書ダウンロードタブ: 支払方法が前入金 or 個別指定顧客のみボタンを活性化し、条件説明をヘルプテキストで表示（No.40-41）。
予約状況タブ: 欠品予約と通常注文を分け、送料計算が別個になる要件を注記する。予約受注は出荷時期別に分割されるため、出荷予定日と関連受注番号を確認できることを前提にする（No.21）。

モード概要カード: 画面冒頭で現在モードを色分け表示し、切替トグルと説明テキストを並べる。誤操作防止要件を満たすため、切替時は確認ダイアログを表示（No.6-9）。
既定発送先タブ: 事前登録済みの発送先リストから選択（No.31）。
新規発送先タブ: SMILE納品先CSV形式でのダウンロード導線と採番ルール記載欄を設ける（No.32）。
CSVバッチ操作: 受注CSVと同時出力できない場合の注意表示を固定ヘッダーで示す（No.32）。

顧客プロファイルカード: ステータス、直送モード可否、導入ブランド、支払方法の条件などを冒頭にまとめ、各セクションで参照できるようにする（No.2-9,33-34）。
状態バッジ: 各要件で条件付き表示（請求書DL可否、ポイント利用可否等）が多いため、統一した色と文言でバッジスタイルを定義する。