DESIGN.md — 水色×レモン黄のキャラクター交通アプリLP（Bright Cyan Character Mobile Service LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、清潔・爽やか、親しみ・手作り感、情報量多め・訴求型
• キーワード: シアン・レモンイエロー・3Dキャラクター・ピル見出し・枠線カード・黄色マーカー
• 地の質感: フラットな単色面。グラデーションや影はほぼ使わず、写真とイラストで立体感を出す
• 形: 角丸の大きいカードとピル型見出し。雲形の吹き出しと下向き三角で悩み→解決を示す
• 温度感: 明るく涼しい寒色ベースに黄色で温かみを足す

Colors

• 地は白と淡い水色を交互に使いセクションを区切る
• ダウンロードCTA帯だけレモンイエロー地にして目立たせる
• 見出し帯・カード枠・カードヘッダーはすべて同じシアンで統一
• 強調文字は濃い青、本文はグレーに抑える
• 解決の結論文には黄色マーカーを下半分に敷く
• 赤やオレンジは使わずキャラクターの嘴色のみに留める
• section-pill-heading は文字 #FFFFFF × 背景 #04C2DE のコントラスト比が 2.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#038093、4.65:1）を使う。
• check-bubble は文字 #04C2DE × 背景 #FFF57E のコントラスト比が 1.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#038093、4.6:1）を使う。

Typography

• 見出しは太字ゴシックで中央揃え
• ピル見出しの下に黄色の小さなドット5つを並べる
• 本文は小さめで中央揃え、2〜3行で改行
• 数値は大きく、単位は小さくする
• FVコピーは行ごとにオレンジ系の下線マーカーを敷く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• コンテンツは左右16px余白の中央寄せ
• セクション冒頭はピル見出し→リード文の順
• カードは縦に16〜24px間隔で積む
• CTA帯はページ上部・中盤・末尾で繰り返す
• FAQは区切り線で並べるアコーディオン

Elevation & Depth

• 影はほぼ使わずフラット
• カードは3px程度のシアン枠で浮かせる
• 立体感はキャラクターの3DCGで出す

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 四角いフラット背景の正方形イラスト。角丸なし
• セクション境界: 直線で地色を切り替え。FV下のみ緩やかな曲線
• 見出し帯は完全なピル型
• カードは角丸16pxでヘッダー部をシアン塗り
• 番号バッジは正円で枠線の上に半分重ねる
• 悩み文は雲形の淡青吹き出しに入れる

Components

• ピル見出し帯（section-pill-heading）: 幅いっぱいのシアンのピルに白太字、下に黄ドット
• アプリDLカード（download-cta-card）: 黄色帯の上にシアン枠の白カード。上部シアンヘッダー、中にアプリアイコンとストアボタン
• ストアボタン（store-button）: 黒地角丸の公式ストアバッジ
• 番号付きステップカード（step-card）: シアン枠の白カード上部に円形番号バッジを重ね、見出し・説明・イラスト
• 悩み→解決カード（merit-card）: シアンヘッダー、雲形の悩み吹き出し、下三角、黄マーカー付き解決文、正方形イラスト
• 実績リボン（stat-ribbon）: シアン地に黄色のリボン型パネルで大きな数値
• FAQ行（faq-item）: シアン円にQ、濃青太字の質問、右端に細いプラス、下に区切り線
• 枠線サブボタン（button-outline）: 白地に青い細枠のピル、右に矢印
• CHECK吹き出し（check-bubble）: 黄色の楕円吹き出しにキャラクターを添える

Do's and Don'ts

Do - シアン・水色・黄色の3色でまとめる - 各セクションにキャラクターを登場させる - 悩みは吹き出し、解決は黄マーカー付き太字で書く - ダウンロードCTAを複数回配置する - 見出しは毎回同じピル型で統一する

Don't - 暗い色や黒地のセクションを作らない - 濃い影やグラデーションの多用をしない - 明朝体やセリフ体を使わない - カードの角を尖らせない - 本文を左揃えの長文にしない

Page Structure

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

1. ファーストビュー（サービスの価値を一言で伝える）: シアン地に白の極太コピーを左寄せ、右にスマホを持つ3Dキャラクター、下端は曲線
2. 実績（利用者数で信頼を示す）: シアン地に黄色リボンで大きな数値と注釈
3. CTA（アプリのダウンロード誘導）: 黄色帯にシアン枠カード、アイコンとストアボタン
4. サービス紹介（何ができるかを説明）: 流れる帯文字、ピル見出し、短いリード、CHECK吹き出しと動画
5. 利用の流れ（始め方を3ステップで示す）: 番号バッジ付き枠カードを縦に3枚、各イラスト付き
6. メリット（悩みを解決する特長を列挙）: 悩み吹き出し→三角→解決文→正方形イラストのカードを5枚
7. おトクな使い方（ポイント二重取りを図解）: 水色の角丸大パネル内に白カード2枚をプラス記号でつなぐ
8. よくある質問（不安を解消）: Qバッジ付きアコーディオンを10行
9. 関連キャンペーン（活用情報へ誘導）: シアンから水色のグラデ地に白ピル見出しとバナー
10. 最終CTA（ダウンロードの後押し）: 冒頭と同じ黄色帯のDLカード

Imagery

• 丸みのある水色の3DCGキャラクターを大きく使う
• イラストは鮮やかなシアン単色背景の正方形
• スマホ・カード等は太い青線のフラットアイコン
• 人物は少しくすんだフラットイラストで群衆を描く
• コインやポイントマークで賑やかさを出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはコンテンツ幅約900pxで中央寄せ
• PCのDLカードはアイコン・ストアボタン・QRを横並び
• PCのステップカードは左テキスト右イラストの2カラム
• PCのメリットは左に目次ボタン、右にカードの2カラム
• PCのおトク図解はカード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 行書くと起動時に読み込まれる。