DESIGN.md — ピンク×深紅のハート装飾カラコン LP（Sweet Pink and Crimson Heart Color Lens LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: ハート・深紅・ベビーピンク・波型フリル・極太セリフ・カタログ
• 地の質感: フラットな単色面が基本。キャンペーン帯だけ、斜めに繰り返す文字柄を地紋に敷く。ハートには立体的なグラデーションを付ける。
• 形: ハート・矢・スカラップ（波型）の境界・角に切り欠きのある枠・吊り下げリボン型タグ
• 温度感: 暖色寄りで甘い。赤で熱量を高める

Colors

• 地は淡いピンクを基本にする。価格を訴求するキャンペーン区間だけ深紅のベタ面に切り替える。
• 見出し・数値・タグ・区切り線はすべて同じ深紅でそろえる。
• 白は情報を入れるカードと購入ボタン帯にだけ使う。
• 赤地の上では白文字を使い、欧文見出しだけ淡いピンクにする。
• 水色は機能アイコンの線画にだけ使い、他には広げない。
• 本文の文字はグレー系にして、赤い見出しと差を付ける。

Typography

• 数字と欧文は極太のディスプレイセリフで大きく組む。
• 日本語の見出しは極太ゴシックで赤くする。
• カラー名の欧文の上に、小さなカナのルビを添える。
• 価格の単位や（税込）は数字の 1/3 程度の大きさにする。
• 説明文は中央揃えで 2 行程度に収める。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カラー一覧とアイコンは 2 カラムのグリッドにする
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カラー紹介は欧文の見出し、サブコピー、レンズと目元写真の横並び、説明文の順で繰り返す。
• カラーとカラーの間は、中央にハートを置いた細い赤線で区切る。
• 3 色ごとにモデル写真を全幅で挟む。
• 情報カードは四隅に切り欠きのある赤線枠で囲む。
• スペックは縦線で区切った横一列の表にする。

Elevation & Depth

• 基本はフラットにする。
• レンズの円形写真の下に、楕円の淡い影を落とす。
• ハートには立体的なグラデーションと軽い影を付ける。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: レンズは白い縁取りの円形。目元写真は白枠の長方形。モデル写真は全幅で切る
• セクション境界: スカラップ（波型）のフリル境界
• ハートと矢をモチーフに繰り返し使う。
• スペックタグは下端が V 字に切れたリボン型で、右上から吊り下げる。
• 価格を見せる面は大きなハート型に切り抜く。
• カードは角が内側に欠けた枠線にする。
• バッジはギザギザの円形にする。

Components

• 購入ボタン帯（button-primary）: 白い横長の帯。左に特典、中央に 1 箱あたりの価格、右端に縦書きの購入ラベルとカートアイコンを置く。
• ハート型価格表示（heart-price）: 大きな赤いハートの中に、直径や価格を白い巨大数字で入れる。矢を貫通させる。
• 吊り下げスペックタグ（ribbon-tag）: 赤い縦長のリボン。ハートと矢のアイコンの下に、直径とカラー名を白いセリフ体で入れる。
• ギザギザ円バッジ（badge-burst）: NEW やお得の表示に使う円形のフリル型バッジ。
• カラー紹介ブロック（color-row）: 左に白縁の円形レンズ、右に白枠の目元写真を置き、色のドットを 3 つ添える。
• 切り欠き枠カード（frame-card）: 白地に赤線で囲む情報カード。比較・カラー一覧・スペックに使う。
• ハート区切り線（heart-divider）: 細い赤線の中央に小さなハートを置く区切り。
• スペック一行表（spec-bar）: 赤い太字の項目を縦線で区切り、横一列に並べる。
• 度数表（power-table）: 赤い見出し行に、白いセルと赤い罫線の格子を組み合わせた表。

Do's and Don'ts

Do - ピンクと深紅の 2 色を主役にして、白はカードだけに使う。 - 数字は極太のセリフ体で画面幅いっぱいに大きく見せる。 - ハート・矢・波型の境界を全編で繰り返す。 - カラー紹介は同じ型を崩さず、色ごとに反復する。 - モデル写真はピンクの背景で撮り、全幅で使う。

Don't - 青や緑を見出しや面の色に使わない。 - 細い明朝体やライトウェイトの文字を見出しに使わない。 - 角丸のピル型ボタンにしない。 - グレーやベージュの地でセクションを作らない。 - 写真に濃いドロップシャドウを付けない。

Page Structure

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

1. ファーストビュー（新商品とモデルを印象付ける）: 上端に赤い帯でキャンペーンを告知する。ピンク背景のモデル写真にロゴ・リボンタグ・NEW バッジを重ね、下にレンズを横一列に並べる。
2. スペック一行表（基本仕様を一目で伝える）: 波型の境界の下に、縦線で区切ったスペックを横一列に並べる。
3. 価格訴求（新価格とまとめ買い特典を伝える）: 斜めの文字柄を敷いた赤地に、立体ハートの文字と巨大な白数字を置く。旧価格から新価格へ矢印でつなぐ。
4. 特長の強調（大きな直径を訴求する）: 矢の刺さった大きな赤ハートの中に数字を入れ、白ハートで補足する。モデルを切り抜いて添える。
5. ラインナップ（全カラーを一覧で見せる）: 切り欠き枠のカードに、目元写真と円形レンズを 2 カラムのグリッドで並べる。
6. キャンペーン・CTA（購入へ誘導する）: 赤地に、波型の枠で切り抜いたモデル写真を置く。新価格の下に、白い購入ボタン帯を 2 段重ねる。
7. 商品について（従来品との違いを示す）: ロゴの下に枠カードを置き、レンズの大小比較と、目元写真を 3 分割した比較図を入れる。
8. カラー別紹介（色ごとの魅力を伝える）: 欧文見出し、サブコピー、レンズと目元写真、説明の順で組み、ハート区切り線でつなぐ。3 色ごとに全幅のモデル写真を挟む。
9. レンズスペック（品質と安心感を伝える）: 枠カードにパッケージとスペック行を入れ、水色線画の機能アイコンを 2×2 で並べる。
10. 度数表・フッター（対応度数を示して締める）: 赤い罫線の度数表を置き、最後にピンク地へロゴを配置する。

Imagery

• モデルはピンクの無地背景で、正面から寄ったバストアップを撮る。頬杖などのかわいいポーズにする。
• 目元は白目まで写るクローズアップで、色を揃えたトリミングにする。
• レンズ単体は真上から撮り、白縁の円に入れて下に影を落とす。
• ハートは光沢のある立体グラデーションのピンクにする。矢は赤い線画で描く。
• 機能アイコンは水色の細い線画にする。
• ヘアアクセサリーのリボンやレースで甘さを足す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像はないため、推奨として書く。
• PC では中央 480〜600px 幅の SP レイアウトを維持し、左右をピンク地で埋める。
• PC ではカラー一覧を 3 カラムに広げてもよい。
• PC でもモデル写真はコンテンツ幅いっぱいに使う。
• PC では巨大数字を最大 120px 程度に抑える。

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