DESIGN.md — クリーム地×深紅セリフの上品スキンケアLP（Warm Cream Elegant Serif Skincare Renewal LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、シンプル・ミニマル
• キーワード: クリームグラデーション・深紅の欧文セリフ・明朝の中央揃え本文・テクスチャ写真・すりガラスカード・商品別テーマ色
• 地の質感: なめらかなバームやクリームのテクスチャ写真と、柔らかいグラデーション地。半透明のぼかしカードを重ねる。
• 形: 角丸カード（16px前後）、ピル型ボタン、細線の正円バッジや円の図
• 温度感: 暖かい（クリーム・ベージュ基調）。商品セクションだけ色温度が変わる

Colors

• 地はオフホワイトとクリームのグラデーションでつなぎ、白に近い暖色を保つ
• 欧文見出しと下線、日本語サブ見出しは深紅に統一する
• 商品ごとに背景のテーマ色（黒・赤・グレージュ・青緑・黄）を変え、カードとボタンの線色をそれに合わせる
• 深紅の面はバナーなどポイントだけに使い、広い面にしない
• フッターはベージュの面に白文字

Typography

• セクション見出しは深紅の欧文セリフ大文字に下線を付け、その下に字間の広い日本語サブを置く
• 情緒的な本文は明朝で中央揃え、行間を広く取る
• 商品情報と注釈はゴシックで左揃え
• 注釈は * 記号と小さい文字で本文の直後に置く
• 欧文の小見出し（ポイント名）はセリフ体の濃いグレー
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 90px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しと本文は中央揃えにして左右対称に組む
• 商品セクションは全幅のテクスチャ写真の上に商品画像を置き、下にカードを重ねる
• カード内のボタンはカード幅いっぱいで縦に 2 つ並べる
• セクションの間はグラデーションでつなぎ、広い余白を取る

Elevation & Depth

• カードは背景をぼかした半透明（すりガラス風）で、影はごく薄い
• 赤いバナーには柔らかいドロップシャドウ
• ニュース枠は外側が白くぼける光彩

Shapes

• 角丸: 小 8px ／ 中 14px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜きを斜めに置き、テクスチャは全幅で裁ち落とす。動画は角丸の長方形
• セクション境界: 直線の境界は作らず、グラデーションで色を移す
• ボタンはピル型で、テーマ色の 1px 枠線
• ケア分類のバッジは細線の正円に 3 行の文字
• ポイント紹介は重なった 3 つの円の図で、1 つだけ塗る

Components

• 欧文見出し＋下線＋和文サブ（section-heading）: 深紅の大きい欧文セリフに細い下線を引き、その下に字間の広い和文を置く
• すりガラス商品カード（product-card）: 発売日・商品名・説明・注釈・ボタン 2 つを中央寄せで入れた半透明カード
• 詳細ボタン（枠線ピル）（button-outline）: テーマ色の枠線と文字に、右向きの矢印を添える
• 購入ボタン（外部リンク）（button-purchase）: 枠線ピルに別窓アイコンを付ける。暗いカードでは白い面のボタンにする
• ケア分類の円バッジ（care-badge）: 直径 90px ほどの細線の正円に、悩みの名前を 3 行で入れる
• 赤い横長バナー（history-banner）: 深紅の角丸面に白文字と金の数字、商品画像を並べる
• 斜線で挟んだ導入文（slash-lead）: ＼ ／ の斜線で短い一文を挟み、ボタンやリンクの前に置く
• ニュースリスト（news-list）: 日付と見出しを区切り線で並べ、右端にスクロールバーの帯と矢印を付ける
• カルーセルとドット（slider-dots）: 白い角丸カードを左右の矢印で送る。ドットは深紅の線の円で、選択中は塗る

Do's and Don'ts

Do - 地は暖かいオフホワイトとクリームに保ち、余白を広く取る - 見出しは毎回、欧文セリフと和文サブのセットで組む - 商品ごとにテーマ色の背景とテクスチャ写真を用意する - 注釈は本文のすぐ下に小さい文字で置く - ボタンはピル型の細い枠線で上品にまとめる

Don't - 原色の強いグラデーションや太い影を使わない - 深紅を広い背景色にしない - 情緒的な本文を左揃えのゴシックで詰めて組まない - 角ばったボタンや太い枠線を使わない - 1 つの画面に多くの色を同時に出さない

Page Structure

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

1. ファーストビュー（人物と商品で新しさを伝える）: 人物の顔のアップに白い明朝の縦長コピーとロゴを重ね、下に布のテクスチャ上の商品を置く
2. ニュース（最新情報を伝える）: 欧文見出しの下に、ぼかし枠のスクロールリストを置く
3. メッセージ（ブランドの想いを伝える）: 明朝の中央揃え本文の後に、斜線で挟んだ導入文と赤いバナーを置く
4. 進化のポイント（改良点を 3 つで見せる）: 重なった 3 つの円にアイコンと欧文を入れ、成分の数値をしずく画像で見せる
5. コンセプト（世界観を伝える）: 明朝の中央揃え本文と角丸の動画埋め込み
6. 新商品ラインナップ（商品ごとの特長と購入への導線）: テーマ色の背景、テクスチャ、商品写真、円バッジ、すりガラスカード、ボタン 2 つを 1 組にして繰り返す
7. 価格情報（サイズと価格を示す）: 白い角丸の小さいカードに価格を並べる
8. ムービー（CMを見せる）: 角丸の動画を縦に並べ、それぞれにキャプションを付ける
9. プレゼント企画（キャンペーンへの参加を促す）: ベージュ地にマーカーを引いた白抜き見出し、バナー画像、ピル型ボタン、SNSアイコンを置く
10. キャンペーン情報（SNS施策を伝える）: 角丸のバナー、期間とタイトル、枠線ピルのボタン
11. 関連コンテンツ（読み物へ誘導する）: カードのカルーセルとドットのページ表示
12. フッター（公式サイトとSNSへの導線）: ベージュの面に白ロゴ、白いピル型ボタン、SNSアイコン、規約リンク

Imagery

• バームやクリームを塗り広げたテクスチャを接写し、商品のテーマ色で撮る
• 商品の容器は切り抜きで少し斜めに置き、柔らかい影を付ける
• 人物は自然光で肌のツヤを見せる顔のアップにする
• アイコンは細い線画（横顔・しずく・花）
• 画像の上に重ねた白い明朝コピーで余韻を出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、SP を基準にした推奨とする
• PC では本文の幅を 720px 程度に抑え、中央揃えを保つ
• 商品セクションは写真とカードを左右 2 カラムにしてもよい
• 欧文見出しは 56〜64px に拡大する
• 動画やカルーセルは 2〜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 行書くと起動時に読み込まれる。