--- version: alpha name: Golden Oil Droplet Skincare LP description: 金色に光る油滴の写真を背景にした、クレンジングオイルのLPです。前半はベージュから金のグラデーション、後半はくすんだオリーブグリーンの地で組みます。オリーブ色の帯ラベル、×でつないだ成分カード、番号付きの体験ストーリーで技術の説得力を出し、上品で信頼感のある見た目に仕上げます。 colors: primary: '#666E56' secondary: '#DDBC15' background: '#FFFFFF' background-alt: '#FAF4E4' surface: '#ECE8E9' dark-section: '#443F35' on-dark: '#FCFCFA' tint-1: '#BABDAC' tint-2: '#E5CC8D' accent-1: '#52443C' accent-2: '#9B9152' cta: '#7B6C43' text: '#443F35' line: '#EBE8E8' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 32px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.05em headline-lg: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.03em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Montserrat fontSize: 64px fontWeight: 300 lineHeight: 1.0 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 0px md: 4px lg: 24px 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}' button-outline-pill: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px back-to-top: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 28px label-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 56px outline-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 56px big-number: textColor: '{colors.line}' typography: '{typography.accent}' height: 80px gold-circle: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 80px brown-heading: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 40px speech-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 100px faq-row: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 56px free-tile: textColor: '{colors.text}' typography: '{typography.body-md}' height: 72px --- # DESIGN.md — 金色の油滴とオリーブ色の上品スキンケアLP（Golden Oil Droplet Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、信頼・誠実、清潔・爽やか、情報量多め・訴求型 - **キーワード**: 金色の油滴・オリーブグリーン・ベージュグラデーション・大きな細字の番号・成分の掛け合わせ図・研究開発の信頼感 - **地の質感**: 光沢のある金色の油滴ボケ写真とやわらかいグラデーション。カードはマットな単色で塗る。 - **形**: 四角のカードとラベルが基本。角丸はボタンだけにする。円形の図と吹き出しをアクセントにする。 - **温度感**: 暖かい金・ベージュから、落ち着いたくすみグリーンへ移っていく中間〜やや暖色 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#666E56` | ブランドのオリーブ色（帯ラベル・SPEC地） | 8% | 画素の実測 | | `secondary` | `#DDBC15` | 金色の円図・強調面 | 3% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 20% | 画素の実測 | | `background-alt` | `#FAF4E4` | クリーム色のカード地 | 9% | 画素の実測 | | `surface` | `#ECE8E9` | こだわりセクションのグレージュのカード | 7% | 画素の実測 | | `dark-section` | `#443F35` | 技術解説の濃い面 | 5% | 画素の主要色に補正 | | `on-dark` | `#FCFCFA` | 濃い地の上の白文字 | 1% | 画素の実測 | | `tint-1` | `#BABDAC` | 後半のくすみグリーン地 | 10% | 画素の実測 | | `tint-2` | `#E5CC8D` | 前半の金ベージュのグラデーション地 | 7% | 画素の主要色に補正 | | `accent-1` | `#52443C` | こだわり見出しのブラウン帯 | 1% | 画素の実測 | | `accent-2` | `#9B9152` | 見出し・強調に使う金茶色の文字 | 1% | 画素の実測 | | `cta` | `#7B6C43` | セット訴求のアウトラインボタンの丸アイコン | 1% | 画素の主要色に補正 | | `text` | `#443F35` | 見出し・本文の濃い文字 | 3% | 画素の主要色に補正 | | `line` | `#EBE8E8` | 細い区切り線・カードの枠線 | 1% | 画素の主要色に補正 | - 前半は白〜金ベージュのグラデーションと油滴の写真で光の印象を作る - 後半のSPEC以降はオリーブ〜くすみグリーンの地に切り替える - 成分ラベルはオリーブのグラデーション帯に白文字で載せる - 技術の要点だけを金色の円と濃い茶の面で強調する - こだわりの章はグレージュのカードとブラウンの帯でまとめる - 原色や高彩度の赤・青は使わない。金・茶・緑の範囲に収める ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 章タイトル | ゴシック | Zen Kaku Gothic New | 400 | 32px | 1.4 | 0.05em | | `headline-lg` | 訴求見出し（明朝で格調を出す） | 明朝 | Shippori Mincho | 600 | 24px | 1.5 | 0.03em | | `headline-md` | セクションの中見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.03em | | `headline-sm` | 帯ラベル・カード見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `note` | 注釈（※印） | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 大きな細字の番号・英字見出し | 欧文サンセリフ | Montserrat | 300 | 64px | 1.0 | 0.1em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.05em | - 見出しは中央揃えにし、2〜3行で区切る - 核心の数値や技術名は明朝体で大きく組む - 番号は細い欧文で大きく置き、見出しに半分重ねる - SPEC・REVIEWなどの英字見出しは字間を広げた太字にする - 注釈の※番号は肩付きの小さな文字にし、ブロックの直下にまとめる - 強調語は金茶色やマーカーの下線で示す - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分カードは 2 列、フリー処方は 3 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - カードは中央に置き、背景の写真やグラデーションを左右に見せる - 成分カードは2つを×でつなぐ掛け合わせ図にする - 各章の最後に『トップにもどる』の小さなピル型ボタンを置く - 注釈はカードの外の直下に小さく並べる ## Elevation & Depth - 影はほぼ使わず、色面の重なりで階層を出す - 白い吹き出しだけに薄い影をつけてよい ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 四角で切り抜く。拡大の比較だけ小さな円にする - **セクション境界**: 直線の切り替え（グラデーションか色面） - カードとラベルは角丸なしの四角にする - ボタンはピル型のアウトラインにする - 技術の図は金色の円を環状につなぐ - 便利ポイントは細い円弧の線で囲む ## Components - **アウトラインのピルボタン**（`button-outline-pill`）: 白地に細い枠線、右端に三角のアイコンを置くセット訴求ボタン - **トップへもどるボタン**（`back-to-top`）: 左端に茶色の丸い矢印アイコンを置いた小型のピルボタン - **オリーブの帯ラベル**（`label-band`）: オリーブのグラデーションの四角に白文字を載せ、×で2つ並べる - **枠線の説明ボックス**（`outline-box`）: 帯ラベルの下に置く白地の枠線ボックス - **大きな細字の番号**（`big-number`）: 01〜03を細い線の欧文で大きく置き、カードに重ねる - **金色の円図**（`gold-circle`）: 金色の円に濃い文字を入れ、矢印で環状につなぐ - **ブラウン帯の見出し**（`brown-heading`）: グレージュのカードの上部に置く濃茶の横帯見出し - **口コミの吹き出し**（`speech-bubble`）: 線画の人物に白い角丸の吹き出しを添える - **Q&Aの行**（`faq-row`）: 左にQ、右に▼を置き、上下を細線で区切るアコーディオン - **フリー処方のタイル**（`free-tile`）: 細枠の正方形に斜線と項目名を入れ、3列に並べる ## Do's and Don'ts **Do** - 金の光沢とくすみグリーンの2つの世界観を、ページの前半と後半で分ける - 技術の主張は図解と注釈をセットで示す - 番号付きのストーリーで使用中の体験を順に見せる - 余白をたっぷり取り、カードは中央にまとめる **Don't** - ビビッドな色や赤い値引きバッジを使わない - カードを大きな角丸にしない - 太い影や立体的なボタンを使わない - 注釈を省いて効果表現だけを置かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（新商品の世界観を伝える）: 左に女性の横顔、右に金色の油滴を背景にした商品ボトル。縦書き風の短いコピーを添える 2. **ページ内ナビ**（3つの章へ誘導する）: 白地に縦線で区切った3つのリンクを置き、▼を添える 3. **セット訴求**（お得なセットへの導線）: 日付の丸バッジ、オリーブの帯、商品写真、アウトラインのボタン 4. **共同開発と悩み**（信頼性と悩みへの対応を示す）: クリーム色のカードに帯見出しと濃い四角の悩みタグを3つ並べ、テクスチャ写真を置く 5. **新基準の宣言**（技術の価値を打ち出す）: 濃い茶の面に白文字を大きく置き、ボトルの周りに効果ワードを放射状に配置する 6. **技術の解説**（超微粒子の仕組みを説明する）: グレーのグラデーションの面に明朝の大見出し、動画、金色の円の環状図 7. **3つの瞬間**（使用中の体験を順に見せる）: 大きな細字の番号とカード、帯ラベルの×図、使用前後の比較写真 8. **こだわり**（開発背景と成分を紹介する）: グレージュのカードにブラウン帯、研究員の写真、円形の植物イラストの成分図 9. **SPEC**（商品仕様と発売日を示す）: オリーブの地に白カード、ボトル写真、発売日のラベル 10. **処方・便利ポイント**（安心感と使いやすさを伝える）: 3列の細枠タイルと、円弧の線で囲んだOKの項目 11. **お客様の声**（使用感を伝える）: 線画の人物と白い吹き出し 12. **使い方**（使用手順を示す）: 動画と、顔の線画で描いた3ステップのカード 13. **よくある質問**（不安を解消する）: 白地に大きなQ&Aの見出しとアコーディオンの行 ## Imagery - 金色のオイル滴が浮かぶボケのあるマクロ写真を背景に使う - 琥珀色のボトルを白〜グレーのグラデーション背景で撮る - 目を閉じた女性の素肌をクローズアップし、明るく柔らかい光で撮る - 成分は白い円の中に植物の水彩風イラストで描く - 使い方と口コミは細い黒線のシンプルな顔の線画にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCも中央に約430px幅のSP的なカラムを置き、左右は背景写真やグラデーションで埋める - SPでは同じ構成をそのまま全幅にし、カードの幅を88%にする - ファーストビューはSPで写真を縦長に組み直す - 3列のタイルはSPでも3列を保ち、小さく縮める ## 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-de301872`（元 LP の URL から採番） - **元 LP**: https://www.orbis.co.jp/small/1201053/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（9/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。