--- version: alpha name: Sunset Gradient Beer Garden Event LP description: 左右の外枠が水色から夕焼けを経て夜の紺へ移る縦長のイベント LP。中央は白と生成りのカード状の帯で、波形の区切りと手書き風の丸ゴシックでゆるく親しみのある印象にしている。プランごとに地の色と見出し色を変え、CTA は青と黄のピル型ボタン。 colors: primary: '#36A6CD' background: '#FFFFFF' background-alt: '#F9F4E9' cta: '#EDBE01' on-cta: '#FFFFFF' secondary: '#70A6A7' surface: '#E6EFEE' tint-1: '#E0E4D4' tint-2: '#EDEBDB' accent-1: '#5A7E51' accent-2: '#B08A4A' accent-3: '#A8202A' dark-section: '#5D3F4B' text-body: '#4A4A4A' line: '#D7CFDE' on-dark: '#FDF5FA' primary-accessible: '#277E9C' cta-accessible: '#8F7301' accent-1-accessible: '#57794E' accent-2-accessible: '#896B39' typography: display: fontFamily: Yomogi fontSize: 64px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Zen Maru Gothic fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em headline-md: fontFamily: Zen Maru Gothic fontSize: 21px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.12em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em body-lg: fontFamily: Zen Maru Gothic fontSize: 15px fontWeight: 700 lineHeight: 2.0 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.05em accent: fontFamily: Comfortaa fontSize: 20px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.2em label-button: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.03em rounded: sm: 8px md: 20px lg: 40px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 50px button-tel: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 50px plan-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 900px heading-wave: textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 60px label-pill: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 24px coupon-ticket: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 140px line-label: backgroundColor: '{colors.background-alt}' textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 32px faq-bar: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 46px --- # DESIGN.md — 夕焼けグラデの船上ビアガーデン LP（Sunset Gradient Beer Garden Event LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: 親しみ・手作り感、やさしい・柔らかい、ポップ・元気、ナチュラル - **キーワード**: 夏のイベント・空の時間変化・波形の区切り・手書き風・ビールジョッキのFV・セクションごとの色替え - **地の質感**: フラットな単色の面が中心。FV だけ水彩風の泡とビールの粒子感を入れる - **形**: 大きな角丸のカード、ピル型ボタン、波形のセクション境界、手書きの波線 - **温度感**: 暖かい。スクロールに合わせて昼の爽やかさから夜の落ち着きへ移る ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#36A6CD` | 外枠の空色・Web予約ボタン | 6% | 画素の実測 | | `background` | `#FFFFFF` | 中央コンテンツの白地 | 22% | 画素の実測 | | `background-alt` | `#F9F4E9` | 生成りの導入・メニュー地 | 16% | 画素の実測 | | `cta` | `#EDBE01` | 電話予約ボタン | 3% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `secondary` | `#70A6A7` | 導入文・見出しの青緑 | 1% | 画素の実測 | | `surface` | `#E6EFEE` | スタンダードプランのカード地 | 6% | 画素の実測 | | `tint-1` | `#E0E4D4` | レストランプランのカード地 | 6% | 画素の実測 | | `tint-2` | `#EDEBDB` | 洋室プランのカード地 | 5% | 画素の実測 | | `accent-1` | `#5A7E51` | 緑系の見出し・ラベル | 0% | 画素の実測 | | `accent-2` | `#B08A4A` | 金茶の見出し・罫線 | 1% | 推定 | | `accent-3` | `#A8202A` | 禁止事項の赤 | 0% | 推定 | | `dark-section` | `#5D3F4B` | FAQバー・夜の紺 | 4% | 画素の実測 | | `text-body` | `#4A4A4A` | 本文グレー | 1% | 推定 | | `line` | `#D7CFDE` | アクセスの薄紫の地 | 4% | 画素の実測 | | `on-dark` | `#FDF5FA` | 夜の帯・FAQ上の白文字 | 0% | 画素の実測 | | `primary-accessible` | `#277E9C` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#8F7301` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#57794E` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#896B39` | AA を満たす補正値（計算） | | 計算 | - 左右の外枠は水色→緑→金→茶→紺の縦グラデーションにして、時間の流れを表す - 中央の帯は白と生成りを交互に使い、波形で区切る - プランのカードは淡い青緑・オリーブ・ベージュに分け、見出しの色も合わせる - 主 CTA は Web を青、電話を黄にして役割で色を分ける - 下へ行くほど見出しの色を茶・ワイン・紺へと暗くする - 警告だけ赤を使う - `button-primary` は文字 `#FFFFFF` × 背景 `#36A6CD` のコントラスト比が 2.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#277E9C`、4.61:1）を使う。 - `button-tel` は文字 `#FFFFFF` × 背景 `#EDBE01` のコントラスト比が 1.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#8F7301`、4.54:1）を使う。 - `label-pill` は文字 `#FDF5FA` × 背景 `#5A7E51` のコントラスト比が 4.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#57794E`、4.62:1）を使う。 - `coupon-ticket` は文字 `#36A6CD` × 背景 `#FFFFFF` のコントラスト比が 2.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#277E9C`、4.61:1）を使う。 - `line-label` は文字 `#B08A4A` × 背景 `#F9F4E9` のコントラスト比が 2.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#896B39`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のイベントロゴ | 手書き・筆 | Yomogi | 700 | 64px | 1.1 | 0.02em | | `headline-lg` | セクション見出し | 丸ゴシック | Zen Maru Gothic | 700 | 24px | 1.4 | 0.1em | | `headline-md` | プラン名・導入キャッチ | 丸ゴシック | Zen Maru Gothic | 700 | 21px | 1.5 | 0.12em | | `headline-sm` | 料金の数字 | ゴシック | Zen Kaku Gothic New | 700 | 26px | 1.3 | 0.02em | | `body-lg` | 導入の本文（点線の罫付き） | 丸ゴシック | Zen Maru Gothic | 700 | 15px | 2.0 | 0.08em | | `body-md` | 一般本文・メニュー | ゴシック | Noto Sans JP | 500 | 12px | 1.8 | 0.05em | | `accent` | 弧を描く欧文のセクションラベル | 欧文サンセリフ | Comfortaa | 500 | 20px | 1.2 | 0.2em | | `label-button` | ボタン文字 | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.2 | 0.03em | - 見出しは丸ゴシックの太字で字間を広めにとり、中央に揃える - 見出しの下に手書きの波線を添える - 料金は数字だけを大きくし、円や補足は小さくする - 注釈は ※ を付けて 11px 前後のグレーで書く - 欧文ラベルは弧に沿って配置してもよい - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。メニューは 2〜3 列のテキストグリッドにする - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 左右 12px ほど外枠のグラデーションを見せ、中央帯を浮かせる - プランのカードは画面幅の約 85% にして、大きな角丸にする - CTA は白い角丸の箱に入れ、上に予約の案内文を置く - メニューは下線だけで区切る - 見出しは上下に余白を十分とる ## Elevation & Depth - 基本はフラットにする - お知らせカードだけに柔らかい影（0 4px 12px rgba(0,0,0,.1)）を付ける - ボタンに影は付けない ## Shapes - **角丸**: 小 8px ／ 中 20px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸 20px の長方形。導入部は不定形の雲のような形に切り抜く - **セクション境界**: 波形・雲形の曲線、または小さな波が連続するスカラップ - プランのカードは角丸 40px 前後にする - 見出しラベルは罫線の中央に置いたピル型の枠にする - FAQ はピル型の濃色バーにする - クーポンはチケット形（左右に切り欠き）にする ## Components - **Web予約ボタン**（`button-primary`）: 青のピル型ボタン。アイコンとメイン文言の下に小さく補足を入れ、右端に丸い矢印を付ける - **電話予約ボタン**（`button-tel`）: 黄のピル型ボタン。受付時間と電話番号を 2 段で入れる - **プランカード**（`plan-card`）: 淡い色の大きな角丸カード。上から線画アイコン、プラン名、ラベル、料金、写真、CTA の箱の順に並べる - **波線付き見出し**（`heading-wave`）: 中央揃えの丸ゴシック見出しの下に、手書きの波線を置く - **条件ラベル**（`label-pill`）: 見出し色で塗った小さなピル型ラベルに白文字を入れる - **特典チケット**（`coupon-ticket`）: 白地に点線の枠を引いたチケット形。割引率を大きな数字で見せ、角に丸バッジを付ける - **罫線中央ラベル**（`line-label`）: 横罫の中央に、枠線だけのピル型ラベルを置く - **FAQアコーディオン**（`faq-bar`）: 濃いワイン色のピル型バーに、白の丸点・質問カテゴリ・右端の＋を並べる ## Do's and Don'ts **Do** - 外枠のグラデーションで時間の流れを表す - セクションの境目は波形でやわらかく区切る - プランごとに色を分けて見分けやすくする - CTA を各プランの直後に繰り返し置く - 線画アイコンと手書きの波線でゆるさを出す **Don't** - 角の立った四角いボタンや直線の区切りを使わない - 原色の大きな面を本文の背景にしない - 明朝体を使わない（親しみが崩れる） - 強い影やグラデーションのボタンを使わない - 見出しの色を全セクションで同じにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（イベントの世界観、日程、時間を伝える）: 空色の背景に、ビールジョッキ型の水彩イラストを全面に置く。上に船のイラスト、中央に手書きのロゴと日時、下に特典チケット 2. **導入・概要**（開催の内容と魅力を伝える）: 生成りの地に小見出しと大キャッチを置き、雲形に切り抜いた写真と点線の罫付き本文を続ける 3. **お知らせ**（最新情報を出す）: タブ付きの白い角丸カードにする 4. **料金・プラン**（プランと料金を比べてもらう）: 色違いのプランカードを 3 枚縦に並べ、それぞれに写真と CTA を入れる 5. **ドリンク・フードメニュー**（飲食の内容と価格を見せる）: 弧を描く欧文ラベルと見出しの下に、下線区切りのテキストグリッドと角丸の写真を置く 6. **事前予約メニュー**（追加注文を促す）: 角丸の枠線ボックスにして、記号付きの価格リストを並べる 7. **館内マップ**（フロアの案内）: 凡例アイコンを並べ、階ごとに丸ラベルと線画のフロア図を置く 8. **よくある質問**（不安を解消する）: 淡いピンクの地に、濃色のピル型アコーディオンを並べる 9. **アクセス**（場所と行き方を伝える）: 薄紫の地に住所、ルートのリンク、地図の埋め込みを置く 10. **禁止事項・フッター**（注意喚起と運営者の情報）: グレーのカードに赤いアイコンを 2 列で並べる。最後は白カードに SNS とロゴを入れ、夜空の紺の地で締める ## Imagery - FV は水彩風のビールと泡のイラスト。泡は白い粒子を散らして表す - 料理と席の写真は明るく実写のまま使い、角丸で切り抜く - アイコンは単色の線画（ジョッキ・テーブルなど）にする - マスコットのような手描きキャラクターに吹き出しで一言添える - 最下部の背景は夜空に小さな光の点を散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 画像はない。PC では外枠のグラデーションを背景全体に広げ、中央帯は最大幅 480〜600px に固定することを勧める - PC ではプランカードを横並びにせず、中央の帯の中で縦に並べるのを基本にする - メニューのグリッドは PC で 3〜4 列に増やしてもよい - FV のジョッキイラストは中央に固定し、左右に空色の余白をとる ## 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-11d7af4a`（元 LP の URL から採番） - **元 LP**: https://www.tokaikisen.co.jp/salbeer/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（12/16 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。