DESIGN.md — 金麻の葉×江戸漫画のスキンケアLP（Edo Manga Gold Pattern Cosmetics LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 和風、上品・高級、親しみ・手作り感、情報量多め・訴求型
• キーワード: 江戸浮世絵風漫画・金の麻の葉文様・和紙色パネル・銀灰の波紋背景・明朝見出し・成分キャラクター
• 地の質感: 和紙の生成り地、金箔風の幾何文様、墨のかすれ筆致、青海波・雲の薄い線画
• 形: 角丸のない長方形の帯とパネル。ボタンは二重枠の長方形
• 温度感: グレーの地は冷たく、金と生成りで温かみを足した中間温度

Colors

• 地は銀灰色で通し、薄い白の青海波・雲・筆のかすれを重ねる
• セクション見出しは必ず金の麻の葉柄の帯に白文字を載せ、外側に細い金枠をつける
• 漫画は和紙色の地と黒の太枠でまとめ、地のグレーから浮かせる
• 保湿系は紫・濃紺、美白系は銀・墨黒にして、商品ごとの色を分ける
• CTAは濃紺か墨黒の面に白文字。暖色のボタンは使わない
• 商品紹介は白カードにして、漫画パートと切り替える
• heading-gold-band は文字 #FEFDF7 × 背景 #BD9443 のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8E6F32、4.61:1）を使う。

Typography

• 見出しとボタンは明朝の太字で、字間を広めにとる
• 漫画のセリフは縦書きの太いゴシックにし、強調語だけさらに太くする
• 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。