DESIGN.md — 深紫×マゼンタの劇場風ヘアケアコラボLP（Retro Cosmic Theater Collab Campaign LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: ラグジュアリー・ダーク、レトロ、上品・高級
• キーワード: 劇場カーテン・アーチ窓・宇宙と星・ミッドセンチュリーイラスト・ベルベット質感・金茶セリフ
• 地の質感: 黒紫の地にざらついたベルベット・紙のノイズ質感。色面にもかすかなグレインを入れる
• 形: 上が半円のアーチ、下も半円のカプセル型パネル。細い金茶の縁取り線を付ける
• 温度感: 暗くて温かい。夜の劇場の照明のような雰囲気

Colors

• 地は常に黒紫のベルベット質感で、中央の帯だけをマゼンタか青緑に塗る
• セクションごとに帯の色を変える（世界観＝マゼンタ、特典・商品＝青緑、手順・注意＝マゼンタ）
• 文字は基本的に金茶ベージュ。価格や特典名など最重要の部分だけ白にする
• 主CTAはからし金色の1色だけ。サブ導線は深緑
• 黄色や水色のような鮮やかな原色は使わず、すべてくすませる
• button-primary は文字 #FFFFFF × 背景 #AB9B34 のコントラスト比が 2.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#827628、4.59:1）を使う。
• button-secondary は文字 #C9AE8E × 背景 #046B64 のコントラスト比が 3.02:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。
• coupon-box は文字 #C9AE8E × 背景 #B62985 のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。
• accordion は文字 #FFFDFF × 背景 #A98E7B のコントラスト比が 3.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#8D705C、4.51:1）を使う。

Typography

• 和文も欧文もセリフ・明朝系でそろえ、ゴシックは使わない
• 英字見出しは大文字で字間を広げ、下に小さい和文を添える
• 見出しの上下に4方向の星マークを置いてはさむ
• 本文は中央揃えにし、短く改行して詩のように並べる
• 価格は欧文セリフの大きな数字にし、『円』は一回り小さくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。中央の帯の中にアーチ型パネルを縦に積む
• 本文ブロックの幅: 画面幅の約 75%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 中央の色帯は画面幅の約75%。左右には黒紫の地を見せる
• パネルは帯の内側に約8%の余白をとって置き、上下をアーチ型にする
• パネルの上部にカーテンのイラストを掛け、舞台の幕のように見せる
• 区切りには点線を使う
• CTAはパネルとパネルの間の帯の上に中央揃えで置く

Elevation & Depth

• 影はほぼ使わない。奥行きは金茶の細い縁取り線と質感で出す
• イラストだけはフラットだが、粒状のノイズでかすかな陰影を付ける
• ボタンは平面で、細い明色の縁取り線を付ける

Shapes

• 角丸: 小 6px ／ 中 16px ／ 大 140px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸のない長方形。イラストは円形やアーチ型に切り抜く
• セクション境界: 色帯の切り替えは直線。パネルは上下とも半円のアーチ型
• 主要パネルはカプセル（上下半円）型にする
• プロフィールなどの補足カードは角丸16px程度にする
• バッジは円形かピル型にする
• アコーディオンは角丸6pxのベージュのバーにする

Components

• 購入CTA（button-primary）: からし金色のピル型ボタン。明るい縁取り線と白い明朝文字
• サブ導線ボタン（button-secondary）: 深緑のピル型。金茶の縁取り線と金茶文字
• アーチ劇場パネル（arch-panel）: 上下とも半円の暗いパネル。金茶の細い縁取り線を付け、上部にカーテンを掛ける
• 星つきの英字見出し（section-heading）: 大文字の英字セリフ見出しと和文サブを、上下の星マークではさむ
• 価格比較ブロック（price-block）: 取消線付きの通常価格→三角→大きな白い特別価格の順に並べる。円形の割引バッジと、枠線だけのタグ2つを添える
• クーポン枠（coupon-box）: マゼンタの長方形。角に斜めの金茶帯を入れ、大きな金額を置く
• 期間バッジ（period-badge）: マゼンタのピル型。金茶の縁取り線を付け、中に赤い小ラベルと日付を入れる
• STEP見出し（step-label）: 英字セリフで手順番号を書き、下にマゼンタの帯を引く。手順の間は下向き三角でつなぐ
• 注意事項アコーディオン（accordion）: ベージュの角丸バー。白い明朝文字を置き、右端に＋アイコンを付ける
• 機能タグ（tag-chip）: 金茶の細い枠線だけの小さな長方形タグを3列で並べる

