🎨Auction Site MVP — WFインデックス

全画面のワイヤーフレームを一覧で確認できるページです。
各カードのクリックで該当WFを開けます。サムネはライブプレビュー（縮小表示）。

18
WF合計
9
購入者向け
9
管理画面
3
デザインシステム

📱 購入者向けWF

9 件

一般会員向け。商品閲覧から入札・落札・支払い・取引完了までの一連のフローをカバー。

TOP
B-01
TOP / ホーム
ヒーローバナー、カテゴリ、注目のオークション、ランキング、急上昇キーワード、もうすぐ終了、おすすめなど。ヤフオク風の情報密度。
PC 1200px
WFを開く
カテゴリ
B-02
カテゴリ／検索結果
サイドバーに12種類の絞り込み（容量・SIM・バッテリー等のスマホ特化）、4列グリッド、ソート、ページネーション。
PC 1200px
WFを開く
商品詳細
B-03
商品詳細
画像ギャラリー＋情報＋入札ボックス（sticky）。商品情報テーブル、出品者情報、入札履歴、Q&A、関連商品。
PC 2カラム
WFを開く
3画面
B-04
入札履歴ページ
通常閲覧／未ログイン時／終了済み の3パターン。LIVE自動更新、取消バッジ、自動延長フラグ、SMS認証★表示。要件 §11。
SP 3画面 §11
WFを開く
3画面
B-05
ログイン／会員登録
タブ切替ログイン・登録、SNSログイン3種（Google/Apple/LINE）、パスワード強度メーター、リセットステップ可視化。要件 §8。
SP 3画面 §8
WFを開く
3画面
B-06
SMS認証
電話番号入力→OTP入力→完了 の3ステップ。コンテキストバナーで入札の戻り先表示、音声通話フォールバック対応。要件 §8。
SP 3画面 §8
WFを開く
3画面
B-07
マイページ
プロフィール＋6セクション（支払い待ち／入札中／高値更新中／落札済み／ウォッチ／通知）。ボトムナビ5タブ、ログアウトはここのみ。要件 §9。
SP 3画面 §9
WFを開く
3ステップ
B-08
購入手続き
配送先・支払い方法→確認→完了 の3ステップ。72時間支払い期限カウントダウン、領収書サマリ、次のステップ案内。要件 §12。
※ 実装時はStripe等の決済プロバイダーに合わせて調整
SP 3ステップ §12
WFを開く
3画面
B-09
取引メッセージ
スレッド一覧→チャット→取引完了 の3画面。進行ステップ可視化、追跡情報カード、違反検知、定型文、画像添付、評価。要件 §15。
SP 3画面 §15
WFを開く

⚙ 管理画面WF（スタッフ）

9 件

自社スタッフ向け。スマホで素人スタッフが扱える出品UIが核。要件§4・§13・§14・§15・§16 を実現。

3画面
A-01
スタッフログイン
通常／エラー時／2段階認証 の3パターン。社内利用前提でID/メール併用、SSO（Google Workspace）対応、信頼端末30日。
SP 3画面
WFを開く
2画面
A-02
スタッフダッシュボード
4KPI＋今やるべきこと＋クイックアクション＋終了間近＋業績＋アクティビティ。ボトムナビ＋FAB、ハンバーガーメニュー。
SP 2画面
WFを開く
4ステップ
A-03
新規出品フロー
写真→商品情報（プルダウン＋テンプレ）→価格・期間→確認 の4ステップ。スタッフがスマホで迷わず出品完了できる。要件 §5。
SP 4ステップ §5
WFを開く
5状態
A-04
出品一覧
下書き／登録済み／出品中／終了／取消 の5状態タブ。状態ごとに利用可能なアクションが切り替わる。要件 §4。
SP 5状態 §4
WFを開く
5状態
A-05
出品詳細・編集
5状態それぞれの詳細画面。下書きはチェックリスト、出品中は情報量最大（残り時間/統計/質問/入札履歴）、終了は落札者カード。要件 §4。
SP 5状態 §4
WFを開く
3画面
A-06
公開質問対応
一覧→回答入力→違反検出 の3画面。定型文、過去Q&Aサジェスト、禁止コンテンツ自動検出（電話・SNS等）。要件 §15。
SP 3画面 §15
WFを開く
3画面
A-07
取引管理
一覧（5タブ）→詳細（タイムライン）→未払い処理 の3画面。落札後の支払い・発送・未払い処理を集約。要件 §12 / §13。
SP 3画面 §12 §13
WFを開く
3画面
A-08
入札者管理
一覧→詳細→ブラックリスト登録 の3画面。リスクスコア、unpaidCount、ブラックリスト管理を集約。要件 §13 / §14。
SP 3画面 §13 §14
WFを開く
3画面
A-09
監査ログ閲覧
タイムライン→ログ詳細→詳細フィルター の3画面。§16の11項目を全表示、12種actionType対応、関連ログ追跡、CSV出力。要件 §16。
SP 3画面 §16
WFを開く

🎨 デザインシステム

3 件

全画面共通のデザイントークン（CSS変数）とコンポーネントスタイル。実装時にimportして使用。

🎨
D-01
スタイルガイド（ビジュアル）
全コンポーネントを一覧で確認できるリビングスタイルガイド。カラー・タイポ・ボタン・カード・タブ等のサンプル＋実装方法。
styleguide.html
スタイルガイドを開く
📐
D-02
tokens.css（CSS変数）
カラー50種＋タイポ9段階＋スペーシング8段階＋ラジウス8種＋シャドウ6種を CSS variables で定義。
/design/tokens.css
tokens.css
🧩
D-03
components.css
再利用可能なコンポーネントスタイル。.btn / .input / .tag / .pill / .chip / .card / .tabs / .stepper / .toggle ／ モバイルパターン。
/design/components.css
components.css