--- version: alpha name: Edo Manga Gold Pattern Cosmetics LP description: 銀灰色の和柄の地に、金の麻の葉柄の見出し帯と和紙色の4コマ漫画を縦に積んだ構成。成分をキャラクター化した漫画で効能を伝え、最後に白いカードで2商品を並べて紹介する。明朝の見出しと濃紺・墨黒のボタンで、和の高級感とユーモアを両立させている。 colors: primary: '#BD9443' on-primary: '#FEFDF7' background: '#FAFAFA' background-alt: '#F5D9A5' surface: '#FFFFFF' cta: '#000471' on-cta: '#ECEFFF' secondary: '#333333' text: '#070407' line: '#111111' accent-1: '#301F87' tint-1: '#E2DEF3' tint-2: '#D2D2D2' accent-2: '#C89953' primary-accessible: '#8E6F32' typography: display: fontFamily: Yuji Boku fontSize: 44px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.06em headline-md: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 500 lineHeight: 1.55 letterSpacing: 0.06em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em accent: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 900 lineHeight: 1.3 note: fontFamily: Noto Serif JP fontSize: 9px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em label-button: fontFamily: Shippori Mincho fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 24px section: 90px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-gold-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 140px manga-panel: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.accent}' height: 260px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 56px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 56px product-label-bar: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 44px concern-bubble: backgroundColor: '{colors.tint-1}' textColor: '{colors.accent-1}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 36px profile-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 560px heading-ornament: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 110px --- # DESIGN.md — 金麻の葉×江戸漫画のスキンケアLP（Edo Manga Gold Pattern Cosmetics LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 和風、上品・高級、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: 江戸浮世絵風漫画・金の麻の葉文様・和紙色パネル・銀灰の波紋背景・明朝見出し・成分キャラクター - **地の質感**: 和紙の生成り地、金箔風の幾何文様、墨のかすれ筆致、青海波・雲の薄い線画 - **形**: 角丸のない長方形の帯とパネル。ボタンは二重枠の長方形 - **温度感**: グレーの地は冷たく、金と生成りで温かみを足した中間温度 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#BD9443` | 金の文様見出し帯 | 8% | 画素の実測 | | `on-primary` | `#FEFDF7` | 金帯上の白文字 | 1% | 画素の実測 | | `background` | `#FAFAFA` | ページ地の銀灰色 | 30% | 画素の実測 | | `background-alt` | `#F5D9A5` | 漫画パネルの和紙色 | 20% | 画素の実測 | | `surface` | `#FFFFFF` | 商品紹介・プロフィールの白カード | 13% | 画素の実測 | | `cta` | `#000471` | 濃紺の詳細ボタン | 2% | 画素の実測 | | `on-cta` | `#ECEFFF` | ボタン文字 | 0% | 画素の実測 | | `secondary` | `#333333` | 墨黒のサブボタン | 2% | 画素の実測 | | `text` | `#070407` | 見出し・本文の墨色 | 2% | 画素の実測 | | `line` | `#111111` | 漫画の太い黒枠線 | 1% | 推定 | | `accent-1` | `#301F87` | 保湿商品の紫ラベル帯 | 1% | 画素の実測 | | `tint-1` | `#E2DEF3` | 悩みワードの淡紫ぼかし丸 | 1% | 画素の実測 | | `tint-2` | `#D2D2D2` | 悩みワードの灰色ぼかし丸 | 1% | 画素の実測 | | `accent-2` | `#C89953` | 見出し脇の金の和柄アイコン | 0% | 画素の主要色に補正 | | `primary-accessible` | `#8E6F32` | AA を満たす補正値（計算） | | 計算 | - 地は銀灰色で通し、薄い白の青海波・雲・筆のかすれを重ねる - セクション見出しは必ず金の麻の葉柄の帯に白文字を載せ、外側に細い金枠をつける - 漫画は和紙色の地と黒の太枠でまとめ、地のグレーから浮かせる - 保湿系は紫・濃紺、美白系は銀・墨黒にして、商品ごとの色を分ける - CTAは濃紺か墨黒の面に白文字。暖色のボタンは使わない - 商品紹介は白カードにして、漫画パートと切り替える - `heading-gold-band` は文字 `#FEFDF7` × 背景 `#BD9443` のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#8E6F32`、4.61:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの縦書き筆文字コピー | 手書き・筆 | Yuji Boku | 700 | 44px | 1.1 | 0.02em | | `headline-lg` | 金帯の見出し | 明朝 | Shippori Mincho | 700 | 24px | 1.5 | 0.06em | | `headline-md` | 商品紹介前の見出し | 明朝 | Noto Serif JP | 500 | 22px | 1.55 | 0.06em | | `headline-sm` | 商品名ラベル帯・カード内の小見出し | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.05em | | `body-md` | プロフィール本文 | ゴシック | Noto Sans JP | 500 | 12px | 1.7 | 0.02em | | `accent` | 漫画吹き出しの縦書きセリフ | ゴシック | Zen Kaku Gothic New | 900 | 16px | 1.3 | 0.0em | | `note` | 注釈（※・*） | 明朝 | Noto Serif JP | 500 | 9px | 1.5 | 0.08em | | `label-button` | ボタン文字 | 明朝 | Shippori Mincho | 700 | 14px | 1.2 | 0.1em | - 見出しとボタンは明朝の太字で、字間を広めにとる - 漫画のセリフは縦書きの太いゴシックにし、強調語だけさらに太くする - FVだけは筆文字を縦に2行大きく組む - 本文と商品ラベルはゴシックで中央揃えにする - 注釈は見出し直下に小さな明朝で添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。漫画は1コマずつ縦に積む - **本文ブロックの幅**: 画面幅の約 89% - **余白**: セクション間 90px、基本単位 8px、カード内 24px（375px 幅換算） - 見出し帯・漫画・カードは同じ幅で中央に揃える - 漫画のコマ間は約16pxで、和紙色の地を続ける - 漫画ブロックの後にボタン、その後に大きな余白をとる - 商品カードは見出し→ラベル帯→リード→商品画像＋悩みワードの順に並べる ## Elevation & Depth - 影はほとんど使わず、枠線と面の色の差で階層をつける - 白カードは灰色の地の上に置き、影なしで浮かせる - 金帯は外側に1pxの金線を一重かけて額縁風にする ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品は切り抜き。イラストレーターの顔は円形に切り抜く - **セクション境界**: 直線で区切る。背景の白い弧と波紋でゆるやかに場面を切り替える - ボタン・帯・カードはすべて角丸なしの長方形 - ボタンは内側に白の細線を入れた二重枠 - 悩みワードは輪郭をぼかした楕円で浮かせる ## Components - **金の麻の葉見出し帯**（`heading-gold-band`）: 麻の葉文様の金の面に白い明朝を2〜3行中央揃えで載せ、外側に金の細枠をつける - **4コマ漫画パネル**（`manga-panel`）: 和紙色の地に黒の太枠のコマ。縦書きの吹き出しとキャラクターで悩み→原因→解決を描く - **濃紺の二重枠ボタン**（`button-primary`）: 濃紺の面に内側の白線と波紋の柄。中央に明朝の文字、右端に白い矢印 - **墨黒の筆かすれボタン**（`button-secondary`）: 墨黒の面に筆のかすれ柄と白い内枠、右端に矢印 - **商品名グラデ帯**（`product-label-bar`）: 紫や墨色から右へ薄くなるグラデーションの帯。商品名と区分を白文字で2行に入れる - **悩みワード楕円**（`concern-bubble`）: 輪郭をぼかした淡色の楕円に短い悩みワードを入れ、商品画像の左右に散らす - **イラストレーター紹介カード**（`profile-card`）: 白地に金の細枠。円形の似顔絵、名前、金の下線、中央揃えの経歴、SNSアイコンを並べる - **和柄アイコン付き見出し**（`heading-ornament`）: 明朝3行の見出しの左右に、金の青海波または麻の葉のアイコンを置く ## Do's and Don'ts **Do** - 見出しは毎回、金の文様帯の型を使う - 漫画は和紙色と黒の太枠、縦書きの吹き出しで統一する - 背景には薄い和柄の線画を重ね、無地の灰色だけにしない - 成分をキャラクター化し、全コマに同じ案内役を登場させる - ボタンは商品の色（濃紺／墨黒）に合わせる **Don't** - 角丸やピル型のボタンを使わない - ビビッドな赤や橙のCTAを入れない - 見出しを丸ゴシックやポップな書体にしない - 漫画に写真を混ぜない（商品画像は除く） - 白い背景をページ全体に敷かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（2商品とテーマを一目で伝える）: 中央に筆文字の縦書きコピー。左右に商品ボトル、縦書きの商品名の短冊、受賞などの丸バッジ、江戸風の人物とキャラクターを配置 2. **悩みの提起（漫画1）**（くすみの悩みと原因を共感で伝える）: 金帯の見出しの下に4コマを縦に並べ、図解のコマも挟む 3. **美白成分の解説（漫画2）**（美白成分の働きを物語で見せる）: 金帯の見出しと注釈の後、敵と侍キャラクターの4コマ。最後に墨黒のボタン 4. **保湿成分の解説（漫画3）**（保湿成分の働きを伝える）: 同じ型の金帯と4コマ。最後に濃紺のボタン 5. **イラストレーター紹介**（漫画の作者を紹介して信頼と話題性を出す）: 明朝の見出しの下に、金枠の白カード（円形の似顔絵・経歴・SNS） 6. **商品紹介（保湿）**（対応する悩みと商品を示して送客する）: 和柄アイコン付きの見出し、白カードに紫のラベル帯、商品画像を淡紫の悩み楕円で囲み、濃紺のボタン 7. **商品紹介（美白）**（対応する悩みと商品を示して送客する）: 同じ型で銀・灰色の配色。墨黒のボタンと注釈 ## Imagery - 浮世絵風の太い主線で描いた江戸の町人キャラクターの漫画 - 成分を擬人化したキャラクター（しずく・米粒・侍の玉など）を案内役にする - 背景は薄灰色に白の青海波・菊の線画・墨のかすれを重ねる - 商品ボトルは白背景に切り抜き、光沢の玉やテクスチャを添える - 肌断面の図解は和紙色の手描きタッチで描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは上部に3分割のアンカーナビ（墨黒の帯）を置く - PCのFVは横長で、筆文字を中央に寄せて商品と人物を左右に広げる - PCでも漫画は幅約340pxの1カラムで中央に置き、左右の余白にキャラクターを散らす - PCのプロフィールは横長のカードにして、似顔絵を左・文章を右に並べる - PCの商品紹介は2商品のカードを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-6f1f4c7d`（元 LP の URL から採番） - **元 LP**: https://maison.kose.co.jp/site/p/onebykose-hakkoscience.aspx - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。