DESIGN.md — 深緑×ティールの森系メンズスキンケア LP（Forest Green Organic Men's Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: ナチュラル、上品・高級、清潔・爽やか、シンプル・ミニマル
• キーワード: 森・植物の影・深緑ボトル・静けさ・メンズ・オーガニック
• 地の質感: 木漏れ日の葉影が落ちる淡いグレーの紙のような地と、森の写真の重い緑
• 形: 角丸ほぼなしの長方形帯と白カード、円形バッジと細い罫線
• 温度感: やや低め。青緑寄りのクールで落ち着いた温度感

Colors

• 地は淡いグレー #F4F6F4 を基本にし、葉影の写真をうっすら重ねる
• セクション切替の大見出しは全幅のティール帯に白文字で置く
• 白カードは淡グレー地の上にだけ載せ、余白で浮かせる
• オリーブグリーンは商品写真・小見出しの差し色に限定する
• 金色は権威バッジのみ。他では使わない
• 森の写真セクションは暗い深緑で没入感を出し、文字は白

Typography

• 帯見出しは小さい前置き行＋大きい主行の 2 段構成
• 情緒的な見出しは明朝、機能訴求はゴシックで使い分ける
• 見出しは字間を 0.1em 以上広めに取る
• 数値は欧文セリフで大きく、単位は小さく添える
• 本文は中央揃えを基本、カード内は左揃え
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、成分紹介は 3 列、ラインアップは 2×2 グリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• ティール帯は全幅で高さ 80〜100px
• 写真セクションは全幅で余白なしに連続させる
• 白カードは左右 6% の余白で縦に 12px 間隔で積む
• 注釈は各ブロック右下に小さく置く

Elevation & Depth

• 白カードはごく薄い影か影なしで地との明度差で浮かせる
• 図解ボックスは半透明白の面を写真上に重ねる
• 強い影や立体ボタンは使わない

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 全幅の長方形写真、成分写真は角丸小の縦長矩形、STEP 番号は白い正円
• セクション境界: 直線で切り替え。装飾的な波や斜めは使わない
• 帯・カードは基本角丸なし
• 円形は番号バッジと受賞メダルのみ
• 細い 1px 罫線で区切る

Components

• ティール帯見出し（band-heading）: 全幅ティール面に前置き行と大見出しを中央揃えで 2 段配置
• ティール小ラベル（label-tag）: 図解やメリットの上に置く細長いティール帯ラベル
• 悩みチェックカード（worry-card）: 左に問いかけ見出し、右にチェック付き悩み 4 項目
• STEP 番号円（step-badge）: 白い正円に STEP と大きなセリフ数字、下に品名と英名
• 口コミカード（review-card）: 見出しと星 5 つを横並び、罫線の下に本文
• Q&A カード（faq-item）: Q 行を太字、罫線の下に A 行。Q/A は明朝体の頭文字
• 金メダルバッジ（award-medal）: 月桂樹付きの金色円形で実績を表示
• 数値訴求（stat-number）: ラベル枠の下に大きなセリフ数字と%

Do's and Don'ts

Do - 葉影や森の写真で自然の空気感を出す - ティール帯で章を区切りリズムを作る - 余白を広めに取り静かな印象を保つ - 商品はボトルのオリーブ色と白ラベルを揃えて見せる - 注釈は※で小さく丁寧に添える

Don't - 赤や黄色の派手な強調色を使わない - 丸くポップなボタンやイラストを入れない - 見出しを太い装飾フォントにしない - カードに強い影を付けない - ティール以外の濃色帯を増やさない

Page Structure

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

1. ファーストビュー（セット内容と実績を一目で伝える）: 葉影の淡い地に大きな欧文セリフ、ティールのキャッチ帯、品目タグ、商品集合写真、金メダル 2 つ
2. ブランドイメージ（ターゲット像と世界観を示す）: 全幅の男性モデル写真に白の縦組み風コピーとロゴ
3. 成分数値（自然派の根拠を数値で示す）: 明るい室内の商品写真に大きなセリフ数字 2 つ
4. 悩みの提起（肌悩みを自分ごと化）: ティール帯見出しの後、白カードにチェック付き悩み 4 つ
5. メカニズム図解（原因と解決を比較）: グレーの肌断面図を左右に並べ矢印で対比
6. 技術紹介（独自技術を説明）: 肌アップ写真に半透明白ボックスでサイズ比較図
7. 成分紹介（配合成分を具体化）: 3 列の素材写真と名前、下にラベル帯とメリット番号リスト
8. 処方・香り（使用感と香りで情緒訴求）: 暗い森の全幅写真に白線のピラミッド図で香りの層を表示
9. ラインアップ（使用順を示す）: 葉影地に 2×2 の罫線グリッド、商品写真と STEP 円
10. お客様の声（使用者の実感で後押し）: 明朝見出し、白カードに見出し・星・本文を縦積み
11. よくある質問（不安解消）: 白カードの Q&A を 3 つ縦積み
12. ブランドムービー（世界観の締め）: グレージュ地に明朝見出しと森の動画サムネ、白い円形再生ボタン

Imagery

• 窓辺の木漏れ日や葉影を淡く落とした明るいグレー背景
• 苔や倒木のある深い森の写真を暗めトーンで使う
• 商品は白い台や木の棚の上で自然光、柔らかい影
• モデルは淡色の服でブルーグレーの背景、顔は一部だけ写す
• 素材写真は玄米・豆・海中など寄りの質感写真
• 図解はグレー単色の線画で控えめに
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 480〜750px 幅の縦長 1 カラムで SP 版とほぼ同構成
• SP では成分 3 列を維持しつつ写真を縮小、文字は 2 行まで
• ラインアップの 2×2 は SP でも維持し商品写真を小さく
• FAQ・口コミカードは SP で左右 6% 余白の全幅に
• 全幅写真は 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 行書くと起動時に読み込まれる。