--- version: alpha name: Warm Bakery Festival Event LP description: クリーム色と木目テクスチャの地に、焦げ茶の極太ポップ見出しと水色のアクセス情報ブロックを組み合わせたイベント告知LP。パン写真を気球に見立てたコラージュでにぎやかさを出しつつ、日程や案内は白カードで整理している。 colors: primary: '#442907' background: '#FBECD2' background-alt: '#F6DDB4' secondary: '#68CEE4' cta: '#016299' on-cta: '#FFFFFF' surface: '#FEFFFE' text: '#292828' accent-1: '#C88A2A' accent-2: '#039AD5' accent-3: '#F70201' text-muted: '#A88A5E' dark-section: '#010101' marker: '#34ABDC' secondary-accessible: '#1B8096' marker-accessible: '#1D7EA7' typography: display: fontFamily: Dela Gothic One fontSize: 56px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Dela Gothic One fontSize: 32px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 18px fontWeight: 600 lineHeight: 1.2 headline-md: fontFamily: Roboto fontSize: 42px fontWeight: 700 lineHeight: 1.0 letterSpacing: -0.01em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.03em rounded: sm: 6px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 90px schedule-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 86px date-band: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 100px intro-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 250px access-panel: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 700px accordion-row: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 50px button-secondary: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 60px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 60px badge-round: backgroundColor: '{colors.marker}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 40px --- # DESIGN.md — クリーム×焼き色の木目調パンフェス告知 LP（Warm Bakery Festival Event LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: 焼きたて・木目・クリーム色・極太ポップ見出し・フェス感・水色の案内ブロック - **地の質感**: 薄い木目板テクスチャと生成り紙風の地。写真は切り抜きでドロップシャドウあり - **形**: 角丸カード・ピル型ボタン・点線囲みの説明枠・ジグザグ飾り罫 - **温度感**: 暖色中心で温かい。案内部だけ水色で涼しく切り替える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#442907` | 見出し・ロゴの焦げ茶 | 3% | 画素の実測 | | `background` | `#FBECD2` | クリーム色の地 | 25% | 画素の実測 | | `background-alt` | `#F6DDB4` | 木目セクションの地 | 15% | 画素の実測 | | `secondary` | `#68CEE4` | アクセス情報ブロックの水色 | 12% | 画素の実測 | | `cta` | `#016299` | お役立ち情報ボタンの紺青 | 4% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `surface` | `#FEFFFE` | 日程カード・説明枠の白 | 15% | 画素の実測 | | `text` | `#292828` | 日付数字・本文の濃グレー | 2% | 画素の実測 | | `accent-1` | `#C88A2A` | 見出し下の英字ゴールド | 0% | 推定 | | `accent-2` | `#039AD5` | 土曜の青 | 0% | 画素の実測 | | `accent-3` | `#F70201` | 日曜の赤 | 0% | 画素の実測 | | `text-muted` | `#A88A5E` | 日付帯の焼き色茶ジグザグ | 0% | 推定 | | `dark-section` | `#010101` | フッターの黒 | 3% | 画素の実測 | | `marker` | `#34ABDC` | 開催区分バッジの水色丸 | 0% | 画素の実測 | | `secondary-accessible` | `#1B8096` | AA を満たす補正値（計算） | | 計算 | | `marker-accessible` | `#1D7EA7` | AA を満たす補正値（計算） | | 計算 | - 地はクリームと木目ベージュを交互にし、セクション境界を色で切り替える - 見出しは焦げ茶の極太書体に白フチ、英字サブ見出しはゴールド - 交通・アクセスなど実用情報は水色の大きな角丸パネルにまとめる - 日程は白カードに濃グレー数字、土曜は青・日曜は赤で曜日色分け - リンクボタンは紺青塗りに白文字、パネル内のボタンは白地に水色系文字 - フッターのみ黒で締める - `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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのイベントロゴ風タイトル | 装飾・ディスプレイ | Dela Gothic One | 900 | 56px | 1.1 | 0.02em | | `headline-lg` | セクション見出し（白フチ焦げ茶） | 装飾・ディスプレイ | Dela Gothic One | 900 | 32px | 1.2 | 0.02em | | `accent` | 見出し下の英字ラベル | 欧文サンセリフ | Montserrat | 600 | 18px | 1.2 | 0.0em | | `headline-md` | 日程カードの大きな日付数字 | 欧文サンセリフ | Roboto | 700 | 42px | 1.0 | -0.01em | | `headline-sm` | 水色パネル内の小見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.03em | | `body-md` | 説明文（中央揃え） | ゴシック | Noto Sans JP | 500 | 14px | 1.7 | 0.02em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 12px | 1.6 | 0.0em | | `label-button` | ボタン・アコーディオン文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.3 | 0.03em | - 見出しは極太ポップ書体＋白い太フチで木目の上でも読ませる - 見出しの直下に英字サブ見出しをゴールドで小さく添える - 日付は数字を大きく、曜日・時刻は小さく右に積む - 本文は中央揃えで短く改行する - 注釈は※付きで本文より小さく - 書体は画像からの推定で、フォント名は近い印象の 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-3ec1cd54`（元 LP の URL から採番） - **元 LP**: https://www.fighters.co.jp/expansion/2025/panfes/index.html - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。