--- version: alpha name: Crimson Clinical Anti-Aging Cosmetics LP description: 黒と深紅のドラマチックなファーストビューから、白〜薄い青灰の研究所風セクション、珊瑚ピンクの成分訴求へ移っていく、エイジングケア化粧品向けの縦長 LP。大きな明朝の見出しと赤い強調文字、球体や六角形のバッジで効能を見せる。 colors: primary: '#B21A20' on-primary: '#FFFFFF' background: '#FEFEFE' background-alt: '#F2F4FB' dark-section: '#0C0202' on-dark: '#FBFBFB' accent-1: '#D9A93A' secondary: '#FE9C8B' tint-1: '#F1CAC2' accent-2: '#019193' text: '#010203' text-body: '#302826' accent-3: '#B21A20' line: '#999999' typography: display: fontFamily: Shippori Mincho fontSize: 72px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Noto Serif JP fontSize: 40px fontWeight: 500 lineHeight: 1.25 letterSpacing: 0.02em headline-md: fontFamily: Noto Serif JP fontSize: 28px fontWeight: 500 lineHeight: 1.35 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.75 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Yomogi fontSize: 34px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.03em rounded: sm: 0px md: 4px lg: 999px full: 999px spacing: unit: 8px card: 20px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' label-band-red: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 30px label-band-black: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 28px bubble-badge: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 80px hex-panel: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' height: 110px award-laurel: textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 70px free-icon: textColor: '{colors.text-body}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 80px check-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 130px vertical-caption: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 180px footnote: textColor: '{colors.text-body}' typography: '{typography.note}' height: 30px --- # DESIGN.md — 深紅×銀白の医薬部外品コスメ LP（Crimson Clinical Anti-Aging Cosmetics LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、力強い・インパクト、情報量多め・訴求型、清潔・爽やか - **キーワード**: 深紅・明朝の大見出し・研究・科学・球体バッジ・受賞実績・注釈つき - **地の質感**: 光沢のある赤いリボンや布、水滴、ガラス球、分子模型を使って艶とみずみずしさを出す - **形**: 円形の球体バッジ、六角形の特長パネル、角が直角の帯ラベル - **温度感**: 黒赤の熱い導入から、青白い冷たい清潔感へ切り替わり、最後に暖かい珊瑚色で締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#B21A20` | ブランドを表す深紅（強調ラベル・強調文字） | 6% | 画素の主要色に補正 | | `on-primary` | `#FFFFFF` | 赤い地に載せる白文字 | 1% | 画素の主要色に補正 | | `background` | `#FEFEFE` | 基本の白地 | 15% | 画素の実測 | | `background-alt` | `#F2F4FB` | 研究・メカニズムを見せる青灰の地 | 10% | 画素の実測 | | `dark-section` | `#0C0202` | 受賞実績と導入部の黒い地 | 8% | 画素の実測 | | `on-dark` | `#FBFBFB` | 黒い地の上の白い見出し | 1% | 画素の実測 | | `accent-1` | `#D9A93A` | 金の受賞表記・月桂樹 | 1% | 推定 | | `secondary` | `#FE9C8B` | 成分訴求セクションの珊瑚ピンク | 8% | 画素の実測 | | `tint-1` | `#F1CAC2` | 効能を載せる淡いピンクの球体 | 7% | 画素の実測 | | `accent-2` | `#019193` | 肌への安全性を示す青緑 | 1% | 画素の実測 | | `text` | `#010203` | 見出しの黒文字 | 3% | 画素の実測 | | `text-body` | `#302826` | 本文の濃いグレー | 2% | 画素の主要色に補正 | | `accent-3` | `#B21A20` | 見出しの一部を強調する赤い明朝文字 | 2% | 画素の主要色に補正 | | `line` | `#999999` | 区切り線・点線 | 0% | 推定 | - 導入部は黒と深紅のグラデーションで高級感と衝撃を出す - 効能やメカニズムは白〜青灰の地に置いて清潔感を出す - 赤は強調ラベル、見出しの一部の語、球体や六角形のバッジに限って使う - 金は受賞や「日本初」の称号まわりだけに使う - 安全性のセクションだけ青緑を使って安心感を出す - 成分の数値訴求は珊瑚ピンクの全面背景に白い明朝で載せる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの縦書き大見出し・大きな数値 | 明朝 | Shippori Mincho | 600 | 72px | 1.1 | 0.02em | | `headline-lg` | セクションの大見出し | 明朝 | Noto Serif JP | 500 | 40px | 1.25 | 0.02em | | `headline-md` | サブ見出し・赤の強調見出し | 明朝 | Noto Serif JP | 500 | 28px | 1.35 | 0.03em | | `headline-sm` | 帯ラベル・リード文 | ゴシック | Noto Sans JP | 500 | 17px | 1.5 | 0.05em | | `body-md` | 説明の本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.75 | 0.03em | | `note` | ※の注釈 | ゴシック | Noto Sans JP | 400 | 8px | 1.5 | 0.0em | | `accent` | 手書き風の添え文字 | 手書き・筆 | Yomogi | 400 | 34px | 1.2 | 0.0em | | `label-button` | 球体・六角形バッジ内の短い言葉 | ゴシック | Noto Sans JP | 500 | 13px | 1.4 | 0.03em | - 見出しは明朝を大きく使い、本文と注釈はゴシックにする - 見出しのうち強調したい語だけを赤くするか、黒い帯の白抜きにする - ファーストビューでは縦書きを左右に分けて配置する - 効能の表現には必ず※印を付け、そのセクションの右下に注釈をまとめる - 数値は特大の明朝で見せ、単位は小さめにする - 手書き文字は一語だけ添える程度にとどめる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。バッジは 2〜3 個を散らして配置する - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - セクションの地色は全面に塗り、中身は左右 6% 程度の余白をとる - 写真と縦書きのテキストボックスを重ねて配置する - セクションの間は縦の点線や細い縦線でつなぐ - 注釈はセクションの右下にまとめる - 成分リストは半透明の白い箱に詰めて載せる ## Elevation & Depth - 球体バッジは光沢のハイライトと柔らかい影で立体感を出す - 白いカードには薄い影を付けて背景から浮かせる - 商品画像はドロップシャドウで手前に置く - 基本はフラットにし、影は装飾部品だけに使う ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの矩形写真を画面の端まで、または片側だけ余白を残して配置する。商品は切り抜きで重ねる - **セクション境界**: 直線で切り替え、境目に縦の点線や細い線でつなぎを入れる - 効能は円形の球体バッジにする - 特長は赤い六角形パネルにする - ラベルは角の直角な帯にする - 安全性の「〜フリー」は斜線入りの円で表す ## Components - **赤い帯ラベル**（`label-band-red`）: 見出しの上に置く横長の赤い帯で、白い文字を載せる - **黒い帯ラベル**（`label-band-black`）: 「さらに」などの接続語や強調語を黒地に白抜きで見せる - **球体の効能バッジ**（`bubble-badge`）: 淡いピンクのガラス球に効能を 2〜6 文字ずつ入れ、写真の上に散らす - **六角形の特長パネル**（`hex-panel`）: 赤いグラデーションの六角形に、特長を 3 行で白い明朝文字で入れる - **月桂樹つきの称号**（`award-laurel`）: 金の月桂樹で大きな称号の文字を挟む - **無添加の円アイコン**（`free-icon`）: 白い円に斜線を入れ、無配合の成分名を載せる - **試験クリアのカード**（`check-card`）: 白いカードに青緑の丸ラベルとチェックボックス付きの項目を並べる - **縦書きのキャプション**（`vertical-caption`）: 写真に重ねる白い縦長の箱に、縦書きで説明を入れる - **注釈ブロック**（`footnote`）: セクションの右下に置く、※付きの小さいグレー文字 ## Do's and Don'ts **Do** - 見出しは明朝で大きく組み、要点の語だけを赤にする - 効能は球体や六角形の部品で見せる - 効能の表現すべてに※の注釈を付ける - 研究の話は青灰の地に分子模型や実験の写真を合わせる - 商品のチューブを各セクションに繰り返し登場させる - 数値の訴求は特大の文字で見せる **Don't** - 赤を本文や広い面のベタ塗りに多用しない - 丸ゴシックやポップな書体を使わない - 注釈を省いて効能を断定しない - 金を受賞や称号以外に使わない - 角丸の大きいカードや可愛いイラストを入れない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **受賞実績**（ランキングの実績で信頼をつかむ）: 黒い地に金の月桂樹と大きな No.1 の表記を置き、受賞バナーをタイル状に敷き詰める 2. **ファーストビュー**（商品の独自性と 2 つの効能を伝える）: 深紅のリボンを背景にして中央に商品を置き、左右に縦書きの大見出し、上に円形の効能、左下に金のメダルを配置する 3. **商品の定義**（医薬部外品であることと効能効果を示す）: 白地に赤い帯ラベルと大きな明朝の見出しを置き、右に赤いリボンと商品を配置する。効能効果は線で囲んで書く 4. **メカニズム**（成分が肌に届く仕組みを説明する）: 青灰の地に分子模型を添え、実験の写真と縦書きのキャプションを重ね、赤い帯の上に赤黒の見出しを置く 5. **多機能の訴求**（1 本で多くの効果があることを見せる）: 手の甲に塗る写真の上に、ピンクの球体バッジを 9 個散らす 6. **仕上がり**（艶のある肌への変化を伝える）: 黒い帯で強調した見出しに手書きの添え文字と赤い大文字を合わせ、目を閉じた女性の写真を置く 7. **紫外線対策**（日焼け止めの機能を伝える）: 青空の背景に白い帯のテキストを重ね、手書き文字、商品、女性の写真を組み合わせる 8. **成分訴求**（美容成分の高い配合率を示す）: 珊瑚色の水面の背景に赤い球体を置き、特大の数値を載せる。成分リストは半透明の白い箱に入れる 9. **安全性**（無添加と試験クリアで安心させる）: 青緑の帯見出しと大きな青緑の明朝を使い、斜線入りの円アイコン 5 個と、チェック付きの白いカードを並べる 10. **まとめ**（特長をまとめて強く印象づける）: きらめく背景に銀の球を 3 つ × 印でつないで並べ、金の月桂樹の称号と赤い六角形の特長、笑顔の女性と縦書きの赤い見出しを置く ## Imagery - 商品のチューブは光沢のある切り抜きにし、斜めに傾けて置く - 背景は赤いシルクのリボンや光の筋で、動きと艶を出す - 研究のイメージは白衣・フラスコ・分子模型を青白いトーンで撮る - 人物は 40〜50 代の女性が頬に手を添えて微笑む、明るく自然光の写真にする - 装飾には水滴、ガラス球、ファンデーションを伸ばした跡を使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 版の画像がないため推奨を書く。PC では 750px 前後の中央カラムに SP のデザインをそのまま置く - カラムの外側は各セクションの地色、または黒・青灰で全幅に塗り広げる - 球体バッジや六角形は配置を保ったまま拡大する - 注釈の文字は PC で 11px 以上にする ## 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-6916959a`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/aokinomori/s-linokle/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。