DESIGN.md — 紫グラデと光沢の韓国コスメ機能クリーム LP（Violet Gradient K-Beauty Device Cream LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、クール・先進的、清潔・爽やか
• キーワード: 紫グラデーション・光沢パッケージ・透明感のある肌・POINT 構成・韓国コスメ・成分訴求
• 地の質感: パールのような光沢と、柔らかなグロー・光線エフェクト。後半は白とラベンダーのフラットな面。
• 形: ピル型バッジ、角丸 12〜20px のカード、上部だけ角丸のシート状セクション。
• 温度感: やや冷たい紫系。肌写真の暖色で人らしさを足す。

Colors

• 冒頭は濃紫→明るい紫のグラデ地に白文字でまとめる。
• 各 POINT 冒頭はくすみ紫から白へ縦グラデで切り替える。
• 強調は紫 1 色。バッジ・キーワード・チェック記号に限定する。
• 後半の情報パートは淡ラベンダー地に白カードを置く。
• 見出しはほぼ黒、注釈は灰で小さく。
• 暖色は肌やクリームの写真だけで使い、UI には入れない。
• sheet-header は文字 #8F8F8F × 背景 #FFFFFF のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#757575、4.61:1）を使う。

Typography

• 見出しは太字ゴシックで 2 行に分け、中央揃えにする。
• 見出しは 1 行目を小さく、2 行目を大きくする段差を付けてもよい。
• 成分名などの語には※番号を上付きで付け、セクション下に注釈をまとめる。
• 本文は短い行で 3 行程度に改行し、中央揃えにする。
• 英字はラベルと英語見出しだけに使う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較写真は 2 列、使用シーン写真は 3 列。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• 製品画像やモデル写真は全幅で大きく配置する。
• バッジ→見出し→本文→画像の順で縦に積む。
• 情報カードは左右に 6% の余白を取った白い角丸ボックスにする。
• テキストブロックは中央揃え。リストと表だけ左揃えにする。

Elevation & Depth

• 影はほとんど使わず、面の色差で区切る。
• 製品画像にはグローと光のにじみで浮遊感を出す。
• シート状セクションは上端を角丸にして、写真に重なって見えるようにする。

Shapes

• 角丸: 小 8px ／ 中 14px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 全幅の切り抜き製品画像と角版写真。手順写真は円形、比較写真は角丸。
• セクション境界: グラデーションの切り替え、または上部が角丸のシートを重ねる。
• バッジはすべてピル型にする。
• カードは角丸 14px 程度にする。
• シート上端にはつまみ風の短いグレー線と小さな英字ラベルを置く。

Components

• POINT 番号バッジ（badge-point）: 紫のピル型に白い英字と番号を入れる。
• 悩みピル（worry-pill）: 紫地に置く半透明の白枠ピル。左右にずらして 4 つ並べる。
• 成分チップ（ingredient-chip）: 淡紫の地に紫枠のピル。間を＋でつないで成分を並べる。
• 使用前後比較（before-after）: 写真 2 枚を並べ、下に灰と紫のラベル帯を付ける。使用後側だけ紫枠にする。
• 拡大吹き出し（callout-zoom）: 紫枠のボックスに紫ラベルと拡大写真を入れ、細線とドットで本体とつなぐ。
• 試験結果リスト（test-table）: チェック記号付きの太字見出しの下に、細線で区切った行を並べる。
• おすすめリスト（recommend-list）: 白カードの中に、紫の＋記号から始まる行を罫線で区切って並べる。
• 使い方ステップ（step-item）: 左に円形写真と点線のつなぎ、右に淡紫の STEP ピルと説明文を置く。
• シート見出し（sheet-header）: 上部が角丸の白シートに、短いつまみ線と小さな英字ラベルを入れる。

Do's and Don'ts

Do - 紫は 1 系統に絞り、濃淡だけで変化を付ける。 - 製品は光沢のある 3D 風ビジュアルで大きく見せる。 - POINT ごとにバッジ・2 行見出し・短い本文の型をそろえる。 - 効果を表す表現には※注釈を必ず付ける。 - 後半の情報はラベンダー地に白カードで読みやすくする。

Don't - 赤や黄色などの暖色を UI に使わない。 - 見出しを明朝体や手書き風にしない。 - カードに強い影を付けない。 - 本文を長い段落で詰め込まない。 - 写真をくすませたり、ざらついた質感を加えたりしない。

Page Structure

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

1. ファーストビュー（悩みを提示し、商品の型を伝える）: 濃紫のグラデ地。上部に悩みピルを 4 つ、中央に白の大見出し、下に光線をまとった製品 3D 画像。
2. 手軽さの訴求（短い使用時間を印象づける）: 淡紫の地に、大きな太字の数字コピーとモデルの使用写真を全幅で置く。
3. 特長 POINT1（一体型の利便性を示す）: くすみ紫から白へのグラデ地に、バッジと見出し。製品とクリームテクスチャ、モデル写真を重ねる。
4. 使用前後（変化を視覚で見せる）: 白シートに紫強調の見出しと、2 列の比較写真を置く。
5. 特長 POINT2（成分を訴求する）: 紫グラデ地に製品写真と拡大吹き出しを置く。成分チップ、分子の 3D イラスト、肌断面図のカードを続ける。
6. 特長 POINT3（形状の設計を説明する）: 白から淡紫の地にヘッドの拡大写真を置き、紫の点線矢印と線画の図面で機能を注釈する。
7. 使用部位（対象部位の広さを示す）: 横顔のモデル写真に、白い曲線矢印と部位ラベルを重ねる。
8. 使用シーン（使い方のイメージを補う）: 白シートの中に、角丸の写真を 3 列で並べる。
9. 安全性・試験（信頼性を補強する）: ラベンダー地に白カード。円形の紫認証バッジと試験結果リストを 3 件並べる。
10. おすすめの方（ターゲットとの合致を示す）: 白カードに、＋記号付きのリストを 4 行置く。
11. 使い方（手順を理解させる）: 英字見出しの下に動画風の写真、続けて STEP 1〜4 を縦に並べたカード。
12. 保管方法（使用後の扱いを案内する）: 角丸写真を 2 列並べ、下に中央揃えの説明文を置く。

Imagery

• 製品はパール調の光沢で、斜めに浮かせた 3D レンダー風にする。
• 背景に紫の光線・ボケ・グローを入れて先進感を出す。
• モデルは白背景・ひっつめ髪で、ツヤ肌のアップを撮る。
• クリームは大きなスワイプ状のテクスチャで、カプセル粒を見せる。
• 成分は紫の分子模型や金色の雫、肌断面の 3D イラストで表す。
• 顔の上に白い光の曲線や矢印を重ねて効果を表現する。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 750px 前後の SP 幅カラムを置き、左右をラベンダー地で埋める構成を推奨する。
• PC では比較写真や使用シーンの列数はそのままにして、余白を広げる。
• ファーストビューは PC で横長にし、見出しを左、製品画像を右に分けてもよい。
• 見出しは PC で 1.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 行書くと起動時に読み込まれる。