DESIGN.md — 朱橙グラデと白抜き文字の美容液 LP（Vivid Orange Gradient Premium Serum LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、クール・先進的、力強い・インパクト
• キーワード: 朱橙グラデーション・白抜き文字・巨大欧文透かし・幻想 CG ビジュアル・縦書きアクセント
• 地の質感: 光がにじむような柔らかい放射グラデーション。紙っぽさはなく、つややかでデジタルな質感。
• 形: 四角い写真と細い白線の枠、白いピル型ボタン、細い円で囲んだ番号。
• 温度感: 高温で情熱的。白地セクションで温度を下げて緩急をつける。

Colors

• ページの約 6 割を朱橙〜明るい橙のグラデーション面にする
• 橙地の文字は原則すべて白。黒文字は使わない
• 白地セクションでは見出しを朱色、本文はグレーにする
• ボタンは白地＋朱文字のピル型に統一
• キャンペーン部分は平坦な単色の朱で、商品紹介部分はグラデで差をつける
• アクセントの紺は手書きロゴ風の装飾だけに使う
• button-primary は文字 #E95412 × 背景 #FEFDFD のコントラスト比が 3.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#CD4A10、4.51:1）を使う。
• title-bar は文字 #E95412 × 背景 #FFFFFF のコントラスト比が 3.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#CD4A10、4.58:1）を使う。
• routine-chart は文字 #FFFFFF × 背景 #ED7642 のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#CC4C13、4.55:1）を使う。

Typography

• 和文は細〜中ウエイトで字間を広めにとり、上品に見せる
• 欧文の大見出しは細いジオメトリックサンセリフで、半透明白か淡い色にして透かしにする
• STEP 番号は細い円の線の中に欧文数字を入れる
• 縦書き明朝のコピーは特集ブロックのアクセントにだけ使う
• 本文は中央揃えか左揃えで短く改行する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は写真＋テキストの 2 カラムを左右交互に配置
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションの頭に巨大な欧文の透かし＋小さな和文見出しを置く
• ステップは写真と説明を左右交互にずらす
• キャンペーンの手順は画像カードと文を横に並べる（SP では縦に積む）
• Q&A は白いカードを縦に並べる
• 白地の特集ブロックは画面いっぱいの写真帯で区切る

Elevation & Depth

• 影はほぼ使わず、平面の色と白線で階層をつける
• Q&A カードとボタンには、ごく弱い影があってもよい
• 橙地の上には半透明白パネルを重ねて奥行きを出す

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの長方形・正方形。被写体を大きく見せる
• セクション境界: 直線で区切り、色面の切り替えだけで境界を作る
• ボタンはすべてピル型で、右端に小さな矢印を置く
• 見出しラベルは細い白線の四角い枠で囲む
• 番号は細線の正円で囲む
• 丸い矢印アイコンを写真の右下に置く

Components

• 白ピル CTA（button-primary）: 白地に朱文字、右に矢印。購入や詳細への導線
• 白線ピルボタン（button-outline）: 背景を透かし、白線と白文字にしたサブボタン
• 白線枠ラベル（label-frame）: 小見出しを細い白線の四角で囲む
• 巨大欧文透かし見出し（watermark-heading）: 画面幅を超える細い欧文の見出しを半透明で敷く
• 円囲み STEP 番号（step-circle）: STEP の小さな欧文と、細線の円に入った数字
• Q&A アコーディオン（qa-card）: 白いカード。左に朱色の丸い Q アイコン、右に＋/−
• 白帯タイトル（title-bar）: 朱地の上に置く白い横長帯。朱文字で中央揃え
• ケア手順の図（routine-chart）: 半透明パネルに縦書きの工程を並べ、該当の工程だけ濃い色で強調する

Do's and Don'ts

Do - 朱橙のグラデを大面積に使い、光がにじんで見えるようにする - 橙地の文字は白にし、字間を広めにとる - セクションの頭に巨大な欧文の透かし見出しを置く - 白地セクションを挟んでリズムを作る - ボタンは白いピル型＋矢印に統一する

Don't - 黒や濃紺の太い見出しを橙地に置かない - 角丸を大きくしたポップなカードにしない - 多色のアイコンやイラストで世界観を崩さない - 太すぎる極太ゴシックを使わない - 橙以外の強い色を CTA に使わない

Page Structure

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

1. ファーストビュー（世界観と発売日を印象づける）: 幻想的な CG の森に商品を置いた全面ビジュアル。左に白いコピー、右に欧文と大きな日付
2. 商品紹介（商品のコンセプト、価格、購入先を示す）: グラデ地に短い大見出し。左に商品写真、右に価格と白ピルボタンを縦に並べる
3. イベント告知（体験イベントへ誘導する）: 欧文の透かし＋写真帯に欧文の大見出し。中央揃えの本文とボタン
4. 特長（肌悩みのメカニズムを説明する）: 白地。縦書きの見出しと、番号付きの横長写真カードを縦に並べる
5. 特集・動画（ブランドの世界観を深める）: 縦書き明朝と欧文セリフ＋再生ボタン付きの写真
6. 使い方（使う手順を示す）: グラデ地に透かし見出し。円番号の STEP をモデル写真と左右交互に並べる
7. ケアの手順（使うタイミングを図で示す）: 朝と夜の 2 段の工程表。該当の工程だけ濃い色で強調
8. 継続プログラム（続けて購入してもらう）: 濃い朱地にラベルと見出し、縦書きの欧文、モデル写真 2 枚
9. 商品比較（2 商品の違いを示し購入へ導く）: 中央に商品写真。左右に見出し・ラベル・説明・購入ボタン
10. よくある質問（不安を解消する）: 白線枠のラベル見出し＋白い Q&A カード
11. キャンペーン（体験キャンペーンへ参加してもらう）: 単色の朱地に透かし見出し。期間を大きく表示し、手順は画像カード＋文の STEP
12. サービス紹介（関連サービスの内容を説明する）: 白帯のタイトル。写真と文を左右交互に配置
13. エンディング（余韻を残してブランドを想起させる）: 商品の静物写真の全面ビジュアル＋手書き風ロゴ＋黒帯フッター

Imagery

• 朱橙のライティングで統一した、商品の艶やかな静物写真
• ミクロの肌内部を思わせる幻想的な CG の森や結晶の風景
• 背景をオレンジ単色にした、肌の透明感が出るモデルの寄り写真
• ガラス器具を背景にぼかした、研究室風の写真
• 手書き筆記体のロゴ風の線を装飾に使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は 1 カラムにし、写真を上・文を下に積む
• 巨大な欧文の透かしは SP で 56〜64px にして、画面端ではみ出させる
• STEP の左右交互配置は SP では同じ向きにそろえる
• ボタンは SP で幅 80% 程度にして中央に置く
• 縦書きコピーは SP では横書きにするか短くする

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