bikedo.app
サインイン

ブランドアイデンティティ

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

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

Markdown / LLM 用ガイド全体をテキストでコピー — LLM プロンプトやパートナーキットに貼り付け可能。

ワードマーク

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

bikedo.app

黒の上

bikedo.app

明るい背景の上

bikedo.app

モノクロ(最終手段)

b.

小(ファビコン/アプリアイコン)

ワードマークは常に 「bikedo.app」(小文字)。「.app」の部分は常に Clay。

ワードマーク周囲のクリアスペースは「b」の字高以上。詰め込まない。

本文中では製品名を BikeDo(CamelCase)と書く — 「BikeDo App」「BikeDo API」は不可。

アイコン

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

アプリアイコン

アプリアイコン

角丸の正方形、Black/Charcoal 上の Clay の「b」。iOS と Android、App Store と Google Play。

ダウンロード · PNG 1024
ファビコン / 小

ファビコン / 小

16〜32 px で読みやすいよう文字を大きく。ブラウザのタブ、ブックマーク、PWA。

ダウンロード · .ico
ベクターソース

ベクターソース

大きなレンダリングや印刷用のマスター SVG — 品質を保ったまま拡大縮小できます。

ダウンロード · SVG

マークの色を変えたり、変形・回転させたりしないでください。比率と余白を保ってください。

アイコンには暗い背景が組み込まれています — 別の暗いタイルの上に余白なしで置かないでください。

壁紙

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

マークのみ

マークのみ

charcoal 上に中央配置した bikedo.app マーク。スローガンなしのシンプル版。5120×2880。

スローガン入り · PL

スローガン入り · PL

ブランドスローガン入りのマーク。5120×2880 — 言語を選べます。

スローガン入り · EN

スローガン入り · EN

ブランドスローガン入りのマーク。5120×2880 — 言語を選べます。

ウルトラワイド

ウルトラワイド

ウルトラワイドやデュアルモニター向けのレターボックス。5120×1008。

スマホ用

マークのみ

マークのみ

マークのみ、下半分に配置(ロック画面でも安全)。iPhone と Android。

スローガン入り · PL

スローガン入り · PL

スローガン入りのマーク、下半分に配置。iPhone と Android。

スローガン入り · EN

スローガン入り · EN

スローガン入りのマーク、下半分に配置。iPhone と Android。

ソーシャル / シェア

マークのみ

マークのみ

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

ダウンロード
スローガン入り · PL

スローガン入り · PL

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

ダウンロード
スローガン入り · EN

スローガン入り · EN

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

ダウンロード

カラーパレット

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

Clay

#C45E3A

主要アクセント。CTA、リンク、フォーカス、アクティブ状態。ページ背景には使わない。

Black

#1A1A1A

ページ背景(ダークサーフェス)。モバイル/Web のデフォルトキャンバス。

Charcoal

#2D2D2D

ダーク面のカード/パネル背景。Black より一段明るい。

Stone

#4A4A4A

ダーク面のボーダー、ディバイダー、ヘアライン。30〜60% 不透明度で繊細なセパレーターに。

Text light

#F5F5F5

ダーク面のプライマリ文字。見出しと本文を Black/Charcoal の上に。

明るい色 — Charcoal もしくは Black のテキストと組み合わせる。

Text muted

#78716C

セカンダリ文字、キャプション、ヒント、プレースホルダー。本文サイズで Black に対し WCAG AA。

Sand

#E8DED5

明るい面のボーダー(マーケティング、モックアップ)。Light bg と相性が良い。

明るい色 — Charcoal もしくは Black のテキストと組み合わせる。

Light bg

#F8F6F3

ライトテーマ/モックアップのオフホワイト。純白は使わない。

明るい色 — Charcoal もしくは Black のテキストと組み合わせる。

タイポグラフィ

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

UI + 本文

Inter

いろはにほへと ちりぬるを わかよたれそ つねならむ

編集見出し

Playfair Display

いろはにほへと ちりぬるを わかよたれそ つねならむ

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 テンプレート、パートナーバッジなど)が必要なら、[email protected] までメールを。

最新情報をチェック

リリースのお知らせを受け取る。

登録すると、BikeDo からのメール受信に同意したことになります。いつでも配信を停止できます。プライバシーポリシー