DESIGN.md — ラベンダー×桜色の夢見るカラコン LP（Dreamy Pastel Iridescent Color Lens LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: やさしい・柔らかい、上品・高級、かわいい、シンプル・ミニマル
• キーワード: パステルグラデーション・きらめく粒子・アーチ型フレーム・極細欧文セリフ・モーヴブラウン文字・透明感
• 地の質感: 水彩のようににじむピンク〜ラベンダーのぼかしに、星屑のような白い光の粒を散らす。マットな平面ではなく、霧がかったソフトフォーカスの質感。
• 形: 上が半円のアーチ型の写真枠、大きな角丸の白いパネル、丸いレンズ画像、細い斜め線や細い横線を飾りに使う。
• 温度感: やや寒色寄りのラベンダーを基本に、ピンクやピーチで温かみを足したやわらかい中間の温度。

Colors

• 地の色は淡いラベンダー白を基本にし、セクションごとにピンク・ラベンダー・ピーチ・水色のぼかしを敷く。
• カラーごとの紹介セクションは、商品色に合わせて背景グラデーションの色を変える。
• 文字は黒を使わず、グレーがかったモーヴブラウンで統一する。
• 写真の上の大見出しは白抜きにして、背景になじませる。
• 彩度の高い色や強いコントラストの CTA 色は使わない。強調は文字サイズと余白で行う。

Typography

• 和文は細めのゴシックで字間を広く取り、太字は避ける。
• 欧文の大見出しは細いセリフ体にし、和文のカナ読みを小さく添える。
• セクション名は画面幅いっぱいの極細欧文を淡色で敷き、透かしのように使う。
• カラーのキャッチは写真の横に縦書きで置く。
• 本文は行間 2 倍以上で余裕を持たせる。
• 英字の筆記体「new」などを、淡色の手書き風で重ねてもよい。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長ブロックは文字とアイコンを左右交互に配置する。
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は画面の端から端まで使い、アーチ枠は左右に少し余白を残す。
• 特長の見出しは左右交互に寄せ、見出しの下に画面端まで届く細い線を引く。
• 大きな数字（1・2・3）は細字で左上に置き、斜めの細線を添える。
• セクションの間に広い余白とグラデーションの帯を入れる。
• スペック表は角丸の白いパネルに、2 列の定義リストで並べる。

Elevation & Depth

• 影はほとんど使わない。立体感はぼかしと光の粒で出す。
• レンズ画像には、水滴のような淡い反射と薄い影を付ける。
• 円形のバッジは半透明の白にガラス風の縁を付ける。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 人物写真は上が半円のアーチ枠で切り抜く。目元の写真は片側だけ大きな角丸にする。レンズ画像は円形にする。
• セクション境界: 直線では区切らず、グラデーションのぼかしで次のセクションに溶け込ませる。
• スペック値はピル型の白い半透明ラベルに入れる。
• 強調ワードは細い枠線の四角で囲む。
• キラッとした星形の細線アイコンを添える。
• 線画アイコンは細い 1px 程度の線で描く。

Components

• アーチ型写真フレーム（arch-photo-frame）: 上が半円の白い枠の中に人物や商品の写真を置き、背景のグラデーションから浮かせる。
• カラー紹介ブロック（color-variant-card）: No. の番号と欧文の商品名、円形のレンズ画像、片側角丸の目元写真、白帯に載せた 2 行のキャッチで構成する。
• スペックピル（spec-pill）: 直径や含水率などの値を、半透明白のピルに 2×2 で並べる。
• ガラス風円バッジ（glass-badge）: 半透明の円の中に数値や新登場の告知を中央揃えで入れる。
• 枠囲み強調見出し（boxed-keyword）: 見出しの 2 行目を細い線の四角で囲み、横に星の線画を添える。
• 番号付きポイント（numbered-point）: 細字の大きな数字と斜めの細線、見出し、線画の図解、本文で 1 つのブロックを作る。
• 特長の交互行（feature-row）: 見出しの下に細線を引き、補足文と淡い光をまとった線画アイコンを左右交互に並べる。
• 透かし欧文ラベル（watermark-label）: 画面幅いっぱいの極細の欧文大文字を、淡色または白でセクションの頭に敷く。
• スペックパネル（spec-panel）: 左上が大きな角丸の白いパネル。項目名と値を 2 列に並べ、パネルの角に欧文見出しを重ねる。

