DESIGN.md — 深紅×シルバーの韓国系エイジングケア美容液 LP（Crimson Clinical Anti-Aging Ampoule LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、クール・先進的、信頼・誠実、情報量多め・訴求型
• キーワード: 深紅・シルバー・皮膚科学・メタリック・韓国コスメ・長尺訴求
• 地の質感: メタリックな光沢グラデーションとソフトなグレー地。紙のようなざらつきは控えめで、ガラス・金属の質感が主役
• 形: 基本は直線的。悩みラベルの円形バッジ、角丸の白いカード、ピル型タグを部分的に使う
• 温度感: クールなグレーに温かい深紅を差す、やや寒色寄りの高級感

Colors

• 地は淡グレーと白を交互に使い、冷たい清潔感を保つ
• 深紅は全幅帯と強調語・アイコンに限定する
• セクション転換のたびに深紅の全幅帯を1枚入れて流れを切る
• 本文中のキーワードは赤か太字の黒で強調し、両方を同時に使いすぎない
• シルバーの製品写真背景はメタリックなグラデーションにする
• 金色・黄色など他の有彩色は加えない

Typography

• 大見出しは細字で組み、キーワードだけ太字か赤字にする
• 強調語の上に圏点（ドット）を打つ表現を使う
• 英字の見出しを日本語見出しの上に添えて科学的な印象を出す
• 本文は左揃えで行間を広めに取る
• 深紅帯の中は極太の白文字で短く言い切る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。悩み写真・バッジは 3 列横並び
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真と帯は全幅、本文は左右余白 20px前後
• セクション冒頭は小見出し→大見出し→本文の順
• 番号付き特長は大きな薄いグレー数字を背景に置く
• 成分カードは白面を縦に積み、上辺に赤線を入れる
• 製品写真は画面幅いっぱいで大きく見せる

Elevation & Depth

• 基本はフラットで影を使わない
• 白カードはグレー地との明度差だけで浮かせる
• 製品写真には光の反射とソフトな落ち影を入れる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物・製品は全幅の矩形、悩み写真は正方形 3 枚並び、成分は円形のバッジ
• セクション境界: 直線で切り替え。一部で上辺に大きな角丸の白パネルを重ねる
• 悩み・効果ラベルは正円バッジで3つ並べる
• タグはピル型の赤地白文字
• カードの角は控えめな丸み

Components

• 深紅の訴求帯（crimson-band）: 全幅の深紅面に極太白文字で効果を言い切る。上に圏点付きの小キーワードを並べる
• 3連円形バッジ（circle-badge-trio）: 効果名を円内に書いた3つの正円。最後の1つだけ濃グレー塗りで強調
• 大番号付き特長（numbered-feature）: 薄い大きな数字の上に太字見出しと説明を重ねる
• 悩み写真3列（concern-photo-grid）: 肌の接写写真を正方形で3枚、下に短い悩みラベル
• 赤ピルタグ（pill-tag）: 効果名を赤地白文字の小さなピルで表示
• STEP 3段リスト（step-list）: 左に赤い大きな効果名、右に STEP番号・太字見出し・説明
• 成分カード（ingredient-card）: 白カード上辺に赤線、見出し＋線画アイコン＋横長写真＋赤十字マーク付き成分名
• くすみローズの分類表（comparison-table）: 番号・赤ピル・説明を3行並べた赤系パネル

Do's and Don'ts

Do - 深紅・白・シルバーグレーの3色で構成する - 製品は光沢のある質感で大きく見せる - 見出しは細字基調、キーワードだけ太字か赤字 - 英字の科学系キャプションを添えて専門性を出す - 効果は3つに整理し、バッジ・ステップ・カードで繰り返す

Don't - パステルや暖色の可愛い装飾を入れない - 深紅を本文の地色に広く使いすぎない - 丸ゴシックや手書き書体を使わない - 濃い影や立体的なボタンを多用しない - 写真をイラストに置き換えて安っぽくしない

Page Structure

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

1. ファーストビュー（製品の高級感と存在感を示す）: シルバーのグラデーション背景に赤い製品写真、左上に英字製品名、右下に短いコピー帯
2. 効果の総括帯（3つの効果を一言で伝える）: 深紅の全幅帯に圏点付きキーワードと極太白見出し
3. ブランドの信頼（技術力を示す）: グレー地に左に縦線を添えた見出し、モデル写真、半透明の帯に説明
4. 特長（番号付き）（効果・独自原料・試験結果を伝える）: 大きな薄い番号、円形バッジ3連、認証アイコン、製品写真
5. 悩みの提起（年齢肌の悩みに共感させる）: 細字の大見出しに太字キーワード、肌の接写写真を3列
6. 解決の提示（正しいケアの考え方を示す）: 赤ピルタグの横並び、本文中の太字、くすみローズの分類表
7. 製品ヒーロー（世界観で印象付ける）: 暗い深紅背景に大きな英字の透かし、光の軌道と製品、白い大見出し
8. 問いかけ（なぜ可能かへの関心を引く）: 赤字キーワードの圏点見出しと黒の大見出し、下に括弧状の線
9. 3ステップケア（作用の仕組みを説明）: 球体のビジュアルに円形ラベル、STEP番号付きリスト
10. 独自成分（成分の独自性を示す）: 英字の大見出し、水滴・ガラス球の写真に成分名ピル
11. 成分詳細カード（効果ごとの成分を説明）: 白カードを縦に3枚、線画アイコンと横長写真
12. 製品パッケージ（商品の姿を見せる）: モデルの顔に赤い矢印、白い箱とアンプルの写真
13. 開発背景（次世代の製品であることを伝える）: 斜線の区切り記号と細字の大見出し、赤の極太キーワード、中央揃え本文

Imagery

• 製品は赤いメタリックの筒をシルバー背景で斜めに置き、強いハイライトを入れる
• モデルは素肌感のあるアジア系女性、グレー背景でクールなライティング
• 肌の悩みは極端な接写で質感を見せる
• 水滴・ガラス球・分子模型など科学的なCGを使う
• アイコンは細い線画のモノクロで統一
• 暗い深紅背景には光の軌道や英字の透かしを入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元は縦長の画像主体でPC・SP共通の1カラム
• SPでは画像幅いっぱい、本文の左右余白は20px
• PCでは中央に最大650px程度の幅で配置し、左右はグレー地
• 3列の写真・バッジはSPでも3列を保つ
• 見出しはSPで24〜28pxに調整する

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