🎨 Auction Site MVP — スタイルガイド

すべての画面で共通して使うデザイントークンとコンポーネントの一覧。
実装時は design/tokens.css と design/components.css をインポートすると、本ページと同じ見た目になります。

ブランド方針

参考はヤフオク。情報密度高め、購入判断を高速化するUI。

トーン・キーワード

信頼感 情報密度 透明性 緊急感（タイマー） プロフェッショナル スマホファースト

設計原則

カラー

ブランド、セマンティック、ニュートラルの3層構成。

Brand（プライマリ：赤）

brand-50
--color-brand-50
#fff7f5
brand-100
--color-brand-100
#fff0ef
brand-200
--color-brand-200
#f3d6d2
brand-500 ★
--color-brand-500
#c0392b
brand-600
--color-brand-600
#a8311f
brand-700
--color-brand-700
#8b0000

Semantic（意味色）

success-500
--color-success-500
#1a7c3c
warning-500
--color-warning-500
#b85c00
info-500
--color-info-500
#2a78a8
danger-500
--color-danger-500
#c00

Status（出品状態）

下書き
--status-draft
登録済み
--status-registered
出品中
--status-active
終了
--status-ended
取消
--status-cancelled

Neutral（背景・テキスト）

bg
--color-bg
#f5f5f5
surface
--color-surface
#ffffff
text
--color-text
#333333
text-muted
--color-text-muted
#888888
dark-900
--color-dark-900
#1a1a1a

タイポグラフィ

和文と欧文を混在させる前提。'Helvetica Neue', Arial, 'Hiragino Sans', 'Yu Gothic'

3xl / hero
¥128,000
22px / 700
2xl / title
マイページ
18px / 700
xl / heading
商品の詳細
16px / 700
lg / section
入札履歴
14px / 700
base / body
iPhone 15 Pro 256GB ナチュラルチタニウム
13px / 400
md
セカンダリ本文。ヒントや補足情報など。
12px / 400
sm
小さめのメタ情報
11px / 400
xs
最小キャプション・時刻表示
10px / 400
xxs / badge
BADGE
9px / 700

スペーシング

4px ベースの倍数。margin / padding / gap で使用。

--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
20px
--space-6
24px
--space-8
32px
--space-10
40px

ラジウス（角丸）

xs / 3px
sm / 4px
md / 6px
lg / 8px
xl / 12px
2xl / 16px
pill
full

シャドウ

shadow-sm
shadow-md
shadow-lg
shadow-xl
brand
success

ボタン

タッチターゲット 44px 以上を確保。色は用途で選択。

バリエーション
サイズ
フル幅 / 無効
HTMLサンプル
<button class="btn btn-primary">入札する</button> <button class="btn btn-secondary">ウォッチ</button> <button class="btn btn-primary btn-block">フル幅</button>

入力フィールド

📧
登録メールアドレスを入力してください
🔒 表示
⚠ 認証情報が一致しません

タグ / バッジ / ピル / チップ

Tag（カードのメタ情報）
通常 ブランド 支払い完了 期限切迫 配送中 未払い
Badge（数値）
3 12 128 🔔 5
Pill（状態表示）
下書き 登録済み 出品中 終了 取消
Chip（選択可能フィルター）
すべて iPhone Android SIMフリー 即決のみ 送料無料
Countdown Pill
残り 1日 3時間 残り 00:28

カード

基本カード
カード（border）

.card

カード（elevated）

.card-elevated

カード（flat）

.card-flat

商品カード例（ステータス別の左ボーダー）
iPhone 14 128GB ブルー
残り 02:14 ・ 支払い期限切迫
Pixel 8 Pro
高値更新されました（あなた ¥85,000 → 現在 ¥87,000）
iPhone 15 Pro 256GB
最高入札中 ¥128,000
Pixel 7a 128GB
発送済み・到着待ち
Xperia 1 V
出品取消（商品破損のため）

タブ

出品状態タブ（5タブ）
下書き3
登録済み2
出品中12
終了28
取消4

ステッパー

出品フロー（4ステップ・ステップ3進行中）
✓
✓
3
4
ステップ 3 / 4：商品情報を入力

トグル

自動延長
終了5分前の入札で5分延長
早期終了を許可
即決前でも終了できる

アイコン

stroke-based の独自アイコンセット。CSS mask-image 方式で実装しているので currentColor による色制御・font-size でのサイズ制御が効きます。

使い方
<span class="ic ic-money"></span> <span class="ic ic-alert ic-lg"></span> /* 色は親要素の色を継承 */ <span style="color: var(--color-brand-500)"> <span class="ic ic-target"></span> 入札中 </span>
サイズ（xs=12 / sm=14 / md=16 / lg=20 / xl=24 / 2xl=32）
セマンティック（マイページ section 用）
支払い待ち
.ic-money
高値更新
.ic-alert
入札中
.ic-target
ウォッチ
.ic-heart
ウォッチ済
.ic-heart-fill
落札済み
.ic-trophy
通知
.ic-bell
設定
.ic-settings
カテゴリ（商品種別）
スマホ本体
.ic-phone
ケース・フィルム
.ic-shield
充電器
.ic-plug
イヤホン
.ic-headphone
ウォッチ
.ic-watch
SIM・メモリ
.ic-sim
ジャンク・パーツ
.ic-tool
その他
.ic-package
UI（汎用）
user
.ic-user
mail
.ic-mail
lock
.ic-lock
pin
.ic-pin
card
.ic-card
book
.ic-book
search
.ic-search
plus
.ic-plus
check
.ic-check
close
.ic-x
info
.ic-info
chevron
.ic-chevron-right
logout
.ic-logout
使用例（実用ケース）
支払い待ち
2件 ／ 残り 24時間以内
高値更新されました
SMS認証済 良質ユーザー

モバイルパターン

スマホファーストの共通UI部品。

アプリヘッダー / ボトムナビ
‹ マイページ 🔔
（コンテンツ領域）
🏠ホーム
📋カテゴリ
♡ウォッチ
🔔通知
👤マイページ
FAB / 固定アクションバー
‹ 出品管理 🔍
（リスト表示）

📦 実装時の使い方

HTMLから2ファイルをimportするだけで、このスタイルガイドと同じ見た目を再現できます。

<!-- HEAD --> <link rel="stylesheet" href="/design/tokens.css"> <link rel="stylesheet" href="/design/components.css"> <!-- またはコンポーネント側で import --> @import url('/design/components.css'); /* tokens.css も自動で読み込まれます */ /* カスタムスタイルでもCSS変数を使える */ .my-component { color: var(--color-brand-500); padding: var(--space-4); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

📁 ファイル構成

/Users/.../auction-site-mvp/design/ ├── tokens.css /* CSS変数の定義 */ ├── components.css /* 共通コンポーネント（.btn, .card, .tab など） */ └── styleguide.html /* このファイル（参考用ビジュアル） */