DESIGN.md — 桃ベージュ×空色のやさしいポイ活アプリ LP（Soft Peach and Sky Blue Point App LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: やさしい・柔らかい、かわいい、清潔・爽やか、親しみ・手作り感
• キーワード: 桃ベージュ地・空色アクセント・波形区切り・マスコット吹き出し・スマホモック・白い角丸カード
• 地の質感: フラットな単色の面に、ごく淡い影を付けた白カードを重ねる。紙のようにやわらかい質感。
• 形: 大きな角丸カード、ピル型ボタン・ラベル、雲形・楕円の吹き出し、波形のセクション境界。
• 温度感: 暖色のベージュを地に、寒色の青で締めた、温かく清潔な印象。

Colors

• セクションの地は桃ベージュと白を交互に切り替え、境界は波形にする。
• 見出しは濃紺で書き、キーワードだけをブランド青にして少し大きくする。
• 主 CTA は必ず LINE の緑のピル型にし、ほかの要素には緑を使わない。
• 英字のセクションラベルは青地に白文字のピル型。チーム紹介だけはオレンジの文字に変える。
• 解決策の帯は青地に白文字、悩みの吹き出しはベージュ地に濃紺文字で、対比させる。
• フッターは全面を青にし、CTA を白ボタン＋青文字に反転させる。
• button-primary は文字 #FFFFFF × 背景 #03C553 のコントラスト比が 2.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#02893A、4.52:1）を使う。
• section-label は文字 #FFFFFF × 背景 #0289E5 のコントラスト比が 3.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#027ACC、4.51:1）を使う。
• solution-band は文字 #FFFFFF × 背景 #0289E5 のコントラスト比が 3.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#027ACC、4.51:1）を使う。
• voice-card は文字 #9D9798 × 背景 #FCF1EB のコントラスト比が 2.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#736D6E、4.57:1）を使う。
• dashed-note は文字 #9D9798 × 背景 #FFFFFF のコントラスト比が 2.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#736D6E、4.5:1）を使う。

Typography

• 見出しは中央に揃え、2行に分けてキーワードの行を青で大きくする。
• 本文はグレーで行間を広めにし、中央揃えか左揃えにする。
• 英字ラベルは大文字で字間を広く取り、ピルの中に入れる。
• ステップ番号は大きな薄青の欧文にし、カードの右上に半透明で重ねる。
• CTAの下には、細い緑の線ではさんだ小さな補足を置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長アイコンは 3 列、ジャンルカードと安心ポイントは 2 列。
• 本文ブロックの幅: 画面幅の約 87%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクションは、英字ラベル→見出し→リード文→内容→CTAの順に並べる。
• カード同士の間隔は 12〜16px にする。
• セクションの上下には 60〜80px の余白を取る。
• CTAは FV直後、セクションの途中、ステップの後、フッターに繰り返し置く。

Elevation & Depth

• 白カードには、ごく淡い暖色の影（y4 blur16 程度）を付ける。
• CTAボタンには下方向に軽い影を付けて、浮いて見せる。
• スマホモックはカードからはみ出して重ね、奥行きを出す。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。
• 写真の切り抜き: 写真は大きな角丸で切り抜き、ベージュの太い枠で囲む。スマホ画面は端末フレームに入れる。チーム写真は横長にして、端をフェードさせる。
• セクション境界: なだらかな波形（スカラップ）のカーブ
• ボタン・ラベル・補足の帯はすべてピル型にする。
• カードは大きな角丸（24〜28px）にする。
• 悩みは雲形、解決は楕円の吹き出しで表す。
• 直線的な区切りは使わない。

Components

• LINE登録ボタン（button-primary）: LINEアイコンと太字を並べた、横いっぱいの緑のピル型ボタン。下に補足ラインを付ける。
• 英字セクションラベル（section-label）: 見出しの上に置く、小さな青のピル型の英字ラベル。
• 番号付き特長カード（feature-badge）: 3列の白い角丸カード。線画のアイコンと2行の短文を入れ、左上に薄青の番号を置く。
• 悩みの雲形吹き出し（worry-bubble）: ベージュの雲形の吹き出し。横に、考え込む人物のグレーのシルエットと「？」を添える。
• 解決の青帯カード（solution-band）: 青の角丸の帯。左にマスコット、白いチェック丸、白文字の見出しと説明を並べる。
• ステップカード（step-card）: スマホモックの下に重ねる白いカード。青い丸アイコン、見出し、説明を入れ、右上に大きな薄字の番号を置く。
• 利用者の声カード（voice-card）: ベージュのカード。丸いアバター、属性、青い小タグ、本文を入れる。
• 点線ピルの補足（dashed-note）: 点線の枠で囲んだピル型の小さな補足。

