DESIGN.md — 紫×オレンジのハロウィン酒フェアLP（Playful Halloween Purple Liquor Fair LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: ポップ・元気、かわいい、情報量多め・訴求型
• キーワード: ハロウィン・紫の夜・とろける波形・リボン見出し・金縁フレーム・ポップ体
• 地の質感: フラットなベタ塗りの紫に、コウモリやグラスの濃紫シルエットを薄く重ねる。グラデーションは使わない
• 形: 溶けたキャンディのような有機的な波形の境界、両端を切り込んだリボン帯、角丸のピル型ボタン、金色の額縁
• 温度感: 暗めの紫に暖色のオレンジとピーチを差した、楽しく温かい夜の雰囲気

Colors

• 地は明るい紫と濃紫を交互にし、境界は溶けたような波形でつなぐ
• 強調語・価格の数字・レシピ名はオレンジにする
• 見出しリボンはピーチの帯に濃紫の文字、両端はオレンジの折り返し
• ボタンはピーチの面に濃紫の文字、右下に鮮やかな紫の影をずらして置く
• 白は見出しと本文だけに使い、面の色には使わない
• 金茶は額縁・ラベルバッジ・招待状の枠にだけ使う

Typography

• 見出しは丸みのある太いポップ体で、中央揃えにする
• 見出しの一部の語をオレンジにしたり、紫のマーカーを敷いたりして強調する
• 価格は数字を単位の約2倍の大きさにし、数字だけオレンジにする
• ボタンの文字は小さく控えめにする
• 細い明朝体は使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品紹介は横スクロールのカルーセル、レシピは写真と文字の2カラムを左右交互に並べる
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 90px、基本単位 8px、カード内 12px（375px 幅換算）
• 各セクションは「リボン見出し→リード→ビジュアル→価格→ボタン」の順に積む
• レシピは写真の位置を左右交互に入れ替える
• ボタンは中央に置き、幅は画面の約6割にする
• セクションの境界ごとに地の紫の濃淡を入れ替える
• イラストの正方形パネルは左右に余白を取って中央に置く

Elevation & Depth

• ボタンの右下に、ぼかさない紫の影を約4pxずらして置く
• 額縁の写真に、ごく薄いドロップシャドウを付ける
• それ以外はフラットにし、ぼかした影は使わない

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: レシピ写真は金縁の額に入れ、長方形・楕円形・少し傾けた長方形を使い分ける。商品は角丸の小さい正方形
• セクション境界: 溶けたキャンディが垂れるような有機的な波形で、紫の濃淡を切り替える
• 見出し帯は両端に切り込みと折り返しのあるリボン形にする
• ラベルバッジはピル型にする
• 直線の水平の区切り線は使わない

Components

• ピル型ボタン（button-primary）: ピーチの面に濃紫の小さな文字。右下にずらした紫のベタ影を付ける
• リボン見出し（ribbon-heading）: ピーチの帯に濃紫のポップ体を載せ、両端はオレンジの折り返し
• 価格表示（price-block）: 白い「本数」の文字とオレンジの大きな数字を並べる
• ラベルピル（label-pill）: オレンジの面に濃紫の文字で項目名を示すラベル
• 額縁レシピカード（recipe-frame）: 金縁の額に入れた写真に燭台のイラストを添え、横にオレンジのレシピ名を置く
• 商品カルーセル（product-carousel）: 正方形の商品画像に、金茶のバッジ・価格・商品名を付ける。下にオレンジと白の進捗バーを置く
• おばけの番号（ghost-step）: 白いおばけのイラストに濃紫の数字を入れ、手順の番号として使う
• 招待状カード（invitation-card）: 黒紫の面に金の二重枠と細い角飾りを付け、英字の見出しと割引・期間を載せる
• 注意事項のアコーディオン（accordion-note）: 白い細線で囲んだ枠に、小さな白文字と下向きの矢印を置く

Do's and Don'ts

Do - 紫の濃淡を交互に使い、境界は波形にする - 強調語・価格はオレンジにして目立たせる - コウモリ・燭台・おばけなどのハロウィン装飾を、濃紫のシルエットで散らす - ボタンにはずらしたベタ影を付けて立体感を出す - 写真は金縁の額に入れて、パーティーの雰囲気を出す

Don't - 白い地のセクションを多用しない - リアルなホラー表現や、血のような赤は使わない - 細い書体や明朝体で見出しを組まない - ぼかした影やグラデーションでフラット感を崩さない - オレンジを面の色に多用しない

Page Structure

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

1. ファーストビュー（フェア名・割引率・期間を伝える）: 紫の地に招待状カードを傾けて置き、英字の大見出し、キャラクターとかぼちゃ、割引と期間の帯を載せる
2. リード（企画の全体像を伝える）: 白のポップ体を中央揃えで6行並べ、キーワードをオレンジとマーカーで強調する。左右に商品瓶を置く
3. 企画1（ガチャ）（1本ガチャの魅力と価格を伝える）: リボン見出し、リード、イラストのパネル、リボン帯の特典、大きな価格、ボタンの順に並べる
4. 企画2（選べるセット）（セット購入を促す）: 企画1と同じ構成を、明るい紫の地で繰り返す
5. 商品一覧（対象の商品を見せる）: 白の小見出しとリボン見出しの下に、横スクロールのカードと進捗バーを置く
6. アレンジレシピ（飲み方を提案して購入につなげる）: 額縁の写真とオレンジのレシピ名・ラベル・材料を、左右交互に4件並べ、各件にボタンを付ける
7. プレゼントキャンペーン（SNS投稿への参加を促す）: 白の大見出し、ピーチのリボン帯、おばけの番号で2ステップを示し、投稿ボタンを置く
8. キャンペーン告知のバナー（投稿の特典と期限を強調する）: 招待状カードとキャラクターを組み合わせ、鮮やかな紫の帯に期限を白文字で載せる
9. 注意事項（条件の補足）: 細線で囲んだアコーディオンを置き、その下に生成りの地にベージュのキャラクター柄の帯を並べる

Imagery

• 人物を入れず、ポップでフラットなハロウィンのイラストを描く（コウモリ、かぼちゃ、おばけ、燭台、魔女帽の猫）
• 商品は、くすんだ色の正方形の背景に瓶を立てたパッケージ写真にする
• レシピ写真は暗い紫の背景で、グラスに綿あめやマシュマロのおばけを飾る
• 瓶のシルエット・リボン・キラキラを組み合わせて、中身が秘密のイラストを作る
• 背景の装飾は地より少し濃い紫のシルエットにして、主張させない
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に幅約480pxのSPカラムを置き、左右を紫で埋める構成を推奨する
• PCに広げる場合は、レシピを写真と文字の2カラムのまま余白だけ増やす
• 商品カルーセルは、PCでは4〜5枚が同時に見えるようにする
• 波形の境界は横幅いっぱいに伸ばして使う

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