DESIGN.md — 柑橘オレンジ×明朝の植物系ハンドクリームLP（Citrus Orange Botanical Hand Cream LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: やさしい・柔らかい、上品・高級、ナチュラル、情報量多め・訴求型
• キーワード: 柑橘オレンジ・明朝の大見出し・植物オイル・光彩バッジ・肌断面の図解
• 地の質感: 柔らかい光とボケを入れた写真、淡いグラデーション地、泡や雫のきらめき
• 形: 角の立った白カード、丸い光彩バッジ、オレンジの全幅帯
• 温度感: 暖色寄り。オレンジと生成りが温かく、白グレーで清潔感を足す

Colors

• 地は白・青グレー・生成りの3系統を、セクションごとに切り替える
• Point見出しはオレンジのグラデーション帯に白抜きの明朝で置き、黄色の手書き文字ラベルを上に重ねる
• 強調する本文や成分名はオレンジ文字。太字は使いすぎない
• 数値の訴求は金色の雫アイコンの上に赤〜オレンジの大きなセリフ数字で置く
• クロージングでは深緑の明朝と焦げ茶ラベルを使い、FVと色を変えて落ち着かせる
• 注釈は小さめのグレー文字にする

Typography

• キャッチと見出しは明朝、本文と注釈はゴシックで役割を分ける
• キャッチは大きな文字の間に小さい助詞を挟み、文字サイズに強弱をつける
• 数字は欧文セリフで大きくし、単位と%は小さくする
• 成分名の右肩に※番号を小さく付け、注釈をカードの下にまとめる
• 縦書きのキャッチはイエローマーカーを敷いて使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。素材紹介のみ 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 24px（375px 幅換算）
• Point見出しは全幅のオレンジ帯にし、高さはおよそ 110px
• 成分の説明は左右に余白をとった白カードに入れ、カード同士は 16px 空ける
• 写真は全幅で敷き、その上に文字やバッジを重ねる
• 注釈はカード内の最下部に左寄せで置く

Elevation & Depth

• 白カードには影をほぼ付けず、地色との差で浮かせる
• 丸い成分バッジはピンクベージュの光彩グラデーションと内側のハイライトで立体的にする
• キャッチの白文字には柔らかな白いグローを付けて、写真から浮かせる

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 全幅の角写真のほか、素材写真は円形切り抜きや小さな角写真にする
• セクション境界: 直線で切り替え、オレンジ帯の上下だけグラデーションの帯を挟む
• カードは角丸なしの矩形
• 成分バッジは楕円か正円で、光沢感を出す
• 図解の矢印と帯は直線的にする

Components

• 数量限定帯（limited-banner）: ページ最上部の全幅オレンジ帯。白文字のラベルに大きなセリフ数字を組み合わせる
• Point見出し帯（point-heading）: オレンジのグラデーション帯。上に黄色の手書き風Point番号、下に白の明朝2行見出し
• 成分光彩バッジ（ingredient-badge）: 淡いピンクベージュの丸に、明朝の成分名と※注記を入れる
• 悩みチェックリスト（concern-checklist）: 白カードの中に、チェックアイコン付きのかぎ括弧付きの悩みを4つ並べ、右下に悩む女性のイラストを置く
• 雫型数値バッジ（drop-stat）: 金色のオイル雫の上に、成分比率の大きな数字を置く
• 成分解説カード（ingredient-card）: 白カードに、明朝の大見出し、肌断面の図解、本文、注釈を順に積む
• 素材グリッド（material-grid）: 素材の写真を2列で並べ、下に太字の名前と括弧書きの表示名を添える
• 開発者メッセージ（staff-message）: クリーム地に、丸い人物写真と名札ラベル、オリーブの丸点の箇条書きを置く
• 縦書きマーカーコピー（vertical-marker-copy）: 黄色のマーカーを敷いた縦書きの明朝キャッチ

Do's and Don'ts

Do - 見出しは明朝で大きく、ゆったり組む - 柑橘・葉・花・オイルの写真を四隅に散らして香りを感じさせる - 成分には※番号を付け、注釈はカード下にまとめる - Point番号を付けて特長を3つ程度に分ける - 成分の働きは肌断面のイラストと矢印で図解する

Don't - ビビッドな原色や黒ベタを多用しない - カードに強い影や大きな角丸を付けない - 見出しをゴシックの極太体にしない - オレンジを本文の地色に広く使わない（帯と強調だけにする） - 注釈を省いて効能を断定する表現にしない

Page Structure

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

1. ファーストビュー（質感のベネフィットと限定性を伝える）: 上にオレンジの限定帯。手元をケアする女性の写真に、縦書きの明朝コピーとオレンジの大キャッチを重ねる
2. 商品紹介（商品名と天然由来比率を示す）: 商品名ロゴの横に雫型の数値バッジ、右にチューブの切り抜き写真
3. 悩みの提起（使用前の不安に共感する）: 白カードにチェックリストを4項目並べ、悩む女性のイラストを添える
4. 開発者メッセージ（悩みへの解決姿勢を示す）: クリーム地に、下線付きの見出し、箇条書き、スタッフの丸写真
5. 特長1（テクスチャと処方を説明する）: Point帯の下に手の写真。成分の光彩バッジを重ね、本文を続ける
6. 特長2（配合オイルを紹介する）: 緑の茶葉写真を背景に白カードを置く。円形のオイル写真と素材グリッドを並べる
7. 数値訴求（天然由来比率を強調する）: 暗い緑の写真の上に、白の大きなセリフ数字
8. 特長3（エイジングケア成分を解説する）: 生成り〜黄色のグラデーション地に、成分ごとの白カードを縦に積み、図解を入れる
9. 香り（家族で使える香りを伝える）: 母子の写真に、金縁の丸い香りバッジと柑橘・花の切り抜きを添える
10. クロージング（FVの訴求を繰り返して締める）: 淡いグレーの地に、焦げ茶の限定ラベル、深緑の明朝キャッチ、商品写真、縦書きのマーカーコピー

Imagery

• 自然光で撮った、柔らかく明るい女性の手元・横顔の写真。白いレースの服
• 柑橘の断面、葉、小花を画面の端に散らした切り抜き素材
• 金色のオイルが垂れる様子や蜂の巣など、素材のクローズアップ写真
• 肌の層をパステルのオレンジとピンクで描いた断面図と矢印
• 泡・水滴・きらめきの光の粒を背景に浮かべる
• 人物は線画風のやさしいイラストで悩みを表現する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版は確認できないため推奨。中央に 750px 程度の SP デザインを置き、左右には淡いグレーの地を広げる
• オレンジのPoint帯は全幅のまま伸ばし、見出しは中央寄せにする
• 素材グリッドは PC で 4 列にする
• FV の写真は横長に切り直し、キャッチを右側に配置する

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