--- version: alpha name: Misty Pale Greige Skincare LP description: 霧がかった山や森の写真と、白・グレージュの面で静かに組むスキンケア LP。円形の写真切り抜きと縦書きの欧文ラベルが特徴。黄色のピル型 CTA と赤い大きな価格だけが強い色になる。 colors: primary: '#E5E0DC' background: '#FFFFFF' background-alt: '#FEFEFE' cta: '#FDFB53' on-cta: '#333333' accent-1: '#9D3F3A' accent-2: '#A8322B' text: '#333333' text-body: '#61615E' text-muted: '#D6D8DA' dark-section: '#141313' on-dark: '#FFFFFF' tint-1: '#E5E6EB' line: '#D6D8DA' typography: display: fontFamily: Roboto fontSize: 56px fontWeight: 900 lineHeight: 1.0 headline-lg: fontFamily: Oswald fontSize: 36px fontWeight: 300 lineHeight: 1.1 headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 12px fontWeight: 300 lineHeight: 2.4 letterSpacing: 0.3em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px campaign-label: backgroundColor: '{colors.cta}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 64px price-block: backgroundColor: '{colors.primary}' textColor: '{colors.accent-1}' typography: '{typography.display}' height: 140px circle-badge: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 56px vertical-label: textColor: '{colors.text-muted}' typography: '{typography.accent}' height: 200px survey-bar: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 48px circle-photo-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 220px form-field: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 36px --- # DESIGN.md — 霧と生成りグレージュの化粧水 LP（Misty Pale Greige Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、清潔・爽やか、やさしい・柔らかい、シンプル・ミニマル - **キーワード**: 霧・ミスト・余白・円形切り抜き・グレージュ・縦書き欧文・黄色CTA - **地の質感**: 霧や水面の柔らかい写真をセクション背景に敷く。その他は無地の白とグレージュでフラットに組む。 - **形**: 写真もバッジも正円が中心。CTA はピル型。見出し帯は角丸なしの四角。 - **温度感**: ややクールなニュートラル。黄と赤が温度を足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E5E0DC` | ブランドのグレージュ面（キャンペーン枠） | 12% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白背景 | 38% | 画素の実測 | | `background-alt` | `#FEFEFE` | 淡いグレーの面（フォーム外側） | 9% | 画素の実測 | | `cta` | `#FDFB53` | 申込ボタン・見出しラベルの黄色 | 2% | 画素の実測 | | `on-cta` | `#333333` | CTA 上の文字 | 0% | 推定 | | `accent-1` | `#9D3F3A` | 価格数字の赤 | 0% | 画素の実測 | | `accent-2` | `#A8322B` | 必須バッジの濃い赤 | 0% | 推定 | | `text` | `#333333` | 見出しの濃い文字 | 1% | 推定 | | `text-body` | `#61615E` | 本文グレー文字 | 2% | 画素の主要色に補正 | | `text-muted` | `#D6D8DA` | 縦書き欧文ラベル・注釈 | 0% | 画素の主要色に補正 | | `dark-section` | `#141313` | ストーリーの黒い面 | 6% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 黒面上の白文字 | 0% | 画素の主要色に補正 | | `tint-1` | `#E5E6EB` | 円形写真の淡い青グレー地 | 2% | 画素の主要色に補正 | | `line` | `#D6D8DA` | 入力欄の枠線 | 0% | 画素の主要色に補正 | - 地の色は白とグレージュの 2 色を交互に使い、色数は増やさない。 - 強い色は黄（CTA と見出しラベル）と赤（価格・必須）だけに絞る。 - 本文は真っ黒にせずグレーにして、柔らかく見せる。 - ブランドの物語を語るセクションだけ黒地にして、雰囲気を切り替える。 - 写真は霧や水を使った低彩度のものにし、白い円パネルを重ねて文字を読ませる。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 価格の大数字 | 欧文サンセリフ | Roboto | 900 | 56px | 1.0 | 0.0em | | `headline-lg` | 写真上の英字キーワード見出し | 欧文サンセリフ | Oswald | 300 | 36px | 1.1 | 0.0em | | `headline-md` | セクション見出し（中央揃え 2 行） | ゴシック | Noto Sans JP | 500 | 18px | 1.6 | 0.08em | | `headline-sm` | カード見出し・質問帯 | ゴシック | Noto Sans JP | 700 | 16px | 1.6 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 2.0 | 0.05em | | `note` | 注釈・※書き | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 縦に 1 文字ずつ並べる欧文セクションラベル | 欧文サンセリフ | Montserrat | 300 | 12px | 2.4 | 0.3em | | `label-button` | CTA ボタン | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.05em | - 本文は行間 2.0 前後で、字間を少し広げる。 - セクション見出しは中央揃えにし、細めのゴシックで 2 行に組む。 - 欧文ラベルは極細で淡い色にし、左端に縦に 1 文字ずつ並べる。 - 価格の数字だけ極太にし、「円（税込）」は小さく添える。 - 強調したい語句には薄いグレージュのマーカーを敷く。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特長は PC で 3 カラム、SP では縦に積む - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - セクションの上下は広めに取り、静かな余白を作る。 - キャンペーン枠は同じ型でページ内に 3 回くり返す。 - 写真セクションは全幅で、文字は円形パネルに入れる。 - フォームは淡いグレーの面に白い入力欄を置き、ラベルは上に付ける。 ## Elevation & Depth - 影はほとんど使わずフラットに組む。 - 初回価格のバナーだけ弱いドロップシャドウを付ける。 - 円形バッジは白地に細い線で縁取る。 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 人物・商品・テクスチャ写真は正円に切り抜く。風景写真は全幅の長方形で使う。 - **セクション境界**: 直線で区切る。写真セクションは下端を白へ霧のようにフェードさせる。 - 円をくり返し使ってモチーフにする。 - 質問帯と見出しラベルは角丸なしの矩形にする。 - CTA は細い枠線付きの黄色いピル型にする。 ## Components - **黄色ピル CTA**（`button-primary`）: 中央に置く横長のピル型ボタン。黄色の地に濃い文字を載せ、細い枠線を付ける。 - **キャンペーン黄ラベル**（`campaign-label`）: 黄色の矩形に太字 2 行を入れ、下に小さな三角の吹き出しを付ける。 - **価格ブロック**（`price-block`）: 通常価格は黒い小ラベルと取消の表現で示す。黄色の小見出しを挟み、赤い大数字の特別価格を置く。 - **円形特典バッジ**（`circle-badge`）: 白い正円に細い枠を付け、送料無料などの特典を 2 行で入れる。 - **縦書き欧文ラベル**（`vertical-label`）: セクション左端に英単語を 1 文字ずつ縦に並べる。淡い色で装飾として使う。 - **アンケート質問帯**（`survey-bar`）: グレージュの帯に質問を入れ、下段に回答を下線付きで、大きな % 数字を右寄せで置く。 - **円形写真カード**（`circle-photo-card`）: 正円の写真の下に、小さな属性表記と短い本文を中央揃えで置く。 - **入力フォーム**（`form-field`）: ラベルに赤い必須バッジを付け、白い入力欄に細い枠線を引く。 ## Do's and Don'ts **Do** - 霧・水・肌など、柔らかい低彩度の写真を選ぶ。 - 写真やバッジに正円の切り抜きを何度も使う。 - 強い色は黄の CTA と赤の価格だけにする。 - セクションごとに縦書きの欧文ラベルを添える。 - キャンペーン枠は同じデザインで複数回置く。 **Don't** - 鮮やかな色を増やしてポップに見せない。 - 本文を真っ黒にしたり、太字にしたりしない。 - カードに強い影や太い枠線を付けない。 - 余白を詰めて情報を詰め込まない。 - CTA の色を黄色以外に変えない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観と商品を一目で伝える）: 霧の山並みの写真に商品ボトルを置く。縦書きの大きな欧文ロゴを添え、左下に黄色の価格バナーを置く。 2. **コンセプト**（商品の位置づけを説明する）: 白地に中央揃えの見出しを置く。左に本文、右に手と水の円形写真を配置する。 3. **キャンペーン**（初回価格で申込を促す）: グレージュ地に黄ラベル・赤い大価格・円形の商品写真・特典バッジ・黄 CTA を並べる。 4. **特長**（おすすめの肌やシーンを示す）: 線画アイコン・見出し・短文を 3 列に並べ、下に円形写真を置く。 5. **技術キーワード**（成分や技術の根拠を見せる）: 水面や霧の全幅写真に白い円パネルを重ね、英字の大見出しや大きな % 数字で語る。 6. **悩み別おすすめ**（自分ごと化を促す）: 小さな円形写真と、マーカー付きの悩み見出しのリストを 4 行並べる。 7. **お客様の声**（満足度で信頼を作る）: 質問帯と大きな % 数字を 3 問並べ、その下に円形の人物写真と感想を 3 列で置く。 8. **開発ストーリー**（開発背景で信頼を高める）: 黒地に白文字を組み、モノクロの研究写真を重ねる。 9. **使い方**（使い方の手順を示す）: STEP 番号と円形の線画イラストを 2 つ並べる。 10. **肌タイプ診断**（自分に合う使い方を案内する）: 霧の写真の背景に、半透明の円を横に 5 つ並べて選べるようにし、吹き出しで説明を出す。 11. **申込フォーム**（購入を完了させる）: 森の写真の見出しの下に商品サマリーを置き、淡いグレー面に入力欄を並べ、最後に黄 CTA を置く。 12. **フッター**（規約へのリンクを置く）: 白地に小さなリンクとコピーライトを並べる。 ## Imagery - 霧や雲がかかった山・森の写真を、淡い色調で全幅に使う。 - 手・肌・水滴は白っぽい背景で、柔らかい光で撮る。 - 商品は白背景の正円内に置き、すりガラス風の質感を見せる。 - 人物は自然光のナチュラルな表情で撮り、正円に切り抜く。 - 使い方の図は細い線画の女性イラストにし、淡いベージュで着色する。 - 研究シーンはモノクロにして黒地になじませる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP は 1 カラムにし、3 列カードは縦に積む。 - 円形写真は SP では幅の約 60% にする。 - 縦書きの欧文ラベルは SP で小さくして左端に残す。 - 価格の数字は SP で 48〜56px にする。 - 肌タイプ診断は 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-2bb248f0`（元 LP の URL から採番） - **元 LP**: https://philtech.shop/booster-saw-sb/?utm_source=instagram&utm_medium=cpc&utm_campaign=trf20250219_4 - **解析に使った画像**: PC（PC版） - **確度**: 色 高（5/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。