DESIGN.md — クリーム×焼き色の木目調パンフェス告知 LP（Warm Bakery Festival Event LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型
• キーワード: 焼きたて・木目・クリーム色・極太ポップ見出し・フェス感・水色の案内ブロック
• 地の質感: 薄い木目板テクスチャと生成り紙風の地。写真は切り抜きでドロップシャドウあり
• 形: 角丸カード・ピル型ボタン・点線囲みの説明枠・ジグザグ飾り罫
• 温度感: 暖色中心で温かい。案内部だけ水色で涼しく切り替える

Colors

• 地はクリームと木目ベージュを交互にし、セクション境界を色で切り替える
• 見出しは焦げ茶の極太書体に白フチ、英字サブ見出しはゴールド
• 交通・アクセスなど実用情報は水色の大きな角丸パネルにまとめる
• 日程は白カードに濃グレー数字、土曜は青・日曜は赤で曜日色分け
• リンクボタンは紺青塗りに白文字、パネル内のボタンは白地に水色系文字
• フッターのみ黒で締める
• access-panel は文字 #FFFFFF × 背景 #68CEE4 のコントラスト比が 1.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#1B8096、4.59:1）を使う。
• button-secondary は文字 #68CEE4 × 背景 #FEFFFE のコントラスト比が 1.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#1B8096、4.58:1）を使う。
• badge-round は文字 #FFFFFF × 背景 #34ABDC のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#1D7EA7、4.57:1）を使う。

Typography

• 見出しは極太ポップ書体＋白い太フチで木目の上でも読ませる
• 見出しの直下に英字サブ見出しをゴールドで小さく添える
• 日付は数字を大きく、曜日・時刻は小さく右に積む
• 本文は中央揃えで短く改行する
• 注釈は※付きで本文より小さく
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。お役立ちリンクのみ 2 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• コンテンツは左右約4%の余白で幅いっぱいに配置
• 日程カードは等間隔に縦積み（間隔約16px）
• 水色パネル内に白のアコーディオン行を縦に並べる
• セクションごとに地色を切り替え、上下に余白を大きく取る
• バナーは幅いっぱいの横長画像を縦に3枚並べる

Elevation & Depth

• 白カード・アコーディオン行に柔らかい薄い影
• ピル型ボタンに下方向の影を付けて浮かせる
• 切り抜きパン写真にドロップシャドウ

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: パンは切り抜きでコラージュ、バナーは四角
• セクション境界: 直線で地色・木目を切り替え。日付帯にジグザグ飾り罫
• 説明文は角丸白枠の内側に点線囲み
• ボタンは全てピル型で右端に三角矢印
• 所要時間ラベルは吹き出し型の白角丸
• 駅名は白線の丸アイコン

Components

• 白フチ極太見出し（section-heading）: 焦げ茶極太文字に白フチ、下に英字ゴールドラベル。左にパン写真を添えることも
• 日程カード（schedule-card）: 白角丸カード。左に大日付、中央に天気アイコン、右に対戦や入場区分
• 開催日帯（date-band）: FV直下のクリーム帯。丸バッジで区分を示し日付を大きく並べ、ジグザグ罫で区切る
• 点線囲み説明枠（intro-box）: 半透明白の角丸枠に点線の内枠、中央揃え本文と注釈
• 水色アクセスパネル（access-panel）: 水色の大角丸パネルに白見出し、路線図風の所要時間図と地図
• アコーディオン行（accordion-row）: 白角丸行に左アイコン、区間名、右端に＋
• 白ピルボタン（button-secondary）: 水色パネル内の詳細ボタン。白地に青緑文字と右三角
• 紺青ピルリンク（button-primary）: 2カラムで並ぶ案内リンク。紺青地に白文字、右に白三角
• 区分丸バッジ（badge-round）: 水色丸に白の小文字で開催区分を表示

Do's and Don'ts

Do - 見出しは必ず白フチの極太ポップ書体にする - 地はクリームと木目を交互に使う - 日程は白カードで1日1枚にし、曜日を色分けする - 実用情報は水色パネルにまとめて暖色と切り分ける - ボタンはピル型＋右三角に統一する - 切り抜きのパン写真を余白に散らしてにぎやかさを出す

Don't - 見出しを細い明朝や細ゴシックにしない - 背景を真っ白一色にしない - 水色を見出しや装飾に乱用しない - カードを角張らせない - 写真を四角いままFVに並べない

Page Structure

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

1. ファーストビュー（イベントの楽しさと名前を一目で伝える）: クリーム地にパン気球のコラージュ、中央に極太ロゴ、縦書きの短いキャッチ帯、下に会場写真
2. 開催日程帯（日付と入場条件を即座に示す）: 丸バッジ＋大きな日付数字を2段で並べ、ジグザグ罫で囲む
3. イベント概要（趣旨と出店内容を説明する）: 木目とパン写真の背景に点線囲みの白枠、中央揃え本文と注釈
4. 特典セット告知（有料セットを訴求する）: クリームの枠に見出し、3つの特典カードを＋記号でつなぎ、下に価格帯
5. 試合日程（開催各日の詳細を示す）: 木目地に見出し、白カード6枚を縦積み
6. アクセス情報（交通手段を案内する）: 水色パネルに所要時間図、アコーディオン、地図、白ピルボタン
7. 関連バナー（関連サービスへ誘導する）: 木目地に横長バナーを3枚縦に並べる
8. お役立ち情報（各種案内ページへのリンク）: クリーム地に見出し、紺青ピルボタンを2列4段
9. フッター（運営表記とシェア）: 黒地に白ロゴ、SNSアイコン、ページトップボタン

Imagery

• パンは白背景で切り抜き、柔らかい影で浮かせる
• パンを気球に見立て、カゴや風船を添えた遊び心のあるコラージュ
• ミニチュア人形がパンに登るような箱庭風演出
• 木目板と粉・パン断面の俯瞰写真を背景に敷く
• アイコンは線画の白・水色で交通手段を表す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はSPと同じ縦長カラムを中央に約50%幅で配置
• PC の左右余白には木目とパン写真の背景を敷く
• FVと日程帯のみPCでは横長に広げ、日付を1行に並べる
• カード・ボタンの構成は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 行書くと起動時に読み込まれる。