DESIGN.md — 深い瑠璃色と雪白の透明感スキンケアLP（Deep Cobalt Snow Clarity Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、清潔・爽やか、信頼・誠実、和風
• キーワード: 透明感・雪・水面・コバルトブルー・欧文セリフ・明朝
• 地の質感: 水面の波紋、雪の結晶、ボケた光の粒を白地にうっすら敷く。紺の面には光沢のあるグラデーション
• 形: 角丸ほぼなしの四角いカードとボタン。六角形バッジ、七角形チャート、円形アイコンをアクセントにする
• 温度感: 寒色寄りでクール。白と紺の澄んだ冷たさ

Colors

• 白・雪グレーの地と濃紺の地を交互に置いて、リズムを作る
• 見出し・強調文・線はすべて紺1色にまとめ、他の有彩色は使わない
• 大きな欧文見出しは薄いグレーで背景になじませる
• 金色は受賞マークにだけ使う
• フッターだけ生成りの温かいオフホワイトにする
• 濃紺の地の上では、文字は白、カードは白抜きにする

Typography

• 情緒的なコピーは明朝体、機能説明やUIはゴシック体と使い分ける
• 欧文見出しは左端にはみ出す大きさにし、2行目を右へずらす
• キーワードは《》や「」で囲み、下線を付けて強調する
• 明朝体のリードは中央揃え、行間は広めの1.9
• ※の注釈はセクションの右下に小さく置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは左右に約10%の余白を取る
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは欧文の大見出しから始める
• コピーは中央揃えで、短い行を積み重ねる
• カードは上に紺の見出し帯、下に白い本文の2段構成
• 効能ブロックはページ内で2回繰り返し、訴求を念押しする
• 商品一覧は濃紺の地に白いカードを縦に並べる

Elevation & Depth

• カードには右下に薄いドロップシャドウ（2px 2px 4px rgba(0,0,0,.2)）を付ける
• 商品写真の下には反射の映り込みを入れる
• それ以外は平面にし、影は控えめにする

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 全幅の四角い写真と、白抜きの商品切り抜き
• セクション境界: 直線で切り替え、地色または写真背景で区切る
• ボタンは角丸なしの長方形
• バッジは六角形にする
• 要因は七角形のチャートで示す
• 使用シーンは白い円で示す
• フッターの店舗ボタンだけピル型の枠線ボタンにする

Components

• カート投入ボタン（button-cart）: 紺の地に白文字。右に＋を付け、下に価格を白地・紺枠で並べる
• 紺地上の枠線ボタン（button-outline-dark）: 紺の地に白い1px枠線と白文字。右端に＋を付ける
• 番号付きポイントカード（point-card）: 紺のグラデーションの見出し帯に大きな欧文数字。下の白地にケア名と商品画像、全幅の詳細ボタンを置く
• 成分の六角形バッジ（badge-hexagon）: ブルーグレーの六角形の中に、白文字の明朝で成分名を入れる
• アコーディオン行（accordion-row）: 白地に紺の枠線。左に文言、右に＋を置き、行を縦に連結する
• 強調帯（banner-claim）: 鮮やかな青紫の帯に白文字2行、右に＋を置く
• 商品カルーセルカード（product-carousel-card）: 紺の見出し帯と白い本文のカード。左右に三角の矢印、下にプログレスバーを置く
• 使用シーンの円（circle-scene）: 写真の上に白い円を置き、紺の太字で2行のシーン名を入れる

Do's and Don'ts

Do - 白と紺の2色を基調にし、透明感を最優先する - 欧文の大見出しは薄いグレーのセリフ体で大胆に置く - 背景には水・雪・光の粒の写真を薄く敷く - コピーは明朝体で中央揃え、短い行で区切る - 注釈は※付きの小さな文字で丁寧に添える

Don't - 暖色の強調色や赤いCTAは使わない - 丸みの強いポップなボタンは使わない - 太いゴシック体を多用しない - 背景の質感を濃くしすぎて、文字を読みにくくしない - 影や立体効果を強くしすぎない

Page Structure

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

1. ファーストビュー（商品の世界観を一瞬で伝える）: 水面の写真の上に商品ボトルを大きく置き、縦書きのブランド名を添える
2. 効能訴求（独自の効能を主張する）: 六角形バッジ、太い明朝の見出し、成分写真、強調帯を並べる
3. 主力商品の購入（その場で購入へ導く）: 濃紺のグラデーション地に商品画像、受賞マーク、容量のラジオボタン、枠線ボタンを置く
4. 悩みの提起（肌悩みの要因を整理する）: 七角形のチャートで要因を周囲に配置する
5. 解決の考え方（ケアの流れを段階的に示す）: 紺枠のカードに明朝の3段の文を置き、V字の矢印でつなぐ
6. 特長ポイント（4つのケア効果を示す）: 番号付きのポイントカードを縦に4枚並べる
7. 使い方（使用シーンの幅を示す）: 写真の上に白い円4つを置き、下にアコーディオン行を並べる
8. ライン使いの提案（関連商品との併用を促す）: 雪の背景に3分割の円環図を置き、周囲に商品3点を配置する
9. 雪のスキンケア（シリーズの価値を情緒的に伝える）: 雪の上の商品写真、明朝の中央揃えの文章、光る円の中に4つのケアを置く
10. テクスチャー（使用感を伝える）: 雪の結晶の背景に、紺の明朝コピーを左右交互に寄せて置く
11. 商品一覧（シリーズの購入）: 濃紺の地に商品カルーセルカードを縦に並べる
12. ブランドストーリー（歴史と世界観を伝える）: 明朝の中央揃えの文章に続けて、水・深海・雪の3つの全幅写真ブロックを置く
13. 関連ブランドとフッター（回遊と信頼の担保）: 生成りの地にバナーカード、アコーディオンのナビ、SNSアイコン、ピル型の枠線ボタンを並べる

Imagery

• 光の差す澄んだ水面の波紋を、俯瞰で撮った白〜淡グレーの写真
• 雪原の上に商品を置き、寒色のボケと雪の粒をまとわせる
• 青いガラスボトルは白抜きで、下に反射の映り込みを入れる
• 水しぶきや泡の接写で、みずみずしさを表す
• 雪の結晶や光の粒を背景装飾として薄く重ねる
• 天然素材の写真は小さく添える程度にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約1000px幅のコンテナを置き、背景写真は全幅で敷く
• PC の購入ブロックは、左にコピー、中央に商品、右に購入フォームの横並び
• PC のポイントカードは2列×2段
• PC の商品一覧は2列のグリッド
• PC のストーリーの3ブロックは横3列に並べる
• PC のヘッダーには横並びのグローバルナビと検索窓を入れる

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