--- version: alpha name: Forest Green Organic Men's Skincare LP description: 淡いグレージュの地に深いティールの帯見出しを挟む、森と植物の影がモチーフの男性向けオーガニック化粧品 LP。明朝の見出しとゴシックの帯見出しを併用し、静かで清潔、自然派の高級感を出している。 colors: primary: '#014252' on-primary: '#F7FEFF' background: '#F3F5F4' surface: '#FEFEFD' secondary: '#697F72' dark-section: '#30462F' background-alt: '#E4E5E1' text: '#133A40' text-muted: '#615E46' line: '#C5C4BA' accent-1: '#C9A24A' tint-1: '#CDD7D7' typography: display: fontFamily: Playfair Display fontSize: 44px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0.04em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em headline-md: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.15em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Playfair Display fontSize: 36px fontWeight: 500 lineHeight: 1.0 rounded: sm: 0px md: 4px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' band-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 90px label-tag: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 28px worry-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 120px step-badge: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 72px review-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 110px faq-item: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 100px award-medal: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 90px stat-number: textColor: '{colors.text}' typography: '{typography.accent}' height: 70px --- # DESIGN.md — 深緑×ティールの森系メンズスキンケア LP（Forest Green Organic Men's Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: ナチュラル、上品・高級、清潔・爽やか、シンプル・ミニマル - **キーワード**: 森・植物の影・深緑ボトル・静けさ・メンズ・オーガニック - **地の質感**: 木漏れ日の葉影が落ちる淡いグレーの紙のような地と、森の写真の重い緑 - **形**: 角丸ほぼなしの長方形帯と白カード、円形バッジと細い罫線 - **温度感**: やや低め。青緑寄りのクールで落ち着いた温度感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#014252` | 帯見出し・強調面のティール | 9% | 画素の実測 | | `on-primary` | `#F7FEFF` | ティール帯上の白文字 | 1% | 画素の実測 | | `background` | `#F3F5F4` | 基本の淡いグレー地 | 30% | 画素の実測 | | `surface` | `#FEFEFD` | 悩み・口コミ・FAQ の白カード | 9% | 画素の実測 | | `secondary` | `#697F72` | 商品ボトルと同じオリーブグリーン | 5% | 画素の主要色に補正 | | `dark-section` | `#30462F` | 森の写真セクションの深緑 | 6% | 画素の主要色に補正 | | `background-alt` | `#E4E5E1` | ブランドムービー背景のグレージュ | 7% | 画素の実測 | | `text` | `#133A40` | 見出し・本文のダークティール文字 | 2% | 画素の実測 | | `text-muted` | `#615E46` | 明朝見出しのグレーオリーブ | 1% | 画素の主要色に補正 | | `line` | `#C5C4BA` | カード内区切りの罫線 | 1% | 画素の主要色に補正 | | `accent-1` | `#C9A24A` | 受賞バッジの金 | 1% | 推定 | | `tint-1` | `#CDD7D7` | 図解・カード地の薄いブルーグレー | 4% | 画素の主要色に補正 | - 地は淡いグレー #F4F6F4 を基本にし、葉影の写真をうっすら重ねる - セクション切替の大見出しは全幅のティール帯に白文字で置く - 白カードは淡グレー地の上にだけ載せ、余白で浮かせる - オリーブグリーンは商品写真・小見出しの差し色に限定する - 金色は権威バッジのみ。他では使わない - 森の写真セクションは暗い深緑で没入感を出し、文字は白 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大きな欧文タイトル | 欧文セリフ | Playfair Display | 500 | 44px | 1.1 | 0.04em | | `headline-lg` | ティール帯内の主見出し | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.4 | 0.1em | | `headline-md` | 口コミ・FAQ などの明朝セクション見出し | 明朝 | Shippori Mincho | 600 | 24px | 1.4 | 0.15em | | `headline-sm` | 帯見出しの前置き行・カード見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.1em | | `body-md` | 本文・回答文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.03em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | STEP 番号・大きな数値 | 欧文セリフ | Playfair Display | 500 | 36px | 1.0 | 0.0em | - 帯見出しは小さい前置き行＋大きい主行の 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-0c2433d8`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/mandom-shop/ao-00001/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（6/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。