DESIGN.md — クリーム色と手書き文字のボタニカルボディケアLP（Warm Cream Handwritten Botanical Body Care LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: やさしい・柔らかい、ナチュラル、親しみ・手作り感、かわいい
• キーワード: クリーム色グラデ・手書き風キャッチ・ベージュマーカー・大理石調テクスチャ・吹き出し・植物とクリームの散らし
• 地の質感: 白い大理石やミルクの質感をうっすら敷き、クリーム色のグラデで区切る。
• 形: 角丸の吹き出し、丸や雲形の写真マスク、ピル型ボタン。
• 温度感: 暖かい。黄み寄りのクリームと茶色が基調。

Colors

• 地は白とクリームを交互に使い、境界はグラデでぼかす。
• 強調は茶色文字＋ベージュマーカーで行い、原色は使わない。
• CTAはくすみピンク1色に統一する。
• 悩みの提示だけはチャコールの吹き出しで締める。
• 診断のYES/NOはオレンジとブルーの細矢印で色分けする。
• button-primary は文字 #FFF5F0 × 背景 #D29B92 のコントラスト比が 2.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B05749、4.55:1）を使う。
• marker-highlight は文字 #856D5A × 背景 #FDECCB のコントラスト比が 4.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#7D6755、4.57:1）を使う。
• handwritten-catch は文字 #856D5A × 背景 #FDECCB のコントラスト比が 4.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#7D6755、4.57:1）を使う。

Typography

• 本文は中央揃え・短い改行で詩のように流す。
• 各ブロックに手書きフレーズを1つだけ入れ、ベージュマーカーを敷く。
• キーワードは茶色太字＋薄枠マーカー箱で強調する。
• 字間は広め(0.1em)で柔らかく見せる。
• 注釈は小さく灰色で画像直下に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（SNS投稿のみ写真＋テキストの2分割）
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• テキストは中央揃えで縦に積む。
• 写真は全幅または丸マスクで大きく配置。
• 商品写真の下に名称・容量・価格を中央に小さく置き、直後にCTA。
• レビュー吹き出しは縦に3つ、16px間隔。
• 植物・果物・クリームの素材を余白の左右に散らす。

Elevation & Depth

• 吹き出しやボタンは右下に同色系の濃いベタ影(3〜4px)をずらす。
• ぼかし影はほぼ使わない。
• 素材写真は切り抜きで浮かせ、影は自然な落ち影のみ。

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 切り抜き商品・丸や楕円・雲形マスク、SNSは角丸なしの四角
• セクション境界: 直線を使わず、クリーム→白のグラデでぼかして切り替え
• 吹き出しは角丸16pxに尻尾付き。
• マーカーは角なしの帯か細枠の箱。
• 診断ノードは白い正円。
• 購入先ボタンは黄枠の角丸正方形。

Components

• 購入ボタン（button-primary）: くすみピンクのピル型、左端に商品画像がはみ出し、右に下向き矢印。
• マーカー強調（marker-highlight）: 茶色文字の背面にベージュ帯や細枠箱を敷く。
• 手書きキャッチ（handwritten-catch）: 茶色の手書き書体で1行、下にベージュ帯。
• 悩み吹き出し（worry-bubble）: チャコール地に白い手書き文字、斜めに互い違いに配置。
• レビュー吹き出し（review-bubble）: 白地に茶色細枠とベタ影、尻尾付き。強調語はマーカー。
• SNS投稿カード（sns-card）: 写真とアカウント名ラベル、罫線入り本文。左右交互、間にクリームの太線。
• 診断チャート（diagnosis-chart）: 白い丸ノードをYES/NO色矢印で結び、最下段に商品を並べる。
• 購入先ボタン（store-button）: 白地に黄枠の角丸正方形、ロゴと下矢印。4つ横並び。

Do's and Don'ts

Do - 強調は茶色＋ベージュマーカーに統一する。 - 手書きフレーズで語りかける温度を出す。 - 植物・果物・クリームの切り抜きを余白に散らす。 - セクション境界はグラデでぼかす。 - 商品写真の直後に価格とCTAを置く。

Don't - 彩度の高い赤・青をCTAや見出しに使わない。 - 直線の区切りや濃い帯の見出しを入れない。 - 本文を左揃えの長文にしない。 - 手書き書体を本文に使わない。 - 硬いぼかし影や角張ったボタンを使わない。

Page Structure

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

1. ファーストビュー（商品の挨拶と印象付け）: クリーム地に手書きキャッチの白い吹き出し、傾けた商品と果物・ハーブ・クリームを散らす。
2. ブランドのこだわり（成分・無添加の訴求）: 中央揃え本文に、こだわり3点を枠付きマーカーで×記号でつなぐ。
3. 使用シーン（家族で使える安心感）: 親子の写真を全幅で、下に注釈。
4. シリーズ実績（信頼の提示）: クリーム地の導入文と、シリーズ集合写真を全幅で。
5. 商品紹介とCTA（主役商品の提示）: 手書き強調文の後、雲形マスクの商品写真、名称・価格、ピル型CTA。
6. 悩みの提起（共感）: 大理石地にチャコール吹き出しを2〜3個互い違いに。
7. 使用感・香りの訴求（テクスチャと香りの魅力）: 肌に塗る写真、クリームの質感写真、手書き強調の本文、3枚並びのイメージ写真。
8. お客様の声（共感と信頼）: クリーム地に白い吹き出し3つ、楕円マスクの商品写真とCTA。
9. SNS投稿（口コミの拡散感）: 写真とテキストを左右交互に並べたカード3件。
10. 診断チャート（シリーズから選ばせる）: 手書き大見出し、白丸ノードの分岐図、商品4種と購入先ボタン。
11. 締めのメッセージ・フッター（ブランド想いで締める）: 大理石地に手書きマーカー文、ロゴと企業リンク。

Imagery

• 白いボトルを自然光で明るく撮り、切り抜きで斜めに置く。
• オレンジ・はちみつ・ラベンダー・カモミールなど植物素材を切り抜きで散らす。
• クリームのひと塗りを白背景で質感強めに撮る。
• 人物は親子や手肌のアップで柔らかい光、肌色の温かい色調。
• 背景は淡い大理石やリネン調テクスチャ。
• 空や花畑の明るい写真を楕円マスクで使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はSP幅(約400〜480px)の中央カラムを維持し、左右はクリームか大理石の地で埋める。
• 3枚並び写真やSNSカードはPCで横幅を広げてもよい。
• CTAは最大幅360px程度で中央揃え。
• 散らし素材はPCでカラム外の左右にも配置可。

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