Do's and Don'ts

Do - 黒紫の質感のある地と中央の色帯の組み合わせを全体で守る - 各セクションをアーチ型のパネルに収め、カーテンと星で舞台らしさを出す - 文字は金茶の明朝・セリフで中央揃えにする - CTAはからし金色のピル型に統一する - 星・惑星・泡のモチーフを余白に散らす

Don't - 白や明るいグレーの地のセクションを作らない - ゴシック体や太い丸ゴシックを使わない - 鮮やかな原色や蛍光色を使わない - 濃いドロップシャドウやグラデーションのボタンを使わない - 角ばった四角いパネルばかりにしない

Page Structure

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

1. ファーストビュー（世界観を一目で伝える）: マゼンタのカーテン枠の中にバスタブのイラストを置く。その下の黒紫の地に、縦長セリフの欧文タイトルと和文サブ、商品のイラストを並べる
2. コンセプト（物語として商品体験を語る）: マゼンタのアーチ窓の中に、詩のような中央揃えの短い文を置く。下にはパネルからはみ出すイラストを置く
3. キャンペーン概要（期間と特典を伝える）: 期間バッジと点線ではさんだ特典名、特典画像、説明文をアーチパネルに収める
4. コラボ作家紹介（コラボの価値を補強する）: 角丸の暗いカードに円形のイラストを置き、名前・SNSアイコン・紹介文を添える
5. プレゼント（特典の詳細を伝える）: 青緑の帯の上にアーチパネルを置き、特典画像と説明を載せる。下に購入とサブの2ボタンを並べる
6. 対象商品と価格（オファーを提示する）: アーチ型に切り抜いた商品画像と丸バッジを置く。続けて価格比較、＋記号、クーポン枠、最終価格を並べる
7. CTA（購入へ誘導する）: からし金色のピル型ボタンを置き、下に解約条件の注釈を添える
8. 安心保証・特長（不安を解消し機能を伝える）: 角丸パネルに見出しと説明を載せる。動画、機能タグ、写真スライダーを添える
9. 購入方法（手順を示す）: マゼンタの帯にアーチパネルを置き、STEPの見出し、線画風のイラスト、下向き三角を縦に並べる
10. 注意事項（規約を開閉式で示す）: アーチパネルにベージュのアコーディオンを4本並べる
11. お問い合わせ（窓口情報を示す）: 黒紫の地に、星ではさんだ英字見出しと小さな中央揃えの文字を置く

Imagery

• ミッドセンチュリー風のフラットなイラストにし、粒状のノイズテクスチャを加える
• モチーフは猫足のバスタブ、泡、劇場のカーテン、アーチの回廊、惑星、4方向の星、燭台
• 人物は簡略化した女性で、レトロな絵本のようなタッチにする
• 色はマゼンタ・エメラルド・生成り・金茶・紺に限る
• 写真を使う場合は明るい長方形にし、暗いパネルの中に収める
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでも中央の帯の幅はSPとほぼ同じにし、左右は黒紫の質感の地で埋める
• PCは左の余白に欧文タイトルとロゴを固定して表示する
• PCは右の余白にマゼンタのカプセル型メニューと購入ボタンを固定する
• PCの余白に星と惑星を散らし、宇宙の雰囲気を広げる

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 行書くと起動時に読み込まれる。