DESIGN.md — 深紅マゼンタ×桜色の上品スキンケア LP（Magenta Silk Mincho Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、信頼・誠実
• キーワード: マゼンタ・水しぶき・明朝体・グラデーション帯・科学的根拠・繊細な線画
• 地の質感: 水のゆらぎや絹のようなピンクのグラデーション。光沢のあるボトルの質感
• 形: 四角い帯と平たいボタンが基本。破線の円・ピル型ラベル・下向き三角を少しだけ使う
• 温度感: 温かみのあるピンク寄り。上品でしっとりしている

Colors

• 地は白。全体をマゼンタ一色でまとめ、ほかの強い色は使わない
• 大事な見出しは、左右がマゼンタから白へ溶けるグラデーション帯に白文字でのせる
• 説明の長いブロックは、両端がピンクのグラデーション帯の中に白いカードを置いて区切る
• ボタンは淡いベージュピンクの地にマゼンタの文字。濃い色の塗りボタンは使わない
• 注釈や強調の短いコピーはマゼンタの文字。本文は濃いグレー
• 金の王冠は順位を示すときだけ使う

Typography

• 基本は明朝体で、字間を広めにとって上品に見せる
• データやグラフのラベルはゴシック体で読みやすくする
• 見出しは中央揃え。本文は左揃えで短く改行する
• 英字の見出しの下には、小さなカタカナの読みを添える
• 注釈は ※ で始め、本文より 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

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

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