LUUP（ループ） DESIGN.md

LUUP（https://luup.sc/）のデザイン仕様書。 電動キックボード・電動アシスト自転車のシェアリングサービス。都市の移動インフラを目指すモビリティプラットフォーム。 実サイトの computed style 実測（2026-06-09 取得）に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: 白を基調にティールグリーン #00b6ac のアクセントを要所に配し、都市のモビリティサービスらしいクリーンで近未来的な印象を形成。装飾は最小限に抑え、余白で呼吸させるミニマルな構成
• 密度: 本文の line-height は 1.5 と標準的。見出しはタイトな line-height 1.0 で大きくダイナミックに立てる。情報密度は低〜中程度で、白い空間が多い
• キーワード: ミニマル、ティールアクセント、Roobert の国際的テック感、軽いウェイト、都市モビリティ
• 特徴:
  • 欧文フォントに Roobert（Display Foundry 製のジオメトリックサンセリフ）を最優先。テック企業やスタートアップに好まれる現代的な書体で、LUUP のブランドアイデンティティの柱
  • 和文フォントは Noto Sans JP → 游ゴシック → ヒラギノ角ゴシック Pro の順にフォールバック
  • 全体の font-weight は 400（Regular）で統一。見出しもボールドにしない。軽さ・軽快さを全面に出す設計
  • ブランドカラーは #00b6ac（ティール）。CTA のテキスト色、アクセントスパン、アプリダウンロードボタン等で使用
  • #04a6a0（やや深いティール）がアプリダウンロード CTA の背景に使われ、#00b6ac との微妙な使い分けがある
  • ページ背景は純白 #ffffff、セクション背景に #f7f7f7（クールグレー）を敷いて階層を作る
  • Bulma CSS フレームワーク（is-size-*, has-text-* クラス）をベースにした WordPress サイト
  • ダークフッターセクション #363636 で引き締め
  • ダークモード非対応（実測時点）

2. Color Palette & Roles

実サイトの computed style 実測値。すべて hex 表記。

Brand

