DESIGN.md — 水彩花柄×ピンクとターコイズの限定コスメ LP（Watercolor Parisian Limited Cosmetics LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、かわいい、やさしい・柔らかい、ナチュラル
• キーワード: 水彩画・花柄フレーム・パリ旅情・限定コレクション・紙の質感・筆記体見出し
• 地の質感: 水彩紙のような細かい凹凸の白〜生成り地に、にじんだ水彩の花や葉を帯状・額縁状に敷く
• 形: 角丸のほぼない四角いボタンとカード、円形バッジ、細い線の枠
• 温度感: 明るく暖かい春夏の陽光感。ピンクとグリーンで華やかに、ターコイズで爽やかさを足す

Colors

• 地は白と水彩紙の生成りを基本にする。セクションごとに淡いレモン色・淡ピンクへ切り替える
• セクション境界と額縁には花と葉の多色水彩パターンを使う
• 購入系ボタンはすべてローズピンクで統一し、ほかの色は使わない
• 英字筆記体の見出しとテキストリンクの丸矢印はターコイズにする
• 特典まわりだけ、マゼンタの見出しと金茶のラベル帯で格上げする
• 本文は真っ黒にせず、こげ茶で柔らかくする
• button-primary は文字 #FFFFFF × 背景 #DC4A82 のコントラスト比が 3.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D73272、4.58:1）を使う。
• badge-limited は文字 #FFFFFF × 背景 #22B3AA のコントラスト比が 2.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#19847D、4.53:1）を使う。
• anchor-nav は文字 #FFFFFF × 背景 #DC4A82 のコントラスト比が 3.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D73272、4.58:1）を使う。
• gift-ribbon は文字 #FFFFFF × 背景 #A88A5A のコントラスト比が 3.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#8B7249、4.56:1）を使う。

Typography

• 英字筆記体で見出しを立て、その下に和文明朝の小見出しを添える
• 情緒的な和文は明朝で中央揃えにし、行間を広めにとる
• 商品名・価格・ボタンはゴシックで読みやすくする
• 価格は商品名の直下に置き、税込表記を小さく添える
• 見出しは字間を 0.08em 程度開けて上品にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品は横スライダーで 1 枚ずつ見せる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 24px（375px 幅換算）
• 白いカードを水彩フレームの内側に置き、左右に 8〜16px の花柄をのぞかせる
• 商品ブロックは画像→商品名→価格→CTA→詳細リンク→内容枠の順に縦積みする
• スライダーの左右にはターコイズの細い山形矢印、下にはドットを置く
• 要素はすべて中央揃えが基本。長い説明文だけ左揃えにする

Elevation & Depth

• 白カードには、ごく薄いぼかし影をつけて紙が浮いたように見せる
• 人物写真は白フチと薄い影でポラロイド風にする
• ボタンには影をつけずフラットにする

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜きで白地に置く。人物は白フチ付きの四角、特典商品は淡ピンクの円の上に置く
• セクション境界: 花と葉の水彩パターン帯、またはにじみ水彩のぼかしで境界をつくる
• CTA は角丸なしの長方形とし、右端に小さな山形矢印を置く
• 数量限定バッジはターコイズ（特典では金茶）の正円に、白文字 2 行で入れる
• 内容一覧はターコイズの 1px 細枠で囲む
• LINE ボタンだけは角丸 8px にする

Components

• カート追加ボタン（button-primary）: 幅約 200px のローズピンクの長方形。白文字を中央に置き、右端に山形矢印
• 詳細テキストリンク（link-detail）: ターコイズ文字の右にターコイズ丸矢印、下に細い下線
• 数量限定バッジ（badge-limited）: 直径 56px のターコイズの正円に白い細縁と白文字 2 行。商品画像の左上に重ねる
• セクション内ナビ（anchor-nav）: ピンクの四角ボタンを 3 つ横に並べる。白文字 2 行の下に下向き矢印
• キット内容枠（kit-contents-box）: ターコイズ細枠の白ボックス。ピンクの太字ラベルの下に内容を中央揃えで列挙
• 筆記体セクション見出し（heading-script）: ターコイズの英字筆記体。下に明朝の和文キャッチを 2 行で添える
• 特典ラベル帯（gift-ribbon）: 金茶の帯に白文字。両端に菱形の装飾
• アコーディオン（accordion）: 上下を細線で区切った見出し行。右端にマイナス／プラス記号、中身は淡色面
• 特典告知ミニバナー（promo-banner）: ピンク枠の白箱。左に丸い商品写真、右に条件文、下辺にピンクの詳細リンク帯

