DESIGN.md — ピーチグラデのオトナ可愛いカラコン LP（Peach Gradient Sweet Color Lens LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、やさしい・柔らかい、上品・高級
• キーワード: ピーチグラデーション・スイーツ感・オトナ可愛い・ピル型ラベル・筆記体欧文・レンズのアップ
• 地の質感: 霧のようにやわらかいパステルグラデと、ハイキーな人物写真。マットでなめらかな質感
• 形: ピル型ラベル、角丸カード、円形のレンズ・アイコン、角丸ボックスのスペック表示
• 温度感: 暖色寄り。ピーチ〜ピンクが中心で、色ごとにラベンダーへ寄せる

Colors

• 地は白とピーチ〜ピンクのグラデを交互に置き、黒い面は使わない
• 強調はコーラルピンク1色。ラベルと見出し文字に使う
• 紺色はカラー名とTORICタグだけに使って全体を締める
• 色ごとに地のトーンを変える（ベージュ系はピーチ、ブラウン系はピンク、きなこ系はラベンダー）
• 本文は純黒にせず、ブラウングレーで柔らかくする
• pill-label は文字 #FFFFFF × 背景 #F37C7C のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#EA1A1A、4.51:1）を使う。
• spec-pill は文字 #FFFFFF × 背景 #D97A90 のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#CB4867、4.5:1）を使う。
• round-badge は文字 #FFFFFF × 背景 #F37C7C のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#EA1A1A、4.51:1）を使う。

Typography

• 欧文の見出しは字間を広く取り、細めから中くらいの太さにする
• 写真の上のキャッチは縦書きの白い細字にする
• 筆記体の欧文は写真やレンズの下に斜めに重ねる
• 数値スペック（DIA など）は大きな数字と小さな単位で組む
• 本文は中央揃えで短く改行する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長カードと表だけ 2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 各カラー紹介は、カラー名ヘッダー、人物写真、レンズのアップの3段で同じ型をくり返す
• スペックの角丸ボックスは写真の右端に縦に3つ積む
• 欧文のセクション見出しは左右の細線ではさむ
• スペック表はピル型ラベルと値の2列×2組で組む
• セクションの間は白地でたっぷり空ける

Elevation & Depth

• 影はほぼ使わない。白カードはごく薄い影か、影なしにする
• 奥行きはグラデと写真を重ねることで出す
• レンズのアップは円形で、外側を白く飛ばす

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物は全幅の角丸なし。目元のアップは角丸の長方形。レンズは円形
• セクション境界: 直線で切り替えるか、グラデで溶け込ませる。FV の下端だけゆるい波形
• ラベルとタグはすべてピル型にする
• スペック表示は細い枠線の角丸ボックスにする
• アイコンは淡いピンクの円の中に線画で描く

Components

• コーラルのピル型ラベル（pill-label）: 表の項目名やカラー名に使う。白文字
• スペックのピル（spec-pill）: 乱視度数や軸を、淡いコーラル地に白字で示す
• 紺色のタグ（toric-tag）: 写真の角に置く小さなタグ
• 数値スペックの角丸ボックス（spec-box）: 白い半透明地に細枠。大きな数字と小さな単位
• 円形のコーラルバッジ（round-badge）: 写真の右に置く「乱視用」の丸いバッジ
• 白い特長カード（feature-card）: グラデ地の上に2列で並べる。円形の図解と説明文を入れる
• 線ではさむ欧文見出し（section-title-line）: グレーの字間の広い欧文を、左右の細線ではさむ
• アイコン付きの特長行（icon-feature-row）: 左に淡いピンク円のアイコン、右にサーモン色の見出しと説明

Do's and Don'ts

Do - ピーチ〜ピンク〜ラベンダーのパステルグラデを地に使う - 各色の紹介は同じレイアウトでくり返し、地の色だけ変える - 筆記体の欧文を写真に重ねて甘さを出す - 数値はピル型のラベルや角丸ボックスに整理して見せる - 人物写真はハイキーで肌を明るく見せる

Don't - 黒や原色のベタ面を使わない - 太いゴシックの赤文字で強く訴求しない - 角ばった四角いボタンにしない - 強調色をコーラル以外に増やさない - 本文を左右いっぱいの長い行にしない

Page Structure

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

1. ファーストビュー（モデルの写真と新シリーズの登場を印象づける）: 全幅の人物写真に縦書きのキャッチを重ねる。下はピンクのグラデで、白抜きロゴ、ピル型のスペック、パッケージ画像を置く
2. 新シリーズの告知（悩みがあってもかわいくなれることを伝える）: 線ではさんだ欧文の見出しの下に、白い丸ゴシックの大見出しを置く。円形のレンズ3色とカラー名のピルを並べる
3. 機能の説明（構造の特長を2つ図解する）: グラデ地に白カードを2列で並べ、円形の図解と説明文を入れる
4. カラー紹介（くり返し）（色ごとの印象とスペックを見せる）: 数値と紺色のカラー名のヘッダー、人物写真と縦書きコピー、スペックボックス、目元アップ、筆記体、レンズのアップの順に置く
5. ブランドの帯（ロゴでいったん区切る）: ピーチのグラデ帯に白抜きロゴとピル型のタグを置く
6. 注意事項（シリーズ間の違いを伝える）: 白地に中央揃えの本文。ルビを付ける
7. レンズの特長（機能を3つ並べる）: 淡いピンク円のアイコンと、サーモン色の見出しを縦に並べる
8. 製品仕様の表（スペックを一覧で見せる）: コーラルのピル型ラベルと値を2組並べ、下線で区切る
9. ブランドストーリー（名前の由来と世界観を伝える）: 人物写真の左に、中央揃えのストーリー文を重ねる
10. デザイナー紹介とフッター（パッケージを手がけた人の紹介と法的な表記）: ピーチのグラデ地にカードを置き、写真とサインを添える。下に小さな注釈を中央揃えで置く

Imagery

• 人物はハイキーで柔らかい自然光。ピンクやピーチの無地背景で撮る
• 目元をアップにした写真で、レンズの発色を見せる
• レンズ単体は円形で大きく見せ、ドットの柄が見えるまでズームする
• ドライフラワーやシフォン素材など、甘く柔らかい小物を添える
• ハートやスイーツの小さな手描き風イラストを散らす
• パッケージは線画の女の子イラストを使った縦長の箱にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はない。PC では中央を 480〜750px 幅のカラムにし、左右にグラデの背景を敷くとよい
• カラー紹介は、写真とスペックを左右2カラムに広げてもよい
• 特長カードと表は 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 行書くと起動時に読み込まれる。