DESIGN.md — はちみつ色×金箔の明朝体スキンケアLP（Honey Gold Mincho Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、ナチュラル、情報量多め・訴求型
• キーワード: はちみつ色・金箔グラデーション・明朝体・クリーム地・成分訴求・大人の女性
• 地の質感: とろみのある液体写真、白い漆喰風の背景、金属的な金グラデーション
• 形: 六角形の金バッジ、円形の泡モチーフ、細枠の白カード
• 温度感: 悩みパートは寒色、商品・成分パートは暖色の温かみ

Colors

• 悩み・原因パートは白灰か青みグレーの地にし、紺の帯で寒色にまとめる
• 商品・成分パートはクリーム色の地に切り替え、温かいトーンを続ける
• 金はグラデーションで使い、六角バッジ・ロゴ・欧文見出しに限る
• 本文で一番伝えたい箇所はこげ茶の太字にし、黄色マーカーも引く
• 安心訴求の円リストとアクセント円は紺で締める
• 原色の赤や鮮やかな色を面で使わない

Typography

• 見出しはすべて明朝体にし、字間を広めにとる
• 本文はゴシックで行間1.8にする
• 欧文はセリフ体かイタリックにし、金色で添える
• 縦書きのサブコピーを商品写真の横に置く
• 成分名はかぎ括弧で囲んで見出しにする
• 注釈は※付きの極小文字で右寄せにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分の小コラムは写真とテキストの 2 分割
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は左右に約8%の余白をとって配置し、ポイント番号の六角バッジを左上に重ねる
• ポイントは写真→見出し→本文→白カードの順で繰り返す
• 白カードは細い枠と薄い影で浮かせる
• 悩みリストは点線区切りのチェックリストにする
• セクションの切り替えは背景色を全幅で変えて示す

Elevation & Depth

• 白カードはごく薄いドロップシャドウ（0 2px 8px rgba(0,0,0,0.08)）にする
• 六角バッジは金グラデーションで立体感を出す
• その他の要素はフラットにする

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの矩形。素材写真は円形に切り抜く
• セクション境界: 基本は水平に切り替える。帯ラベルの下に逆三角の吹き出しを付ける
• ポイント番号は金の六角形にする
• 安心訴求は細線の円を3列で並べる
• ハリ・ツヤなどの3要素は淡い金色か透明な泡の円で表す
• 見出しの下には短い細罫線を引く

Components

• 六角ポイントバッジ（point-badge）: 金グラデーションの六角形。上に小さな欧文、下に大きな番号
• 紺帯ラベル（navy-label）: 紺の矩形に白い明朝体。下に三角の吹き出し
• こげ茶タグ（dark-tag）: 濃茶の帯に金の欧文を広い字間で配置
• 成分効果カード（ingredient-card）: 白地に細枠。罫線で挟んだ明朝の小見出しと素材写真を並べ、本文にマーカーを引く
• 悩みチェックリスト（check-list）: ピンクのチェックアイコンと点線区切りで6項目。キーワードは紺色にする
• 無添加の円リスト（free-circle）: 細いグレー線の円を3列×2段。中に小さな明朝体
• 3要素の泡（benefit-bubble）: 淡い金色か透明な泡の円に、明朝体で一語ずつ入れる
• 使い方ステップ（step-item）: 左にイラスト、右に金のイタリックのstep番号と説明。間を点線でつなぐ
• 黄色マーカー強調（marker-text）: 本文の一部に淡黄の帯を引く

Do's and Don'ts

Do - 見出しは明朝体と金・こげ茶で上品に組む - 悩みは寒色、解決策は暖色と、パートごとに温度を切り替える - 成分ごとに写真・見出し・本文・カードの同じ型を繰り返す - 効果の表現には※注釈を添える - とろみのある質感や素材の写真を大きく見せる

Don't - 太いゴシックや丸ゴシックで見出しを作らない - ビビッドな赤や黄色で面を塗らない - 角丸の大きいポップなボタンを使わない - 金をベタ塗りの単色にしない - カードに濃い影を付けない

Page Structure

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

1. ファーストビュー（商品の質感と保湿の価値を一目で伝える）: 白灰の地に金の大見出しを置く。商品と素材の写真、縦書きコピー、金の泡3つ、欧文ロゴを並べる
2. 原因の提起（年齢による変化の原因を示す）: 青みグレーの写真背景に、白箱と紺帯の見出しを置く。暗い人物写真の上に白文字、下にイメージグラフ
3. 悩みの提起（共感を得る）: 漆喰調の白地に引用符付きの見出しを置き、チェックリストを6項目並べる
4. 解決提示（商品を解決策として示す）: 紺の吹き出し帯の下に、ベージュ地で大きな明朝コピー、商品写真、欧文ロゴを置く
5. 質感訴求（テクスチャを見せる）: 開けた容器とクリームの写真に短いコピー。人物写真と泡の円を組み合わせる
6. 6つのポイント導入（品質の根拠を予告する）: はちみつの液体写真の帯にこげ茶タグを置き、大きな数字の明朝見出しを続ける
7. 成分ポイント詳細（成分ごとの効果を説明する）: クリーム地で六角バッジ付きの写真、見出し、本文、白カードを6回繰り返す。途中に山吹色のコラムを挟む
8. 無添加訴求（安心感を出す）: 紺の円バッジを置き、紺の明朝見出しの下に細線の円を3×2で並べる
9. 使い方（使用手順を示す）: 欧文アーチの見出しを置き、イラストと金のstep番号で3段の縦並びにする
10. クロージング（情緒的に締める）: 人物アップ写真に縦書きの大きな明朝コピーを白箱で重ね、左下に金茶の小コピーを置く

Imagery

• はちみつ・蜂の巣・クリームは光沢ととろみが伝わるよう、暖色光でマクロ撮影する
• 成分素材（花・木・酒粕など）は自然光で被写界深度を浅く撮る
• 人物は40代のナチュラルメイクの女性。頬に手を添える柔らかいポーズ
• 使い方は細い線画の顔イラストに、ピンクの点や矢印を入れる
• グラフや図はピンクと水色のシンプルなイメージ図にし、※イメージ図と添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では中央に幅 750px 前後のカラムを置き、左右は地の色で埋める
• ポイント詳細は PC で写真と本文を左右 2 カラムにしてもよい
• 無添加の円は PC で 6 個を 1 列に並べる
• 大見出しは 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 行書くと起動時に読み込まれる。