DESIGN.md — 桜ピンク×ハートの甘めカラコン LP（Sweet Pink Heart Idol Color Lens LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、やさしい・柔らかい、上品・高級
• キーワード: くすみピンク・ハートモチーフ・細身の欧文セリフ・目元接写・ガーリー・パステルグラデーション
• 地の質感: 霧がかったパステルのグラデーション地。白の半透明フチとうっすらした影でふんわり重ねる
• 形: ハート形の枠・吹き出し・バッジ、角丸の白カード、ピル型ラベル、丸く切り抜いたレンズ画像
• 温度感: 暖色寄り。甘くて柔らかい

Colors

• 地はくすみピンクとごく淡いピンクのグラデーション。白は面積の多いカードやハートに使う
• 商品ごとにテーマ色を変える。ピンク系とピーチ／キャラメル系の2系統
• 文字は黒を使わず、ブラウン系（#5A4135〜#7A5A55）でまとめる
• ラインナップでは、カラーごとにラベル色（ピンク・ピーチ・ラベンダー・オリーブ・水色）で見分けられるようにする
• 濃い色は小さいバッジと色見本だけに使う。高彩度の赤や黒の面は使わない
• heart-badge は文字 #FEFBFD × 背景 #D98A9A のコントラスト比が 2.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#C44A63、4.53:1）を使う。
• point-heart は文字 #FEFBFD × 背景 #EBBBB9 のコントラスト比が 1.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C94742、4.58:1）を使う。
• feature-heart-card は文字 #EBBBB9 × 背景 #FFFEFE のコントラスト比が 1.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C94742、4.53:1）を使う。
• section-label は文字 #EBBBB9 × 背景 #FFFEFE のコントラスト比が 1.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C94742、4.53:1）を使う。

Typography

• 英字の大見出しは細いセリフ体。セクション名にも使う
• 日本語の大見出しの上に、小さいカタカナ読みを添える
• 強調したい語だけを大きく太くし、前後の語は小さくする
• 英字のサブコピーは字間を広く(0.2em)して淡い色にする
• ハート内の数値は「ラベル小・数値大・単位小」の3段で組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ラインナップは 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は端まで広げ、テキストブロックは左右に余白をとって中央に置く
• 目元の写真とレンズの丸画像を斜めに重ねて配置する
• セクションの先頭に、点線の横罫と小さい英字ラベルを置く
• スペックは 3 つのピル型ラベルを横に並べる
• 白カードの上部に英字見出しを重ね、カードを地からはみ出させる

Elevation & Depth

• 白カードには淡いピンクの影(0 4px 16px rgba(200,140,150,.2))を付ける
• レンズの丸画像には薄いドロップシャドウを付けて浮かせる
• ハート吹き出しは白一色にして、ほぼ影なしでふわっと置く

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物はハート形または角丸の枠で切り抜く。レンズは正円にし、目元は横長の角丸にする
• セクション境界: グラデーションで地色をなじませて切り替える。ハート形の大きいカーブで区切る場合もある
• ハートは塗り・白抜き・線画の3種類を使い分けて散らす
• 四角い要素も角は丸める
• ピル型ラベルは片側だけ角を落とした形でもよい

Components

• ハートのスペックバッジ（heart-badge）: ハート形の中に数値と単位を3段で組む。3つを横に並べる
• ハートの吹き出し（heart-bubble）: 白いハートの中で悩みや要望を述べ、キーワードだけ大きくする
• ピル型スペックラベル（pill-label）: 淡い色の面に直径などを書いたものを 3 つ横に並べる
• 帯状のキャッチ（highlight-band）: 白地またはピンク地の帯に、太めのゴシックを1〜2行で置く
• ポイント番号ハート（point-heart）: グラデーションのハートに英字の要点名を入れ、右側にカギ括弧で囲んだ説明文を置く
• ラインナップカード（lineup-card）: 英字の色名、目元の写真、丸いレンズ画像、色分けしたスペック帯で構成する
• 機能紹介の大ハート（feature-heart-card）: 白い大きなハートに、線画アイコン・説明・POINT番号のピルを入れ、2×2で並べる
• セクションの英字ラベル（section-label）: 点線の罫の中央に、白いピル型で小さい英字を置く

Do's and Don'ts

Do - ハートのモチーフを全セクションに必ず散らす - 目元の接写とレンズ単体の画像をセットで見せる - テーマ色は商品ごとに統一し、そのセクション全体の地色まで切り替える - 英字見出しの近くに日本語の読みを小さく添える - 文字色はブラウン、地はパステルにし、コントラストを柔らかく保つ

Don't - 黒い文字や黒い面を使わない - 鋭い角や、太い直線の枠を使わない - ビビッドな原色の CTA ボタンを置かない - フォントを太いサンセリフの英字だけに統一しない - 背景を単色ベタ塗りの平坦な面にしない

Page Structure

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

1. ファーストビュー（新作の登場とサイズ感を印象づける）: 人物写真を角丸枠に収め、大きな数値の見出しとハートを重ねる。下にレンズの丸画像を並べる
2. カラーの一覧（全色を一目で見せる）: 小さい丸レンズを横一列に並べ、その下にスペックのピルを置く
3. 目元の比較（装用イメージを見せる）: 両目の接写を横長に入れ、下に2色分の色名タブを置く
4. サイズの比較（旧サイズとの違いを示す）: 2つのレンズを矢印でつなぎ、数値ラベルを付ける
5. 悩みの提起（要望を代弁する）: 白いハートの吹き出し2つにキーワードを大きく書き、斜めの一文で応える
6. 新商品の紹介（新作を主役として見せる）: 角丸の目元写真にNEWのハートバッジを付け、英字の商品名を添える
7. カラーの詳細カード（色・フチのデザインを説明する）: 白い大カードにレンズ・目元・色見本を交互に置く
8. カラー別の特集（1色ずつ世界観を伝える）: テーマ色の地にハート形で切り抜いた人物写真、帯状のキャッチ、ハートのスペックを置く
9. ポイント（フチと発色の特長を伝える）: ハートのポイント番号と説明文、大きいレンズ画像、スペックピルを並べる
10. 機能紹介（機能面の安心感を伝える）: 白い大きなハート4つを2×2で並べ、線画アイコンを入れる
11. ラインナップ（全色を比べられるようにする）: 2カラムのカードで、ラベル色をカラーごとに変える
12. カラーチャート（明るさとフチの太さで色を位置づける）: 十字の座標軸の上にレンズと色ラベルを配置する
13. プロデューサー紹介（信頼と憧れを生む）: 大きな人物写真の下に、英字の名前と中央揃えのプロフィールを置く
14. フッター（法定表記）: ピンクの地に手書き風ロゴを置き、白い細線の下に小さい注記を入れる

Imagery

• ピンクの柔らかい背景で、白いレースやリボンを身につけた女性を、正面寄りのアップで撮る
• 目元の接写は明るく高キーにして、まつ毛と瞳孔まで鮮明に写す
• レンズ単体の画像は白地で正円に切り抜き、淡い影を付ける
• 線画のハート、手書きの英字、点線を装飾として散らす
• アイコンは淡いピンクの線と塗りで描いたかわいいイラストにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に 480〜600px 幅の SP レイアウトを置き、左右をピンクのグラデーションで埋める
• ラインナップは PC で 3〜4 カラムにする
• 機能紹介のハートは PC で横 4 つに並べる
• 英字の大見出しは PC で 1.5 倍程度に拡大する

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