DESIGN.md — レモンクリーム×焦げ茶の衣料用洗剤 LP（Soft Lemon Cream Laundry Care LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: やさしい・柔らかい、上品・高級、清潔・爽やか、情報量多め・訴求型
• キーワード: レモンクリーム・焦げ茶の帯・金のメダル・白い角丸カード・布のやわらかさ・比較図解
• 地の質感: 布地を思わせる白〜クリームのやわらかなグラデーション背景に、黄色の波状リボンが流れる。全体にマットで光沢を抑えた質感。
• 形: 大きな角丸の白カード、ピル型ボタン、円形の金メダル、矢印つきの工程チップ。
• 温度感: 暖かめ。黄〜生成りの淡色と焦げ茶でやさしく落ち着いた印象。

Colors

• 地はクリーム〜白の布調グラデーション。純白はカード面だけに使う。
• セクションの区切りは焦げ茶の全幅帯に白文字の見出しで示す。
• 黄・黄緑の淡色は波リボンやカード背後のパネル地に使う。
• 金色はメダルや強調ラベルなど、要所の権威づけだけに使う。
• 赤は注意書きと効果の一言強調だけ。面には使わない。
• 主CTAは焦げ茶の塗り、サブCTAは白地に茶枠。2つを横に並べる。
• badge-medal は文字 #C9A253 × 背景 #5E3A2C のコントラスト比が 4.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。

Typography

• 大見出しは明朝。本文とカード内はゴシックで読みやすくする。
• 見出し中のキーになる数字だけを金色や大きいセリフ体で目立たせる。
• 効果を言う語は太字にし、黄色マーカーか赤文字で強調する。
• 注釈は※付きの小さい文字にして、該当ブロックのすぐ下に置く。
• 見出しは中央揃え、本文は左揃えにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード内の比較や特長は 2 カラムのグリッドにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは焦げ茶帯見出し → 淡色パネル → 白カードの三層で組む。
• カードの中に図解・写真・比較を詰め、カード同士の間隔は16px。
• セクションの最後には主CTAとサブCTAを並べて置く。
• 詳しい説明は「もっと見る」で折りたたむ。
• FAQは白いピル型の行を縦に並べ、右端に＋アイコンを置く。

Elevation & Depth

• 白カードには0 2px 8px程度の薄く暖かい影をつける。
• FAQの行は影なしか極薄の影にする。
• パッケージ写真は影を落とさず、切り抜きで置く。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜きで置き、生活写真は角丸の矩形にする。
• セクション境界: 焦げ茶の全幅帯で区切る。黄色の波リボンを曲線で流す。
• 大パネルは上の角を大きく丸めて帯から立ち上げる。
• バッジは円形の金メダル。
• 工程図は矢印型のチップをつなげて表す。

Components

• 主CTAボタン（button-primary）: 焦げ茶塗りのピル型。右端に矢印をつける。
• サブボタン（button-secondary）: 白地に茶枠のピル型。店舗検索などに使う。
• 帯見出し（section-band）: 焦げ茶の全幅帯に、白の明朝見出しを中央に置く。
• 金メダルバッジ（badge-medal）: 茶の円に金の縁取りをつけ、推奨文言を2〜3行で入れる。
• 金グラデ強調ラベル（highlight-label）: 金〜淡黄の角丸帯に、効果の要点を太字で入れる。
• 白コンテンツカード（content-card）: 大角丸の白カード。図解・比較写真・説明を入れる。
• ステップ見出し（step-label）: 黄緑の帯の左に「Step 01」タグを置く。
• FAQ行（faq-item）: 白いピル型の行。左に黄色のQマーク、右に＋をつける。

Do's and Don'ts

Do - 地は淡いクリームと黄を基調にし、白カードを浮かせて見せる。 - セクションは必ず焦げ茶の帯見出しで始める。 - 効果は図解・比較写真・数字で根拠を示す。 - 主CTAとサブCTAはセットで、各セクションの末尾に繰り返し置く。 - 布や衣類の写真を余白に散らして、やわらかさを出す。

Don't - 原色の黄や濃い緑を大面積に使わない。 - 焦げ茶を本文エリアの地に広げない。 - 角張ったボタンや鋭い装飾を使わない。 - 赤を面や見出し帯に使わない。 - 注釈を省いて、効果の表現だけを強調しない。

Page Structure

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

1. ファーストビュー（商品と最大の訴求を一目で伝える）: 明朝のロゴ風見出し、金メダル、金ラベルを左に、パッケージ写真を右に置く。背景は黄の波。
2. コンセプト（衣類ケアの価値を情緒的に伝える）: 中央揃えの明朝コピー。左右に生活写真を角丸で配置する。
3. 動画紹介（使用感を動画で補う）: 白カードに動画サムネイルを入れ、下にキャプションを置く。
4. 中間CTA（購入と店舗検索へ誘導する）: 商品写真、メダル、要点文の下に2つのピル型ボタンを並べる。
5. 製品特長（3つのポイントと理由を示す）: 帯見出しの下に白カード。金ラベルとアイコンの2カラムで並べる。
6. メリット詳細（ビフォーアフターと利点を見せる）: 比較写真を2枚並べ、メリットのカードは2カラムにする。
7. 使い方（手順と注意事項を示す）: Stepラベルを縦に並べ、「もっと見る」で折りたたむ。注意は赤文字。
8. 技術の秘密（仕組みを図解で納得させる）: 工程比較を矢印チップで示し、グラフと実験写真をカードのグリッドにする。
9. 広告ギャラリー（動画広告で認知を補強する）: 縦型動画のサムネイルを3枚、横に並べる。
10. よくある質問（不安を解消する）: 白いピル型のQ行を縦に連ねたアコーディオンにする。
11. フッター（ブランドへの回遊）: 黄の波の上に商品とロゴ、枠線ボタン、SNSアイコン、リンク群を置く。

Imagery

• 商品は白背景で切り抜き、正面からやや俯瞰で撮る。
• 生活写真は自然光で、白い衣類や部屋干しを淡いトーンで撮る。
• 布やタオルの切り抜きを余白の角に装飾として置く。
• アイコンは細線のベージュ系で、衣類・水滴・葉を描く。
• グラフや工程図は淡黄と茶の2色でまとめる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約75%幅の大パネルで、両脇に布調の背景を見せる。
• SP はパネルを全幅に近い90%にし、カードの2カラムは必要に応じて1カラムに落とす。
• FVは SP では見出しを上、商品写真を下に縦積みする。
• 帯見出しは SP では高さ56px・文字20px程度にする。
• CTAの2ボタンは 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 行書くと起動時に読み込まれる。