DESIGN.md — ピンク×水色のペーパークラフト風洗顔料 LP（Papercraft Pink and Sky Blue Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、やさしい・柔らかい、清潔・爽やか、上品・高級
• キーワード: ペーパークラフト・フラミンゴと気球・ピンク×水色・深紅の明朝見出し・雲形吹き出し・限定ボトル
• 地の質感: 和紙のような細かい紙の繊維感がある背景。切り絵を重ねて影を付けた立体感がある。
• 形: 四角いカードと雲形の吹き出し、ピル型ボタン、波形の区切り線
• 温度感: 暖色ピンクと寒色水色を半々に使う。夏らしく爽やかで、ほんのり甘い印象。

Colors

• 地は水色とピンクの紙を交互に使い、セクションの切り替わりを色で示す。
• 見出しと強調語はすべて深紅で書く。
• クレンジングの商品は水色、洗顔料はピンクで色を分けて扱う。
• 最後の CTA 帯だけ深紅のベタ塗りにして、上に白いボタンを載せる。
• 切り絵の濃い青は装飾だけに使う。文字には使わない。
• button-product は文字 #5BA3D3 × 背景 #FDFDFD のコントラスト比が 2.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#2F7BAE、4.52:1）を使う。

Typography

• 大見出しは深紅の明朝体で書き、品よく見せる。
• 悩みリストでは、キーワードだけ 1.3 倍の大きさの深紅にする。
• 吹き出しの中は 2〜3 行の短いフレーズにし、太字のゴシックで書く。
• 欧文の記念ロゴや大きさの表記にはセリフ体やスクリプト体を混ぜる。
• 成分や価格の注釈は 10px 前後の小さな文字にまとめる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードの左右は約 8% あける。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 60px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは紙の地の上に浮かべ、周りの余白に切り絵の葉や気球をはみ出させる。
• 商品カードは「名前見出し → 商品写真 → 吹き出し → 説明コピー → 価格 → 注釈」の順に並べる。
• 悩みの提起は 1 枚の縦長カードにまとめ、上部・中部・下部を波形で区切る。
• CTA ボタンはほぼ全幅にして、縦に 2 つ並べる。

Elevation & Depth

• カードには薄いドロップシャドウを付け、紙が浮いて見えるようにする。
• 切り絵の装飾は重なりごとに柔らかい影を付ける。
• ボタンには影を付けない。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品ボトルは切り抜きにして、斜めに置いたり重ねたりする。
• セクション境界: カード内は波形で区切る。セクション間は色の切り替えのみ。
• カードは角丸なしの四角にする。
• ボタンとラベルはピル型にする。
• 吹き出しは雲のような形にし、水色の縁を付ける。
• 成分の配合率のバッジは、泡のような円形にする。

Components

• 店舗・通販への CTA（button-primary）: 深紅の帯の上に置く、白い四角ボタン。深紅の文字と右向きの矢印を付ける。
• 商品詳細へのボタン（button-product）: 白いピル型。細い枠線を付け、文字は商品の色、右端に矢印を置く。
• 商品名のラベル（label-pill）: 水色またはピンクのベタ塗りのピル型。文字は白。
• 雲形の吹き出し（cloud-bubble）: 白い雲形。水色の縁を付け、中に深紅の短いフレーズを書く。
• 配合率の泡バッジ（bubble-badge）: 半透明の円形。数字を大きな深紅の文字で載せる。
• 悩みリスト（worry-list）: 淡いピンクの丸を行頭に置き、強調語を深紅で大きくする。上に淡い青のピル型の見出しと人物イラストを置く。
• 波形の結論帯（wave-band）: カードの下部をくすみピンクの波形で塗り、白い太字で結論を書く。
• 発売日の丸バッジ（date-badge）: FV の右上に置く白い円。深紅のセリフ体で日付と限定の表記を書く。

Do's and Don'ts

Do - 地には紙の質感を必ず入れ、切り絵のような立体装飾を重ねる。 - 2 つの商品は同じ型のカードにして、色だけ水色とピンクで変える。 - 見出しと強調語は深紅に統一する。 - 葉・鳥・気球のモチーフは、カードの外にはみ出すように配置する。 - 注釈は小さく、商品カードの中に収める。

Don't - フラットな単色背景だけで作らない。 - 原色の黄色や緑など、パレット外の色を足さない。 - カードに大きな角丸を付けない（四角が基本）。 - 強調語を何色にも塗り分けない。 - CTA ボタンを深紅のベタ塗りにしない（帯の上に置く白いボタンにする）。

Page Structure

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

1. ヘッダー（ブランドの提示と、メニューへの導線）: 白地の中央にロゴ、左に特設サイトのバッジ、右に三本線のメニューを置く。
2. ファーストビュー（限定ボトルを告知する）: ピンクの切り絵の中に、ハート形にくりぬいた立体シーンを作る。2 本のボトルを置き、上部にキャッチ、右上に日付の丸バッジを置く。
3. ベネフィットの提示（洗顔で得られる効果をひと言で伝える）: 水色の紙の地に深紅の明朝体の見出しを置く。商品ごとのカードに雲形の吹き出しを 2 つずつ付け、下にピル型のラベルを置く。
4. 悩みの提起（季節ならではの肌の悩みに共感させる）: 縦長の白いカードを使う。場面ごとにラベルとイラストを付けて悩みを 3 つずつ並べ、下向きの三角を挟んで、ピンクの波形の帯に結論を書く。
5. 商品紹介（1）（オイルの特長・価格を伝える）: 気球の装飾を置いた見出しの下に、水色の商品カードを置く。吹き出し、泡バッジ、説明コピー、価格、注釈を順に並べ、最後に白いピル型ボタンを置く。
6. 商品紹介（2）（洗顔料の特長・価格を伝える）: フラミンゴの装飾を置き、（1）と同じ型をピンクのカードで作る。
7. CTA（店舗検索や通販への誘導）: 深紅の帯の上に、白い四角のボタンを 2 段に並べる。
8. SNS リンク（外部のサービスへの導線）: 白地に、細い枠線のロゴボタンを 3 つ縦に並べる。
9. フッター（ブランドサイトのナビと規約へのリンク）: 深紅の帯にナビの文字を白で縦に並べる。下の白地に、規約のリンクとコピーライトを置く。

Imagery

• 紙を切り抜いて重ねたペーパークラフト風のシーンを作る。モチーフはフラミンゴ、熱気球、モンステラ、ヤシの葉。
• 葉は濃い青・深紅・白の 3 色で、切り絵のようにベタ塗りで描く。
• 商品ボトルは切り抜きにし、柔らかい影を付けて紙のシーンに置く。
• 人物は線画に淡い色を付けた素朴なイラストにし、悩みの表情を見せる。
• 背景には小さな雲や円形の紙片を散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では FV を横長にし、左にビジュアル、右にコピーを置く。
• PC ではベネフィットのカードを 2 つ横に並べる。
• PC では悩みリストを 2 カラムにする。
• PC では商品紹介の 2 枚を左右に並べ、高さを揃える。
• PC では CTA ボタンを横に並べ、ナビは横一列にする。

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