# ブランドアイデンティティ — bikedo.app

> bikedo.app のビジュアル・アイデンティティ・ガイド：ワードマーク、カラーパレット、タイポグラフィ、トーン＆ボイス。

Source: https://bikedo.app/ja/brand
Locale: ja

bikedo.app ブランドの使い方。

ワードマーク、パレット、タイポグラフィ、そして製品についての話し方の短いガイドです。パートナーサイト、プレスキット、コミュニティ投稿で BikeDo の素材を使うなら、これが正本です。

---

## ワードマーク

二色、二ウェイト、Clay のアクセント一つ。Inter Black、トラッキングをやや詰めて。

- ワードマークは常に 「bikedo.app」（小文字）。「.app」の部分は常に Clay。
- ワードマーク周囲のクリアスペースは「b」の字高以上。詰め込まない。
- 本文中では製品名を BikeDo（CamelCase）と書く — 「BikeDo App」「BikeDo API」は不可。

---

## アイコン

アプリのマーク — 暗いタイル上の Clay 色の小文字「b」。同じマークがアプリアイコン、ファビコン、フッターや署名のアイコンとして機能します。

![bikedo.app](https://bikedo.app/brand/app-icon-512.png)

- **アプリアイコン** — 角丸の正方形、Black/Charcoal 上の Clay の「b」。iOS と Android、App Store と Google Play。 ([PNG 1024](https://bikedo.app/brand/app-icon-1024.png))
- **ファビコン / 小** — 16〜32 px で読みやすいよう文字を大きく。ブラウザのタブ、ブックマーク、PWA。 ([.ico](https://bikedo.app/brand/favicon.ico))
- **ベクターソース** — 大きなレンダリングや印刷用のマスター SVG — 品質を保ったまま拡大縮小できます。 ([SVG](https://bikedo.app/brand/icon.svg))

- マークの色を変えたり、変形・回転させたりしないでください。比率と余白を保ってください。
- アイコンには暗い背景が組み込まれています — 別の暗いタイルの上に余白なしで置かないでください。

---

## 壁紙

ブランドカラーのデスクトップ壁紙 — charcoal 上のワードマーク、5K。マークのみ、またはスローガン入りを選べます。

![bikedo.app wallpaper](https://bikedo.app/brand/wallpapers/wallpaper-plain.jpg)

- **マークのみ** — charcoal 上に中央配置した bikedo.app マーク。スローガンなしのシンプル版。5120×2880。 ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-plain-5120x2880.png))
- **スローガン入り · PL** — ブランドスローガン入りのマーク。5120×2880 — 言語を選べます。 ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-pl-5120x2880.png))
- **スローガン入り · EN** — ブランドスローガン入りのマーク。5120×2880 — 言語を選べます。 ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-en-5120x2880.png))
- **ウルトラワイド** — ウルトラワイドやデュアルモニター向けのレターボックス。5120×1008。 ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-ultrawide-5120x1008.png))

**スマホ用**

- **マークのみ** — マークのみ、下半分に配置（ロック画面でも安全）。iPhone と Android。 ([iPhone](https://bikedo.app/brand/wallpapers/wallpaper-plain-phone-iphone-1290x2796.png) · [Android](https://bikedo.app/brand/wallpapers/wallpaper-plain-phone-android-1080x2400.png))
- **スローガン入り · PL** — スローガン入りのマーク、下半分に配置。iPhone と Android。 ([iPhone](https://bikedo.app/brand/wallpapers/wallpaper-pl-phone-iphone-1290x2796.png) · [Android](https://bikedo.app/brand/wallpapers/wallpaper-pl-phone-android-1080x2400.png))
- **スローガン入り · EN** — スローガン入りのマーク、下半分に配置。iPhone と Android。 ([iPhone](https://bikedo.app/brand/wallpapers/wallpaper-en-phone-iphone-1290x2796.png) · [Android](https://bikedo.app/brand/wallpapers/wallpaper-en-phone-android-1080x2400.png))

**ソーシャル / シェア**

シェアやSNSプレビュー用の Open Graph 1200×630 画像。

- **マークのみ** ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-plain-og-1200x630.png))
- **スローガン入り · PL** ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-pl-og-1200x630.png))
- **スローガン入り · EN** ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-en-og-1200x630.png))

