# バナー制作ノート｜Race Analysis swimhub.jp トップ／メディアキットのバナー・カード制作向けの訴求・配色・注意。 --- ## 配色 - **ベース**: 白〜淡いシアングレー（ライト）／濃紺 `#0B1220`（ダーク）。 - **アクセント（グラデ）**: シアン `#06B6D4` / `#38BDF8` → ブルー `#2563EB`（左上→右下が標準）。ボタン・進捗・強調に使用。 - **ワードマーク／本文の濃色**: `#050505`（黒）。日本語サブは `#5B7280`。 - **House パレット併用可**: Deep Pool `#005A7C` / Pool Aqua `#49C6DC` / Lane Yellow `#FFD600` / Signal Orange `#FF7A1A`（SwimHub 共通。差し色に）。 - ロゴのRアイコンはグレーブルー（`#9FB1C1`→`#485C6D`）。背景がシアンと近い場合はアイコンが沈むので、白カードに載せるか余白を取る。 ## フォント - 見出し英字 = Inter（700/800）。日本語 = Hiragino Sans / Noto Sans JP。 - ロゴはアウトライン済みSVGを使えば環境差なし（`logo-race.svg`／`logo-race-horizontal.svg`）。 --- ## バナーに入れてよい訴求文（コピー案） 短い順。すべて事実準拠（誇張なし）。 - **タグライン**: 詳細レース分析をもっと多くのスイマーへ - **一言**: レース動画を、数字で振り返る。 - **機能訴求**: - 通過タイム・ストローク・泳速を、JASF準拠で。 - スタートからフィニッシュまで、同じものさしで。 - スマホ1台で、レース解析。 - 日本選手権と同じ基準のレース分析を、あなたのレースに。 - **JASF差別化**: 公式試合と同じ「ものさし」で測る、競泳レース分析ツール。 - **CTA**: ツールを開く ／ 使い方を見る ／ サンプルレースで試す ## 必須注釈（アカウント要否の文言案） バナーやカードに「保存」「マイページ」「比較」を訴求する場合は、下記いずれかを小さく添える： - 「※ 結果の保存・比較には SwimHub アカウントが必要です」 - 「※ サンプルは登録なしで試せます。保存にはログイン」 「ログイン必須」とは書かない（サンプルは未ログインで試せるため不正確）。 --- ## バナーに入れない方がよい表現 - 「無料」「完全無料」などの料金断定（価格は未確定）。 - 「業界初」「最高精度」「AIが自動分析」等の誇張（打刻は手動が正本。AIは比較・総評の補助のみ）。 - 「完全オフライン」「一切通信しない」（動画は端末内処理で送信されないが、変換時にコア部品をCDN取得するため）。 - 内部実装・セキュリティ用語（SSO・API・Supabase 等）。 --- ## バナー推奨スクショ（モック用） 右側にプロダクト画面を置くタイプのバナー向け。余白が少なく「動いている感」が出る順： 1. **desktop/02-analyzer-marking.png** — 打刻画面。動画＋パネル＋タイムラインで情報密度が高く、ツール感が伝わる。 2. **desktop/03-results-summary.png** — 結果ダッシュボード。数値とグラフで「分析できる」が一目。 3. **desktop/06-results-jasf-sheet.png** — JASF風シート。差別化（公式と同じ基準）の象徴。白背景でロゴも入る。 4. **mobile/03-analyzer-marking.png** / **mobile/04-results-summary.png** — 「スマホで使える」を見せる縦モック。スマホ枠にはめ込みやすい。 ### モック時の注意 - **選手名のトリミング**: 結果系（desktop 03–06 / mobile 04–05）はヘッダーに公開サンプルの選手名（大木涼平／前島遼太）が出る。特定選手を前面に出したくない場合は、ヘッダー帯をトリミングするか、選手名の出ない **02-analyzer-marking** / **mobile/02-config** を使う。 - **映像の扱い**: 打刻画面の動画フレームは大会の実映像（サンプル）。映像を出したくない／権利を避けたい場合は、動画のない結果画面・設定画面を使う。 - 端は実機の角丸・ステータスバーが入る場合がある。スマホ枠にはめるなら上下を少しトリミング推奨。 - ダークモードの画面が必要なら、テーマ切替後に撮り直し可能（本パッケージはライト基調）。