DESIGN.md — 空色グラデと金帯の日焼け止めコスメLP（Sky Blue and Gold Gradient Sunscreen Cosmetics LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、上品・高級、信頼・誠実、情報量多め・訴求型
• キーワード: 空色グラデーション・金色の購入帯・白カード・アコーディオン・透明感・雫と光
• 地の質感: 淡い青から白へ流れるグラデーションの地。水滴・光のにじみ・クリームのテクスチャ写真で透明感を出す
• 形: 角丸なしの直線的な矩形が基本。円はポイント番号だけに使う
• 温度感: 涼しく明るい。クリーム色のセクションでやや温かみを加える

Colors

• 地は淡い空色のグラデーションにし、左右の端だけ少し濃くする
• 購入帯は横幅いっぱいの金グラデーション（中央を明るく）で、セクションごとに挟む
• 見出し帯は左を濃い青、右を淡い青にした横グラデーションにする
• 質感や香りのセクションはクリーム色のグラデーションに切り替える
• 強調する見出しは青文字、新発売の表示は黄色のマーカーやピルにする
• 比較・別ラインの訴求はラベンダーのグラデーションにする
• buy-band は文字 #FEFCF1 × 背景 #B89D44 のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#867231、4.57:1）を使う。
• outline-link は文字 #5181AB × 背景 #FEFEFE のコントラスト比が 4.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#4D7AA2、4.51:1）を使う。
• sub-line-banner は文字 #FEFCF1 × 背景 #D9ADEE のコントラスト比が 1.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#A843D8、4.58:1）を使う。

Typography

• 本文は中央揃えで、字間を広めの 0.05〜0.1em にする
• 英字見出しは細めのサンセリフにし、下に濃いグレーの横線を引く
• 明朝は FV とビジュアル内のキャッチだけに使う
• 価格は数字を大きく、「円（税込）」を小さくする
• 注釈は 8px 前後にして、カードの下に添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較表とアイコンは 2〜5 列のグリッドにする
• 本文ブロックの幅: 画面幅の約 89%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右に約 20px の余白を取って中央に置く
• 購入帯（約 44px）は横幅いっぱいにしてセクション間に挟む
• 特長はアコーディオンを開いた状態で縦に並べる
• 特長アイコンは細い枠線の正方形を 5 列×2 段に並べる

Elevation & Depth

• 影はほとんど使わず、平面の白カードを空色の地に置いて浮かせる
• 比較表は細い淡青の罫線で区切る
• 購入帯のメタリック感はグラデーションだけで表現する

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 矩形の全面裁ち落とし。商品は切り抜き画像を斜めに置く
• セクション境界: 直線で、背景色やグラデーションを切り替えて区切る
• ボタンとカードは角丸なしにする
• ポイント番号は細線の正円を ×（かける）でつないで 3 つ並べる
• スペックのタグと日付ラベルだけピル型にする

Components

• 金グラデ購入帯（buy-band）: 横幅いっぱいの金グラデ帯。中央に白い太字、右端にカートのアイコンを置く
• 青グラデ見出し帯（accordion-header）: 番号と見出しを白い太字で置き、右に白い四角のマイナスアイコンを付ける
• ポイント番号の円（point-circles）: 青い細線の円の中に数字・下線・短い説明を入れ、3 つを × でつなぐ
• 枠線リンクボタン（outline-link）: 白地に青い 1px の枠線と青文字。右に▼や外部リンクのアイコンを付ける
• 英字見出し＋下線（section-title-en）: 中央に英字の大見出しを置き、その下に横幅いっぱいの濃い線を引く
• 商品スペックカード（spec-card）: 白カードに、SPF表記・ピル型タグ・価格・枠付きの特長アイコングリッドをまとめる
• 2商品比較表（compare-table）: 左右に商品を置き、中央の列に青い項目名を入れる。罫線で区切った表にする
• 発売日ピル（date-pill）: 黄色のピル型ラベルに日付と NEW を入れる
• 別ライン誘導バナー（sub-line-banner）: ラベンダーのグラデ帯の左に商品画像、右に白文字と▶を置く

