--- version: alpha name: Autumn Washi Sake Festival Event LP description: 生成りと淡い黄の地に、焦茶の箱型見出しと赤いピル CTA を合わせた和風の酒イベント告知 LP。青海波の地紋と蔵の写真グリッドで、親しみやすさと情報量を両立している。 colors: primary: '#562D02' on-primary: '#FFFFFF' background: '#FFFFFF' background-alt: '#F9F7EB' secondary: '#EED57B' tint-1: '#C3DED7' tint-2: '#F8F1D4' cta: '#DA2D2B' on-cta: '#FFFFFF' text: '#3A2A1E' accent-1: '#D9302C' accent-2: '#2E5577' accent-3: '#C4D6A6' marker: '#FFC9C9' line: '#CDB8A4' typography: display: fontFamily: Dela Gothic One fontSize: 34px fontWeight: 700 lineHeight: 1.1 headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.15em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Montserrat fontSize: 13px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 0px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-box: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 40px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px button-foreign: backgroundColor: '{colors.accent-3}' textColor: '{colors.text}' rounded: '{rounded.sm}' height: 64px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' height: 32px ticket-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 120px news-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' height: 28px brewery-card: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-primary}' typography: '{typography.note}' height: 100px guest-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 80px contact-form: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 44px floating-ticket: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 90px --- # DESIGN.md — 生成り×焦茶×黄の和風酒イベント LP（Autumn Washi Sake Festival Event LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: 和風、情報量多め・訴求型、親しみ・手作り感、ナチュラル - **キーワード**: 和柄地紋・焦茶の箱見出し・秋の黄色・蔵元写真グリッド・イベント告知 - **地の質感**: 生成りの紙のような地に、青海波や麻の葉の白い地紋をうっすら敷く - **形**: 角ばった長方形の見出し箱と表組み。CTA だけを赤いピル型にする - **温度感**: 暖色寄り。焦茶と黄で秋の温かさを出し、くすんだミントの地で落ち着かせる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#562D02` | 見出し箱・帯・表ヘッダの焦茶 | 6% | 画素の実測 | | `on-primary` | `#FFFFFF` | 焦茶の上の白文字 | 1% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 22% | 画素の実測 | | `background-alt` | `#F9F7EB` | 生成りのセクション地 | 20% | 画素の実測 | | `secondary` | `#EED57B` | NEWS・アクセスの秋色の黄地 | 8% | 画素の実測 | | `tint-1` | `#C3DED7` | 出展一覧のくすみミント地 | 14% | 画素の実測 | | `tint-2` | `#F8F1D4` | フォーム周りの淡いクリーム地 | 8% | 画素の実測 | | `cta` | `#DA2D2B` | チケット購入の赤いピルボタン | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA 上の白文字 | 0% | 画素の主要色に補正 | | `text` | `#3A2A1E` | 見出し・本文の濃茶寄りの黒 | 3% | 推定 | | `accent-1` | `#D9302C` | 注意文・会場名の赤文字 | 0% | 推定 | | `accent-2` | `#2E5577` | 出展カテゴリ名の藍色見出し・蔵名ラベル | 1% | 推定 | | `accent-3` | `#C4D6A6` | 海外向けチケットの若草色ボタン | 1% | 画素の実測 | | `marker` | `#FFC9C9` | オススメ店舗バナーの桃色帯 | 3% | 画素の実測 | | `line` | `#CDB8A4` | 表枠・入力欄の茶ベージュ線 | 0% | 画素の主要色に補正 | - 地は白・生成り・黄・ミント・桃をセクションごとに切り替えて区切る - 見出しは焦茶の箱に白文字で統一する - 購入 CTA だけを赤いピルにして浮かせる - 注意事項や重要な文は赤文字で一行だけ強調する - 出展カテゴリ見出しは藍色にして、写真グリッドの中で目印にする - 黄の地には白いカードや白い表を載せて読みやすくする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大会名・日付 | 装飾・ディスプレイ | Dela Gothic One | 700 | 34px | 1.1 | 0.0em | | `headline-lg` | 出展一覧などの大見出し | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.4 | 0.1em | | `headline-md` | 焦茶の箱見出し | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.4 | 0.15em | | `headline-sm` | 日時・会場など小見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.02em | | `body-md` | 中央揃えの説明文 | ゴシック | Noto Sans JP | 500 | 14px | 1.9 | 0.05em | | `note` | ※注釈・お知らせの日付 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.03em | | `accent` | 見出し下の英字サブタイトル | 欧文サンセリフ | Montserrat | 500 | 13px | 1.4 | 0.1em | | `label-button` | CTA・送信ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.05em | - 説明文は中央揃えで短く改行する - 見出しの字間は 0.1em 以上あけて和の落ち着きを出す - 日付と時間は太字にして本文より大きくする - 英字サブタイトルを和文見出しの下に小さく添える - 注釈は※から始めて小さくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真グリッドは 2 列、ゲスト紹介は 1〜2 列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - セクションは背景色で全幅に区切る - 見出し箱は中央に置き、下に 24px あける - 表組みは 2 列で、ヘッダは焦茶にする - お知らせ一覧は白と淡い黄の行を交互に並べる - CTA は表の直前に中央配置する ## Elevation & Depth - 影はほぼ使わず、平面で組む - 白カードは細い線か背景差だけで浮かせる - ゲスト紹介カードだけ淡い影を付けてもよい ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 8px。ボタンはピル型。 - **写真の切り抜き**: 蔵の写真は横長の長方形。下に藍色の名前ラベルを付ける - **セクション境界**: 直線の色切り替え。青海波の地紋で境目をなじませる - 見出し箱・表・入力欄は角丸なし - 購入 CTA だけピル型 - サブボタンは細い枠線の四角 - ロゴ周りの円形バッジをアクセントに使う ## Components - **焦茶の箱見出し**（`heading-box`）: 焦茶の長方形に白文字で中央に置く見出し - **チケット購入ボタン**（`button-primary`）: 赤のピル型で横幅は 70% 程度 - **海外向け案内ボタン**（`button-foreign`）: 若草色の幅広ボタンを 2 行で組む - **アクセス等のサブボタン**（`button-outline`）: 細い焦茶枠の四角ボタン - **料金・時間の 2 列表**（`ticket-table`）: 焦茶ヘッダ＋白セル、茶系の枠線 - **お知らせ一覧**（`news-list`）: 日付と茶色のリンク文を白と淡黄の行で交互に並べる - **蔵元写真カード**（`brewery-card`）: 外観写真の下に藍色ラベルで地域と蔵名を入れる - **出演者カード**（`guest-card`）: 左上にピンクの役割ラベル、右に人物写真の横長カード - **問い合わせフォーム**（`contact-form`）: 線枠の入力欄と焦茶の全幅送信ボタン - **追従購入タブ**（`floating-ticket`）: 右下に固定する縦長の赤いチケット型タブ ## Do's and Don'ts **Do** - セクションごとに地の色を変えてリズムを作る - 見出しは必ず焦茶の箱で統一する - 購入導線をページ内に 2 回以上置き、追従タブも付ける - 日時・会場・料金は表や太字で一目でわかるようにする - 和柄地紋は白く薄くして文字の邪魔をしない **Don't** - CTA 以外に赤い面を多用しない - 見出し箱を角丸やグラデーションにしない - 黒一色の重い地を広く使わない - 写真カードの縦横比をばらばらにしない - 長文を左右いっぱいに組まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（イベント名と開催日を伝える）: 焦茶帯のキャッチ、イチョウと和柄のイラストに大きな日付 2. **日時・会場**（開催情報をまとめる）: 生成り地に 2 列、中央に縦線。小見出しは焦茶の箱 3. **購入帯**（最初の購入導線）: 焦茶の全幅帯に白い下線リンク 4. **お知らせ**（最新情報を伝える）: 黄の地に白と淡黄の交互リスト 5. **イベント紹介**（趣旨と概要を説明する）: 枠付きの生成りカードにロゴと中央揃えの文 6. **見どころ**（試飲と販売の楽しみ方を見せる）: 線上のラベル見出し、写真 2 枚と説明文 7. **参加方法**（チケット購入を促す）: 赤文字の注意文、赤いピル CTA、2 列表、若草色ボタン 8. **出展一覧**（参加する蔵元を見せる）: ミント地に藍色カテゴリ見出しと写真グリッド 9. **ステージ・サービス**（出演者と飲食サービスを紹介する）: 青海波の地紋に日付ごとの出演者カード 10. **会場アクセス**（行き方を伝える）: 黄の地に赤い会場名と地図の埋め込み 11. **チケット・注意事項**（購入とルールを確認させる）: CTA と表、箇条書きの注意、動画 12. **SNS・問い合わせ**（フォローと問い合わせを受け付ける）: SNS アイコン 4 つ、クリーム地のフォーム、連絡先ボックス 13. **主催・協力・フッター**（信頼を示す）: 白地にロゴを並べ、灰地のフッターに関連ロゴ ## Imagery - イチョウ・紅葉・麻の葉など秋の和柄をイラストで重ねる - 和装の女性キャラクターを柔らかなタッチで描く - 蔵元は昼の外観写真をそろった横長で撮る - 試飲の写真は手元と瓶に寄った明るい会場写真にする - とっくりと盃のモノクロ写真をセクション下に薄く敷く - 青海波の白い地紋を生成り地に置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は本文幅 85% 前後で中央寄せ。SP は 90% にする - 蔵元グリッドは PC 4 列、SP 2 列にする - 日時・会場の 2 列は SP では縦に並べる - 出演者カードは PC 3 列、SP 1 列にする - 地図と住所は PC 横並び、SP 縦並びにする - 追従購入タブは 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-efbbcf53`（元 LP の URL から採番） - **元 LP**: https://sakefes.com/osaka12/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（9/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。