--- version: alpha name: Festive Red Gold Food Event LP description: 和の縁起柄（青海波・市松）と朱赤・金黄・焦げ茶で祭りの賑わいを出したフードイベント告知LP。FVはイラストと装飾ロゴ文字で勢いを出し、本文は生成り・黄・白の地を切り替えて情報を整理する。 colors: primary: '#B4161B' secondary: '#399A4D' background: '#FFFFFF' background-alt: '#FBE777' surface: '#FFF6D7' dark-section: '#734C23' on-dark: '#FFFFFF' cta: '#6C4E2A' on-cta: '#FFFAED' accent-1: '#FDF10A' text: '#222222' line: '#ECD583' accent-2: '#93AB23' typography: display: fontFamily: Dela Gothic One fontSize: 28px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Dela Gothic One fontSize: 26px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Yuji Syuku fontSize: 28px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.75 note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em rounded: sm: 4px md: 6px lg: 8px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' ribbon-heading: backgroundColor: '{colors.primary}' textColor: '{colors.accent-1}' typography: '{typography.display}' height: 90px category-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 360px step-bar: backgroundColor: '{colors.primary}' textColor: '{colors.accent-1}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px button-link: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 42px info-table: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 420px share-block: textColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 44px page-top: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 32px --- # DESIGN.md — 赤×金×茶の和祭り風フードイベントLP（Festive Red Gold Food Event LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: 和風、ポップ・元気、力強い・インパクト、情報量多め・訴求型 - **キーワード**: 和祭り・青海波・朱赤と金・筆文字風ディスプレイ・イベント告知 - **地の質感**: FVと見出し帯に金箔の市松・青海波柄を敷き、本文の面はフラットな単色にする - **形**: 角はほぼ四角。見出し帯はリボン、区切りは丼のふちのような弧形にする - **温度感**: 暖色寄りで賑やか。下層は落ち着いた生成りでまとめる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#B4161B` | 朱赤（帯・見出し文字・カード枠） | | 画素の実測 | | `secondary` | `#399A4D` | 和の緑（部門カードの見出し） | | 画素の実測 | | `background` | `#FFFFFF` | 白地（アクセス・注意事項） | | 画素の実測 | | `background-alt` | `#FBE777` | 金黄地（紹介・投票セクション） | | 画素の実測 | | `surface` | `#FFF6D7` | 生成り地（概要・問い合わせ） | | 画素の実測 | | `dark-section` | `#734C23` | 焦げ茶（ヘッダー・フッター・リンクボタン） | | 画素の実測 | | `on-dark` | `#FFFFFF` | 茶地上の白文字 | | 画素の主要色に補正 | | `cta` | `#6C4E2A` | リンクボタン茶 | | 画素の実測 | | `on-cta` | `#FFFAED` | ボタン上文字 | | 画素の実測 | | `accent-1` | `#FDF10A` | 帯上の黄色見出し文字 | | 画素の実測 | | `text` | `#222222` | 本文の黒 | | 推定 | | `line` | `#ECD583` | 表・項目区切りの淡い線 | | 画素の主要色に補正 | | `accent-2` | `#93AB23` | 矢印の黄緑（ステップ間） | | 画素の実測 | - セクションの地は生成り→金黄→白→生成り→焦げ茶の順に切り替えて区切る - 朱赤は見出し文字・リボン帯・ステップ帯・ラベル文字に使う - 朱赤の帯の上の見出しは黄色文字、白縁付きの装飾書体にする - 対になる2部門は緑と赤で色分けする - 過去回などの外部リンクは焦げ茶の面のボタンに白文字 - 本文は黒、ラベル列だけ朱赤の太字にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの開催日・会場など帯上の大見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 28px | 1.3 | 0.02em | | `headline-lg` | セクション見出し（イベント紹介など） | 装飾・ディスプレイ | Dela Gothic One | 400 | 26px | 1.3 | 0.05em | | `headline-md` | 部門カードの見出し（白抜き筆文字風） | 手書き・筆 | Yuji Syuku | 700 | 28px | 1.3 | 0.05em | | `headline-sm` | 概要・アクセスなどの小見出し | ゴシック | Zen Kaku Gothic New | 900 | 20px | 1.4 | 0.05em | | `body-md` | 本文・表の内容 | ゴシック | Noto Sans JP | 400 | 14px | 1.75 | 0.0em | | `note` | 注釈・注意事項リスト | ゴシック | Noto Sans JP | 400 | 12px | 1.6 | 0.0em | | `label-button` | リンクボタン・ステップ帯の文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.03em | - 大見出しは極太の装飾書体にして、白や茶の縁取りで立体感を出す - 部門見出しは白抜きの筆文字風にする - 本文はゴシックで行間を広め（1.7〜1.8）にする - 表のラベル列は朱赤の太字で中央揃えにする - 注意事項は黒丸付きの箇条書きで小さめの文字にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。過去回リンクだけ 2 列グリッド - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - 本文ブロックは左右16px程度の余白を取る - 概要は2列の表（ラベル／内容）を横線で区切る - ステップは番号付きの帯を縦に並べ、間に下向き三角を置く - セクション見出しの下に黒い横線を引く（アクセス・問い合わせ） - シェアボタンは見出しを斜線で挟み、その下に丸い枠付きアイコンを中央に置く ## Elevation & Depth - 過去回リンクボタンには薄いドロップシャドウを付ける - カードは影を使わず、3px程度の色付き枠線で囲む - それ以外はフラットにする ## Shapes - **角丸**: 小 4px ／ 中 6px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: FVは横長の一枚イラスト。カードのアイコンは円形の白抜き - **セクション境界**: 金の青海波の上に丼のふちのような朱赤の弧を重ねる。部門カード内は見出し帯の下辺を弧形にする - ボタンは角丸4〜6pxの長方形にする - 部門カードは色付き枠線、上部の柄入り帯の下辺を弧形にする - リボン型の見出し帯は両端を折り返した形にする - 番号は丼型の白い枠に入れる ## Components - **リボン見出し帯**（`ribbon-heading`）: 朱赤の帯の両端を折り返した形。黄色の装飾書体で2行の見出しを載せる - **部門カード**（`category-card`）: 上部は青海波柄入りの色帯で下辺を弧形にし、白抜き筆文字の見出しを置く。上端中央に円形アイコンを重ね、本文は白地 - **ステップ帯**（`step-bar`）: 市松柄入りの朱赤の帯に黄色の太字。左に丼型の番号枠、ステップ間に黄緑の三角 - **過去回リンクボタン**（`button-link`）: 焦げ茶の面に白い太字、右に外部リンクアイコン。2列に並べる - **開催概要表**（`info-table`）: 上に朱赤の線を引き、ラベルは朱赤の太字、行は淡い線で区切る - **シェアボタン**（`share-block`）: 斜線で挟んだ小見出しと、丸い枠付きのSNSアイコン - **ページトップボタン**（`page-top`）: 右下に固定する朱赤の小さな角丸四角、白文字2行 ## Do's and Don'ts **Do** - 朱赤・金黄・焦げ茶・生成りの4色を軸にする - 和柄（青海波・市松）を帯や区切りにだけ使う - 見出しは極太の装飾書体で祭りらしい勢いを出す - セクションごとに地の色を変えてリズムを作る - 日時・会場など重要な情報は表にまとめる **Don't** - 寒色や彩度の低いくすみ色を主役にしない - 本文に装飾書体を使わない - 大きな角丸やピル型ボタンで洋風・ポップ過ぎにしない - 和柄を本文の背景に敷いて読みにくくしない - 影やグラデーションを多用しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ナビゲーション）: 焦げ茶の細い帯。右端にハンバーガーメニュー 2. **ファーストビュー**（イベント名と開催決定を告知する）: 金の市松を地にイラストを敷き、中央に円形ロゴ、左右に縦書きコピー。下部は朱赤の市松帯に開催日・会場を黄色の極太文字で載せる 3. **開催概要**（日時・会場・料金を伝える）: 生成り地に朱赤の見出しと2列の表。最後にシェアボタン 4. **和柄の区切り**（場面転換）: 金の青海波に朱赤の弧を重ねる 5. **イベント紹介**（趣旨を説明する）: 金黄地に朱赤の装飾見出しと本文 6. **部門紹介**（2つの部門を説明する）: 緑と赤の部門カードを縦に並べる（PCは横並び） 7. **投票の流れ**（参加方法を示す）: リボン見出しの下の白い枠に、4つのステップ帯と矢印を並べる 8. **過去回リンク**（過去の実績を見せる）: 焦げ茶ボタンを2列×3段に並べる 9. **アクセス**（会場への行き方を案内する）: 白地に見出しと黒い下線、地図の埋め込み、路線ごとの説明を淡い線で区切る 10. **注意事項**（ルールを周知する）: 警告アイコン付きの見出しと小さめ文字の箇条書き 11. **お問い合わせ**（連絡先と個人情報の扱いを示す）: 生成り地に大きなメールアドレスと注記 12. **フッター**（シェアと主催者の表記）: 焦げ茶地に白のシェアボタンと主催者名 ## Imagery - FVは浮世絵風の手描きイラスト。麺を大波に見立てた構図など、題材を和の情景で誇張して描く - 金箔の市松や青海波を地紋として敷く - ロゴは電飾看板風の立体文字にし、王冠や月桂樹で格を出す - アイコンは円の中に料理をシンプルに描く - 写真はほとんど使わず、イラストと柄で構成する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央に約1000pxのコンテンツ幅を取り、左右の余白は焦げ茶や淡い生成りで埋める - PCのヘッダーは焦げ茶の横並びメニューにし、項目を縦線で区切る - 部門カードはPCで2列にする - ステップ帯はPCで中央寄せの幅狭にする - PCのFVは開催日帯を1行にまとめる ## 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-900f316e`（元 LP の URL から採番） - **元 LP**: https://promotion.nippon-access.co.jp/event/kanmengp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。