--- version: alpha name: Navy and Gold Winter Sake Festival LP description: 深い紺色と山吹色を軸に、雪景色の写真と明朝の縦組みで和の冬らしさを出した試飲イベント告知 LP。中央に細い白い本文カラム、外側は生成りの地。見出しは淡い黄色の帯で揃え、紺の四角アイコン付きの特長カードと、黄色のピル型 CTA で申込に誘導する。 colors: primary: '#0D1254' background: '#F6F2E7' surface: '#FFFFFF' cta: '#FDC334' on-cta: '#0D124B' tint-1: '#F9DD9C' background-alt: '#F6F2E7' tint-2: '#EFF4F8' secondary: '#F9D279' text: '#2B2B33' text-muted: '#6E6A66' accent-1: '#C0141E' line: '#E4E1DA' dark-section: '#222222' on-dark: '#FFFFFF' typography: display: fontFamily: Shippori Mincho fontSize: 56px fontWeight: 800 lineHeight: 1.1 letterSpacing: 0.05em headline-lg: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.1em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.03em accent: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 600 lineHeight: 2.0 letterSpacing: 0.15em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px button-outline-sm: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 24px heading-band: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 44px date-block: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 720px info-box: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 200px feature-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 340px price-band: backgroundColor: '{colors.cta}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 110px list-row: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 56px badge-circle: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 90px --- # DESIGN.md — 紺×山吹の冬の日本酒イベント LP（Navy and Gold Winter Sake Festival LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: 和風、上品・高級、信頼・誠実、情報量多め・訴求型 - **キーワード**: 紺と山吹・雪景色・縦組み明朝・中央細カラム・黄色帯見出し・情報整理 - **地の質感**: 雪の粒が舞う白銀の写真と、紺地に散る白い粒子。それ以外の面はフラットな単色。 - **形**: 角丸小さめのカード、ピル型ボタン、紺の正方形アイコン。左端に紺の縦線が入った黄色の帯見出し。 - **温度感**: 冷たい冬の紺と白に、温かみのある山吹と生成りを合わせた落ち着いた中間の温度。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0D1254` | ブランド紺・日付ブロック・アイコン | 7% | 画素の実測 | | `background` | `#F6F2E7` | ページ外側の生成り地 | 45% | 画素の実測 | | `surface` | `#FFFFFF` | 本文カラムの白地 | 20% | 画素の主要色に補正 | | `cta` | `#FDC334` | 主 CTA ボタン・チケット帯 | 2% | 画素の実測 | | `on-cta` | `#0D124B` | CTA 上の文字 | 0% | 画素の主要色に補正 | | `tint-1` | `#F9DD9C` | 見出し帯の淡黄 | 2% | 画素の実測 | | `background-alt` | `#F6F2E7` | 特長カード・酒蔵リスト地のベージュ | 3% | 画素の実測 | | `tint-2` | `#EFF4F8` | 酒蔵リストの交互の水色グレー地 | 5% | 画素の実測 | | `secondary` | `#F9D279` | 日付下の金色見出し文字 | 0% | 画素の主要色に補正 | | `text` | `#2B2B33` | 見出し・本文の濃い文字 | 2% | 推定 | | `text-muted` | `#6E6A66` | 補足文のグレー | 1% | 推定 | | `accent-1` | `#C0141E` | 重要告知の赤文字 | 0% | 推定 | | `line` | `#E4E1DA` | 表・リストの罫線 | 1% | 画素の主要色に補正 | | `dark-section` | `#222222` | フッター地 | 1% | 画素の実測 | | `on-dark` | `#FFFFFF` | 紺・黒地の上の白文字 | 1% | 画素の主要色に補正 | - 外側は生成り、内側の本文は白い細いカラムの二層で組む - 紺は日付ブロック、開催概要の箱、会場図、アイコンに使い、ブランドの面として使う - 山吹は CTA ボタンとチケット価格帯だけに絞る - セクション見出しは淡黄の帯に紺の縦線を添えて統一する - リストカードはベージュと水色グレーを交互に置き、地域ごとの区切りを見せる - 赤文字は完売・制限などの重要告知に限る ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の縦組みイベント名 | 明朝 | Shippori Mincho | 800 | 56px | 1.1 | 0.05em | | `headline-lg` | 紺地の開催日 | 明朝 | Shippori Mincho | 700 | 30px | 1.3 | 0.1em | | `headline-md` | 黄色帯のセクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.4 | 0.05em | | `headline-sm` | 特長カードの見出し・リスト名 | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.03em | | `body-md` | 本文・説明 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.05em | | `note` | 注釈・写真キャプション | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.03em | | `accent` | 酒蔵名の一覧・キャッチの縦書き | 明朝 | Noto Serif JP | 600 | 15px | 2.0 | 0.15em | | `label-button` | CTA ボタン文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.05em | - FV と日付まわりは明朝、情報部分はゴシックで役割を分ける - FV のキャッチは縦組みにして和の印象を出す - 酒蔵一覧は字間を広げた明朝を均等割で 2 列に揃える - 本文は中央揃え・行間広めで短く改行する - 価格は大きな太字の数字にし、税込表記は小さく添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。酒蔵名一覧と料理写真は 2 列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - PC でも約 640px の細いカラムを中央に置く - セクションは黄色帯の見出しから始める - 特長は縦に並べたカードで、アイコン・見出し・本文の順に中央揃え - メニューは左に品名と説明、右に必要チケット枚数を置き、罫線で区切る - CTA はチケット情報の後と最後に繰り返す ## Elevation & Depth - カードと酒蔵リスト行には薄い影をつけ、地からわずかに浮かせる - CTA ボタンには下方向にやや濃い影をつけて押せる見た目にする - 注意事項の白い箱は外周に柔らかい影をつける ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 角丸 8px の長方形。料理は黒背景の正方形に近い形 - **セクション境界**: 直線で区切り、帯見出しで区切りを示す - 公式サイトへのリンクは紺枠の小さいピル型 - アイコンは紺の角丸正方形に白い線画 - 見出し帯の左端に紺の太い縦線を入れる ## Components - **山吹ピル CTA**（`button-primary`）: チケット購入・予約用の黄色いピル型ボタン。紺の太字 - **公式サイト小ボタン**（`button-outline-sm`）: 白地に紺の枠線がある小さいピル型 - **黄色帯見出し**（`heading-band`）: 淡黄の横帯に左の紺縦線と太字ゴシック - **紺の日付・出展者ブロック**（`date-block`）: 紺地に雪の粒、白い明朝で日付、金色の小見出しと 2 列の名前一覧 - **開催概要ボックス**（`info-box`）: 紺の角丸箱に、■ 付きの日時・会場などを白文字で並べる - **アイコン付き特長カード**（`feature-card`）: ベージュ地。紺の正方形アイコン、太字の 2 行見出し、グレーの説明文 - **チケット価格帯**（`price-band`）: 写真の下に山吹の帯。大きな価格と、角を落としたバッジ。下に紺の補足帯 - **出展者リスト行**（`list-row`）: 白い行に地域名付きの名前と小さい補足。右端に小ボタン - **白丸の数量バッジ**（`badge-circle`）: FV 上の白い円に大きな数字と短い語 ## Do's and Don'ts **Do** - 紺・山吹・生成りの 3 色を軸にする - セクション見出しは必ず黄色帯の型で揃える - FV は雪や冬らしい写真に縦組みの明朝を重ねる - 料金や注意点は表と赤文字で正確に整理する - CTA は黄色のピル型だけを使う **Don't** - 山吹を本文の地や装飾に広く使わない - ポップな丸ゴシックや原色の差し色を入れない - 本文カラムを画面いっぱいに広げない - 紺の面にグラデーションや派手な光の効果を足さない - 赤文字を告知以外の強調に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（イベント名と規模を一目で伝える）: 雪景色の写真に縦組みの明朝タイトル、数量の丸バッジ、黄色の縦帯、花の和装飾 2. **事業ラベル・サブコピー**（主催の位置づけを示す）: 紺の細い帯の下に、字間を広げた明朝で 1 行 3. **開催日と出展者一覧**（日付と出展者の数で魅力を見せる）: 紺地に大きな日付、金の小見出し、2 列の名前一覧 4. **開催概要**（日時・会場・主催を伝える）: 紺の角丸ボックスに箇条書き。下に中央揃えの導入文 5. **チケット価格**（価格と内容を訴求する）: 商品写真の下に山吹の価格帯と紺の補足帯 6. **会場案内図**（ブースの配置を示す）: 紺の枠に黄色の番号ブロックを並べた図 7. **チケット情報**（販売状況と購入方法を伝える）: 赤字の告知、中央揃えの説明、料金表、黄色 CTA 8. **魅力・特長**（参加する理由を 4 つ示す）: アイコン付きのベージュカードを縦に 4 枚。宿泊予約の CTA も入れる 9. **出展者一覧**（地域ごとの出展者を案内する）: 地域ごとのグループカードを 2 色交互にし、行ごとに公式サイトボタン 10. **フード・メニュー**（食の楽しみを伝える）: 大きな料理写真、品名と必要枚数の罫線リスト、2×2 の写真グリッド 11. **チケット情報（再掲）と注意事項**（購入を促し、ルールを伝える）: 料金表と CTA を繰り返す。白い影付き箱に紺の丸付き箇条書き 12. **アクセス・フッター**（会場の場所と主催を示す）: 中央揃えの住所、埋め込み地図、濃いグレーのフッター ## Imagery - FV は白い雪原に雪が舞う写真と、透明な酒器のクローズアップ - 商品写真は升とグラス、稲穂など、和の素材を暖色の光で撮る - 料理は黒背景で器ごと上から斜めに撮り、つやを出す - アイコンは紺の正方形に白い線画（椅子・おにぎり・瓶・ベッド） - 赤い椿など和の花のイラストを FV にワンポイントで置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元 LP は PC でも約 640px の細いカラムを中央に置き、外側は生成りで埋める - SP では本文カラムを幅 90〜100% に広げ、外側の生成りはなくす - 出展者名の 2 列は SP でも 2 列のまま、文字を 13px 程度に縮める - 料理写真のグリッドは SP でも 2 列 - 会場図は 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-87ed7ae4`（元 LP の URL から採番） - **元 LP**: https://anacrowneplaza-n.sub.jp/fuyusake.html - **解析に使った画像**: PC（PC版） - **確度**: 色 高（7/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。