Do's and Don'ts

Do - 地は桃ベージュと白の交互にし、波形でつなぐ。 - 見出しのキーワード 1〜2 語だけを青にする。 - マスコットを各セクションに登場させ、吹き出しで語らせる。 - アプリの機能はスマホのモックアップで見せる。 - CTAを 4 回以上繰り返し配置する。

Don't - 黒や濃い彩度の背景を多用しない（濃い面はフッターの青だけ）。 - 角の立った四角いカードや直線の区切りを使わない。 - CTAを緑以外の色にしない。 - 本文を濃い黒にしない。濃紺とグレーで柔らかく見せる。 - 写真を枠なしで裁ち落としにしない（チーム写真を除く）。

Page Structure

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

1. ファーストビュー（誰向けで何が得られるかを伝える）: 青地の左上に白い太字キャッチ、右に人物写真を置き、下端を丸く切る。中央にスマホモック 3 台とマスコットを重ねる。
2. 特長3点とCTA（手軽さを即座に伝える）: 番号付きの白カードを 3 列に並べ、その下に緑の LINE ボタンと公開予定の補足を置く。
3. サービス概要（サービスの正体を説明する）: 白い大きな角丸カードに青強調の見出しと本文を入れ、マスコットを添える。下に、利用シーンのイラストを枠付きで 2 枚並べる。
4. できること一覧（報酬つきの行動を例示する）: 横長の白カードを 3 つ。所要時間のピル、ポイント数、見出し、説明を入れ、スマホ画面を半分はみ出させる。
5. 仕組みの説明（報酬がもらえる理由で疑問を解消する）: 青のリボン見出し、悩みの雲形吹き出し、青い楕円の回答吹き出しを置く。下にチェックリストのカード、交換先ロゴの列、CTAを続ける。
6. 対象ジャンル（扱う商品の幅を見せる）: 線画アイコン付きの白カードを 2 列×3 段に並べ、最後に点線ピルの補足を置く。
7. 悩みと解決（利用をためらう不安を払拭する）: 雲形の悩み吹き出しと、青い解決帯を交互に 2 組並べる。
8. 利用ステップ（始め方の簡単さを示す）: スマホモックの下にステップカードを重ね、2 段にする。最後に CTA を置く。
9. お客様の声（実利用者の共感を得る）: ベージュのカードを 3 枚、縦に並べる。丸アバターと属性タグを付ける。
10. 運営チーム（専門性と安心感を伝える）: オレンジの強調見出し、集合写真、2 列の安心カード、白枠付きのピル型サブボタンを置く。
11. フッターCTA（最後の登録を促す）: 全面を青にし、ロゴ、チェック付きの訴求 3 点、白いピル型 CTA、リンク、コピーライトを置く。背景に半透明の円を飾る。

Imagery

• もこもこした羊のような、ゆるいマスコットを、表情やポーズを変えて各所に置く。
• 利用シーンは、淡い水彩調の人物イラストで描く。
• スマホ画面は実機風のフレームに入れ、少し傾けて重ねる。
• 悩む人物は、グレーのシルエットに「？」を添える。
• アイコンは、紺の線に黄・オレンジを差した細線のイラストにする。
• 人物写真は明るい自然光で撮り、白い服・笑顔・屋外の緑を入れる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では、中央に SP 幅（約 420px）の縦長カラムを角丸のカードとして置き、その周囲をベージュの地にする。
• PC の左側には、ロゴ、キャッチ、チェック付きの特長、CTA、マスコットを固定して置く。
• カラム内のレイアウトは SP と同じにする。
• フッターの青面もカラム幅に収め、下の角を丸くする。

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