生成り×焦茶×黄の和風酒イベント LP

Autumn Washi Sake Festival Event LP

生成りと淡い黄の地に、焦茶の箱型見出しと赤いピル CTA を合わせた和風の酒イベント告知 LP。青海波の地紋と蔵の写真グリッドで、親しみやすさと情報量を両立している。

酒類和風情報量多め・訴求型親しみ・手作り感ナチュラルPC

ダウンロード

Claude Code なら、プロジェクト直下に置いて CLAUDE.md に @DESIGN.md と書くだけで読み込まれます（ツール別の使い方）。

COLORS

配色

地は白・生成り・黄・ミント・桃をセクションごとに切り替えて区切る
見出しは焦茶の箱に白文字で統一する
購入 CTA だけを赤いピルにして浮かせる
注意事項や重要な文は赤文字で一行だけ強調する
出展カテゴリ見出しは藍色にして、写真グリッドの中で目印にする
黄の地には白いカードや白い表を載せて読みやすくする

TYPOGRAPHY

書体

displayFV の大会名・日付装飾・ディスプレイ／ Dela Gothic One 700 ／ 34px ／行間 1.1

あなたの LP を、もっと伝わる形に。Aa 123

headline-lg出展一覧などの大見出しゴシック／ Zen Kaku Gothic New 700 ／ 24px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

headline-md焦茶の箱見出しゴシック／ Zen Kaku Gothic New 700 ／ 18px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

headline-sm日時・会場など小見出しゴシック／ Noto Sans JP 700 ／ 17px ／行間 1.5

あなたの LP を、もっと伝わる形に。Aa 123

body-md中央揃えの説明文ゴシック／ Noto Sans JP 500 ／ 14px ／行間 1.9

あなたの LP を、もっと伝わる形に。Aa 123

note※注釈・お知らせの日付ゴシック／ Noto Sans JP 400 ／ 11px ／行間 1.6

あなたの LP を、もっと伝わる形に。Aa 123

accent見出し下の英字サブタイトル欧文サンセリフ／ Montserrat 500 ／ 13px ／行間 1.4

あなたの LP を、もっと伝わる形に。Aa 123

label-buttonCTA・送信ボタンの文字ゴシック／ Noto Sans JP 700 ／ 15px ／行間 1.2

あなたの LP を、もっと伝わる形に。Aa 123

説明文は中央揃えで短く改行する
見出しの字間は 0.1em 以上あけて和の落ち着きを出す
日付と時間は太字にして本文より大きくする
英字サブタイトルを和文見出しの下に小さく添える
注釈は※から始めて小さくする

PAGE STRUCTURE

セクション構成

ファーストビューイベント名と開催日を伝える焦茶帯のキャッチ、イチョウと和柄のイラストに大きな日付
日時・会場開催情報をまとめる生成り地に 2 列、中央に縦線。小見出しは焦茶の箱
購入帯最初の購入導線焦茶の全幅帯に白い下線リンク
お知らせ最新情報を伝える黄の地に白と淡黄の交互リスト
イベント紹介趣旨と概要を説明する枠付きの生成りカードにロゴと中央揃えの文
見どころ試飲と販売の楽しみ方を見せる線上のラベル見出し、写真 2 枚と説明文
参加方法チケット購入を促す赤文字の注意文、赤いピル CTA、2 列表、若草色ボタン
出展一覧参加する蔵元を見せるミント地に藍色カテゴリ見出しと写真グリッド
ステージ・サービス出演者と飲食サービスを紹介する青海波の地紋に日付ごとの出演者カード
会場アクセス行き方を伝える黄の地に赤い会場名と地図の埋め込み
チケット・注意事項購入とルールを確認させるCTA と表、箇条書きの注意、動画
SNS・問い合わせフォローと問い合わせを受け付けるSNS アイコン 4 つ、クリーム地のフォーム、連絡先ボックス
主催・協力・フッター信頼を示す白地にロゴを並べ、灰地のフッターに関連ロゴ

COMPONENTS

部品

焦茶の箱見出し heading-box焦茶の長方形に白文字で中央に置く見出し
チケット購入ボタン button-primary赤のピル型で横幅は 70% 程度
海外向け案内ボタン button-foreign若草色の幅広ボタンを 2 行で組む
アクセス等のサブボタン button-outline細い焦茶枠の四角ボタン
料金・時間の 2 列表 ticket-table焦茶ヘッダ＋白セル、茶系の枠線
お知らせ一覧 news-list日付と茶色のリンク文を白と淡黄の行で交互に並べる
蔵元写真カード brewery-card外観写真の下に藍色ラベルで地域と蔵名を入れる
出演者カード guest-card左上にピンクの役割ラベル、右に人物写真の横長カード
問い合わせフォーム contact-form線枠の入力欄と焦茶の全幅送信ボタン
追従購入タブ floating-ticket右下に固定する縦長の赤いチケット型タブ

