DESIGN.md — 紫×ブロンズの高機能スキンケアLP（Violet and Bronze Premium Dermocosmetic LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、クール・先進的、シンプル・ミニマル、信頼・誠実
• キーワード: 紫グラデーション・ブロンズグラデーション・細罫線・明朝見出し・余白多め・研究・科学感
• 地の質感: 白〜淡いグレーの滑らかな地。水滴・光の反射・プリズムの光で透明感を出す
• 形: 四角いブロックに細い十字の罫線をあしらう。ボタンだけピル型
• 温度感: 紫のクールさと金茶の温かさを2つのラインで対比させる

Colors

• ラインごとに色を決める。医療系は紫、通販系はブロンズで、グラデーションの帯を敷く
• グラデーションの帯の上は白文字と白い枠線ボタンだけにする
• 商品の詳細は白地に置き、強調はライン名ラベルと罫線の金茶だけにする
• 購入ボタンはブロンズのグラデーションに白文字。どのラインでも共通にする
• 商品写真の背景は、商品の色に合わせた淡い色にする
• フッターだけ濃い茶色で締める
• button-primary は文字 #FFFFFF × 背景 #9C7B62 のコントラスト比が 3.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#8E7059、4.55:1）を使う。
• badge-circle は文字 #B09181 × 背景 #FFFFFF のコントラスト比が 2.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#916D5B、4.62:1）を使う。

Typography

• 見出しは細めの明朝で、太字にしない
• 本文と注釈はゴシック。行間は広めにとる
• セクション見出しには、欧文の小さなサブ見出しを添える
• 価格は数字を大きめにし、税込表記は小さく添える
• 注釈番号は上付きで入れ、注釈は小さい文字でまとめて置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。PCは商品紹介を写真と説明の2カラムで組む
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 商品ブロックは「ライン名ラベル＋右へ伸びる罫線」から始める
• 商品名→容量と価格→写真→リード文→本文→ボタン→注釈の順に並べる
• ラインの紹介は、色帯と写真を左右にずらして重ねる
• ナビボタンは2×2の格子に並べる
• 余白は広く。1セクションに主題は1つだけ

Elevation & Depth

• 影はほぼ使わない。平面と罫線で構成する
• 白い本文ボックスを淡い写真の上に重ねて奥行きを出す
• ボタンは影を付けず、グラデーションで立体感を出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの長方形。商品は中央に置き、余白を広くとる
• セクション境界: 直線で切り替え、グラデーションの帯で区切る
• 角丸は購入ボタン（ピル型）と円形の成分バッジだけに使う
• 見出しの右端に細い十字の罫線をあしらう
• ナビボタンは角丸なしで、白い細い枠線にする

Components

• 購入ピルボタン（button-primary）: ブロンズのグラデーションに白文字。右端に細い矢印を付ける
• 枠線ナビボタン（button-outline）: 色帯の上に置く、白い細枠の四角いボタン。2×2で並べる
• ライン切替バナー（line-tab）: 紫とブロンズの帯ボタンを横に並べる。右端に矢印を付ける
• 罫線付き見出し（heading-rule）: 金茶の小ラベルから細い罫線が右へ伸び、端に縦線を交差させる
• 成分の円バッジ（badge-circle）: 細い枠線の白い円に、金茶の文字で配合成分を書く。商品写真に重ねる
• おすすめの人のチェックリスト（check-list）: 見出しの下に、細いチェック記号付きの短い項目を3つ並べる
• 想いの白ボックス（intro-box）: 淡い背景写真の上に白い四角を重ね、中央揃えの文章を入れる
• スペック枠（spec-tag）: 細い金茶の枠で囲み、数値表記を小さく入れる

Do's and Don'ts

Do - 2つのラインの色（紫・ブロンズ）を最後まで一貫させる - 見出しは細い明朝。余白をたっぷりとる - 商品ブロックの型は全商品で同じにそろえる - 注釈は商品ごとに、ボタンの下にまとめる

Don't - 原色や蛍光色を使わない - 太いゴシックの大見出しや派手な装飾文字を使わない - カードに強い影や大きな角丸を付けない - グラデーションの帯の上に塗りつぶしのボタンを置かない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（ブランドの世界観と全商品を見せる）: 濃紺から紫・金の光が差すグラデーション背景に商品群を並べ、明朝コピーと欧文を中央に置く
2. ライン切替ナビ（2つのラインへ誘導する）: 紫とブロンズの帯ボタンを左右に並べる
3. ブランド紹介（ブランドの成り立ちを伝える）: ロゴ、明朝見出し、中央揃えの本文。背景に水滴を散らす
4. 想い（ブランドの理念を伝える）: 淡い写真の上に白いボックスを重ねる
5. ラインナップ概要（2ラインの違いを説明する）: 色帯と商品写真を左右交互にずらして重ね、枠線ボタンを置く
6. ライン1のヒーロー（医療系ラインへの導入）: 紫のグラデーション帯に大きな写真を置き、枠線ナビボタンを2×2で並べる
7. 商品詳細（ライン1）（各商品を説明する）: 罫線付き見出し、価格、写真と説明の2カラム、ピル型ボタン、注釈
8. ライン2のヒーロー（通販ラインへの導入）: ブロンズのグラデーション帯に、コピー入りのバナー写真とナビボタンを置く
9. カテゴリ見出し（商品群を区切る）: 淡いグラデーション地に欧文と明朝の見出し、商品写真を右に置く
10. 商品詳細（ライン2）（各商品の購入を促す）: 淡い色の写真背景、円バッジ、チェックリスト、購入ボタン
11. フッター（サイト内のナビゲーション）: 濃い茶色の地に、白文字のリンクを2列で並べる

Imagery

• 商品は白や淡い背景で、柔らかいサイド光を当てて撮る
• 医療系は紫の水面・分子模様・反射を使い、研究室のような印象にする
• 通販系は白い台座、虹色のプリズムの光、淡いパステル背景を使う
• 装飾として、透明な水滴や泡を余白に散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCの写真と説明の2カラムは、SPでは写真→説明の縦積みにする
• ライン切替バナーは、SPでは縦に2段で並べる
• 左右にずらして重ねる構成は、SPでは帯の下に写真を重ねる程度に抑える
• 2×2のナビボタンは、SPでも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 行書くと起動時に読み込まれる。