• Brand Teal (#00b6ac): メインのブランドカラー。CTA テキスト色、見出しのアクセントスパン、装飾アイコン等に使用
• Brand Teal Dark (#04a6a0): アプリダウンロード CTA の背景色。#00b6ac のやや深い変種
• Brand Teal Light (#00d1b2): Bulma デフォルトのプライマリ色。アイコンの一部で出現（実質的にはブランドティールと同系統で共存）

CTA / Buttons

• Nav CTA（ティール文字ピル）: 文字 #00b6ac / 背景 #ffffff / border 1px solid #dddddd / radius 20px / padding 6px 14px / 14px / weight 500
• Ghost Button: 文字 #313636 / 背景 transparent / radius 4px / padding 7px 16px / 16px / weight 400
• App Download CTA: 背景 #04a6a0（ティール）/ 文字 #ffffff / 大きめのピル型

Neutral — Cool Gray Scale

Semantic（実測未確認・推奨値）

実サイトには明確なエラー／成功色は表面化していない。モビリティ向けに推奨する補完値:

• Danger: #e53e3e 程度の明瞭なレッド（返却エラー等）
• Success: #38a169 程度のグリーン（乗車完了等）
• Warning: #d69e2e 程度のイエロー（バッテリー残量注意等）

Footer

• Footer BG: #363636（ダークグレー）
• Footer Text: #ffffff（白）
• Copyright Text: #ffffff / 8px（極小）

3. Typography Rules

3.1 和文フォント

• ゴシック体: Noto Sans JP を最優先のフォールバック和文フォント
• フォールバック: Yu Gothic → YuGothic → Hiragino Kaku Gothic Pro → Meiryo UI → Meiryo → MS PGothic → sans-serif
• 明朝体: 使用しない（サイト全体ゴシック統一）

3.2 欧文フォント

• サンセリフ: Roobert（Display Foundry 製のジオメトリックサンセリフ）を最優先。LUUP のブランド書体
• Roobert は国際的なテック企業に人気のモダンな幾何学系書体で、Futura の柔らかいバリエーションのような字形を持つ
• Roobert の欧文グリフが日本語テキスト中の欧文部分にも適用される（font-family の先頭に配置）

3.3 font-family 指定

css/* 全要素共通（body, h1〜h6, p, a, span, button, nav, header, footer） */
font-family: Roobert, "Noto Sans JP", "Yu Gothic", YuGothic,
  "Hiragino Kaku Gothic Pro", "Meiryo UI", Meiryo, "MS PGothic", sans-serif;

フォールバックの考え方:

• Roobert（カスタム欧文書体）を最優先。欧文部分はブランド書体の字形で描画される
• 日本語部分は Roobert にグリフがないため、次の Noto Sans JP 以降にフォールバック
• 欧文優先型の構成（note の Helvetica Neue 先頭と同じ思想）。欧文と和文で異なる書体が組み合わさる混植スタイル
• 游ゴシックは Mac / Windows 両方のバリアント（Yu Gothic + YuGothic）を記述
• ヒラギノは Pro（ProN ではない）を使用

代替フォント注記: Roobert は Display Foundry のライセンスフォントのため、デザインのプレビューや社外資料で再現できない場合がある。代替として Inter（weight 400 / 500）を使用すると、ジオメトリックでクリーンな印象が近い（preview.html はこの代替を使用）。

3.4 文字サイズ・ウェイト階層

実測値（トップ／サービスページ、2026-06-09 取得）

3.5 行間・字間

行間 (line-height) — 実測:

• 本文 (16px): 1.5（24px / 16px）— 日本語として標準的
• 中〜小見出し (20〜48px): 1.25〜1.5
• 大見出し (56〜96px): 1.0（タイト）— 大きな文字はベタ組みで迫力を出す
• キャプション (12px): 1.5
• ナビボタン (14px): 1.5

字間 (letter-spacing) — 実測:

• 全サイズ共通: 0.8px の固定値（body に letter-spacing: 0.8px を一括指定）
• 本文 (16px) では 0.05em、96px では 0.05em と、em 換算は同じだがピクセル値は固定
• 大見出しでも負のトラッキング（詰め）は使わない — 正のトラッキングで統一する設計
• ナビボタン (14px weight 500) のみ letter-spacing 未設定（ブラウザデフォルト）

ガイドライン:

• LUUP の文字組みは 0.8px の一律 letter-spacing が特徴。サイズに応じた em 換算の調整はしない
• 大見出しは letter-spacing を詰めるのではなく、line-height 1.0 でタイト感を表現
• weight は全面的に 400 で統一。ナビの 500 が唯一の例外。ボールドを使わない設計思想

3.6 禁則処理・改行ルール

css/* 推奨設定（Bulma ベース） */
word-break: normal;
overflow-wrap: break-word;
line-break: auto;

• Bulma CSS フレームワークのデフォルト設定を踏襲
• 大見出し（96px / 56px）は要素幅で自然に折り返し

3.7 OpenType 機能

cssfont-feature-settings: normal;

• 実測上、palt / kern の明示的有効化は確認されなかった
• letter-spacing 0.8px の一律指定で見た目の字間を調整する方針
• Roobert は欧文フォントのため palt の対象にならない。和文フォールバック側の palt も未使用

3.8 縦書き

• 該当なし。横書きのみ

4. Component Stylings

Buttons

Nav CTA（ティール文字ピル） — ヘッダーの行動喚起ボタン

• Background: #ffffff
• Text: #00b6ac
• Border: 1px solid #dddddd
• Padding: 6px 14px
• Border Radius: 20px（ピル型）
• Font: Roobert / Noto Sans JP, 14px, weight 500

Ghost Button（ゴースト） — セクション内リンクボタン

• Background: transparent
• Text: #313636
• Border: none
• Padding: 7px 16px
• Border Radius: 4px
• Font: Roobert / Noto Sans JP, 16px, weight 400

App Download CTA（ティール背景） — アプリダウンロード誘導

• Background: #04a6a0
• Text: #ffffff
• Border: none
• Padding: 12px 24px（推奨）
• Border Radius: 20px（ピル型）
• Font: Roobert / Noto Sans JP, 16px, weight 400

Dark Tag — "必須" 等のタグバッジ

• Background: #363636
• Text: #ffffff
• Padding: 2px 8px
• Border Radius: 4px
• Font: Noto Sans JP, 12px, weight 400

Notice Badge — お知らせカテゴリバッジ

• Background: #dadee6
• Text: #313636
• Padding: 2px 8px
• Border Radius: 4px
• Font: Noto Sans JP, 12px, weight 400

Inputs（推奨実装）

• Background: #ffffff
• Border: 1px solid #dddddd
• Border (focus): 1px solid #00b6ac（ブランドティール）
• Border Radius: 4px
• Padding: 8px 12px
• Font: Roobert / Noto Sans JP, 16px, weight 400
• Height: 40px

Cards / Surfaces

• Background: #ffffff（メイン）/ #f7f7f7（セクション背景）
• Border: 1px solid #dddddd または border なし
• Border Radius: 4px（Bulma デフォルト）
• Shadow: 基本フラット（box-shadow: none）

Header

• Background: #ffffff（推奨: 白背景、スクロール時に固定）
• Border Bottom: 1px solid #dddddd（推奨）
• Position: fixed top: 0
• z-index: 30 程度

Footer

• Background: #363636（ダークグレー）
• Text: #ffffff
• Padding: 48px 24px
• Copyright: 8px（極小サイズ）

5. Layout Principles

Spacing Scale（推奨 8px グリッド）

Container

• Max Width: 1152px（Bulma のデフォルト .container 幅）
• Padding (horizontal): mobile 16px / desktop 24px

Border Radius Scale

Grid

• Bulma の 12 カラムグリッド（.columns > .column）
• Gutter: 24px（0.75rem x 2 = Bulma デフォルト）

6. Depth & Elevation

• 実測ではほぼ全要素 box-shadow: none
• フラットデザインを徹底。立体感は #f7f7f7 のセクション背景色の切り替えで表現
• 影を使う場合は控えめな rgba(0, 0, 0, 0.08〜0.12) で
• ダークフッター #363636 がページ末端のコントラストアンカーとして機能

7. Do's and Don'ts

Do（推奨）

• 欧文フォントは Roobert を最優先、和文は Noto Sans JP → Yu Gothic → Hiragino Kaku Gothic Pro の順にフォールバック
• 本文の line-height は 1.5 を基本にする
• letter-spacing は 0.8px（0.05em）の固定値で全テキストに一律適用する
• 大見出し（56〜96px）の line-height は 1.0 でタイトに組む
• font-weight は 全面的に 400 で統一する（ナビボタンの 500 のみ例外）
• ブランドカラーは #00b6ac（ティール） を CTA テキスト・アクセントに使う
• アプリ CTA の背景には #04a6a0 を使い、#00b6ac との微妙な差で奥行きを出す
• セクション背景に #f7f7f7 を使って白との切り替えで視覚的な区切りを作る
• ボーダーは #dddddd で統一する
• ボタンの border-radius は 20px（ピル型） を基本とし、補助ボタンやカードは 4px

Don't（禁止）

• font-weight 600 や 700 を使わない — LUUP の軽さ・軽快さが崩れる（weight 400 統一が設計意図）
• 本文に line-height: 1.2 以下を使わない（可読性が著しく低下する）
• letter-spacing を サイズごとに変えない — LUUP は 0.8px 固定の統一設計
• 純黒 #000000 をテキストに使わない — LUUP のテキスト色は #313636（ダークグレー）
• ブランドティール #00b6ac を 背景色に多用しない — テキスト色・アクセント用であり、面を塗る色ではない（面には #04a6a0 を限定的に使う）
• 角張った直角ボタン（border-radius 0）を CTA に使わない — ピル型 20px が基本
• ウォームグレー（#f2f2f0、#737368 等）を使わない — LUUP のグレーは #f7f7f7 / #dddddd / #313636 のクールニュートラル系
• ナビの CTA ボタンに ティールの背景色を使わない — ナビ CTA は白背景＋ティール文字＋細ボーダーの控えめなスタイル

8. Responsive Behavior

Breakpoints（Bulma 互換）

モバイル時の調整

• Display (96px) → 48〜56px 程度に縮小
• H2 (56px) → 32〜40px 程度に縮小
• H2 (48px) → 28〜32px
• 本文サイズは 16px を維持（line-height も 1.5 維持）
• letter-spacing 0.8px は維持（ピクセル固定のため端末問わず同じ）
• ナビはハンバーガーメニュー化

タッチターゲット

• ナビ CTA: 高さ 33px（padding 6px 14px + 14px font + 1.5 line-height）— モバイルでは padding を広げて 44px 以上を確保すべき
• ゴーストボタン: 高さ 38px（padding 7px 16px + 16px font + 1.5 line-height）
• App CTA: 44px 以上を確保（推奨）

ダークモード

• 該当なし（実測時点で未対応）

9. Agent Prompt Guide

クイックリファレンス

Brand Teal (CTA text / accent): #00b6ac
Brand Teal Dark (App CTA bg): #04a6a0
Brand Teal Light (icons): #00d1b2
Text Primary: #313636
Divider / Border: #dddddd
Surface (section bg): #f7f7f7
Dark Section (footer): #363636
Notice Badge bg: #dadee6
White: #ffffff

Font: Roobert, "Noto Sans JP", "Yu Gothic", YuGothic,
  "Hiragino Kaku Gothic Pro", "Meiryo UI", Meiryo, "MS PGothic", sans-serif
（Roobert 不在時の代替: Inter weight 400 / 500）

Display: 96px / line-height 1.0 / weight 400 / letter-spacing 0.8px
H2 Large: 56px / line-height 1.0 / weight 400 / letter-spacing 0.8px
H2 Medium: 48px / line-height 1.5 / weight 400 / letter-spacing 0.8px
H2/H3: 32px / line-height 1.5 / weight 400 / letter-spacing 0.8px
Subtitle: 24px / line-height 1.25 / weight 400 / letter-spacing 0.8px
Body: 16px / line-height 1.5 / weight 400 / letter-spacing 0.8px
Nav: 14px / line-height 1.5 / weight 500
Caption: 12px / line-height 1.5 / weight 400 / letter-spacing 0.8px

Border Radius: 4px（カード・入力欄）／20px（CTA・ピルボタン）
Shadow: 基本 none。階層は #f7f7f7 / #ffffff の面切り替えで表現

プロンプト例

LUUP のデザインに従って、電動キックボードのポート一覧ページを作成してください。
- フォント: Roobert, "Noto Sans JP", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "Meiryo UI", Meiryo, "MS PGothic", sans-serif
- セクション見出し: 56px / weight 400 / line-height 1.0 / letter-spacing 0.8px / color #313636
- 中見出し: 32px / weight 400 / line-height 1.5 / letter-spacing 0.8px
- 本文: 16px / weight 400 / line-height 1.5 / letter-spacing 0.8px / color #313636
- ナビ CTA: 文字 #00b6ac / 背景 白 / border 1px solid #dddddd / radius 20px / padding 6px 14px / 14px / weight 500
- アプリダウンロード CTA: 背景 #04a6a0 / 文字 白 / radius 20px
- カード: 背景 #ffffff / border なし or 1px solid #dddddd / radius 4px
- セクション背景: 白 #ffffff と #f7f7f7 を交互に使って階層を表現
- フッター: 背景 #363636 / 文字 #ffffff
- box-shadow は基本 none
- font-weight は 400 で統一（ナビの 500 のみ例外）。ボールドは使わない
- letter-spacing は 0.8px で全テキスト共通
- テキスト色は #313636（純黒 #000000 は使わない）