守ること

セクションごとに地の色を変えてリズムを作る
見出しは必ず焦茶の箱で統一する
購入導線をページ内に 2 回以上置き、追従タブも付ける
日時・会場・料金は表や太字で一目でわかるようにする
和柄地紋は白く薄くして文字の邪魔をしない

DON'T

避けること

CTA 以外に赤い面を多用しない
見出し箱を角丸やグラデーションにしない
黒一色の重い地を広く使わない
写真カードの縦横比をばらばらにしない
長文を左右いっぱいに組まない

DESIGN.MD

design.md 全文

読みやすい形で表示する

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 独自の章。上から順に、カッコ内が各セクションの役割。

ファーストビュー（イベント名と開催日を伝える）: 焦茶帯のキャッチ、イチョウと和柄のイラストに大きな日付
日時・会場（開催情報をまとめる）: 生成り地に 2 列、中央に縦線。小見出しは焦茶の箱
購入帯（最初の購入導線）: 焦茶の全幅帯に白い下線リンク
お知らせ（最新情報を伝える）: 黄の地に白と淡黄の交互リスト
イベント紹介（趣旨と概要を説明する）: 枠付きの生成りカードにロゴと中央揃えの文
見どころ（試飲と販売の楽しみ方を見せる）: 線上のラベル見出し、写真 2 枚と説明文
参加方法（チケット購入を促す）: 赤文字の注意文、赤いピル CTA、2 列表、若草色ボタン
出展一覧（参加する蔵元を見せる）: ミント地に藍色カテゴリ見出しと写真グリッド
ステージ・サービス（出演者と飲食サービスを紹介する）: 青海波の地紋に日付ごとの出演者カード
会場アクセス（行き方を伝える）: 黄の地に赤い会場名と地図の埋め込み
チケット・注意事項（購入とルールを確認させる）: CTA と表、箇条書きの注意、動画
SNS・問い合わせ（フォローと問い合わせを受け付ける）: SNS アイコン 4 つ、クリーム地のフォーム、連絡先ボックス
主催・協力・フッター（信頼を示す）: 白地にロゴを並べ、灰地のフッターに関連ロゴ

Imagery

イチョウ・紅葉・麻の葉など秋の和柄をイラストで重ねる
和装の女性キャラクターを柔らかなタッチで描く
蔵元は昼の外観写真をそろった横長で撮る
試飲の写真は手元と瓶に寄った明るい会場写真にする
とっくりと盃のモノクロ写真をセクション下に薄く敷く
青海波の白い地紋を生成り地に置く
元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

PC は本文幅 85% 前後で中央寄せ。SP は 90% にする
蔵元グリッドは PC 4 列、SP 2 列にする
日時・会場の 2 列は SP では縦に並べる
出演者カードは PC 3 列、SP 1 列にする
地図と住所は PC 横並び、SP 縦並びにする
追従購入タブは 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 行書くと起動時に読み込まれる。

---
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/）からご連絡ください。

SOURCE

出典と注意

元の LP: https://sakefes.com/osaka12/（公開状況により表示できない場合があります）
この design.md は、公開されている LP の見た目を独自に分析した非公式の資料です。元 LP の運営企業・制作会社とは関係ありません。
元 LP のロゴ・写真・イラスト・文章・商品名は含みません。生成する LP でも使わず、自社の素材に置き換えてください。
色は画像の画素から実測した値、書体・サイズ・余白は画像からの推定です。
元 LP の権利者の方は、掲載の削除依頼からご連絡ください。受付から 24 時間以内に非公開にします。

似た LP の design.md

酒類炎と赤黒の激辛ビール系 LPFiery Red Spicy Beverage LP 酒類朱赤と金の和柄な正月福袋酒類 LPFestive New Year Red & Gold Lucky Bag LP 酒類青空ブルー×泡白の爽快ビール LPComfort Blue Refreshing Beer Brand LP 酒類赤×金×白の斜体で攻める新発売ビール LPBold Red and Gold Beer Launch LP 酒類レモン黄×木目×黒帯の居酒屋風酒類LPIzakaya Wood and Lemon Yellow Pop Drink LP 酒類漆黒×金の帯見出しで魅せるビール LPBlack and Gold Premium Beer LP