# バナー制作ノート — SwimHub 会員ポータル

swimhub.jp のメディアキット／トップバナーで SwimHub Portal を扱うときの指針。

## 1. ブランドの一言
個人スイマーの「ホーム」。**レース解析・ベストタイム・練習ログ**を集約するマイページに、**フォロー／フィード**のSNS層を載せた consumer プロダクト。明るく・モダン・前向き（競技の記録が"伸びていく"高揚感）。

## 2. 配色

### コア（これだけで成立する）
- **Primary Blue** `#2563EB`
- **Cyan / Sky** `#38BDF8`
- **Ink（テキスト）** `#0F1F33`
- 背景は **白 `#FFFFFF`**、ティント面 `#F7F9FC`

### ブランドグラデ（最重要アクセント）
- `linear-gradient(120deg, #2563EB 0%, #38BDF8 100%)`
- 強め版: `linear-gradient(120deg, #1D4ED8 0%, #0EA5E9 60%, #38BDF8 100%)`（OGP 等のフルブリード面で使用中）
- 用途: 主要ボタン、ワードマークの "Hub"、ヒーロー面の発光（blur な円形グロー）。

### サブ（強調・状態）
- Gold `#F5A623`（自己ベスト／表彰）
- Green `#16B981`（改善・ポジティブな差分 例 ▲ −0.21）
- Red `#EF4444`（通知）
- 罫線 `#E4EBF3` / 補助テキスト `#7585A0` / 副次テキスト `#3A4A60`

## 3. タイポグラフィ
- ラテン/数字: **Inter**（300–800、見出しは 800 ExtraBold）
- 日本語: **Noto Sans JP**（400–800）
- 記録の数字（タイム 53.12 等）は太め・詰め気味でヒーロー要素になる。`tracking-tight`。

## 4. UIトーン（バナーで再現したい雰囲気）
- ライト基調・**X(旧Twitter)風の白3カラム**。角丸 **18px** カード＋ソフトシャドウ。
- 「レース解析シェアカード」「自己ベストのミニカード」を**少し傾けてコラージュ**するのがアプリ内ヒーローの定番（AuthSplitLayout 参照）。スプラッシュは青系の blur グロー。
- 絵文字アクセント（❤️ いいね 等）で SNS のあたたかさを少し。

## 5. バナーに入れてよい訴求文（確定・アプリ内コピー由来）
- **「記録も、解析も、仲間も。スイマーのためのホーム。」**（メイン・確定）
- 「レース解析・ベストタイム・練習ログをひとつに。」
- 「自分の泳ぎを可視化しよう。」
- 「個人スイマーのためのマイページ ＋ SNS」
- 機能ワード（チップ的に使える）: フォローフィード／レース解析シェア／ベストタイム／練習ログ／AI総評／成長カルテ

## 6. バナーに入れない方がよい表現
- ❌ **競合名・比較**（例「Swimperia超え」「○○より上」）— 内部ポジショニング。社外公開素材に絶対載せない。
- ❌ **価格**（「無料」「月¥490〜」等）— freemium／月額は**未確定**。断定しない。
- ❌ **内部仕様・セキュリティ語**（「未成年の可視範囲」「opaque cookie」「RLS」等）。
- ❌ **技術スタック名**（Supabase / Cloudflare / React Router）。メディアキットに不要。
- ❌ 開発ステータスの軽率な断定（「ベータ」等）— 付すかはユーザー確認。

## 7. ロゴ運用
- 表記は**1語キャメルケース「SwimHub」**。`Swim Hub`／`SWIMHUB`／`swimhub` は不可。
- `Swim` = ink `#0F1F33`、`Hub` = ブランドグラデ。白背景前提。
- **暗背景**に置く場合は全文字を白 `#FFFFFF` に（暗背景版SVGは未提供→必要なら作成）。
- アイコンは青フルブリードの角丸スクエア＋白マーク。**マーク単体を切り出して引き伸ばし・再配色しない**（`icon/icon-512.png` 原本を使う）。
- ロックアップ（`logo/logo-swimhub-lockup.svg`）= アイコン＋ワードマーク。十分な余白（アイコン高さの 1/4 以上）を確保。

## 8. 撮影スクショの扱い（同梱後）
- スクショは未同梱（`screenshots/CAPTURE-GUIDE.md` 参照）。撮影したら **seed のダミーデータのみ**を使う。実ユーザー・実アカウントは映さない。
- seed の **未成年ユーザー mina** の画面・限定公開は使わない。成人・public の alice を使う。
- バナー映えする看板画面: **フォローフィード（/）** と **マイページ（/me）**、ブランド面として **/login の分割マーケ面**。