DESIGN.md — 橙グラデと紺青の交通アプリ案内 LP（Orange Gradient Transit App Guide LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 清潔・爽やか、信頼・誠実、シンプル・ミニマル
• キーワード: オレンジグラデーション・端末モックアップ・円形フレーム・大きな番号・丸アイコン・公共交通の信頼感
• 地の質感: フラットな単色面とFVの柔らかいグラデーション。影はボタンとカードにうっすら付く程度。
• 形: 円形の画像フレームと丸アイコン、角丸のボタンとカード。
• 温度感: オレンジで暖かく親しみやすく、紺と青で引き締めて公共性・信頼感を保つ。

Colors

• 地は白と#F8F8F8を交互に使い、セクションを区切る。
• オレンジは英字ラベル・番号・小見出し・装飾線に限定し、本文には使わない。
• 行動を促すボタンは青のグラデーションのみで統一。
• 機能アイコンは青丸を基本にし、1つだけ黄で変化をつける。
• ヘッダーとフッターは紺の帯で締める。
• FVと最下部はオレンジ〜黄のグラデーションで暖色の入口と出口を作る。
• icon-circle は文字 #1A1A1A × 背景 #1478BE のコントラスト比が 3.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#1687D5、4.53:1）を使う。

Typography

• 見出しは太いゴシックで字間を広めにとる。
• セクション見出しの上にオレンジの英字ラベルを細めの欧文で置く。
• 特長番号は「01」形式で、見出しの約2倍の大きさにする。
• 本文は行間を広めにして読みやすくする。
• 大事な一文は太字にし、オレンジ系マーカー下線を引く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。機能アイコンだけ 4 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 見出しブロックは中央揃えで、英字ラベル・見出し・短い線の順に積む。
• 特長は番号と見出し、円形画像、本文の順に縦に並べる。
• ABOUTの3つの丸アイコンは千鳥配置（左上・中央下・右上）。
• 補足機能は白い角丸カードに入れて薄グレー地から浮かせる。
• CTAは横幅いっぱい近くまで広げて中央に置く。

Elevation & Depth

• CTAボタンの下に柔らかい青灰色のドロップシャドウ。
• 白カードは影なしか、ごく淡い影にする。
• 端末モックアップには写真の影を自然に付ける。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 端末画面を大きな円形フレームでトリミングし、円の縁をオレンジ系の線で囲む
• セクション境界: 直線で背景色を切り替える。最下部は大きな円弧状の暖色グラデーション
• ボタンは角丸12px前後の長方形にし、右端に▶を置く。
• アイコンは正円の中に白いピクトを置く。
• カードは角丸16px前後。

Components

• 青グラデCTA（button-primary）: 上段に太字の主文言、下段に小さい補足文言、右端に白い▶を置いた横長ボタン。
• 青枠サブボタン（button-outline）: 白地に青の枠線と青文字、右に▶を置く。
• 英字ラベル付き見出し（section-heading）: オレンジの英字ラベル、黒の太字見出し、短いオレンジの下線を中央に縦積みする。
• 大番号付き特長見出し（feature-number）: 左に大きなオレンジの欧文数字、右に2行のオレンジ見出しを並べる。
• 円形モックアップフレーム（circle-frame）: 淡いオレンジの線で描いた円の中に、端末画面を円で切り抜いて収める。
• 機能丸アイコン（icon-circle）: 青い正円に白いピクトを入れ、下に太字のラベルを置く。4列で並べる。
• ABOUTポイント円（point-badge）: オレンジの線の円に青いアイコンを入れ、下にオレンジの番号と2行の説明を置く。
• 白角丸カード（info-card）: 薄グレー地に置く白カード。見出しの下にオレンジの区切り線を入れる。
• マーカー強調文（marker-text）: 太字の一文の下半分に淡いオレンジのマーカーを引く。
• アプリDLカード（store-badges）: アプリアイコンと見出しを横に並べ、その下にOS名ラベル付きのストアバッジを2つ横並びにする。

Do's and Don'ts

Do - 端末モックアップで実際の画面を見せ、機能を具体的に伝える。 - 各セクションの頭に英字ラベル付き見出しを置き、リズムを揃える。 - オレンジは装飾と番号に、青は操作要素に使い分ける。 - 特長は01〜03の番号で順番に見せる。 - 注釈は※付きの小さな文字でまとめる。

Don't - CTAにオレンジを使い、青の操作色を崩さない。 - 濃い影や立体感の強い装飾を加えない。 - 円形フレーム以外の不規則な切り抜きを混ぜない。 - 本文を中央揃えの長文にしない。本文は左揃えにする。 - 色を増やしすぎない。黄は1点だけのアクセントにとどめる。

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ヘッダー（運営元を示す）: 紺の帯に白いロゴとサービス名を左寄せで置く。
2. ファーストビュー（アプリで得られる便利さを伝える）: オレンジのグラデーション地に、白い太字のキャッチを3行、その下に小さな英文を置く。右下に端末、左下に車両の写真を重ねる。
3. 概要（アプリで何ができるかを要約する）: 英字ラベル付き見出し、灰色の円に重ねた端末、千鳥配置の3つのポイント円を並べる。
4. CTA（操作説明）（操作方法の動画へ誘導する）: 2段文言の青グラデボタン。
5. 特長（主要機能3つを詳しく説明する）: 薄グレー地に、大きな番号と見出し、円形フレームの画面、本文の組を3回繰り返す。
6. CTA（再掲）（特長を読んだ後に再び誘導する）: 同じ青グラデボタンを繰り返す。
7. 補足機能（別の画面からも使えることを示す）: 白カードに見出しとオレンジの区切り線を入れ、画面を2つ重ねた円形画像とマーカー付きの本文を置く。
8. 注意事項（利用上の条件を伝える）: ※付きの小さい太字注釈を左揃えで並べる。
9. その他の機能（便利な機能を一覧で見せる）: オレンジの小見出しを2つ立て、それぞれに青丸アイコンを4列並べる。最後に青枠のボタンを置く。
10. アプリダウンロード（インストールしてもらう）: 暖色の円弧グラデーションの上に白カードを置き、アプリアイコン・見出し・ストアバッジ・商標注記を入れる。
11. フッター（著作権を表示する）: 紺の帯に白い小さな文字を中央揃えで置き、右下にページトップボタンを置く。

Imagery

• 写真ではなく、実機フレームに入れたアプリ画面のモックアップを主役にする。
• 車両などの実物写真は切り抜きでFVの端に配置する。
• アイコンは単色のフラットなピクトで、線は太めにする。
• 円形フレームの縁は細い淡オレンジ〜黄の線で描く。
• PCでは背景に路線図風の細い線画を薄く敷いてもよい。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央寄せで最大幅約960pxにする。
• PCのFVはキャッチを左、端末を右に置く横並び。
• PCの概要は端末を左、テキストと3つのポイントとCTAを右に置く2カラム。
• PCの特長は画像とテキストを左右交互に配置する。
• PCのその他の機能は2グループを縦線で区切って左右に並べ、それぞれ2×2のアイコンにする。
• PCのダウンロードカードはアイコン・テキスト・バッジを横一列に並べる。

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。