# Start Analysis ロゴ素材

SwimHub の解析ツール「**Start Analysis（競泳スタート分析）**」用ロゴ一式。
制作: swimhub.jp（`~/dev/media-swim`）CWD セッション / 2026-06-09。

## 配置の目安
- ロゴSVG/PNG → リポジトリの `src/assets/logo/` など
- `favicon/` の中身 → サイト root（`public/`）

## ファイル一覧
| ファイル | 用途 |
|---|---|
| `logo-start.svg` | **フルロゴ・マスター（推奨）**。テキスト=ベクター、Sアイコン=高解像PNGをbase64内包＝1ファイル完結 |
| `logo-start-dark.svg` | ダーク背景用（白文字版） |
| `logo-start-horizontal.svg` | 横1行コンパクト版（Sアイコン + "Start Analysis" のみ。ヘッダー用） |
| `logo-start-full-white.png` | 高解像ラスター（白背景） |
| `logo-start-full@3x.png` / `@2x.png` | 高解像ラスター（背景透過） |
| `logo-start-horizontal.png` | 横版ラスター（透過） |
| `logo-start-dark-preview.png` | ダーク版の見え方確認用（配置用ではない） |
| `icon-start.png` | S アイコン単体（透過・約660×683） |
| `favicon/` | favicon・アプリアイコン一式 |

## favicon の設置
`favicon/` の中身をサイト root に置き、`<head>` に:
```html
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- PWA を使うなら icon-192.png / icon-512.png を manifest に -->
```

## デザイン仕様（改変時の基準）
- **アイコン**: 提供された S シルエットに、グレーブルーのローポリ面分割を適用（gpt-image-2 生成）。
  - グレーブルー: 明 `#9fb1c1` 〜 暗 `#485c6d`（左上→右下グラデ）。
  - ⚠ アイコンは**ラスター**。SVGには base64 内包。完全ベクター化が必要なら制作元へ。
- **ワードマーク "Start Analysis"**: システム太字 `font-weight: 800`、`letter-spacing: -1`、色 `#050505`。
- **右上 日本語 "競泳スタート分析"**: `font-weight: 700`、`letter-spacing: 1.5`、色 `#5b7280`（ダーク版 `#9fb1c1`）。"Start Analysis" の右端（"s"）に右揃え。
- **クレジット "by SwimHub"**: `by` `#5b7280` / 波マーク `#050505` / `SwimHub` `#050505`・`font-weight: 900`。波マーク＋SwimHub は **SwimHub 本体ロゴそのまま**の比率。
- **フォント**: `-apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif`（システムフォント前提）。別フォント環境で厳密に揃えたい場合はテキストのアウトライン化を推奨。

## 姉妹ロゴ
同体系で **Race Analysis（競泳レース分析）** あり（`../race-analysis/`）。
