--- version: alpha name: Crimson Clinical Anti-Aging Ampoule LP description: 深紅とシルバーグレーを軸にした、皮膚科学系の高機能美容液 LP。グレー〜白の地に赤い製品写真を置き、要所で深紅の全幅帯を入れて訴求を強める。細身のゴシック見出しと太字のキーワード赤字で、知的さとインパクトを両立させる縦長の長尺構成。 colors: primary: '#9C1732' dark-section: '#550B1A' on-dark: '#FFFBFA' background: '#FFFFFF' surface: '#FEFEFD' background-alt: '#C2C6C6' text: '#262625' text-body: '#545453' text-muted: '#B1B1AF' accent-1: '#A9213A' secondary: '#5D5D5D' line: '#DEDCD7' tint-1: '#BA3E54' typography: display: fontFamily: Montserrat fontSize: 30px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 300 lineHeight: 1.5 headline-md: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.4 headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 note: fontFamily: Montserrat fontSize: 10px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 11px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' crimson-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 240px circle-badge-trio: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 80px numbered-feature: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 200px concern-photo-grid: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 150px pill-tag: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' rounded: '{rounded.full}' height: 24px step-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 140px ingredient-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 320px comparison-table: backgroundColor: '{colors.tint-1}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 110px --- # DESIGN.md — 深紅×シルバーの韓国系エイジングケア美容液 LP（Crimson Clinical Anti-Aging Ampoule LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、クール・先進的、信頼・誠実、情報量多め・訴求型 - **キーワード**: 深紅・シルバー・皮膚科学・メタリック・韓国コスメ・長尺訴求 - **地の質感**: メタリックな光沢グラデーションとソフトなグレー地。紙のようなざらつきは控えめで、ガラス・金属の質感が主役 - **形**: 基本は直線的。悩みラベルの円形バッジ、角丸の白いカード、ピル型タグを部分的に使う - **温度感**: クールなグレーに温かい深紅を差す、やや寒色寄りの高級感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#9C1732` | ブランドの深紅（帯・強調） | 7% | 画素の実測 | | `dark-section` | `#550B1A` | 暗い深紅のヒーロー帯 | 6% | 画素の実測 | | `on-dark` | `#FFFBFA` | 深紅帯上の白文字 | 1% | 画素の実測 | | `background` | `#FFFFFF` | 基本の淡グレー地 | 30% | 画素の実測 | | `surface` | `#FEFEFD` | 白カード面 | 18% | 画素の実測 | | `background-alt` | `#C2C6C6` | シルバーグレーの写真背景帯 | 9% | 画素の実測 | | `text` | `#262625` | 見出し文字 | 3% | 画素の実測 | | `text-body` | `#545453` | 本文文字 | 2% | 画素の実測 | | `text-muted` | `#B1B1AF` | 英字キャプション | 1% | 画素の主要色に補正 | | `accent-1` | `#A9213A` | 強調キーワードの赤文字 | 1% | 画素の主要色に補正 | | `secondary` | `#5D5D5D` | 濃グレーの選択バッジ | 1% | 画素の実測 | | `line` | `#DEDCD7` | 細い区切り線 | 1% | 画素の主要色に補正 | | `tint-1` | `#BA3E54` | くすみローズの表パネル | 1% | 画素の実測 | - 地は淡グレーと白を交互に使い、冷たい清潔感を保つ - 深紅は全幅帯と強調語・アイコンに限定する - セクション転換のたびに深紅の全幅帯を1枚入れて流れを切る - 本文中のキーワードは赤か太字の黒で強調し、両方を同時に使いすぎない - シルバーの製品写真背景はメタリックなグラデーションにする - 金色・黄色など他の有彩色は加えない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 冒頭の英字製品名・英字大見出し | 欧文サンセリフ | Montserrat | 500 | 30px | 1.3 | 0.02em | | `headline-lg` | 悩み提起などの大見出し | ゴシック | Noto Sans JP | 300 | 26px | 1.5 | 0.0em | | `headline-md` | 深紅帯の白抜き見出し | ゴシック | Noto Sans JP | 900 | 24px | 1.4 | 0.0em | | `headline-sm` | カード・ステップの小見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.0em | | `note` | 英字キャプション・注記 | 欧文サンセリフ | Montserrat | 400 | 10px | 1.5 | 0.02em | | `accent` | STEP番号・赤い短いラベル | 欧文サンセリフ | Montserrat | 700 | 11px | 1.3 | 0.05em | - 大見出しは細字で組み、キーワードだけ太字か赤字にする - 強調語の上に圏点（ドット）を打つ表現を使う - 英字の見出しを日本語見出しの上に添えて科学的な印象を出す - 本文は左揃えで行間を広めに取る - 深紅帯の中は極太の白文字で短く言い切る - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。悩み写真・バッジは 3 列横並び - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 写真と帯は全幅、本文は左右余白 20px前後 - セクション冒頭は小見出し→大見出し→本文の順 - 番号付き特長は大きな薄いグレー数字を背景に置く - 成分カードは白面を縦に積み、上辺に赤線を入れる - 製品写真は画面幅いっぱいで大きく見せる ## Elevation & Depth - 基本はフラットで影を使わない - 白カードはグレー地との明度差だけで浮かせる - 製品写真には光の反射とソフトな落ち影を入れる ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 人物・製品は全幅の矩形、悩み写真は正方形 3 枚並び、成分は円形のバッジ - **セクション境界**: 直線で切り替え。一部で上辺に大きな角丸の白パネルを重ねる - 悩み・効果ラベルは正円バッジで3つ並べる - タグはピル型の赤地白文字 - カードの角は控えめな丸み ## Components - **深紅の訴求帯**（`crimson-band`）: 全幅の深紅面に極太白文字で効果を言い切る。上に圏点付きの小キーワードを並べる - **3連円形バッジ**（`circle-badge-trio`）: 効果名を円内に書いた3つの正円。最後の1つだけ濃グレー塗りで強調 - **大番号付き特長**（`numbered-feature`）: 薄い大きな数字の上に太字見出しと説明を重ねる - **悩み写真3列**（`concern-photo-grid`）: 肌の接写写真を正方形で3枚、下に短い悩みラベル - **赤ピルタグ**（`pill-tag`）: 効果名を赤地白文字の小さなピルで表示 - **STEP 3段リスト**（`step-list`）: 左に赤い大きな効果名、右に STEP番号・太字見出し・説明 - **成分カード**（`ingredient-card`）: 白カード上辺に赤線、見出し＋線画アイコン＋横長写真＋赤十字マーク付き成分名 - **くすみローズの分類表**（`comparison-table`）: 番号・赤ピル・説明を3行並べた赤系パネル ## Do's and Don'ts **Do** - 深紅・白・シルバーグレーの3色で構成する - 製品は光沢のある質感で大きく見せる - 見出しは細字基調、キーワードだけ太字か赤字 - 英字の科学系キャプションを添えて専門性を出す - 効果は3つに整理し、バッジ・ステップ・カードで繰り返す **Don't** - パステルや暖色の可愛い装飾を入れない - 深紅を本文の地色に広く使いすぎない - 丸ゴシックや手書き書体を使わない - 濃い影や立体的なボタンを多用しない - 写真をイラストに置き換えて安っぽくしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（製品の高級感と存在感を示す）: シルバーのグラデーション背景に赤い製品写真、左上に英字製品名、右下に短いコピー帯 2. **効果の総括帯**（3つの効果を一言で伝える）: 深紅の全幅帯に圏点付きキーワードと極太白見出し 3. **ブランドの信頼**（技術力を示す）: グレー地に左に縦線を添えた見出し、モデル写真、半透明の帯に説明 4. **特長（番号付き）**（効果・独自原料・試験結果を伝える）: 大きな薄い番号、円形バッジ3連、認証アイコン、製品写真 5. **悩みの提起**（年齢肌の悩みに共感させる）: 細字の大見出しに太字キーワード、肌の接写写真を3列 6. **解決の提示**（正しいケアの考え方を示す）: 赤ピルタグの横並び、本文中の太字、くすみローズの分類表 7. **製品ヒーロー**（世界観で印象付ける）: 暗い深紅背景に大きな英字の透かし、光の軌道と製品、白い大見出し 8. **問いかけ**（なぜ可能かへの関心を引く）: 赤字キーワードの圏点見出しと黒の大見出し、下に括弧状の線 9. **3ステップケア**（作用の仕組みを説明）: 球体のビジュアルに円形ラベル、STEP番号付きリスト 10. **独自成分**（成分の独自性を示す）: 英字の大見出し、水滴・ガラス球の写真に成分名ピル 11. **成分詳細カード**（効果ごとの成分を説明）: 白カードを縦に3枚、線画アイコンと横長写真 12. **製品パッケージ**（商品の姿を見せる）: モデルの顔に赤い矢印、白い箱とアンプルの写真 13. **開発背景**（次世代の製品であることを伝える）: 斜線の区切り記号と細字の大見出し、赤の極太キーワード、中央揃え本文 ## Imagery - 製品は赤いメタリックの筒をシルバー背景で斜めに置き、強いハイライトを入れる - モデルは素肌感のあるアジア系女性、グレー背景でクールなライティング - 肌の悩みは極端な接写で質感を見せる - 水滴・ガラス球・分子模型など科学的なCGを使う - アイコンは細い線画のモノクロで統一 - 暗い深紅背景には光の軌道や英字の透かしを入れる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元は縦長の画像主体でPC・SP共通の1カラム - SPでは画像幅いっぱい、本文の左右余白は20px - PCでは中央に最大650px程度の幅で配置し、左右はグレー地 - 3列の写真・バッジはSPでも3列を保つ - 見出しはSPで24〜28pxに調整する ## 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-59ac1f77`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/neuraderm/6100251_ad/?fbclid=PAZXh0bgNhZW0BMAABppBxA8KN3hyKqOLxH_At-T4G5EFMFXB6Fxs5xFtWqtfCayqSoTnuxWwYVg_aem_buk4aaH8ocIuAr4jt-cu6g - **解析に使った画像**: PC（PC版） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。