DESIGN.md — 桜ピンク×水色の限定コスメ LP（Pastel Sakura Limited Cosmetics LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、やさしい・柔らかい、上品・高級、情報量多め・訴求型
• キーワード: 桜・パステル・限定エディション・欧文セリフ・韓国コスメ・ふんわり
• 地の質感: マットで粉っぽい淡色の面。花形モチーフはクレヨンや綿のような柔らかいにじみ
• 形: 四角の写真ブロックが基本。小さな角丸カードと、花びら形の装飾を浮かせる
• 温度感: 暖かめ。生成りとくすみピンクが中心で、水色を少し差して涼しさを足す

Colors

• 地色は生成り（#F6F4EE）を基本にする。特長ごとに淡ピンク・淡水色・ベージュを交互に敷く
• 強調色は桜ピンク 1 色だけ。本文の中で強調したい語句をピンクの太字にする
• 水色はサブの欧文や花モチーフ、引用ボックスにだけ使い、面積は小さくする
• 黒は日本語見出しだけに使う。本文はやわらかいグレーにする
• 比較表は肌色のベージュでまとめ、項目名をくすみローズにする
• 濃い色（こげ茶）は STEP ラベルのような小さい部品にだけ使う

Typography

• セクションは細い欧文セリフの見出しで始め、その下に日本語の太字見出しを置く
• 欧文の一部の頭文字を筆記体にして、ほかの文字と重ねる
• 本文は中央揃えで、1 行を短めにして 2〜3 行で改行する
• 強調したい語句はピンクの太字にする
• 英字のサブラベルは小さく大文字で、字間を広めに取る
• Q&A の番号は斜体のセリフ体とピンクで「01.」の形にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。構成カードと比較表だけ 3 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算）
• 写真は全幅で大きく見せ、文字ブロックは左右に約 6% の余白を取る
• 特長のセクションは見出し→本文→写真の順で縦に積む
• Before/After は 2〜3 枚の写真を横に並べる
• 画像と文字を左右半分ずつに置くブロックを交互に入れ替えてリズムを作る
• Q&A は質問の左寄せ・右寄せを交互にし、回答パネルを少しずらして重ねる

Elevation & Depth

• 影はほとんど使わない。面の色の差で区切る
• Before/After のパネルは半透明の白い角丸面にし、写真の上に浮かせる
• Q&A の回答パネルには斜めの切り欠きと薄い影を付け、紙を重ねたように見せる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角の全幅トリミング。商品カット写真は角丸 8px のカードに入れる
• セクション境界: 直線で区切り、地色を切り替える
• ハッシュタグのラベルは角丸 4px の塗りの帯にする
• 花形モチーフを写真や地の上に散らす
• 比較表は細い線で区切り、角丸を付けない
• Q&A のパネルは角を斜めに切り落とした多角形にする

Components

• 欧文セリフ見出しセット（serif-section-title）: ピンクの欧文セリフに筆記体の頭文字を重ねる。その下に黒の日本語太字見出しを置く
• 番号付き構成カード（set-item-card）: 白地にピンクの細い枠。番号、商品写真、ピンクのハッシュタグ名、商品名を並べた 3 カラムのカード
• Before/After 比較（before-after）: 肌の写真を左右に並べ、右下に白い英字ラベルを付ける。下に小さい注釈を添える
• ハッシュタグ帯（hashtag-label）: ピンクやベージュの塗りに白文字で「#名称」を入れる小さなラベル
• チェックリスト（check-list）: ピンクのチェックボックスアイコンに黒太字の項目を添え、成分や認証を並べる
• ラインナップ比較表（compare-table）: ベージュの地。左列にくすみローズの項目名、評価は黒丸と白丸で段階表示する
• Q&A パネル（qa-item）: 斜体のピンク番号と太字の質問。その下に斜めカットの淡いパネルで回答を載せる
• 水色の引用ボックス（quote-box）: 左に写真、右に水色の面を置き、白文字で使い方のアドバイスを引用符で囲む

Do's and Don'ts

Do - 欧文セリフの見出しと花モチーフで、季節の限定感を出す - セクションごとに淡いパステルの地色を切り替える - 人物写真は淡い背景で大きく全幅に配置する - 強調はピンクの太字に絞る - 数値や比較は表と Before/After で見せる

Don't - 彩度の高い原色や濃い背景を広く使わない - 太い角丸ボタンやポップな影を多用しない - 見出しを太いゴシックだけにしない（欧文セリフを必ず添える） - 本文を黒の太字だらけにしない - 強調色にピンク以外の色を混ぜない

Page Structure

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

1. ファーストビュー（限定エディションの世界観を伝える）: 上部に大きな欧文タイトルを置き、人物写真を全幅に配置する。周りにパステルの花モチーフを散らす
2. コンセプト導入（限定品の概要とキャッチを示す）: 生成り地に水色とピンクのロゴ風欧文を置き、中央揃えで短い紹介文を並べる
3. セット内容（限定セットの中身を見せる）: 角丸カードに商品の物撮り写真を入れ、手書き風の矢印注記を添える。続けて人物写真を挟む
4. 構成アイテム一覧（含まれる商品を整理する）: 番号付きのカードを 3 つ横に並べる
5. 特長1（質感）（テクスチャの魅力を伝える）: ピンクの地に白の欧文見出しを置き、縦のストライプ線と人物写真を合わせる
6. 使い方のアドバイス（上手な使い方を伝える）: 淡い水色の地に、写真と引用ボックスを左右に並べる
7. 特長2・3（カバー力・持続力）（効果を示す）: 欧文見出しと日本語見出しの下に Before/After を並べ、人物写真に重ねる
8. 成分・安全性（低刺激で安心なことを伝える）: 認証ロゴ、チェックリスト、成分の層構造図、商品写真を並べる
9. ディテール（パフや容器のこだわりを伝える）: 写真と文字を半分ずつに置いたブロックを、ハッシュタグ見出し付きで左右交互に並べる
10. カラー展開（色の選び方を示す）: テクスチャのスウォッチと色番号の表、腕に塗った写真を載せる
11. ラインナップ比較（シリーズの違いを比べられるようにする）: ベージュの地に 3 列の比較表を置き、評価を丸印で表す
12. よくある質問（不安や疑問を解消する）: 淡ピンクの地に、番号付きの質問と斜めカットの回答パネルを交互の向きで重ねる

Imagery

• 人物写真は淡いクリーム色の背景で、柔らかい自然光の中で撮る。ピンクのニットとデニムのような甘めのカジュアルな服装にする
• パステルピンクと水色の花形の綿・クレヨン風のオブジェを、ぼかしながら写真の上に浮かべる
• 商品の物撮りは真上や斜め上から、淡い水色やピンクの小物と一緒に撮る
• 肌のアップ写真は均一なライティングで並べ、仕上がりの差を見せる
• ファンデーションを塗り広げたスウォッチを、切り抜きで背景に重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では本文の幅を 640〜760px に収めて中央に置き、左右には地色を延ばす
• 画像と文字を半分ずつに置くブロックや比較表は、PC では 1.5 倍程度に広げる
• 欧文の大見出しは PC で 80〜100px に拡大する
• FV の人物写真は PC では左右に余白を取るか、2 カラムにする

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