DESIGN.md — 紺×山吹の冬の日本酒イベント LP（Navy and Gold Winter Sake Festival LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: 和風、上品・高級、信頼・誠実、情報量多め・訴求型
• キーワード: 紺と山吹・雪景色・縦組み明朝・中央細カラム・黄色帯見出し・情報整理
• 地の質感: 雪の粒が舞う白銀の写真と、紺地に散る白い粒子。それ以外の面はフラットな単色。
• 形: 角丸小さめのカード、ピル型ボタン、紺の正方形アイコン。左端に紺の縦線が入った黄色の帯見出し。
• 温度感: 冷たい冬の紺と白に、温かみのある山吹と生成りを合わせた落ち着いた中間の温度。

Colors

• 外側は生成り、内側の本文は白い細いカラムの二層で組む
• 紺は日付ブロック、開催概要の箱、会場図、アイコンに使い、ブランドの面として使う
• 山吹は CTA ボタンとチケット価格帯だけに絞る
• セクション見出しは淡黄の帯に紺の縦線を添えて統一する
• リストカードはベージュと水色グレーを交互に置き、地域ごとの区切りを見せる
• 赤文字は完売・制限などの重要告知に限る

Typography

• FV と日付まわりは明朝、情報部分はゴシックで役割を分ける
• FV のキャッチは縦組みにして和の印象を出す
• 酒蔵一覧は字間を広げた明朝を均等割で 2 列に揃える
• 本文は中央揃え・行間広めで短く改行する
• 価格は大きな太字の数字にし、税込表記は小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。酒蔵名一覧と料理写真は 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• PC でも約 640px の細いカラムを中央に置く
• セクションは黄色帯の見出しから始める
• 特長は縦に並べたカードで、アイコン・見出し・本文の順に中央揃え
• メニューは左に品名と説明、右に必要チケット枚数を置き、罫線で区切る
• CTA はチケット情報の後と最後に繰り返す

Elevation & Depth

• カードと酒蔵リスト行には薄い影をつけ、地からわずかに浮かせる
• CTA ボタンには下方向にやや濃い影をつけて押せる見た目にする
• 注意事項の白い箱は外周に柔らかい影をつける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 角丸 8px の長方形。料理は黒背景の正方形に近い形
• セクション境界: 直線で区切り、帯見出しで区切りを示す
• 公式サイトへのリンクは紺枠の小さいピル型
• アイコンは紺の角丸正方形に白い線画
• 見出し帯の左端に紺の太い縦線を入れる

Components

• 山吹ピル CTA（button-primary）: チケット購入・予約用の黄色いピル型ボタン。紺の太字
• 公式サイト小ボタン（button-outline-sm）: 白地に紺の枠線がある小さいピル型
• 黄色帯見出し（heading-band）: 淡黄の横帯に左の紺縦線と太字ゴシック
• 紺の日付・出展者ブロック（date-block）: 紺地に雪の粒、白い明朝で日付、金色の小見出しと 2 列の名前一覧
• 開催概要ボックス（info-box）: 紺の角丸箱に、■ 付きの日時・会場などを白文字で並べる
• アイコン付き特長カード（feature-card）: ベージュ地。紺の正方形アイコン、太字の 2 行見出し、グレーの説明文
• チケット価格帯（price-band）: 写真の下に山吹の帯。大きな価格と、角を落としたバッジ。下に紺の補足帯
• 出展者リスト行（list-row）: 白い行に地域名付きの名前と小さい補足。右端に小ボタン
• 白丸の数量バッジ（badge-circle）: FV 上の白い円に大きな数字と短い語

Do's and Don'ts

Do - 紺・山吹・生成りの 3 色を軸にする - セクション見出しは必ず黄色帯の型で揃える - FV は雪や冬らしい写真に縦組みの明朝を重ねる - 料金や注意点は表と赤文字で正確に整理する - CTA は黄色のピル型だけを使う

Don't - 山吹を本文の地や装飾に広く使わない - ポップな丸ゴシックや原色の差し色を入れない - 本文カラムを画面いっぱいに広げない - 紺の面にグラデーションや派手な光の効果を足さない - 赤文字を告知以外の強調に使わない

Page Structure

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

1. ファーストビュー（イベント名と規模を一目で伝える）: 雪景色の写真に縦組みの明朝タイトル、数量の丸バッジ、黄色の縦帯、花の和装飾
2. 事業ラベル・サブコピー（主催の位置づけを示す）: 紺の細い帯の下に、字間を広げた明朝で 1 行
3. 開催日と出展者一覧（日付と出展者の数で魅力を見せる）: 紺地に大きな日付、金の小見出し、2 列の名前一覧
4. 開催概要（日時・会場・主催を伝える）: 紺の角丸ボックスに箇条書き。下に中央揃えの導入文
5. チケット価格（価格と内容を訴求する）: 商品写真の下に山吹の価格帯と紺の補足帯
6. 会場案内図（ブースの配置を示す）: 紺の枠に黄色の番号ブロックを並べた図
7. チケット情報（販売状況と購入方法を伝える）: 赤字の告知、中央揃えの説明、料金表、黄色 CTA
8. 魅力・特長（参加する理由を 4 つ示す）: アイコン付きのベージュカードを縦に 4 枚。宿泊予約の CTA も入れる
9. 出展者一覧（地域ごとの出展者を案内する）: 地域ごとのグループカードを 2 色交互にし、行ごとに公式サイトボタン
10. フード・メニュー（食の楽しみを伝える）: 大きな料理写真、品名と必要枚数の罫線リスト、2×2 の写真グリッド
11. チケット情報（再掲）と注意事項（購入を促し、ルールを伝える）: 料金表と CTA を繰り返す。白い影付き箱に紺の丸付き箇条書き
12. アクセス・フッター（会場の場所と主催を示す）: 中央揃えの住所、埋め込み地図、濃いグレーのフッター

Imagery

• FV は白い雪原に雪が舞う写真と、透明な酒器のクローズアップ
• 商品写真は升とグラス、稲穂など、和の素材を暖色の光で撮る
• 料理は黒背景で器ごと上から斜めに撮り、つやを出す
• アイコンは紺の正方形に白い線画（椅子・おにぎり・瓶・ベッド）
• 赤い椿など和の花のイラストを FV にワンポイントで置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元 LP は PC でも約 640px の細いカラムを中央に置き、外側は生成りで埋める
• SP では本文カラムを幅 90〜100% に広げ、外側の生成りはなくす
• 出展者名の 2 列は SP でも 2 列のまま、文字を 13px 程度に縮める
• 料理写真のグリッドは SP でも 2 列
• 会場図は 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 行書くと起動時に読み込まれる。