Do's and Don'ts

Do - 購入帯はセクションごとに繰り返し、いつでも買えるようにする - 地は淡い空色のグラデーションにして、白カードとの差を小さく保つ - 成分や技術は図解イラストと短い説明文で見せる - 注釈は小さく、カードのすぐ下に置く - Before/After は同じ構図の写真を左右に並べる

Don't - 濃い原色や黒の大きな面を使わない（フッターは除く） - ボタンに大きな角丸やドロップシャドウを付けない - 金色を購入帯以外のあちこちに使わない - 本文を左揃えで詰め込まない - 手書き風やポップな書体を混ぜない

Page Structure

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

1. ファーストビュー（新商品とモデルで第一印象をつくる）: 空色の背景にモデル写真を置き、明朝の大きなキャッチ・商品の切り抜き・SPF表記・黄色の NEW バッジを重ねる
2. 新発売の告知（リニューアルと新サイズを伝える）: 中央揃えの見出しの下に商品を並べ、日付ピルと黄マーカーの強調文を添える
3. シリーズ切り替えタブ（2 種類の商品を選べるようにする）: 青い塗りのタブと、白地に枠線のタブを横に 2 つ並べる
4. 商品ビジュアル（商品の世界観を見せる）: 水の球と光の中に商品を斜めに置き、明朝のキャッチを添える
5. 受賞と商品スペック（信頼と価格を示す）: 受賞バッジを横に並べ、白カードに価格と特長アイコンのグリッドをまとめる
6. 購入先（購入先を選んでもらう）: 青い帯の上に白いボタン型のリンクを 2 列で並べる
7. 動画（CM で関心を高める）: 16:9 の埋め込み動画を置く
8. ポイント（特長 3 つ）（技術の要点をまとめて見せる）: 番号入りの円を 3 つ並べ、その下に青いアコーディオンで図解カードを展開する
9. 使用感・香り（質感と香りを伝える）: クリーム色の地にする。Before/After の写真、白残りの比較、香りのピラミッド図を置く
10. 知見コラム（肌悩みの原因を説明する）: 水色の地に半透明の写真カードを置き、！アイコンと金茶色の見出しを付ける
11. お客様の声・比較（口コミへの誘導と商品比較をする）: 英字見出しの下に枠線リンクを置き、2 商品の比較表とラベンダーの誘導バナーを並べる
12. 使い方（正しい塗り方を伝える）: 白カードにステップ写真をスライダーで見せ、左右の矢印とドットを付ける
13. ラインナップ・サステナビリティ（他商品とブランドの取り組みを紹介する）: 青いバナーと水色の地に、地球のロゴと 2 分割の写真パネルを置く
14. フッター（問い合わせ先と SNS を案内する）: グレーの地に中央揃えの案内文を置き、最下部に黒いリンク帯を敷く

Imagery

• 自然光の下で白い服を着た女性モデルが、頬に手を添える爽やかな肖像
• 商品チューブは白背景で切り抜き、斜めや並べた構図で見せる
• 水の球・光のにじみ・虹色のきらめきで透明感を出す
• 肌の断面図をパステル調の 3D イラストで描く
• クリームを伸ばした跡を白く艶のあるテクスチャで見せる
• Before/After は同じ顔と同じ構図の正面写真にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツを中央の約 55% 幅に収め、両側に空色のグラデーションを見せる
• PC の購入ボタンは帯をやめ、右端に固定した小さな金のカートアイコンにする
• PC の使い方ステップはスライダーをやめ、3 列のグリッドで並べる
• PC は購入先ボタンや特長アイコンを 1 行に横並びにする
• PC の FV は横長にし、キャッチ・商品・モデルを左右に配置する

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