DESIGN.md — 藤色グラデと濃紺の光透明感スキンケアLP（Luminous Lavender Prestige Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、清潔・爽やか、信頼・誠実
• キーワード: 光の透明感・藤色グラデーション・濃紺の明朝・細線とアコーディオン・光る球体CG
• 地の質感: 霧がかったようなパステルグラデーションと、虹色に光るガラス質のCG。紙っぽさはなく、なめらかで発光感がある。
• 形: 角は小さめ（2〜8px）の長方形カード。サブボタンは細線のピル型。丸は成分写真と要素バッジにだけ使う。
• 温度感: やや寒色寄りの柔らかいトーン。藤色・薄桃色・濃紺で落ち着いた大人の印象。

Colors

• 地の色は藤色〜薄桃色のごく淡いグラデーション。セクションごとに傾きを少しずつ変えて変化をつける。
• 文字・アイコン・線は濃紺に揃え、真っ黒は使わない。
• 技術や成分の説明だけは夜空の紺〜青紫グラデに切り替え、白文字にする。
• 強調ラベルは濃紺の帯に白文字か、薄桃色の帯に濃紺文字の2種類だけ。
• 購入まわりは白とライトグレーの地に戻し、情報を読みやすくする。
• 鮮やかな色は写真（花・果物）とCGの虹色だけに任せる。
• ingredient-block は文字 #FFFFFF × 背景 #8695CB のコントラスト比が 2.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#5F73BA、4.52:1）を使う。

Typography

• 感情に訴える見出しは明朝、機能説明の見出しは太ゴシックと使い分ける。
• 見出しは2〜3行に改行し、行頭を左揃えにする。
• ボタン文字は字間を広め（0.1em以上）にして上品に見せる。
• 数字は細い欧文で大きく、単位の%は小さく添える。
• 注釈は10px前後のグレー文字で、該当ブロックの直下に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分や商品は横2列の小グリッドも使う
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約28px。カード型の区画は約10pxまで外側に広げる。
• 見出し→リード→ビジュアル→補足ボタンの順に縦に積む。
• 詳細情報は＋アイコン付きアコーディオンやピルボタンにしまう。
• 満足度の数値カードは横スクロールのカルーセルにし、ドットインジケーターを付ける。
• 購入導線はページの最上部（ファーストビュー直後）と最下部の2カ所に置く。

Elevation & Depth

• 影はほぼ使わず、面の色差と細い線で階層を作る。
• 商品カードは白面に、ごく薄い影か地との色差だけで浮かせる。
• CGや光の表現で奥行きを出し、UIパーツ自体は平面のままにする。

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 人物と商品は四角の全幅写真。成分は円形に切り抜き、テクスチャは白地に置いた液だまりにする。
• セクション境界: 直線で切り替え、グラデーションでなめらかにつなぐ。
• ピルボタンは白地に濃紺の細線（1px）、右端に＋または矢印を付ける。
• ラベル帯は角丸なしか、片側だけ角丸にする。
• 要素バッジ（透明感など）は角丸6pxで、虹色がかった淡いグラデにする。
• タブは上側だけ角丸にしたフォルダ型。

Components

• 数量限定セットカード（product-offer-card）: 左に商品写真、右に濃紺のラベル帯・商品名・価格を置く。下段は白帯に購入リンクと濃紺の丸いカートアイコン。
• 濃紺ラベル帯（badge-limited）: 数量限定などを示す小さな長方形の帯。濃紺地に白の太文字。
• 細線ピルボタン（button-outline-pill）: 白地に濃紺1pxの枠線を付けたピル型ボタン。文字は中央で字間を広くとり、右端に＋か外部リンクのアイコン。
• 線区切りアコーディオン（accordion-line）: 上下を細線で区切った行。左に項目名、右に＋アイコン。
• 目次ナビ（3×2）（anchor-nav-grid）: 縦線で区切った3列×2段のリンク。短い項目名の下に小さな下向き矢印を付ける。
• タイプ名の帯＋説明カード（type-label-band）: 薄桃色の帯にタイプ名、その下の白いカードに太字の小見出しと説明文。続けてチェックボックス付きのリストを並べる。
• 満足度の数値カード（stat-card）: 淡い藤色グラデのカード。上に2行の評価項目、下に大きな%数字。横スクロールで並べる。
• 成分ブロック（ingredient-block）: 青紫グラデの区画。左上に薄桃色のタグを置き、半透明の白カードに円形の成分画像と成分名を並べる。
• 動画タブ（video-tabs）: フォルダ型の4つのタブ。選択中は薄桃色で、その下の枠内に動画サムネイルと話数のタイトル。

