DESIGN.md — 紫×黒ダイヤ柄のハロウィンコラボカフェ LP（Dark Halloween Character Cafe Collaboration LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: ポップ・元気、かわいい、ラグジュアリー・ダーク、情報量多め・訴求型
• キーワード: ハロウィン・ダイヤ柄・黒パネル・デフォルメキャラ・シルエット・明朝体
• 地の質感: ダイヤ柄・猫顔パターンのフラットな繰り返し背景。黒シルエットの丘で区切る
• 形: 中央の黒い角丸パネル、白い情報ボックス、ピル型ボタン
• 温度感: 暗めで妖しいが、色は鮮やかでカラフル

Colors

• 地はセクションごとにダイヤ柄や猫柄の背景を替える（紫、青緑、群青、マゼンタのグラデーション）
• 情報は必ず中央の #202020 の黒パネルに載せ、白文字で書く
• 価格や説明の詳細は黒パネルの中の白いボックスに黒文字で入れる
• 期間ラベルの色で期間を区別する。前半はマゼンタ、後半は青緑
• セクションの境目は黒シルエット（丘・家・枯れ木）で締める
• 黄色は TOP ボタンなどの小さな点だけに使う
• period-label は文字 #F7F7F6 × 背景 #DC3E92 のコントラスト比が 3.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D02681、4.58:1）を使う。

Typography

• 全体を明朝体でそろえ、ダークで上品な印象にする
• 本文は基本的に中央揃えにする
• 商品名の下に白い細線を引き、その下に価格を置く
• 価格は「円(税込)」の形で太字にする
• 注意書きは※で始め、白ボックスの外に小さく置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。グッズカードは 2 列、店舗リンクは 2〜3 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 黒パネルは中央に置き、PC では幅約 55% にする
• PC はパネルの左右の余白にキャラを置く
• パネル同士は 16px あけて縦に積む
• 各セクションの先頭に見出しプレートを置く
• イベント概要は 2 列の罫線表（左列は黒地見出し、右列は白地）

Elevation & Depth

• 影はほとんど使わず、フラットに仕上げる
• 見出しプレートだけ金属風の縁取りと軽い影を付ける
• TOP ボタンは黄色の円形で固定表示する

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 14px。ボタンはピル型。
• 写真の切り抜き: 商品画像は角丸なしの長方形。キャラはパスで切り抜く
• セクション境界: 黒い丘のシルエットに家・枯れ木・コウモリを載せて区切る
• 黒パネルは角丸 14px
• 白い情報ボックスは角丸なし、または 2px
• ボタンとカテゴリタブはピル型
• SNS アイコンは白いひし形に入れる

Components

• 見出しプレート（heading-plate）: 黒い角丸プレートに銀の縁。角にキャンディと蜘蛛の巣を飾る
• 黒パネル（content-panel）: メニューやグッズを載せる中央の角丸パネル
• 白い情報ボックス（info-box）: 説明文やアレルギー表記を中央揃えで入れる
• 期間ラベル（period-label）: マゼンタか青緑の面に、期間を大きな白文字で書く
• 詳しくみるボタン（button-primary）: グッズカード下部のマゼンタのピル型ボタン
• グッズカテゴリタブ（category-tab）: 小さなピル型タブを折り返して並べる
• グッズカード（goods-card）: 黒カードに白背景の商品画像、名前、価格、販売日、ボタンを縦に並べる
• 店舗リンクタイル（store-tile）: 暗くした店内写真の上に店舗名を白文字で載せる
• SNS ひし形アイコン（sns-diamond）: 白いひし形の中に黒いロゴを入れる
• TOP ボタン（top-button）: 黄色い円にコウモリを添えたページトップボタン

Do's and Don'ts

Do - セクションごとに背景のパターンと色を変えつつ、情報は黒パネルにまとめる - 左右にデフォルメキャラを交互に配置する - セクションの終わりを黒シルエットの丘で区切る - 価格・ノベルティ・注意書きを毎回同じ順番で並べる - 明朝体を中央揃えで統一する

Don't - パターン背景の上に直接本文を置かない - ゴシック体や丸ゴシックを混ぜない - パステル系や白地のセクションを作らない - 影やグラデーションのボタンを多用しない - 期間ラベルの色の割り当て（前半マゼンタ、後半青緑）を崩さない

Page Structure

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

1. ファーストビュー（イベントのテーマと世界観を伝える）: 紫のグラデーション地にキャラを散らし、中央にロゴ。下端は黒い丘
2. 導入文（イベントのテーマを説明する）: 青緑の猫柄地。中央揃えの白い明朝文を両脇のキャラで挟む
3. イベント概要（期間と実施店舗を示す）: 見出しプレートの下に 2 列の罫線表
4. メニュー＆ノベルティ（フードと特典を紹介する）: ダイヤ柄の上に黒パネルを置き、商品名・価格・白ボックス・特典画像を並べる
5. スペシャルドリンク案内（時間帯で切り替わる仕組みを説明する）: 白ボックスに■見出しの箇条を区切り線で分けて並べる
6. 期間別ドリンク（期間ごとのメニューと特典を示す）: 色付きの期間ラベル＋ドリンク＋ポストカードのグリッド
7. グッズ（商品を販売する）: 群青の猫柄地。カテゴリタブの下に 2 列の黒カード
8. スペシャル特典（購入特典を訴求する）: バナー画像と黒い帯で条件を示す
9. 店舗公式 SNS（店舗アカウントへ誘導する）: マゼンタの猫柄地に写真タイルを並べる
10. 公式 SNS・フッター（フォローと共有を促す）: ひし形アイコン、グレーのシェア帯、店舗ロゴ、黒フッター

Imagery

• 2〜3 頭身のデフォルメキャラに、動物の耳と仮装をさせたイラスト
• 背景はダイヤ柄の中にカボチャ・家・肉球・コウモリのアイコンを入れたパターン
• 猫の顔シルエットを散らした半透明のパターン
• 黒シルエットの丘・枯れ木・家・コウモリを区切りに使う
• 見出しの装飾に棒付きキャンディ・ジェリービーンズ・蜘蛛の巣
• 商品画像はポストカードを並べたグリッドで見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は黒パネルを幅 92% にし、キャラはセクションの間に小さく置くか省略する
• PC はパネルを中央約 55% 幅に置き、左右の余白にキャラを大きく置く
• SP のグッズカードは 2 列のまま、または 1 列にする
• SP の概要表は見出しと内容を縦に積む
• 背景パターンは SP では縮小して繰り返す

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