DESIGN.md — 金色オイルと生成り地のナチュラル美容オイル LP（Golden Oil Natural Botanical Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: ナチュラル、やさしい・柔らかい、情報量多め・訴求型、上品・高級
• キーワード: 金色のオイル・生成り・植物の葉・番号付きポイント・マーカー強調・実績訴求
• 地の質感: とろみのあるオイルの光沢写真と、マットな生成り・白の地を組み合わせる
• 形: 角を立てた帯見出し、正円のバッジ・番号、細い線の囲み
• 温度感: 暖色寄り。部分的にミントグリーンで涼しさを足す

Colors

• 地は白と生成りを交互に使い、セクションの区切りを出す
• 金色は帯見出し・番号・マーカーに限って使う
• 冒頭の実績訴求だけは赤茶・テラコッタの濃い地に金文字を置く
• 無添加や Q&A ではミント地と緑で安心感を足す
• 購入 CTA だけ鮮やかなオレンジにして目立たせる
• ギフト案内は例外として淡いピンク地を使う
• button-primary は文字 #FDFDEF × 背景 #F06414 のコントラスト比が 3.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C44F0D、4.58:1）を使う。

Typography

• 見出しは細め〜中くらいの太さのゴシック体にし、字間を少し広げて上品に見せる
• 実績や受賞の訴求だけは極太の文字や金のグラデ文字を使う
• 本文中の重要な一文は太字にして、半透明のマーカーを敷く
• ポイント番号は細い欧文で、円の枠に重ねる
• 本文の行間は 1.9 前後とゆったり取る
• 注釈は※付きの小さい灰色文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。用途カードと肌タイプ別の振り分けは 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 各ポイントは、端まで広げた写真、円の番号、見出し、本文の順に並べる
• 帯見出しは本文と同じ幅で左寄せにする
• 比較は中央に写真を置き、左右に項目を並べる
• 手順は丸数字の付いた縦リストにする
• 葉っぱの装飾は画面の端からはみ出させる

Elevation & Depth

• 影はほぼ使わず、面の色の違いと細い線で階層を示す
• ボタンにだけ軽い立体感を付ける
• 商品写真は背景を切り抜き、自然な落ち影を付ける

Shapes

• 角丸: 小 0px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 写真は四角い矩形のまま端まで広げる。人物の丸切り抜きと、背景を切り抜いた商品写真も使う
• セクション境界: 直線で地の色を切り替える。写真の下端に円の番号を重ねる
• 帯見出しの角は立てる
• バッジと番号は正円にする
• 購入ボタンと誘導ボタンはピル型にする
• カードは細い線で囲み、角はわずかに丸める

Components

• ポイント番号の円（point-number）: 細い線の円に、小さい英字ラベルと大きな番号を重ね、写真の下端にまたがせる
• 金色の帯見出し（band-heading）: 幅いっぱいの金色の帯に白文字の見出しを載せる
• マーカー強調（marker-text）: 本文の重要な箇所に、薄いベージュのマーカーを文字の下半分に敷く
• 無添加の丸バッジ（badge-circle）: 緑の円に白文字を入れ、斜線を引いて「不使用」を表す
• 用途カード（usage-card）: 写真の下に金色のラベル帯を付け、その下に本文を置く。2 カラムで並べる
• Q&A の項目（faq-item）: ミント地に緑の Q 見出しを置き、点線で区切って回答文を続ける
• 購入 CTA（button-primary）: オレンジのピル型ボタン。白い極太文字と、右端に丸い矢印アイコンを付ける
• 商品ページへの誘導ボタン（button-secondary）: こげ茶のピル型ボタン。左に商品の小さな写真、右に丸い矢印を置く
• 肌タイプ別カード（skin-type-card）: 線画の女性イラストと吹き出しを載せ、下部に色分けした肌タイプ名の帯を置く

Do's and Don'ts

Do - オイルの光沢を感じさせる金色を、強調色として一貫して使う - 特長は番号付きのポイントとして、写真と見出しの組み合わせで繰り返す - 強調にはマーカーと太字を使う - 葉っぱや実の写真を端に散らし、自然な印象を保つ - 生成り・白・ミントの淡い地を交互に使う

Don't - ネオンのような強い寒色を使わない - 見出しを全部極太にしない。極太は実績訴求に限る - 濃い影や光沢の強いボタンを多用しない - 本文の行間を詰めない - オレンジの CTA 色を装飾に流用しない

Page Structure

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

1. 実績バナー（累計の販売数で信頼を得る）: テラコッタ地に、月桂樹の飾りと白い極太の数字を置く
2. ファーストビュー（商品と主な特長を伝える）: 生成り地に商品とオイルのしぶきを置き、縦書きのコピーを添える。下部に特長 3 つを縦線で区切って並べる
3. 受賞・ランキング（第三者の評価で権威付けする）: 赤茶地に金のグラデ文字、月桂樹の受賞バッジ 3 つ、ランキング画面のキャプチャを置く
4. SNS の口コミ（話題性を示す）: オレンジの帯見出しの下に、投稿画像を 3×2 のグリッドで並べる
5. 特長ポイント（原料・製法）（成分のこだわりを伝える）: 写真、円の番号、見出し、帯見出し、マーカー付きの本文の順に並べる
6. 比較（他の種類との違いを示す）: 左右の色違いのラベルと中央の写真で対比させ、下に囲みカードを 2 つ置く
7. 使い方の提案（多用途であることを示す）: 2 カラムの用途カードと、手順のリストを並べる
8. テクスチャ・保湿（使用感を伝える）: 金色のオイル背景に円の吹き出しを置き、使用感をスライダー図で示す
9. 無添加（安心感を出す）: ミント地に、緑の丸バッジを 3 個＋4 個並べる
10. プロの使用実績（信頼性を補強する）: ベージュ地に施術の写真とマーカー見出しを置く
11. よくある質問（不安を解消する）: 円の Q&A 見出しの下に、ミント地の点線区切りリストを置く
12. ギフト案内（購入の用途を広げる）: ピンクのリボン型見出しの下に、注意事項を囲みリストで並べる
13. 購入 CTA（購入へ誘導する）: 大容量の商品写真を赤い丸バッジ 4 つで囲み、オレンジのピル型ボタンを置く
14. 肌タイプ別の誘導（関連商品へ送客する）: 色分けしたイラストカードを 2×2 で並べ、こげ茶の誘導ボタンを付ける

Imagery

• 金色のオイルのしずくやしぶきを、明るい逆光で撮る
• 葉付きの実を切り抜き、画面の端に散らす
• 手のひらや肌にオイルを伸ばす様子を、柔らかい自然光で撮る
• サロンでの施術を暖色のキャンドル光で撮る
• 肌タイプ別には、細い線画の女性イラストを使う
• 画像の背景には、月桂樹や光のきらめきを金色で添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像はないため、以下は推奨。PC では本文の幅を 640〜750px に固定し、中央に寄せる
• 左右の余白は生成りの地か、葉っぱの装飾で埋める
• 用途カードは PC で 3 カラムにしてもよい
• ポイント写真は PC でも本文と同じ幅いっぱいに見せる
• 肌タイプ別カードは 4 カラムにまとめてもよい

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