---

## カラーパレット

キャニオン由来。暖色のアクセント（Clay）一つ、ダーク二つ、ニュートラル二つ、テキスト二つ。各色には役割がある。レーンを守る。

| Name | Hex | Role |
|------|-----|------|
| Clay | `#C45E3A` | 主要アクセント。CTA、リンク、フォーカス、アクティブ状態。ページ背景には使わない。 |
| Black | `#1A1A1A` | ページ背景（ダークサーフェス）。モバイル／Web のデフォルトキャンバス。 |
| Charcoal | `#2D2D2D` | ダーク面のカード／パネル背景。Black より一段明るい。 |
| Stone | `#4A4A4A` | ダーク面のボーダー、ディバイダー、ヘアライン。30〜60% 不透明度で繊細なセパレーターに。 |
| Text light | `#F5F5F5` | ダーク面のプライマリ文字。見出しと本文を Black/Charcoal の上に。 |
| Text muted | `#78716C` | セカンダリ文字、キャプション、ヒント、プレースホルダー。本文サイズで Black に対し WCAG AA。 |
| Sand | `#E8DED5` | 明るい面のボーダー（マーケティング、モックアップ）。Light bg と相性が良い。 |
| Light bg | `#F8F6F3` | ライトテーマ／モックアップのオフホワイト。純白は使わない。 |

---

## タイポグラフィ

製品と本文には Inter。マーケティング面の編集見出しには Playfair Display。混在禁止 — 一つの面に一つの役割。

- **Inter** — UI ＋ 本文
- **Playfair Display** — 編集見出し

Hierarchy:

- H1 — Playfair、48〜60px: _あなたのバイクのためのシンプルな家。_
- H2 — Playfair、28〜36px: _スプレッドシートなしの整備履歴。_
- 本文 — Inter、16〜18px: 整備を 2 タップで記録。写真を添える。ショップとシェア。所有者が変わってもバイクと一緒に履歴が移動する。
- キャプション — Inter、12〜13px: 最終整備：14 日前 ・ 1,240 km

---

## トーン＆ボイス

BikeDo はバイクに詳しい、落ち着いた頼れる友人のように話す。自信があり、具体的で、決して大げさにしない。叫ばない。

### する

- **ワードマークは「bikedo.app」、「.app」は Clay で使う。** — Inter Black/Bold と組み合わせ、呼吸させる — 「b」の字高以上のクリアスペースを。
- **本文中では製品名を「BikeDo」（CamelCase）と書く。** — 文の中では CamelCase の方が小文字ワードマークより読みやすい。
- **Clay は控えめに — Black/Charcoal ページ上で唯一のアクセントとして。** — すべてをアクセントにすると、何もアクセントでなくなる。Clay は次のアクションへ視線を導く。
- **見出しとボタンはセンテンスケースで。** — センテンスケースの方が人間らしく、企業的でない響き。

### しない

- **本文で「BikeDo App」「BikeDo Mobile」「BikeDo API」と書かない。** — あくまで BikeDo — アプリと API は実装の詳細であり、名前の一部ではない。
- **ワードマークの色分けを変えない。** — 「bikedo」は常に Text light（ダーク背景）か Charcoal（ライト背景）、「.app」は常に Clay。
- **Clay の上に Clay を載せたり「.app」を再着色したりしない。** — ブランドを支える識別シグナルが失われる。
- **純白を背景に使わない。** — Light bg（#F8F6F3）を使う。土系のパレットには純白は冷たく見える。
- **ワードマークの横にタグラインを並べない。** — タグラインが必要なら、ワードマークの下に Text muted で別行に置く。

---

ここに載っていないもの（ベクター・ロゴ、OG テンプレート、パートナーバッジなど）が必要なら、hello@bikedo.app までメールを。