Do's and Don'ts

Do - 水彩の花柄フレームで白カードを囲み、絵本のような世界観をつくる - 英字筆記体の見出しと和文明朝のキャッチをセットで使う - 購入ボタンはピンクの長方形に統一し、どの商品でも同じ形で繰り返す - 限定感は円形バッジで商品の左上に示す - 余白を広くとり、中央揃えで上品に見せる

Don't - 原色のベタ塗り背景や濃い暗色セクションを使わない - ピル型や大きな角丸ボタンにしない - 本文を太いゴシックで詰め込まない - 水彩パターンを文字の真下に敷いて可読性を落とさない - 強い影やグラデーションボタンを使わない

Page Structure

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

1. ファーストビュー（限定コレクションの世界観と予約開始日を伝える）: テーブル上に商品を並べたキービジュアルに、緑縁取りの筆記体ロゴとマゼンタのサブタイトルを重ねる。下部にピンク帯で日付を入れる
2. リード・特典告知（再登場の告知と予約特典の予告）: 水彩紙の地にマゼンタ明朝の 2 行リード。その下にピンク枠のミニバナー
3. コンセプト（香りの世界観を語る）: 明朝で中央揃えの 6 行程度の詩的な文。下にピンクのナビボタン 3 つを並べる
4. 限定キット（セット商品の販売）: 花柄フレーム内の白カードに筆記体見出しを置く。スライダーで商品・価格・CTA・内容枠を見せる
5. ステップ別ラインナップ（使用ステップ順に単品を紹介）: 淡レモン地に白カードを置く。背景に大きな薄いステップ数字、明朝の動詞見出し、写真、CTA を配置し、スライダーで切り替える
6. その他商品（関連単品の販売）: 水彩紙地で、横に見切れるカルーセルにする。水彩のにじみの上に切り抜き商品とバッジを重ねる
7. コラボアーティスト紹介（デザインの背景と付加価値を伝える）: 白地にロゴの並び、白フチの人物写真、左揃えの紹介文、ピンクのボタン
8. 動画（世界観を映像で補強）: 花柄の額縁の中に、紙地を挟んで動画を埋め込む
9. 香りの詳細（香調を説明する）: アコーディオンにターコイズ明朝の見出しを置く。トップ・ミドル・ベースを三角ピラミッドとイラスト付きの表で示す
10. 成分紹介（配合成分の訴求）: 花柄フレームの白カードに、植物の水彩イラスト、筆記体の成分名、説明と注釈を置く
11. 予約特典（期間限定のプレゼントで予約を促す）: 淡ピンク地にピンクのセリフ英字見出し、日付、金茶のラベル帯、明朝の大きな条件文を置く。商品は円背景に乗せ、注意事項をアコーディオンで続ける
12. SNS・シェア（公式アカウント登録とシェアを促す）: 黄緑の二重枠の白箱に LINE ボタンを置く。続けて緑の水彩地にシェアボタン群

Imagery

• 花・葉・自転車・カフェ・エッフェル塔など、パリの日常を描いた透明水彩イラストを四隅や帯に散らす
• セクション境界には、ピンク・黄緑・緑の水彩タッチを敷き詰めたパターン帯を使う
• 商品は白背景の切り抜きにし、柔らかい水彩のにじみの上に置く
• 単品写真は、紙・絵の具・マカロンなどのアトリエ小物と俯瞰で撮る
• 香りの素材（柑橘・すみれ・ナッツ類）は小さなリアル写真またはイラストで添える
• 紫の蝶の手描きモチーフを点線の軌跡付きでアクセントにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅約 700px の白カードを中央に置き、左右の余白に水彩イラストを大きく配置する
• PC のファーストビューは左にロゴとコピー、右に商品写真の横長構図にする
• キットは PC で画像を左、情報を右の 2 カラムにし、2 件を縦に並べる
• その他商品は PC で 3 カラムを並列表示し、SP はカルーセルにする
• アーティスト紹介は 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 行書くと起動時に読み込まれる。