--- version: alpha name: Clinical Red & Vitamin Orange Skincare LP description: 白地に赤の購入枠とオレンジの商品色が映える、ドクターズコスメ系スキンケアLP。POINT番号付きの特長ブロック、チェックリスト、レビューカード、赤地に並ぶ複数オファーカードで購入まで導く。 colors: primary: '#D80C18' cta: '#D90C19' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#EEEDF2' surface: '#ECECF2' secondary: '#E76B31' accent-1: '#A8873A' tint-1: '#FFF6EC' text: '#222222' text-muted: '#999999' line: '#E7E8EC' marker: '#D6AE84' typography: display: fontFamily: Noto Sans JP fontSize: 44px fontWeight: 700 lineHeight: 1.1 letterSpacing: -0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 0px md: 4px lg: 8px 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-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px offer-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.display}' height: 420px offer-ribbon: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 36px badge-outline: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.note}' height: 24px point-label: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 30px check-list: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 120px review-card: backgroundColor: '{colors.background}' typography: '{typography.body-md}' height: 150px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 48px --- # DESIGN.md — 赤×ビタミンオレンジの白基調スキンケアLP（Clinical Red & Vitamin Orange Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 清潔・爽やか、信頼・誠実、情報量多め・訴求型 - **キーワード**: 白基調・赤い購入枠・ビタミンオレンジ・POINT番号・透明感・スタジオ写真 - **地の質感**: フラットな白地と淡いグレーの面。写真は柔らかい光のスタジオ撮影 - **形**: 角の立った四角いカード・枠と、ピル型の赤ボタン - **温度感**: 白とグレーで涼しく、赤とオレンジで温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#D80C18` | ブランド赤（購入枠・見出し帯・オファー地） | 6% | 画素の実測 | | `cta` | `#D90C19` | 購入ボタン | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | ページ地 | 56% | 画素の実測 | | `background-alt` | `#EEEDF2` | レビューセクション地 | 7% | 画素の実測 | | `surface` | `#ECECF2` | 淡グレーの特長パネル地 | 4% | 画素の実測 | | `secondary` | `#E76B31` | 商品のビタミンオレンジ・特長見出し文字 | 2% | 画素の主要色に補正 | | `accent-1` | `#A8873A` | 受賞見出しのゴールド | 0% | 推定 | | `tint-1` | `#FFF6EC` | 下向き矢印・グラデの淡いオレンジ | 1% | 画素の実測 | | `text` | `#222222` | 見出し文字 | 2% | 推定 | | `text-muted` | `#999999` | 注釈・英字サブ見出し | 0% | 推定 | | `line` | `#E7E8EC` | FAQ区切り線 | 0% | 画素の主要色に補正 | | `marker` | `#D6AE84` | レビュー星 | 0% | 画素の実測 | - 地は白が基本。レビューだけ淡いラベンダーグレーで区切る - 赤は購入枠・オファー帯・CTA・POINTラベルに限定 - オレンジは商品と特長見出しの色として使い、ボタンには使わない - 最終オファーは赤地全面に白カードを縦に積む - 注釈は小さなグレー文字で写真やカードの下に置く ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 価格数字 | 欧文サンセリフ | Noto Sans JP | 700 | 44px | 1.1 | -0.02em | | `headline-lg` | セクション・POINT見出し | ゴシック | Noto Sans JP | 500 | 20px | 1.5 | 0.05em | | `headline-md` | 赤帯付きオファー見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.05em | | `headline-sm` | レビュータイトル・成分名 | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.04em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | FVキャッチ・ブランドメッセージ | 明朝 | Shippori Mincho | 500 | 30px | 1.4 | 0.05em | | `label-button` | ボタン | ゴシック | Noto Sans JP | 700 | 15px | 1.3 | 0.05em | - 見出しは中央揃えで2行に分ける - POINTは小さな欧文ラベルと大きな赤数字を組み合わせる - 価格は数字を極太で大きく、円と（税込）は小さく添える - FVとブランドメッセージだけ明朝を使う - 英字のサブ見出しは見出しの下にグレーで小さく - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。チェックリストは2列、使い方ステップは横4つ - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 写真は横幅いっぱいに近い長方形で置く - 特長はPOINTラベル→見出し→説明→写真→注釈の順 - オファー枠は赤い太枠で中を白にする - レビューは白カードを縦に並べる - FAQは線で区切ったアコーディオン ## Elevation & Depth - 影はほぼ使わずフラット - カードは地の色の差で浮かせる - 商品写真は床への映り込み・柔らかい落ち影だけ ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 8px。ボタンはピル型。 - **写真の切り抜き**: 角の立った長方形。人物は余白の多い横長 - **セクション境界**: 直線で切り替える。下向きのV字グラデーション矢印で次へつなぐ - 枠・カードは角丸なし - ボタンだけ完全なピル型 - バッジは赤線の四角い枠 ## Components - **購入ボタン**（`button-primary`）: 赤いピル型。白い太字で中央に置く - **オファー枠**（`offer-box`）: 赤い太枠の白い箱。中に商品2点を＋でつなぎ、価格とバッジを入れる - **上下線つき見出し帯**（`offer-ribbon`）: 赤い上下線にはさまれた赤い太字の見出し - **条件バッジ**（`badge-outline`）: 赤線の四角に赤文字。条件を2つ並べる - **POINT番号**（`point-label`）: 小さな赤い欧文ラベルに大きな赤数字 - **効果チェックリスト**（`check-list`）: 赤いチェックボックスの項目を2列×3行で並べる - **レビューカード**（`review-card`）: 白カード。星・名前・肌質の行、区切り線、太字タイトル、本文 - **FAQ行**（`faq-item`）: 質問と右端の＋。下線で区切る ## Do's and Don'ts **Do** - 購入枠は同じデザインでページ中に何度か入れる - 価格の数字は大きく太くする - 写真は明るく白く飛ばした光で撮る - 各特長の下に注釈を小さく入れる - 赤とオレンジ以外の強い色は使わない **Don't** - ボタンをオレンジや角型にしない - 背景に濃い色や柄を多く使わない（赤のオファー地だけは例外） - 見出しを左揃えにしない - カードに強い影や大きな角丸をつけない - 明朝を本文に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（透明感の世界観と受賞実績を示す）: 右に人物と商品、左に受賞バッジと明朝の大きなキャッチ 2. **リード**（季節の悩みと解決を短く伝える）: 黄色マーカーの見出しを中央に置き、下に一文 3. **初回オファー**（お試しセットへ誘導）: 赤枠の箱。商品＋商品、条件バッジ、大きな価格、赤ボタン 4. **受賞実績**（権威付け）: ゴールドの見出し、雑誌ロゴと月桂樹バッジを横に並べる 5. **効果チェック**（使ったあとの変化を示す）: 淡いグレーのパネルに商品写真とチェックリスト2列 6. **診断CTA**（肌測定ツールへ誘導）: 顔写真のアイコンつきの赤いピルボタン 7. **特長（POINT）**（成分と使い心地を説明）: POINT番号、見出し、横長写真、注釈を繰り返す 8. **成分紹介**（配合成分を見せる）: 色つきの水滴円に、線を引いて成分名をジグザグに配置 9. **お客様の声**（口コミで信頼を得る）: グレー地に商品ごとの白いレビューカード 10. **SNS投稿**（話題感を出す）: 投稿画面のサムネイルを4つ横に並べる 11. **使用ステップ**（使う順番を示す）: 商品の切り抜きを▶でつないで横に4つ 12. **よくある質問**（不安の解消）: ＋つきの線区切りアコーディオン 13. **オファー一覧**（複数プランから選んで購入）: 赤地の全面に、白いオファーカードを4枚縦に積む 14. **ブランドメッセージ**（信頼の余韻を残す）: 明朝のコピーと赤い格子のロゴモチーフ、中央揃えの本文 ## Imagery - 白〜淡グレー背景のスタジオ写真に柔らかい光を当てる - 人物は目を閉じる・頬に手を添えるなど穏やかなポーズで、肌の艶を見せる - 商品はオレンジのボトルを光沢と映り込みつきで撮る - 黄金色の泡やカプセルの球を浮かせてビタミン感を出す - 成分は水色・ピンク・薄紫の水滴の球で表す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SPは1カラム、余白は左右16px - チェックリストは2列のままにする - オファーカード内の商品写真と価格は縦に積む - 成分の配置は縦のジグザグにする - 使用ステップは横スクロールか2×2にする - PCは最大幅約1000pxで中央寄せ ## 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-4866f0f9`（元 LP の URL から採番） - **元 LP**: https://www.ci-labo.com/shop/brand-info/column/vc100lotion.html?src=lp_newmember_acquisition - **解析に使った画像**: PC（PC版） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。