--- version: alpha name: Magenta Silk Mincho Skincare LP description: 深いマゼンタを主役に、桜色や薄いベージュピンクのグラデーション帯と白地を組み合わせた上品なスキンケア美容液の LP。明朝体の細い文字、点線の円で囲む悩み表示、グラフやメカニズム図で根拠を示し、淡いピンクの平たいボタンで売り場へ案内する。 colors: primary: '#A11261' on-primary: '#FFFFFF' background: '#FEFFFE' secondary: '#B9447D' cta: '#F0DDD6' on-cta: '#A11261' background-alt: '#D6A1B5' tint-1: '#D9BACA' tint-2: '#F9EFE6' accent-1: '#B13679' accent-2: '#D4A66B' text: '#333333' line: '#D3D0CB' typography: display: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em accent: fontFamily: Playfair Display fontSize: 24px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.03em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.1em note: fontFamily: Noto Serif JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.05em label-button: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em headline-sm: fontFamily: Josefin Sans fontSize: 44px fontWeight: 200 lineHeight: 1.0 letterSpacing: 0.1em rounded: sm: 0px md: 4px lg: 20px 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-store: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 38px band-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 72px point-header: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 56px worry-circle: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 130px ranking-table: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' height: 135px step-box: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 72px pill-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 30px badge-new: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 64px --- # DESIGN.md — 深紅マゼンタ×桜色の上品スキンケア LP（Magenta Silk Mincho Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、やさしい・柔らかい、信頼・誠実 - **キーワード**: マゼンタ・水しぶき・明朝体・グラデーション帯・科学的根拠・繊細な線画 - **地の質感**: 水のゆらぎや絹のようなピンクのグラデーション。光沢のあるボトルの質感 - **形**: 四角い帯と平たいボタンが基本。破線の円・ピル型ラベル・下向き三角を少しだけ使う - **温度感**: 温かみのあるピンク寄り。上品でしっとりしている ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#A11261` | ブランド色・ヘッダー・見出し帯・フッター | 6% | 画素の実測 | | `on-primary` | `#FFFFFF` | マゼンタ帯上の白文字 | 0% | 画素の主要色に補正 | | `background` | `#FEFFFE` | ページの地 | 52% | 画素の実測 | | `secondary` | `#B9447D` | 見出しの文字・強調コピー | 2% | 画素の主要色に補正 | | `cta` | `#F0DDD6` | 商品詳細・店舗検索ボタンの地 | 3% | 画素の実測 | | `on-cta` | `#A11261` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `background-alt` | `#D6A1B5` | 左右がピンクのグラデーション帯の外側 | 4% | 画素の実測 | | `tint-1` | `#D9BACA` | ステップの淡い藤色ボックス | 2% | 画素の実測 | | `tint-2` | `#F9EFE6` | グラフ背景の帯・表のハイライト | 2% | 画素の実測 | | `accent-1` | `#B13679` | 表の左列・グラフ線の濃ピンク | 1% | 画素の実測 | | `accent-2` | `#D4A66B` | 1位の王冠の金色 | 0% | 画素の実測 | | `text` | `#333333` | 本文・商品名 | 2% | 推定 | | `line` | `#D3D0CB` | 見出し下線・表の罫線 | 0% | 画素の主要色に補正 | - 地は白。全体をマゼンタ一色でまとめ、ほかの強い色は使わない - 大事な見出しは、左右がマゼンタから白へ溶けるグラデーション帯に白文字でのせる - 説明の長いブロックは、両端がピンクのグラデーション帯の中に白いカードを置いて区切る - ボタンは淡いベージュピンクの地にマゼンタの文字。濃い色の塗りボタンは使わない - 注釈や強調の短いコピーはマゼンタの文字。本文は濃いグレー - 金の王冠は順位を示すときだけ使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの縦書きコピー | 明朝 | Shippori Mincho | 600 | 30px | 1.3 | 0.05em | | `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 700 | 20px | 1.5 | 0.05em | | `headline-md` | 帯見出し・小見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.6 | 0.05em | | `accent` | 英字の見出し（Product など） | 欧文セリフ | Playfair Display | 400 | 24px | 1.2 | 0.03em | | `body-md` | 本文・商品の仕様 | 明朝 | Noto Serif JP | 400 | 13px | 1.9 | 0.1em | | `note` | 調査の注釈 | 明朝 | Noto Serif JP | 400 | 10px | 1.6 | 0.05em | | `label-button` | ボタンの文字 | 明朝 | Noto Serif JP | 500 | 13px | 1.4 | 0.1em | | `headline-sm` | STEP の番号（細い線の数字） | 欧文サンセリフ | Josefin Sans | 200 | 44px | 1.0 | 0.1em | - 基本は明朝体で、字間を広めにとって上品に見せる - データやグラフのラベルはゴシック体で読みやすくする - 見出しは中央揃え。本文は左揃えで短く改行する - 英字の見出しの下には、小さなカタカナの読みを添える - 注釈は ※ で始め、本文より 2〜3px 小さくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分写真は 2 列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 本文の左右に約 19px の余白をとる - グラデーション帯の内側に白いカードを置き、四方に 12〜20px の余白をあける - ボタンは横幅いっぱいで 2 つを縦に並べ、間を 12px あける - グラフと表は全幅で見せ、その下に注釈を右揃えで置く - ステップは縦に並べ、間に下向き三角を置く ## Elevation & Depth - 影はほぼ使わず、平面で構成する - 奥行きは影ではなく、グラデーションと写真の光沢で出す ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 20px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は角丸なしの正方形か横長。ボトルは白背景で切り抜く - **セクション境界**: 直線で区切る。ピンクのグラデーション帯や水のゆらぎの背景で切り替える - ボタン・帯・カードは角丸なし - メカニズム図のラベルだけピル型にする - 悩みは破線の円で囲む - NEW バッジは白い円か細い線の円にする ## Components - **淡色の平たいボタン**（`button-store`）: 全幅で角丸なし。商品詳細や店舗検索に使う - **グラデーション帯見出し**（`band-heading`）: 左右が白へ溶けるマゼンタの帯に、白文字 2 行を中央揃えでのせる - **POINT 見出しバー**（`point-header`）: マゼンタの四角い帯に、POINT 番号とタイトルを 2 段で入れる - **破線円の悩みバブル**（`worry-circle`）: マゼンタの破線の円の中に悩みを 3 行で書き、太陽や月のアイコンを添える。線画の人物のまわりに配置する - **ランキング表**（`ranking-table`）: 左列は濃ピンクの地。右に王冠や番号の円をつけた 1〜3 位を並べ、1 位の行は淡色で強調する - **ステップの箱**（`step-box`）: 淡い藤色の箱と、マゼンタの箱（主役の工程）を下向き三角でつなぐ - **ピル型ラベル**（`pill-label`）: メカニズム図の段階名を示す。マゼンタ地に白文字 - **NEW バッジ**（`badge-new`）: 白い円か細いマゼンタの線の円に、NEW を字間広めに入れる ## Do's and Don'ts **Do** - マゼンタ・淡いピンク・白の 3 層で配色をまとめる - 数値やデータには必ず ※ の注釈をつけ、信頼感を出す - 明朝体の字間を広くとり、余白を多めにする - 説明パートは、グラデーション帯の中に白いカードを置いて区切る - グラフや図はピンク系の配色でそろえる **Don't** - 原色の赤や青、ネオン調の色を使わない - ボタンを角丸の濃い塗りにして目立たせすぎない - 強い影や立体的な装飾をつけない - 太いゴシック体を大きく並べ、セール調にしない - 写真に枠線や角丸をつけすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の世界観を一目で伝える）: ピンクの水しぶきの中央にボトルを置く。白地に縦書きの明朝コピーをのせ、NEW の円バッジと商品名を添える 2. **リード文**（リニューアルを宣言する）: 水のゆらぎの背景に、マゼンタの短い見出しと中央揃えの明朝本文を置く。最後に注釈 3. **動画**（CM で印象を強める）: 小さなキャプションの下に、16:9 の埋め込み動画を縦に 2 本並べる 4. **悩みの提起**（乾燥の悩みに共感する）: 線画の女性のまわりに、破線の円の悩みを 3 つ置く 5. **データ**（肌の変化を根拠で示す）: グラデーション帯の見出しの下に、淡い帯を敷いた折れ線グラフを置き、注釈とキャラクターを添える 6. **調査ランキング**（ニーズを裏づける）: アイテム別の TOP3 表。王冠で順位を示す 7. **商品紹介**（商品の詳細と価格を伝える）: 英字見出し、ボトルの写真、発売日・価格・特長 3 行、淡色ボタン 2 つの順に並べる 8. **使い方**（使用手順を示す）: グラデーション帯の中に、ステップの箱・顔の線画・STEP 番号・パック機能の説明を置く 9. **メカニズム・成分**（効果の仕組みと成分を示す）: POINT 見出しバー、ピル型ラベル、角層のイラスト、解説の枠、成分写真の 2 列グリッドの順に並べる 10. **比較**（使ったときと使わないときの差を見せる）: 肌の拡大写真を 2 列で並べ、使ったほうのキャプションをマゼンタにする 11. **関連商品**（ラインで使うよう勧める）: 大きな商品写真の下に、左に写真・右に仕様を並べた商品ブロックとボタンを置く 12. **カウンセリング案内**（店舗への来店を促す）: ピンクの筆跡のような背景に、下線つき見出し・本文・水彩の人物イラスト・ボタン 2 つを置く 13. **フッター**（SNS とサイト内リンクへ誘導する）: マゼンタの地に白い SNS アイコンを並べ、細い線で区切ったメニューを置く ## Imagery - ボトルは光沢を強調し、白背景や淡いピンクの背景で撮る - キービジュアルは、ピンクの水しぶきや波紋で潤いを表す - 人物は細い線画か淡い水彩。表情は穏やかに - メカニズム図は、パステルの水色とベージュの立体的な角層イラストにする - 成分は自然光で花や植物をアップで撮り、正方形に切り抜く - 背景には、絹のようなピンクのグラデーションの揺らぎを置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツ幅を約 900px で中央に置き、ヘッダーにナビゲーションを横に並べる - PC は動画・ボタン・関連商品を 2 列、成分写真を 3 列にする - PC は使用ステップを横並びにし、三角を右向きにする - PC では店舗サンプルの追従バナーを右に出す - PC の商品紹介は、左に写真・右に情報の 2 カラムにする ## 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-98278df0`（元 LP の URL から採番） - **元 LP**: https://www.kanebo-cosmetics.jp/twany/lineup/special/20240801_time_refresher/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。