Do's and Don'ts

Do - 背景はいつもパステルのぼかしにし、光の粒を散らす。 - 文字色はモーヴブラウン系にそろえ、細い書体で字間を広く取る。 - 人物写真はアーチ枠や背景に溶けるビネットで使う。 - カラーごとに背景の色味を変え、比較しやすくする。 - 線画アイコンは細い線にし、淡いピンクやラベンダーの光を添える。

Don't - 真っ黒の文字や濃い原色を使わない。 - 太いゴシックや派手な CTA ボタンで世界観を壊さない。 - 硬い直線の区切りや濃い影を使わない。 - 画面を情報で詰め込まず、余白を削らない。 - 写真に強いコントラストの加工をしない。

Page Structure

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

1. ファーストビュー（モデルと新商品で世界観を伝える）: アーチ枠の人物写真に縦書きのコピーを添え、円形のレンズ 4 色、スペック、ガラス風バッジ、白抜きの大見出しをピンクのぼかし背景に重ねる。
2. コンセプト（2 つの価値を一言で示す）: 大きな和文見出しの下に、2 つの訴求を×印で対角に並べ、曲線に沿った欧文を添える。
3. 素材の紹介（新素材の魅力を伝える）: アーチ枠にレンズの接写を入れ、大見出しと数値入りの円バッジを置く。
4. カラーラインナップ（全色を比較させる）: No. と欧文の商品名、円形のレンズ、目元写真、白帯のキャッチを色ごとに縦に繰り返す。
5. カラー別の詳細（装用イメージを見せる）: 商品色に合った全面グラデーションに、白抜きの欧文大見出し、縦書きのキャッチ、人物写真、スペックピル、装用前後の目元比較、説明文を置く。
6. 素材のストーリー（素材を選んだ理由を語る）: 透かしの欧文を敷き、ラベンダーのパネルに見出しと行間の広い本文を並べ、レンズ画像を角にはみ出させる。
7. ポイント解説（機能を図解で説明する）: 番号付きのブロックを 3 つ置き、枠囲みの見出し、線画の図、棒グラフで比較を見せる。
8. 特長一覧（細かな機能を一覧にする）: 欧文の透かし見出しの下に、見出しと線、アイコンの行を左右交互に並べる。
9. スペック・注意事項（法定情報を示す）: ピンクのグラデーション上に白い角丸パネルで仕様表を置き、続けて透かし欧文と箇条書きの注意事項を並べる。
10. プロデューサー紹介（監修者の信頼感を示す）: アーチ枠の人物写真に、曲線の欧文ラベル、白抜きのローマ字名、和名、略歴を重ね、最後にロゴで締める。

Imagery

• 人物は白〜淡色の服で、柔らかい正面光のビューティーポートレートにする。手を頬に添えるポーズが基本。
• 背景はピンク・ラベンダー・水色のボケと光の粒で、夢のような雰囲気にする。
• レンズは白地の上で斜めから撮った接写にし、水滴のような透明感を出す。
• 目元の比較写真は同じ構図で 2 枚並べ、下にキャプションを付ける。
• 説明図は細いモーヴ色の線画にし、ピンクやラベンダーの淡いぼかしを添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に約 480〜600px のカラムを置き、左右を同じパステルグラデーションで埋める。
• カラー別の詳細は PC で写真と文字を 2 カラムにしてもよい。
• 透かしの欧文はカラム幅に合わせて大きさを変える。
• 特長一覧は PC で 2〜3 列のグリッドにできる。

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