DESIGN.md — 金色×クリーム地の上品スキンケア LP（Golden Honey Skincare Cream LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、親しみ・手作り感、情報量多め・訴求型
• キーワード: ゴールド・クリーム色・吹き出し・手書き文字・受賞バッジ・つぶつぶ質感
• 地の質感: マットな金色の面と淡い生成りの面を交互に敷く。写真は明るく柔らかい自然光。
• 形: 円形バッジ、楕円の吹き出し、ひし形の番号、アーチ型の枠、下向き三角。
• 温度感: 暖色寄り。金と黄みのクリームで温かく上品。

Colors

• 地は白・淡いクリーム・金色をセクションごとに交互に切り替える。
• 金色の面は FV と悩みセクションの枠に限定し、強い面は連続させない。
• 見出しと番号は金色文字、本文は黒に近い濃色で読みやすくする。
• 本文の要点は金色の薄いマーカーで 1〜2 箇所だけ強調する。
• 口コミ吹き出しは金茶塗り＋白文字と白地＋金線を交互に使う。
• 注釈は小さく金色または白で控えめに置く。
• point-number は文字 #FEFBEC × 背景 #D9A501 のコントラスト比が 2.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8F6D01、4.64:1）を使う。
• review-bubble は文字 #FEFBEC × 背景 #DBA402 のコントラスト比が 2.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#926D01、4.59:1）を使う。
• ribbon-heading は文字 #FEFBEC × 背景 #D9A501 のコントラスト比が 2.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8F6D01、4.64:1）を使う。

Typography

• キャッチは手書き風の書体で斜めに入れ、動きを出す。
• 見出しは丸ゴシックで字間を広めにし、柔らかい印象にする。
• FV では白帯の上に縦書きの明朝を短く並べる。
• 注釈番号は上付きの小さい字で、ページ下部やブロック下にまとめる。
• 本文は 15px 前後、行間は 1.9 程度で詰めすぎない。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長は文章と画像を左右交互の 2 列に分ける
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションごとに背景色を全幅で切り替える。
• 特長は左右交互の配置でジグザグに流す。
• 口コミは写真と吹き出しを左右交互に 6 組並べる。
• 悩みは円形写真の周りに吹き出しを散らす。
• 主要な見出しは中央揃え、本文は左揃えにする。

Elevation & Depth

• 影はほぼ使わずフラットにまとめる。
• 受賞バッジ・成分の丸画像には柔らかい影を薄く付けてもよい。
• 立体感は写真の光と陰影で出す。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: 人物は円形または角丸の四角に切り抜き、商品は背景ごと全幅で見せる
• セクション境界: 基本は直線。特長部分では斜めの白帯で区切る。悩み部分はアーチ型の白枠
• 吹き出しは楕円形で、しっぽを付ける。
• 番号はひし形の金色の枠に数字と小さい英字ラベルを入れる。
• FV の特長は円形の白いメダル 3 つで見せる。
• 見出し帯はリボン型・アーチ型で飾る。

Components

• 受賞バッジ（award-badge）: 王冠と月桂樹付きの円形バッジに順位を大きく入れ、横に星評価の表を添える。
• 特長メダル（feature-medal）: 金地の上に白い円を 3 つ並べ、短い特長と小さな画像・タグを入れる。
• 悩み吹き出し（worry-bubble）: 白地に黒線の楕円吹き出しで悩みを 2 行の短い言葉で入れ、円形写真の周りに 7 つ散らす。
• ポイント番号（point-number）: 金色のひし形に大きな数字と英字ラベル。右に白帯の上に金色の見出しを置く。
• 口コミ吹き出し（review-bubble）: 金茶塗り＋白文字と白地＋金線＋黒文字を交互に使う楕円吹き出し。写真と対で並べる。
• リボン見出し（ribbon-heading）: 金色のアーチ状リボンに白文字で見出しを入れ、上に金色の小さいリードを添える。
• 本文マーカー（text-marker）: 本文の要点に金色の薄い帯を敷いて強調する。
• 下向き三角（down-arrow）: 悩みから解決へつなぐ金色の大きな下向き三角。

Do's and Don'ts

Do - 金・クリーム・白の 3 色を地に使い、温かく上品にまとめる。 - コピーは手書き風と丸ゴシックで柔らかさを出す。 - 訴求の根拠は受賞・星評価・成分画像で見せる。 - 吹き出しを多めに使い、利用者の声のような親しみを出す。 - 注釈番号と注釈文は必ず添える。

Don't - 青や原色の赤など寒色・強い色を主役にしない。 - 角ばった太いゴシックで威圧感を出さない。 - 金色の面を何セクションも続けて重くしない。 - 濃い影や光沢のグラデーションを多用しない。 - 注釈なしに効能を言い切る表現をしない。

Page Structure

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

1. ファーストビュー（商品と受賞実績を一目で伝える）: 金色の地に商品写真、手書き風の斜めキャッチ、縦書きコピー、右上に受賞バッジ、下に特長メダル 3 つ
2. 使用イメージ（テクスチャの魅力を見せる）: 指でクリームを取る全幅写真の上に、ブラウン文字のキャッチと強調語を置く
3. 受賞・評価（第三者評価で信頼を得る）: 淡いクリーム地に大きな受賞バッジと星評価の表、下にマーカー付き説明文
4. 悩みの提起（ターゲットの肌悩みに共感する）: 金色地の中に白いアーチ枠、円形の人物写真の周りに悩みの吹き出しを 7 つ
5. 解決提示（商品を解決策として示す）: 下向き三角、金色の見出し、短い文章 3 行、球体の小物と商品写真
6. 特長（3 ポイント）（成分・浸透・使用感を説明する）: クリーム地にひし形番号と白帯見出し、文章と画像を左右交互に配置
7. お客様の声（実際の使用感を見せる）: 金色リボン見出し、人物写真と口コミ吹き出しを左右交互に 6 組
8. 使用方法（使い方を簡潔に示す）: クリーム地に円形の人物写真と見出し・手順の文章
9. 締めのビジュアル（使ってみたい気持ちを高める）: 蓋を開けた商品の全幅写真に、白帯の縦書きコピーを重ねる

Imagery

• 商品は白い容器と金の蓋。暖色の光で艶を出して撮る。
• テクスチャは指で取る様子やクリームの接写で見せる。
• 人物は 30〜40 代女性の素肌。頬に手を添えるポーズで柔らかく。
• 成分は植物・果実を白い円の中に置いたガラス玉風の画像。
• 口コミ写真は自然な自撮り風の明るい写真を角丸の四角で切る。
• 飾りは王冠・月桂樹・集中線のような手描きの短い線。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元は SP 想定の縦長デザインを PC で中央に固定幅表示したもの。
• PC では本文幅を 480〜720px 程度の中央カラムに収め、左右は背景色を延長する。
• 特長と口コミの左右交互の配置は PC でもそのまま使う。
• SP では悩みの吹き出しを小さくし、円形写真に重ねすぎない。

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