DESIGN.md — コーラル×くすみティールの手書き風電動自転車LP（Coral and Teal Handwritten Lifestyle E-Bike LP）

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

Overview

• 業種: 自動車・バイク ／ 雰囲気: 親しみ・手作り感、やさしい・柔らかい、情報量多め・訴求型、ナチュラル
• キーワード: 手書き見出し・ノート風カード・コーラル×ティール・ネイビー線画・マーカー強調・比較表
• 地の質感: 紙っぽいマットな面。方眼紙・ドット・斜線ストライプをワンポイントで敷く
• 形: 角丸小さめの白カード、二重線の手帳枠、丸いバッジ、ブラシ風の帯
• 温度感: 暖色の地と寒色の地を交互に使い、全体は温かみ寄り

Colors

• セクション地はコーラル/ピーチ→白→ティール→ミントの順で切替え、内側に白カードを重ねる
• 文字はほぼネイビー1色。黒は使わない
• 強調は黄色マーカー下線かオレンジ文字に限定
• 悪い例は淡ピンク・薄紫地、良い例は白地とブランド色で対比する
• 比較表は自社列を白、他社列をグレー＋濃紺ヘッダーにする
• オレンジ吹き出しはシーン写真のキャプションに使う
• caption-balloon は文字 #FFFFFF × 背景 #F08A3C のコントラスト比が 2.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BD5A0F、4.53:1）を使う。
• award-badge は文字 #FFFFFF × 背景 #DD827D のコントラスト比が 2.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#CD4840、4.57:1）を使う。

Typography

• 大見出しは手書き書体で、ブラシ帯や枠に1行ずつ載せる
• 数字（％・kg・冠数）は大きく太く、単位は小さく
• 本文は中央揃え、短く改行する
• 英字の飾りはスクリプト風を見出しの左上に斜めに重ねる
• 強調語は太字＋黄色マーカー下線
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較や機能は 2 カラムのカードで並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 色地の上に白カードを左右6%ほど余白をとって置く
• 写真は横いっぱい、またはカード幅で角丸小
• POINT番号は丸バッジで見出しの右か左に配置
• 機能一覧は写真とテキストを左右交互にずらし、点線でつなぐ
• 悪い例→良い例をイラスト＋人物アイコン吹き出しの順で並べる

Elevation & Depth

• カードは基本フラット。ネイビーの細線＋ずらした影線で手帳風にする
• 白カードにはごく薄い影（0 2px 8px rgba(0,0,0,.08)）
• バッジや吹き出しは影なし

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸小さめの長方形。拡大部分は円形に切り抜く
• セクション境界: 大きく波打つ曲線や手でちぎったようなギザギザの境界、ティールの縁取り
• 見出し帯は筆で塗ったような帯や二重線の枠
• 番号・POINTは円形バッジ
• 吹き出しは角丸長方形に尻尾を付ける
• 点線の曲線で要素の流れを示す

Components

• 手書きブラシ帯見出し（heading-brush）: 白地の帯に手書き書体の見出しを1行ずつ置き、下に影線を付ける
• POINT丸バッジ（point-badge）: 白い円に英字POINTと黄色の大きな2桁番号
• お客様の声カード（voice-card）: ティールかローズ地のカードに手書きVOICEラベルと人物線画アイコン
• シーン吹き出し（caption-balloon）: 写真の角に重ねる、オレンジ地に白文字の手書き調キャプション
• 比較表（compare-table）: ティールの項目列、白の自社列（◎）、グレーの他社列（△×）
• ノート風カード（notebook-card）: ネイビーの二重線枠の白カード。罫線を点線で入れる
• 悪い例・良い例パネル（ng-ok-panel）: 淡色地に線画イラスト、ネイビーの吹き出しバッジ、人物アイコン付きコメント枠
• 受賞メダル（award-badge）: えんじ色のギザ縁メダルを5列で並べる
• 配送フロー円（flow-step）: ティールの円に白文字のステップを3つ横に並べる

Do's and Don'ts

Do - 見出しは手書き書体と帯・枠を組み合わせる - 暖色地と寒色地を交互に使い、セクションの切替えをはっきりさせる - 強調には黄色マーカーとオレンジを使う - 機能説明はネイビーの線画イラストと写真を併用する - キラキラ・雲・ドットなど小さな手描き装飾を余白に散らす

Don't - 純黒の文字や彩度の高い原色ベタを使わない - 直線的で硬いコーポレート風の見出しにしない - 強調色を3色以上同時に並べない - 写真に強い影や光沢エフェクトを付けない - 大きな角丸のピルボタンを多用しない

Page Structure

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

1. ファーストビュー（商品イメージと実績を一目で伝える）: コーラル枠に人物乗車写真、左上に受賞メダル、手書きキャッチと白帯ラベル
2. メディア掲載・満足度（権威付けと信頼）: 誌面画像と黒帯見出し、マーカー強調の引用文、大きな％数字と星評価
3. 改善事例（声を反映した改良点を示す）: VOICE番号ラベル付き白カードを左右交互に並べ、改善丸バッジと写真
4. 利用シーン（生活の中の使い方を想像させる）: 写真にスクリプト英字とオレンジ吹き出しを重ね、背景に有機的な色面
5. ブランド紹介・受賞（ショップの姿勢と実績）: ノート風罫線カード、ピンク地に月桂樹と多数のメダル
6. 特長POINT（機能を順に解説する）: ティール地に白い紙面、POINT丸バッジ、図解、VOICEカード
7. 他製品との比較（悪い例と良い例の対比）: 警告アイコンと方眼紙見出し、線画のNGパネル、写真のOKパネル
8. 比較表（一覧で優位性を示す）: ティール見出し列と◎△×の表
9. 機能紹介（装備の細部を伝える）: 番号付き写真カードを点線でつなぎ、黄色の縦帯ラベル
10. サポート体制（購入後の安心）: Point付き手書きラベルと白カード、自転車の線画で区切る
11. 配送の流れ・組立（届くまでの不安を減らす）: グレーボックスにアイコンとティール円のフロー、ピーチ地に組立図解
12. カラーバリエーション・付属品（選択肢と同梱物の提示）: ミント斜線地に白カード、セリフ英字見出し、グレー地の付属品グリッド
13. お客様の声（最後のひと押し）: ティール地に英字小見出しと手書き大見出し、黄色帯のリード

Imagery

• 自然光の屋外で、女性や親子が乗る生活感のある写真
• 背景はレンガ壁・街路樹・ガラス窓などの明るい都市の風景
• 商品単体は白背景の切り抜きで斜めの構図
• 図解はネイビー単色の太い線画イラスト
• 人物アイコンは線画の似顔絵を丸枠に入れる
• 星・雲・ドット・斜線などの手描き装飾を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では 375〜480px 幅の SP カラムを中央に置き、左右を地色で埋める
• 2 カラムの比較カードは PC でも並びを変えない
• 写真は最大幅を 640px 程度に抑える
• 手書き見出しは PC で 1.2 倍程度に拡大する

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 行書くと起動時に読み込まれる。