Do's and Don'ts

Do - 地の色は淡い藤色〜桃色のグラデーションにし、光が差すような明るさを保つ。 - 見出しは濃紺の明朝で、ゆったりした行間にする。 - 技術や成分の説明は暗い紺の面と光る球体CGで、世界観を切り替える。 - 細かい情報はアコーディオンや＋ボタンに収め、画面をすっきり見せる。 - 数値や効果の表現には必ず注釈を添える。

Don't - 赤や黄色の派手なCTAボタンや、太い影は使わない。 - 真っ黒な文字や太すぎるゴシックで見出しを組まない。 - 角丸の大きいポップなカードや、手書き風の装飾を入れない。 - グラデーションの彩度を上げすぎない（パステルの範囲に収める）。 - 1画面に情報を詰め込まず、余白を削らない。

Page Structure

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

1. ファーストビュー（人物と新商品で第一印象をつくる）: 紺から藤色へのグラデ背景に、モデルの顔と光をまとった商品ボトル。NEWの丸い線バッジを添える。
2. キャッチと購入カード（商品価値を伝え、すぐに購入できる入口を出す）: 中央揃えの明朝コピー＋太ゴシックの成分訴求。その下に数量限定カードを2枚並べる。
3. 受賞実績（権威付け）: 月桂樹のイラストで大きな受賞数を挟み、商品写真と受賞一覧のアコーディオンを置く。
4. 目次ナビ（長いページの回遊を助ける）: 縦線で区切った3×2のリンクグリッド。
5. 肌の理想要素（訴求の軸を図にする）: 大きな要素バッジ1つと、小さなバッジ3つを横に並べる。
6. 技術コンセプト（独自研究のストーリーを語る）: 夜空色の面に白文字。円形の要素×要素を見せ、光るモデル写真と浮遊する球体CGを配置する。
7. 成分詳細（有効成分を具体的に説明する）: 青紫グラデの区画にタグ・見出し・成分カードを置き、メカニズムへのピルボタンを付ける。
8. 動画クイズ（親しみと理解を深める）: 藤ピンク地にタブ付きの動画カード。
9. お客様の声（満足度）（使用者評価で信頼を得る）: 目を閉じたモデル写真に、%数値カードのカルーセルを重ねる。
10. 使用感・タイプ比較（自分に合うタイプを選ばせる）: 液体のシズル写真、手に取る写真、タイプ帯カード、チェックリストの順に見せる。
11. 香り（五感への訴求）: 三角形のピラミッド図に、花・果物・木の写真を添える。
12. 使用方法（朝と夜の使い方を示す）: 太陽と月のアイコンから線を引いたフロー図、ステップ図をタブで切り替える。
13. ラインナップ（商品バリエーションの一覧）: NEWの丸バッジ付きの見出しと線区切り。左に商品写真、右に商品名を並べる。
14. サステナビリティ・購入導線（企業姿勢を伝え、購入へ誘導する）: 大きな%数字のカルーセル、公式ストアの枠ボタン、グレー地の外部ストアボタン、関連商品カルーセルを置く。

Imagery

• モデルは素肌感のある30〜40代女性。柔らかい正面光で撮り、肌の艶を見せる。
• 商品はパステルピンクのボトルを淡いグラデ背景に置き、後光のような光彩を添える。
• 成分はガラス玉や虹色の液体球のCG。暗い背景に光の粒を散らす。
• テクスチャは白地にとろりとした透明な液だまりを置き、真上からやや斜めに撮る。
• 装飾は細線アイコン（太陽・月・チェック・＋）だけで、イラストは控えめにする。
• 香りは花・柑橘・木片の切り抜き写真を図に添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約720pxのコンテンツ幅を取り、背景のグラデは全幅に敷く。
• PC では技術・満足度・使用感のブロックを、写真とテキストの左右2カラムにする。
• タイプ比較とラインナップは、PC で2列に並べる。
• 目次ナビは PC で横一列（6項目）にする。
• サステナビリティの数値カードは、PC では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 行書くと起動時に読み込まれる。