DESIGN.md — 山吹イエローと手描き風イラストの健康アプリ LP（Sunny Yellow Illustrated Wellness App LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、やさしい・柔らかい、親しみ・手作り感、ナチュラル
• キーワード: 山吹イエロー・クリーム地・ミントグリーン・アーチ窓イラスト・波形の見出し帯・アプリ画面モック
• 地の質感: 基本はフラットな塗り。床帯はクラフト紙風のざらつき、利用方法の背景は水彩風の水色。見出し帯には斜めストライプが入る
• 形: 角丸のカード、アーチ型の窓、波線のセクション下端、丸い番号バッジ、下に影があるピル型ボタン
• 温度感: 暖かい。黄色とクリームが主体で、ミントと水色で爽やかさを足す

Colors

• 地はクリーム色。FV、途中の CTA 帯、フッターだけを黄色の全幅の面にする
• 特長は白いカードにまとめ、見出し帯は奇数番を黄色、偶数番をミント色にして交互に塗る
• 番号バッジ・吹き出し・チェック以外の強調には濃い緑を使う
• 主 CTA は黄色、ダウンロードボタンはチャコールで役割を分ける
• 利用方法は水色、FAQ は淡いグリーンの背景にしてセクションの区切りを色で示す
• 文字は純黒を避け、暖かみのある濃いグレーを使う
• number-badge は文字 #FBFCF9 × 背景 #01A485 のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#01836A、4.58:1）を使う。
• speech-bubble は文字 #FBFCF9 × 背景 #01A485 のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#01836A、4.58:1）を使う。
• ribbon-label は文字 #FBFCF9 × 背景 #93D4E6 のコントラスト比が 1.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#237E97、4.53:1）を使う。

Typography

• 全体を太めのゴシックでそろえ、字間はやや広め（0.05〜0.1em）にとる
• セクション見出しは左右に「＼ ／」の短い斜線を添えて中央に置く
• 小見出しラベルの下には黄色かミント色の短い下線を引く
• 見出し帯は小さめの前置きと大きめの本題の 2 行で組む
• 数字（番号や「4」など）は本文より大きく細めにして目立たせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード内も縦に積む
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 56px、基本単位 8px、カード内 22px（375px 幅換算）
• 白いカードは画面幅の約86%で中央に置き、左右にクリーム地を見せる
• 特長は番号バッジ→波形の見出し帯→白いカード→床帯の順で 1 単位にする
• カード内はラベル→見出し→チェック箇条書き→アプリ画面モックの順に並べる
• カルーセルの画像はカードの外にはみ出させて、横にスクロールできることを伝える
• 下部に 2 ボタンの追従バーを固定する

Elevation & Depth

• 影はほぼ使わず、フラットな面の重なりで奥行きを出す
• ボタンは真下に濃い色の 3〜4px のずらし影を付けて立体的に見せる
• アプリ画面のモックにだけ淡いぼかし影を付ける

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: イラストは上が半円のアーチ窓で切り抜く。動画サムネは角丸の長方形
• セクション境界: 見出し帯の下端と FAQ→フッターの境界は波線。床帯は直線
• ボタンは完全なピル型にする
• 番号は丸い塗りバッジにする
• FAQ の開閉アイコンは黄色い丸に＋を入れる
• 見出し帯の上辺は角丸、下辺は波線にする

Components

• 黄色ピルボタン（button-primary）: 右端に▶を置き、下にずらし影を付ける
• ダウンロードボタン（button-download）: チャコールのピル型で、白文字の後ろに黄色の▶を置く
• 追従2ボタン（sticky-bar）: 画面下に白い枠線ボタンと濃色ボタンを左右に並べる
• 波形見出し帯（wave-heading-band）: 斜めストライプの帯で下端が波線。上に番号バッジを載せる
• 番号バッジ（number-badge）: 濃い緑の丸に白い数字を入れる
• 丸吹き出し（speech-bubble）: 濃い緑の円に白文字の短いコメントを入れ、モックに重ねる
• アコーディオン（accordion-item）: 白地にグレーの枠線。左に番号、右に▼を置く
• FAQカード（faq-card）: 白いカードに、淡い黄色の丸の Q と黄色丸の＋を置く
• リボンラベル（ribbon-label）: 水色のリボン形に白文字で限定条件を示す
• クラフト床帯（floor-strip）: カードの下端に置く紙質感の帯。小物イラストを載せる

Do's and Don'ts

Do - 黄色・クリーム・白の三層構成を守る - 特長ごとに黄色とミントの見出し帯を交互に使う - アプリ画面のモックの下に黄色い楕円の台座を敷く - 線画にフラット塗りの人物や植物のイラストを添える - チェックアイコンには黄色の丸を使う

Don't - 純黒や高彩度の赤を使わない - 角ばった四角いボタンにしない - 濃い影やグラデーションの多用は避ける - 写真だけで構成せず、必ずイラストを混ぜる - 細い明朝体を使わない

Page Structure

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

1. ファーストビュー（アプリの価値を一目で伝える）: 黄色の全幅背景に中央寄せの 2 行キャッチを置く。人物とキャラクターのイラストをアーチ窓で囲み、アプリ画面を斜めに重ねる
2. できること目次（機能を 4 つにまとめて示す）: クリーム地の上部に葉のイラストを置く。白いカードに番号付きの 4 行を並べ、各行に▼を付ける
3. 特長1（ポイント機能を説明する）: 黄色の波形帯→白いカードの順に並べ、チェック箇条書きとモックを入れる。下に補足の灰色ボックス、黄色ボタン、床帯を続ける
4. 特長2（習慣化の機能を説明する）: ミント色の波形帯を使う。アーチ型のイラストカードを横スクロールで並べる
5. 特長3（フィットネスと歩数記録を説明する）: 黄色の帯を使う。角丸の写真と、ミント枠の動画サムネのカルーセルを入れる
6. 特長4（コラムと雑誌の機能を説明する）: ミント色の帯を使う。サムネを格子状に並べ、雑誌の表紙を 3 列のグリッドで見せる
7. CTA（ダウンロードを促す）: 黄色の全幅背景にイラストとモックを置き、チャコールのボタンを配置する
8. ポイント特典（交換できる商品を見せる）: リボンラベル付きの白いカードに商品集合の写真を入れ、黄色ボタンを置く
9. ご利用方法（導入の手順を示す）: 水彩風の水色背景に OS 別のタブを付けた白いカードを置き、手順をアコーディオンで示す。問い合わせ先の枠も入れる
10. よくある質問（不安を解消する）: 淡いグリーンの背景に、緑の丸付きでカテゴリ見出しを置き、FAQ カードを並べる
11. フッター（再度のダウンロード誘導と問い合わせ）: 上辺が波線の黄色い面。ロゴ、アーチ窓イラストの横並び、問い合わせカード、リンク群を置く

Imagery

• 黒い線画にフラットな塗りの人物と、マスコット風キャラクターを描く
• 植物、照明、グラス、窓辺など生活の小物を、紙の質感があるアーチ窓に入れる
• アプリ画面はスマホの枠付きモックで見せ、下に黄色い楕円の台座を敷く
• 人物写真は白い背景で明るく笑顔のものを使い、角丸で切り抜く
• 葉っぱのイラストをセクション上部の左右に飾る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では FV を左テキスト・右イラストの 2 カラムにし、QR コードの枠を置く
• PC のヘッダーは右上にナビとダウンロードボタンを並べる
• PC の目次は 4 つの番号を横一列に並べる
• PC の特長カードは左テキスト・右モックの 2 カラムにする
• PC の CTA は QR コードを主役にする。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 行書くと起動時に読み込まれる。