DESIGN.md — 黄×橙×茶のポップな健康グッズ LP（Warm Yellow Orange Playful Wellness Goods LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: ポップ・元気、親しみ・手作り感、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 山吹色・オレンジ・焦げ茶・方眼紙・吹き出し・フラットイラスト
• 地の質感: 白地に薄いベージュの方眼グリッド。淡い黄の地は細かい紙の粒感。写真は自然光の明るいリビング。
• 形: 大きな波形・円弧で色面を切り替える。吹き出しは焦げ茶の線と影付き。カードは片側だけ大きく角を丸める。
• 温度感: 暖色中心であたたかく明るい

Colors

• 地色は白・方眼・淡黄・山吹・オレンジ・茶の順に切り替え、単調にしない
• 文字は黒ではなく焦げ茶を基本にする
• 最重要語はオレンジ文字、または焦げ茶の黒帯に白抜きにする
• 山吹の面の上には白い吹き出しカードを置く
• 実績の数字だけ金のグラデーションにする
• 最後の仕様は茶色い地に白い内枠を置いて落ち着かせる

Typography

• キャッチは語ごとに文字サイズを変えて、リズムをつける
• 強調語は大きいオレンジ文字にし、助詞は小さくする
• 一部の見出しは白抜きに焦げ茶の縁取りを付ける
• 悩みは写真の上に縦書きで置く
• 本文は罫線の上に書く便箋風にすることがある
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は全幅で配置し、キャッチを上に重ねる
• セクションごとに地色を変えて区切る
• カードは左右 6% の余白を取り中央に置く
• カルーセルの左右には細い矢印を付ける
• イラストの人物はカードの端からはみ出させる

Elevation & Depth

• 影はほぼ使わない
• 吹き出しには焦げ茶でずらした影を付けて立体感を出す
• 写真の上の文字は白い光彩で読みやすくする

Shapes

• 角丸: 小 8px ／ 中 20px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 全幅の長方形。悩みの写真は不定形の円に切り抜く。商品は切り抜き。
• セクション境界: 大きな波形や円弧で地色を切り替える
• カードは右下など一角だけを大きく丸める
• 吹き出しは尻尾付きの角丸長方形
• ラベルは小さいピル型にする
• セクションの上端をアーチ型にすることがある

Components

• 焦げ茶線の吹き出し（speech-bubble-outline）: 白地に焦げ茶の太い線。ずらした影と尻尾が付き、導入の一言を入れる。
• 口コミ吹き出しカード（review-card）: 白いカードに星評価、ひとこと、年代を入れる。横にイラストの人物を置く。
• 茶帯ラベル（label-dark-bar）: 焦げ茶の帯に白い文字。セクションのつなぎや部位ラベルに使う。
• 使い方カード（usage-card）: 番号タブ、部位ラベル、ハッシュタグを並べる。オレンジと山吹を交互に使い、一角を丸めて番号付きの手順と写真を入れる。
• ポイント見出し（point-heading）: 小さい英字ラベルと大きいオレンジの番号に、焦げ茶の見出しを横に並べる。
• マーカー強調（marker-text）: 強調語の下半分に黄色のマーカーを引く。
• ギザギザバッジ（explosion-badge）: オレンジのギザギザした円に、白い大きな一文字を入れる。
• 仕様表（spec-table）: 焦げ茶の罫線で区切る 2 列の表。左が項目名、右が値。

Do's and Don'ts

Do - 山吹・オレンジ・茶の暖色 3 色でまとめる - 見出しの近くには必ず吹き出しかイラストを添える - 地色を波形でリズムよく切り替える - 動きを表す矢印や効果線を写真の上に描き込む - 生活の中で使っている明るい写真を使う

Don't - 純黒の文字や寒色の地を使わない - 角ばった硬いボックスを並べない - 写真を暗く加工しない（悩みのセクションだけ例外） - フォントを細いものにしない

Page Structure

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

1. ファーストビュー（使っている様子と一言で価値を伝える）: 明るい部屋の全幅写真。吹き出し、大きなキャッチ、効果線を重ね、下を山吹の波形で切る。
2. 実績（販売数で信頼を示す）: 方眼の地に金グラデの大きな数字を置き、星の装飾と注釈を添える。
3. お客様の声（導入）（共感をつかむ）: 山吹の円弧に、ギザギザバッジと口コミ吹き出し、イラストの人物を置く。
4. 悩みの提起（悩みを 4 つ見せる）: 灰色のもやの地に、不定形に切り抜いた写真を 4 枚。縦書きの黒いラベルを添える。
5. 原因と専門家（原因を説明して権威を示す）: 茶の見出し帯の付いた白い便箋カードに説明を入れ、専門家のイラストとオレンジのバッジを置く。
6. よくある迷い（手間への不安を出す）: 山吹の地に、チャット風の白い吹き出しを左右交互に 3 つ置く。
7. 解決策（寝るだけで伸びることを見せる）: 全幅の写真を続け、矢印と吹き出しで使い方の流れを図にする。
8. 使い方（部位ごとの使い方を見せる）: 淡い黄の地に、番号付きのカードをカルーセルで 3 つ並べる。
9. 特長（こだわりを 3 つ伝える）: オレンジの枠の中に方眼の地。ポイント見出し、マーカー、写真、矢印で順に見せる。
10. お客様の声（実際の感想で後押しする）: 山吹のアーチに、口コミカードのカルーセルとイラストの人物を置く。
11. まとめのビジュアル（価値をもう一度伝える）: FV と同じ型の写真とキャッチ。
12. 商品仕様（サイズと仕様を伝える）: 茶色い地にアーチ型の白い枠。寸法線入りの写真、仕様表、届くときの状態の吹き出しを入れる。

Imagery

• 自然光の白いリビングで、くつろいだ服装の女性が使っている写真
• グリーンや木の家具を入れて、生活感のある明るい写真にする
• 線の少ないフラットな人物イラスト。青・オレンジ・茶の服で、手を広げた元気なポーズ
• 猫など、ほっこりする切り抜き写真を角に添える
• 手描き風の矢印、点線、効果線、波線
• 背景には方眼紙の模様
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は SP の画像を中央に 1 カラム（幅 750px 程度）で置く
• PC の左右の余白には方眼か淡い黄の地を敷く
• カルーセルは PC では 2〜3 枚並べてもよい
• 文字サイズは SP の約 1.3 倍を上限にする

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