DESIGN.md — 漆黒×桜ピンクの高級家電キャンペーンLP（Dark Luxe Pink Petal Appliance Campaign LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: ラグジュアリー・ダーク、上品・高級、クール・先進的
• キーワード: 漆黒・桜ピンク・明朝体・光の軌跡・花びら・プレミアム
• 地の質感: 黒の地に虹色の光の筋とピンクの花びらを散らした、艶のある質感
• 形: 四角い枠が基本。ボタンはピル型で、細い罫線で区切る
• 温度感: クールな黒にピンクの暖かみを差す

Colors

• 地色は黒に統一し、キャンペーンブロックだけをピンクの大きな面で囲む
• ボタンと帯見出しは深いワインピンクにし、文字は白にする
• 製品ごとに本体の色（赤・黒・グレー）に合わせてスペック帯の色を変える
• 金色は高級ラインのロゴとキャッチだけに使う
• セクションの英字見出しは黒に近い灰色で大きく、背景になじませる
• page は文字 #302B33 × 背景 #000000 のコントラスト比が 1.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#949494、4.56:1）を使う。

Typography

• 見出しは明朝体にして高級感を出す
• 数字（倍率・人数・日付）は明朝の太字で大きくする
• 英字の大見出しの上に、罫線で挟んだ小さな日本語ラベルを重ねる
• 本文はゴシックで小さめに組み、行間を広めにとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。機能紹介は SP でも 2 列のグリッドにする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• キャンペーンはピンクの大きな面にまとめ、中に白カードを入れる
• 製品紹介はテキストと大きな製品写真を左右に並べ、写真は画面からはみ出させる
• 機能は小見出し・説明・小さな画像の行にし、行の間を細線で区切る
• 応募要項はアコーディオンの灰帯にして畳む

Elevation & Depth

• 影はほとんど使わない
• 製品写真の背後に光の筋を置いて奥行きを出す
• カードは影なしのフラットな白面にする

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。
• 写真の切り抜き: 製品は背景を抜いた切り抜き。人物は四角いバナー型
• セクション境界: 黒地のまま余白と巨大な英字見出しで区切る
• カードと帯は角丸なしか極小にする
• 主CTAと問い合わせボタンはピル型
• ステップのアイコンは円形の中に置く

Components

• 応募フォームボタン（button-primary）: ワインピンクのピル型ボタン。右端に矢印を付ける
• 英字重ね見出し（section-title-en）: 暗い灰色の大きなセリフ英字の中央に、罫線で挟んだ小さな日本語ラベルを重ねる
• 賞品コースカード（campaign-course-card）: 白カードにコース名の帯、賞品写真、明朝の大きな当選人数を載せる
• 応募ステップ（step-flow）: ワインピンクの円形アイコンとSTEP番号を3つ並べ、間を細線で区切る
• 帯見出し（band-heading）: ワインピンクの全幅の帯に白文字を中央揃えで置く
• スペック帯（spec-badge）: 製品の色で塗った帯に、風量の数字を明朝で大きく入れる
• 要項アコーディオン（accordion）: 灰色の帯の中央に白文字、右端に＋または－を置く
• 詳細リンク（link-underline）: 白い英字と下線に、円で囲んだ矢印を添える

Do's and Don'ts

Do - 地色は黒を基本にし、ピンクはキャンペーン部分に集中させる - 製品写真の周りにピンクの花びらと虹色の光の筋を散らす - 見出しと数字は明朝体で上品に組む - セクションごとに巨大な英字見出しを背景に入れる

Don't - 丸ゴシックやポップな書体を使わない - 黒地に明るい原色の面を広く置かない - カードに強い影や大きな角丸を付けない - ピンクの彩度を上げすぎて蛍光色にしない

Page Structure

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

1. ファーストビュー（人物と製品で世界観を伝える）: 大輪のピンクの花を背景に人物と製品を置く。縦書きの明朝コピーとロゴを添え、円形のキャンペーンバッジを重ねる
2. キャンペーン概要（応募期間と賞品を伝える）: ピンクの面に花びらを散らす。明朝のタイトルの下に、期間をピル枠、強調語を白い囲みで示す
3. 賞品コース（賞品と当選人数を見せる）: 白カードを2枚並べ、明朝の大きな人数を入れる
4. 応募方法（手順を説明する）: 帯見出しの下にステップを3つ置き、対象商品の表と主CTAを続ける
5. 応募要項（規約や注意事項を伝える）: 黒地に小さな文字で組み、灰色のアコーディオンで畳む
6. お問い合わせ（問い合わせ先を案内する）: 細い枠で囲んだ黒い箱に白いピル型ボタンを置く
7. 商品ラインナップ（3つのモデルを比較させる）: 光の筋の上に切り抜き製品を3つ並べ、カラー見本と型番を添える
8. 特長（製品別）（各モデルの機能を訴求する）: 明朝のキャッチ、スペック帯、機能グリッドに大きな製品写真を組み合わせ、詳細リンクを2つ置く
9. 人物プロフィール（起用人物を紹介する）: 横長のバナーに人物を飛び出させ、セリフ英字の名前を置く
10. ギャラリー（動画とビジュアルを見せる）: 斜体の英字小見出しの下に、動画サムネイル3つとグラフィック2つを並べる
11. フッター（企業情報を示す）: 黒地の中央にロゴとコピーライトを置く

Imagery

• 製品は背景を抜いた切り抜きにし、斜め向きで大きく見せる
• 製品の背後に、黒地を横切る虹色の光の帯を置く
• ピンクの花びらを風に舞うように散らす
• 人物はダークスーツで、ピンクの花を背景にしたビジュアルにする
• 機能説明には暗い色調の小さなクローズアップ写真を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では製品紹介を縦積みにし、製品写真をテキストの上か下に置く
• 賞品コースカードは SP で縦に並べる
• 応募ステップは SP で縦の3段にする
• ラインナップは SP で横スクロールにするか縦積みにする
• ギャラリーは SP で2列か1列にする

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