DESIGN.md — 紫枠×赤黄の和柄コラボ菓子キャンペーン LP（Kyoto Collab Snack Train Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、和風、親しみ・手作り感、情報量多め・訴求型
• キーワード: 和柄モチーフ・紫の額縁枠・キャラクター・市松模様・霞雲・コラボ告知
• 地の質感: フラットな単色面で作る。和柄（市松・霞・扇）を平面的な装飾として置く
• 形: 角のない太枠の四角い額縁、六角形の番号バッジ、丸い吹き出しバッジ
• 温度感: 暖かく賑やか。生成り地に赤・黄・緑・紫を差す

Colors

• ページ外枠は赤のヘッダーとフッターで挟む
• 各セクションは白地の上に、太い紫枠で囲んだ生成り地の額縁として置く
• 大見出しは黄色の二重枠の白い箱に入れる
• 期間などの項目ラベルは黄緑の面に白文字で載せる
• 注意書きや未定の告知は赤文字にする
• 本文のキーワードには薄緑のマーカーを引く
• info-label は文字 #FFFFFF × 背景 #91C43C のコントラスト比が 2.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#5F8027、4.56:1）を使う。

Typography

• 見出しは極太で、黒に近いグレーにする
• 企画見出しの下には紫の市松模様の帯を敷く
• 導入文は中央揃えの太字で、行間を広く取る
• 説明本文は左揃えの小さめの文字にする
• コラボ表記は2色で書き分ける（紫と赤）
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。額縁の中も 1 カラムで縦に積む
• 本文ブロックの幅: 画面幅の約 75%
• 余白: セクション間 120px、基本単位 8px、カード内 22px（375px 幅換算）
• 額縁は画面幅の約88%、枠線は約7px
• 額縁の内側に約20pxの余白を取る
• 額縁と額縁の間は白地を大きく空ける
• 企画ブロックは番号バッジ→写真→見出し→ラベル付き情報→本文の順に並べる
• キャラクターと和柄モチーフは見出しの脇に余白を埋めるように置く

Elevation & Depth

• 基本は影のないフラットな作り
• 過去企画バナーにだけ弱いドロップシャドウを付ける
• SNSボタンは影を付けずに塗りだけで作る

Shapes

• 角丸: 小 0px ／ 中 8px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの長方形。ファーストビューは中央に大きな円形のイラストを置く
• セクション境界: 直線の額縁で区切る。ヘッダー下とフッター上は波形の縁にする
• 額縁と見出し箱は角丸なし
• 見出し箱の四隅は内側に切り欠く
• 番号は六角形の枠で囲む
• 訴求バッジは赤い円形の吹き出しにする
• SNSボタンは角丸20pxの正方形に近いタイルにする

Components

• 紫の額縁セクション（section-frame）: 太い紫の枠線で生成り地を囲み、セクション全体を額縁に入れる
• 黄色二重枠の見出し箱（heading-box）: 白い箱を黄色の二重線で囲む。上段にコラボ表記、下段に大見出し。角に紫の菱形と赤い霞の飾りを置く
• 六角形の番号バッジ（number-badge）: 紫とピンクの六角形の枠の中に、黄緑の数字を入れる
• 赤い丸の吹き出しバッジ（circle-badge）: 赤い円に白い縁取りを付け、白と黄の文字で企画の目玉を3行で書く
• 黄緑の項目ラベル（info-label）: 期間・場所などの項目名を黄緑の面に白文字で載せ、右に太字で値を書く
• お知らせカード（news-card）: 灰色の日付タブ、画像、黄色の帯の順に重ね、帯には要約と赤い三角の矢印を入れる
• 外部リンクボタン（button-outline）: 白いボタンを紫の二重枠で囲み、外部リンクのアイコンを添える
• 扇形の見出し（fan-heading）: 赤い扇の上に白文字の見出しと弧を描く英字を載せ、紫の縁と黄の市松を添える
• 過去企画バナー（banner-cta）: 黄色の太枠と見出し帯を付けた画像バナー。右下に黄色の丸い矢印を置く
• SNSタイルボタン（sns-tile）: 各サービスの色で塗った角丸タイルを2列に並べ、アイコンと白い文字、右に矢印を入れる

Do's and Don'ts

Do - セクションはすべて紫の額縁に収める - 和柄（市松・霞雲・扇・菱形）を平面の装飾として散らす - キャラクターイラストを見出しの脇に配置して賑やかにする - 企画は番号付きのブロックで縦に並べる - 期間などの情報はラベルと値の2列で書く

Don't - グラデーションや強い影でリッチに見せない - 角丸の柔らかいカードを多用しない - 寒色や彩度の低い配色に寄せない - 長い本文を中央揃えにしない（中央揃えは導入文だけ） - 装飾のない無地のセクションを続けない

Page Structure

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

1. ヘッダー（ブランドとメニューへの導線を示す）: 赤い帯の左にロゴ、右にメニューを置く。下の縁は波形にする
2. ファーストビュー（コラボ企画を印象づける）: 観光写真を格子状に敷き、中央の大きな円に紫の縁取りを付けてキャラクターの集合イラストとタイトルロゴを入れる
3. 導入（コラボの背景と趣旨を伝える）: 額縁の中に黄枠の見出し箱、英字サブコピー、マーカー付きの中央揃え太字文、左右にキャラクターを置く
4. お知らせ（最新情報へ誘導する）: 菱形の飾りで見出しを作り、左右を市松の帯で挟む。下に日付付きのお知らせカードを縦に並べる
5. コラボ先の紹介（相手先とキャラクターを紹介する）: ロゴの下に扇形の見出しを置き、写真と説明文を並べる。最後に二重枠の外部リンクボタンを置く
6. 企画の詳細（各企画の内容と期間を伝える）: 黄枠の見出しの下に、番号バッジ・写真・赤丸バッジ・ラベル付き情報・本文のブロックを4つ並べる
7. 締めのビジュアル（世界観で余韻を残す）: キャラクターの集合イラストとタイトルロゴを再び大きく置く
8. 過去企画への導線（関連企画へ回遊させる）: 黄色の見出し帯付きのコラージュバナーを置く
9. SNS・フッター（SNSと公式チャネルへ誘導する）: シェアボタン、2列のSNSタイル、キャラクター付きのブランドメッセージ、波形の赤いフッターの順に並べる

Imagery

• 写真は路面電車や古都の街並みを晴天の下で撮った、彩度の高い実写
• 車両の写真は斜め前から全体が収まる構図で撮る
• キャラクターは黒い太線と原色の塗りで描いたフラットなイラスト
• キャラクターの周りに黄色のキラキラを添える
• 霞雲・市松・扇・竹の葉は単色の平面パーツで描く
• お知らせの背景にはお菓子の麺のテクスチャ写真を敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも額縁は中央に置いた1カラムで、幅は約800pxまで
• PC では紹介ブロックを2列に、お知らせカードを横に2枚並べる
• PC では企画ブロックの写真とテキストを左右交互に並べる
• PC のヘッダーには横並びのグローバルナビとSNSアイコンを加える
• PC ではSNSタイルを横一列に6個並べる

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