DESIGN.md — 生成り×カカオ茶の色面ブロック催事 LP（Colorful Block Section Chocolate Fair LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、情報量多め・訴求型、親しみ・手作り感
• キーワード: 色面ブロック・縦長欧文見出し・カカオブラウン・ドット地・催事・会場案内
• 地の質感: 基本はフラットな単色面。オレンジのセクションだけ細かいドット柄を敷き、青のセクションには線画イラストを薄く重ねる
• 形: 四角い色帯でセクションを区切る。角丸カード・ピル型ボタン・点線の円も使う
• 温度感: 暖色寄り。焼き菓子のように甘く温かい

Colors

• 基本は生成り地。各セクションごとに地色を変え、色面ブロックで区切る
• 見出しと本文はこげ茶で統一し、黒は使わない
• 主ボタンと期間帯は赤茶で塗り、白文字を載せる
• オレンジ地の上には、濃赤茶のカードと黄色の日付帯を重ねる
• サブボタンは白か生成りのピル型にし、茶色の線と文字を使う
• 黄色は吹き出しや日付帯など、注目させたい要素だけに使う

Typography

• セクション見出しは縦長の太い欧文を画面左端ぎりぎりに置き、右肩に小さな和文ルビを添える
• コンセプト文だけは明朝体で赤茶にし、中央揃えで行間を広く取る
• 本文の説明文は中央揃え、カード内の文は左揃えにする
• 日付は太字で書き、曜日は括弧で囲む
• 注釈は※付きの小さな文字で、ブロックの末尾にまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。フロア紹介とブランド一覧は 2 列グリッドにし、フロアカードは横スクロールにする
• 本文ブロックの幅: 画面幅の約 87%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクションの最上部に欧文見出しを置き、地色の切り替え位置に重ねる
• 本文ブロックは左右に約 25px の余白を取る
• 告知枠は白地に細い黒枠を付け、内側を広めに取る
• 流れの説明は 2 つの角丸枠を矢印でつないだ図にする
• 期間の表示は赤茶の帯にし、縦線で項目名と値を区切る

Elevation & Depth

• 影はほぼ使わず、フラットな色面で見せる
• フロアカードには黄色のずらし影を付けて立体感を出す
• キャンペーンカードは白い大きな角丸面を色地から浮かせて見せる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真やロゴは四角く切り抜く。SNS の入口は点線の正円で囲む
• セクション境界: 直線の色面で切り替える。境界に欧文見出しを重ねる
• 主ボタンとサブボタンはピル型にし、右端に丸い再生アイコンを付ける
• キャンペーンカードは大きな角丸にする
• 告知枠と期間帯は角丸なしの四角にする

Components

• 縦長欧文見出し（section-title）: 左端に寄せた太い欧文の見出しに、小さな和文ルビを添える
• 主ボタン（button-primary）: 赤茶のピル型ボタン。白文字で、縁に金色の線を付ける
• サブボタン（button-secondary）: 白地に茶色の線と文字のピル型。右端に丸い矢印アイコンを付ける
• 告知枠（notice-box）: 白地に細い黒枠の四角。見出しの下に下線を引く
• 日付帯（date-band）: 黄色の帯に開催期間を太字で入れる
• フロアカード（floor-card）: 濃赤茶の角丸カードに黄色のずらし影を付け、階数・ロゴ・短い一言を載せる。横スクロールで並べる
• キャンペーンカード（campaign-card）: ピンク地の上に置く白い大角丸カード。番号付きの欧文ラベル、赤茶の見出し、賞品リストを入れる
• 期間帯（period-bar）: 赤茶の帯の中を縦線で区切り、項目名と日付を並べる
• 吹き出しラベル（speech-badge）: 黄色のピル型の吹き出しで、誘導の一言を入れる
• SNS円（sns-circle）: 茶色の点線で描いた正円の中に、アイコンと名前を入れる

Do's and Don'ts

Do - セクションごとに地色を変え、楽しい催事感を出す - 欧文見出しは縦長書体で大きく、左端に密着させて置く - 文字色はこげ茶系で統一する - 期間・会場などの情報は帯や枠で区切って見やすくする - 情報量の多いブロックは 2 列グリッドや横スクロールに収める

Don't - 純黒の文字や寒色だけの配色にしない - グラデーションや強い影を多用しない - 欧文見出しを細い書体にしたり、中央揃えにしたりしない - 1 つのセクションに地色を 2 色以上混ぜない - ボタンを角ばった四角にしない

Page Structure

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

1. ファーストビュー（催事の世界観と会期を伝える）: 濃い赤茶背景で、旅行鞄から溢れる菓子の写真を見せる。中央に円形ロゴ、縦書きのコピー、下部に明朝の会期を置く
2. コンセプト（催事の魅力を短く伝える）: 生成り地に、赤茶の明朝体で数行を中央揃えに並べる
3. お知らせ（会場変更などの告知）: 白地に黒枠の告知枠。前半・後半は色バッジで区別し、詳細ボタンを付ける
4. ガイドブック（デジタル冊子への誘導）: ピンクベージュ地に、こげ茶の額縁バナーと黄色の吹き出しを置く
5. セミナー（イベント案内）: 青地に線画イラストを敷き、白文字を載せる。強調はマーカー風の帯、ボタンは白いピル型
6. オンラインストア（EC への誘導）: 生成り地にバナー画像を置き、白いピル型ボタンを付ける
7. ブランド一覧（出展ブランドの確認）: オリーブ地に短い文と生成りのピル型ボタンを置く
8. フロア案内（会場ごとの企画を紹介する）: オレンジのドット地に黄色の日付帯を置き、2 列のロゴと説明を並べる。続けて横スクロールのフロアカードと会場マップを載せる
9. キャンペーン（抽選・プレゼント企画を告知する）: ピンク地に番号付きの白い大角丸カードを縦に並べる
10. 事前予約（予約から受け取りまでの流れを説明する）: 2 つの枠を矢印でつないだ流れ図と、赤茶の期間帯を置く。ブランドは 2 列グリッドで並べる
11. SNS（公式アカウントへ誘導する）: 白地に、点線の円 2 つを横に並べる
12. 関連バナー・注釈（関連企画の紹介と注意事項）: 全幅のバナーを縦に積み、その下に※注釈を並べる
13. フッター（店舗の公式 SNS とコピーライト）: グレー地に枠付きの SNS ボタンを並べ、最下部に黒帯を置く

Imagery

• メインビジュアルは、濃い赤茶背景に菓子を盛り込んだ写真。金の光の粒を散らした華やかな演出にする
• 企画ロゴはポップな色のワッペン風・ステッカー風にする
• セクションの背景には、カカオや豆を描いた単色の線画イラストを敷く
• 商品写真は白か濃い緑の無地背景で、四角く切り抜く
• 会場マップは淡い色の簡略図にし、注目エリアだけ色を付ける
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツを約 400px 幅の SP 版のまま中央左寄りに配置する
• PC の左右余白は赤茶の単色で塗りつぶす
• PC では右側にロゴとセクション名（欧文＋和文）の目次ナビを固定表示する
• グリッドとカードの構成は 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 行書くと起動時に読み込まれる。