DESIGN.md — モカとレースのスイーツ風カラコンLP（Dessert Lace Collage Color Lens LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、かわいい、やさしい・柔らかい
• キーワード: スイーツモチーフ・レース縁・紙質感・コラージュ・モカブラウン・星空の黒
• 地の質感: ざらついた和紙・画用紙風の生成り地に、レースペーパーの縁取りと網点の銀食器写真を重ねる
• 形: 角の立った紙片カード、波打つレース縁、リボンと星（四芒星）の小さな装飾
• 温度感: 暖かめのベージュとピンクが中心。黒の星空とグレーで甘さを引き締める

Colors

• 地は生成りとピーチベージュの紙地。白一色にしない
• ブランド文字や見出しはモカブラウンで統一する
• 商品ごとにテーマ色を決め、帯・商品名・リボンをその色にそろえる
• 星空の黒セクションを1〜2か所挟んでメリハリをつける
• 強い原色やビビッドな色は使わず、くすみトーンにする
• 本文はグレーブラウンにして、真っ黒は避ける
• lace-paper-card は文字 #906B62 × 背景 #FAFAF5 のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#8E6A61、4.57:1）を使う。
• feature-item は文字 #906B62 × 背景 #DFC4BD のコントラスト比が 2.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#FCFAF9、4.52:1）を使う。

Typography

• 和文の見出しは細身の明朝か手書き風にして、一部に引用符を付けて強調する
• 商品名は太い丸みのある欧文サンセリフに、カタカナ読みを小さく添える
• 英字見出しはセリフ体で左右に二重線を添える
• 本文は小さめで行間を広めにとり、中央揃えにする
• 数値は欧文で大きく、単位とラベルは小さく上に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ラインナップと特長は 2 カラムを併用
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 紙片カードを画面幅の約85%で中央に置き、周りに背景写真やコラージュをのぞかせる
• 商品セクションは、写真・テーマ色帯・商品名・スペック4列・比較写真2枚の順に固定する
• スペックは縦線で区切った4列で横に並べる
• 特長はアイコン円を左に、見出しと説明を右に置いて縦に積む
• 見出しの上に四芒星を置き、中央揃えにする

Elevation & Depth

• 紙片カードにはごく薄いドロップシャドウを付ける
• コラージュ素材（お菓子・食器）は切り抜きに軽い影を付けて浮かせる
• 表やボタンは影なしのフラットにする

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: モデルは角のある矩形、口コミのアイコンは円、商品はフォトフレーム風の白縁
• セクション境界: レースペーパーの波形の縁で区切る。一部は斜めのカーブで切り替える
• カード下端はレース縁で仕上げる
• スペックのラベルは小さなピル型にする
• 口コミ枠は外側を大きく角丸にし、内側は直角の紙片にする
• 装飾のリボンはカード左上に斜めに置く

Components

• レース縁の紙カード（lace-paper-card）: 生成りの紙質感カード。上下にレースの波縁を付ける
• ラインナップカード（lineup-card）: 上辺がテーマ色の白カード。リボン・瞳写真・商品名・スペックピルを載せる
• テーマ色コピー帯（theme-band）: 写真下に重ねる斜体コピーの帯。下端にレース縁を付ける
• スペック4列（spec-row）: 小ラベルと大きい数値を縦線で区切って並べる
• 装用比較写真（compare-photo）: 裸眼と装用時の目元写真を2枚並べ、縦書きのピルラベルを添える
• 特長アイテム（feature-item）: 淡ピンクの円に線画アイコン、右にブラウン見出しと説明文
• 口コミカード（review-card）: 上辺がテーマ色の紙片。円形アイコン・ユーザー名・感想・リボン、下端はレース縁
• スペック表（spec-table）: 見出しセルがモカブラウンに白文字、値セルは罫線のみの2列×2組
• 英字セクション見出し（section-title-en）: 四芒星の下にセリフ体の英字を置き、左右に二重線を添える

Do's and Don'ts

Do - 紙の質感・レース縁・リボンを各セクションに繰り返し使う - お菓子や銀食器の切り抜きを、カードの角からはみ出させる - 商品ごとにテーマ色を一つ決め、帯・商品名・リボンに統一して使う - 見出しの前に四芒星のきらめきを置く - 注釈は小さく中央揃えで、カードの下部にまとめる

Don't - 真っ白なフラット背景だけで構成しない - ビビッドな赤や青のボタンを置かない - 太いゴシックで和文見出しを組まない - 装飾を角丸の大きいポップなカードに置き換えない - テーマ色を一つの商品セクションの中で混ぜない

Page Structure

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

1. ファーストビュー（世界観とブランドを一目で伝える）: 暖色の室内でモデルを撮った全面写真に、大きな欧文ロゴと四芒星を重ねる
2. 主訴求カード（商品の魅力を短いコピーで伝える）: レース縁の紙カードに目元写真・円形バッジ・明朝見出し・レンズ色5つを並べる
3. スペック帯（基本仕様をすぐ見せる）: 黒地に白の小文字で仕様を5項目横に並べる
4. 技術訴求（質感の特長を説明する）: 星空の黒の上に紙カードを置き、レンズの拡大写真と食器コラージュを配置する
5. ラインナップ（全色を一覧で見せる）: ぼかした写真の上に、2カラムのテーマ色カードを並べる
6. カラー別紹介（各色の印象と装用感を見せる）: フレーム風のモデル写真、テーマ色の帯、商品名、スペック、比較写真の順。これを色数分くり返す
7. 特長（機能面の安心感を伝える）: 星空から斜めのカーブでベージュに切り替え、アイコン円付きの項目を4つ縦に並べる
8. コンセプト（シリーズの世界観を物語る）: 紙カードに中央揃えの詩的な文章を置き、下にお菓子が浮遊する写真を続ける
9. 初上陸訴求（話題性を示す）: 明朝の大見出しに筆記体の英字を重ね、目元写真とバッジを添える
10. お客様の声（共感と信頼を得る）: 白い角丸の大枠の中に、テーマ色付きの口コミ紙片を縦に並べる
11. 製品仕様（詳細スペックを示す）: ピーチ地にブラウン見出しセルの表を置く
12. 注意事項（法的な注意を伝える）: レース縁の白い紙地に、小さな文字で中央揃えの箇条を並べる

Imagery

• モデルは暖色の室内で柔らかい光の中で撮り、ウェーブヘアで上品な表情にする
• 目元のアップは肌色がきれいに出る明るさで、裸眼と装用時を同じ構図で撮る
• シュークリーム・ベーグル・ドーナツなどの焼き菓子は、リボン付きで切り抜いて散らす
• フォークやナイフは網点加工したモノクロの切り抜きにし、端からはみ出させる
• レースペーパー、リボン、四芒星のきらめき、星空の粒子テクスチャを使う
• アイコンは細い線画で、ブラウンの単色にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅（約 400〜500px）の縦長カラムを置き、左右に星空か紙質感の背景を敷く
• ラインナップは PC で 3〜5 列に広げてもよい
• カラー別紹介は PC で写真とスペックを左右 2 カラムにできる
• 装飾のコラージュ素材は、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 行書くと起動時に読み込まれる。