--- version: alpha name: Izakaya Bold Navy Yellow Beverage Survey LP description: 濃紺と原色イエローを交互に敷き、赤い極太筆文字で数字を見せる調査結果訴求型の飲料LP。後半は和紙調ベージュに切り替え、製法と製品情報を落ち着いて見せる。 colors: primary: '#010154' secondary: '#FFF500' accent-1: '#D7141E' cta: '#C8141E' on-cta: '#FFF3EE' background: '#FFFFFF' background-alt: '#F3E4C3' surface: '#FEFEFA' text: '#39366A' on-dark: '#FFFFFF' marker: '#F7F25A' dark-section: '#ECF4F7' accent-2: '#62B3C3' typography: display: fontFamily: Dela Gothic One fontSize: 56px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Dela Gothic One fontSize: 28px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.3em headline-sm: fontFamily: Shippori Mincho B1 fontSize: 26px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.05em body-lg: fontFamily: M PLUS Rounded 1c fontSize: 14px fontWeight: 800 lineHeight: 1.9 letterSpacing: 0.05em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Shippori Mincho B1 fontSize: 17px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 24px section: 64px 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: 64px button-secondary: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 52px heading-boxed: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 40px badge-label: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 30px stat-card: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.display}' height: 200px speech-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-lg}' height: 110px method-step: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 100px brush-marker-heading: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 60px circle-callout: backgroundColor: '{colors.secondary}' textColor: '{colors.accent-1}' typography: '{typography.body-lg}' rounded: '{rounded.full}' height: 140px --- # DESIGN.md — 紺×黄×赤筆文字の居酒屋風飲料LP（Izakaya Bold Navy Yellow Beverage Survey LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: 力強い・インパクト、情報量多め・訴求型、和風、ポップ・元気 - **キーワード**: 居酒屋ののぼり・調査結果・大きな%・吹き出し・筆文字・和紙 - **地の質感**: 前半はベタ塗りの紺と黄でポスターのよう。後半は和紙調ベージュの紙の質感。 - **形**: 角丸なしの四角い枠、ギザギザした手描き風の吹き出し、円グラフ風の黄色い円、V字に切った境界 - **温度感**: 温かく賑やか。暖色の赤・黄を寒色の紺で締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#010154` | ブランド濃紺の地・枠 | 18% | 画素の実測 | | `secondary` | `#FFF500` | 原色イエローの地 | 11% | 画素の実測 | | `accent-1` | `#D7141E` | 赤い筆文字見出し・数字 | 2% | 推定 | | `cta` | `#C8141E` | 購入ボタンの赤 | 0% | 推定 | | `on-cta` | `#FFF3EE` | 購入ボタン上の文字 | 0% | 画素の実測 | | `background` | `#FFFFFF` | 白の面・カード内部 | 20% | 画素の実測 | | `background-alt` | `#F3E4C3` | 和紙調ベージュの地 | 15% | 画素の実測 | | `surface` | `#FEFEFA` | 考察パネルの生成り | 6% | 画素の実測 | | `text` | `#39366A` | 紺の見出し・本文 | 3% | 画素の実測 | | `on-dark` | `#FFFFFF` | 紺地上の白文字 | 1% | 画素の主要色に補正 | | `marker` | `#F7F25A` | 強調の黄色マーカー | 0% | 画素の主要色に補正 | | `dark-section` | `#ECF4F7` | フッター淡い水色 | 7% | 画素の実測 | | `accent-2` | `#62B3C3` | ヘッダーロゴの水色 | 0% | 画素の実測 | - 前半は紺→黄→紺と地色を交互に切り替え、テンポを作る - 数字や結論は赤の筆文字で書き、白か黄の縁取りを付ける - 黄の地の上の見出しは白い帯に紺の文字を載せ、紺の枠で囲む - 後半の製法・製品パートは和紙ベージュの地に紺文字で落ち着かせる - 本文の強調は赤文字と黄色マーカーの2つに限る - 主CTAだけ赤い面にする。ブランドへの導線は紺のボタンにする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大きな%数字と結論 | 手書き・筆 | Dela Gothic One | 900 | 56px | 1.1 | 0.0em | | `headline-lg` | セクション見出し（赤の筆文字＋白縁取り） | 手書き・筆 | Dela Gothic One | 900 | 28px | 1.3 | 0.02em | | `headline-md` | 白帯の見出し（1文字ずつ枠で区切る） | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.3 | 0.3em | | `headline-sm` | 製法の小見出し（毛筆の明朝） | 明朝 | Shippori Mincho B1 | 800 | 26px | 1.3 | 0.05em | | `body-lg` | 吹き出しや考察の太い本文 | 丸ゴシック | M PLUS Rounded 1c | 800 | 14px | 1.9 | 0.05em | | `body-md` | 製法・製品説明の本文 | 明朝 | Noto Serif JP | 500 | 13px | 1.9 | 0.05em | | `note` | 調査条件の注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `label-button` | ボタンの文字 | 明朝 | Shippori Mincho B1 | 800 | 17px | 1.2 | 0.05em | - インパクトを出す部分は極太の筆系書体を使い、赤字に白か黄で太く縁取る - 数字は周りの文字の約2倍の大きさにする - 製法・製品のパートは明朝系にし、居酒屋らしい和の雰囲気を出す - 本文は中央揃えで、1行15〜20字ずつ短く改行する - 白帯の見出しは字間を広く取り、1文字ずつ区切る - 吹き出しでは要点だけを赤か紺の大きな文字にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。結果カードは横スクロールで並べ、ラインナップは6列の小さい画像にする - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算） - 背景色が変わる位置でセクションを区切る - 考察パネルと製法パネルは太い紺枠で囲み、中は白か生成りにする - 吹き出しは左右交互に大小を混ぜ、ランダムに配置する - セクション見出しは中央揃えにする - 写真は3列×2段のグリッドに隙間なく並べる ## Elevation & Depth - 影はほぼ使わず、太い枠線とベタ塗りで階層を表す - 商品缶の写真にだけ、うっすら落ち影を付ける - 吹き出しは紺の太い線とずらした影線で立体感を出す ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンはピル型。 - **写真の切り抜き**: 商品は切り抜きで見せ、調査風景は四角いグリッド、人物は丸く切り抜く - **セクション境界**: 紺から黄へはV字に切り込んで切り替え、それ以外は直線で切り替える - カードや枠は角丸なしにする - 購入ボタンだけ赤いピル型にし、商品写真を重ねる - 吹き出しはギザギザした手描きの多角形にする - ラインナップへのボタンは紺の長方形に金の二重線を付ける ## Components - **購入ボタン**（`button-primary`）: 赤いピル型に白い明朝の文字と下向き矢印。右端に商品写真がはみ出す - **ブランドページボタン**（`button-secondary`）: 紺の長方形に金の二重線の枠。白文字と右向き矢印 - **区切り文字の帯見出し**（`heading-boxed`）: 白い帯の文字を紺の線で1文字ずつ区切る - **小見出しラベル**（`badge-label`）: 黄か紺の四角に太い文字を詰める - **%結果カード**（`stat-card`）: 紺の円グラフの上に赤い大きな数字。白いカードを紺の太枠で囲む - **口コミ吹き出し**（`speech-bubble`）: 白いギザギザの吹き出しを紺の線で縁取る。丸い人物写真を添え、要点を赤字にする - **製法ステップ図**（`method-step`）: 紺の線の丸アイコンを3つ並べ、間を三角の矢印でつなぐ - **筆マーカー見出し**（`brush-marker-heading`）: 黄色い筆跡の上に紺の明朝見出しを載せ、左上に小さく番号を添える - **黄色い丸の吹き出し**（`circle-callout`）: 黄色い円に赤と紺の短いメッセージを載せる ## Do's and Don'ts **Do** - %などの数字を主役にし、赤い極太の文字に縁取りを付けて大きく見せる - 紺と黄の地を交互に敷き、のぼりのような勢いを出す - 口コミは大小の吹き出しを散らし、にぎやかさを出す - 製品の説明は和紙調の地と明朝体で落ち着かせる - 調査の条件は注釈の小さな文字で必ず添える **Don't** - パステル色や淡いグラデーションは使わない - カードを大きく角丸にしない - 細い欧文書体で見出しを組まない - 赤を多用してCTAの色と見分けにくくしない - 吹き出しを整列させすぎて単調にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（調査結果の数字で引き付ける）: 氷と炭酸の写真の上に、黄色い円グラフと赤い%数字。右に商品缶、下に注釈 2. **検証動画**（調査が本当に行われたことを示す）: 紺の地に赤い筆文字の見出しと動画の埋め込み 3. **検証方法**（調査の条件を説明する）: 黄色いラベルの見出し、白文字の説明、3×2の写真グリッド、白線枠の条件表 4. **結果の評価**（複数の数字で裏付ける）: V字の境界で黄の地に切り替え、帯見出しの下に%カードを横スクロールで並べる 5. **お客様の声**（生の感想で共感を生む）: 黄の地にギザギザの吹き出しを散らし、人物写真を丸く添える 6. **考察**（声をまとめて結論に導く）: 紺の太枠の生成りパネルに、中央揃えの赤と紺の文。マーカーで強調し、問いかけの赤い大見出しで締める 7. **製法の秘密**（おいしさの理由を説明する）: 和紙の地に白い枠パネル。番号付きの筆マーカー見出し、明朝の本文、ステップ図を置く 8. **製品情報**（商品の仕様を示す）: 両側に線を付けた見出し。左に缶と丸い印、右に明朝の商品名と説明 9. **ラインナップ**（シリーズへ誘導する）: 缶を6本横に並べ、紺のブランドボタンを置く 10. **購入CTA**（購入へ導く）: 商品写真を重ねた赤いピル型ボタン 11. **フッター**（企業サイトへの導線と注意表記）: 淡い水色の地にアコーディオン、バナー、SNS、飲酒の注意表記 ## Imagery - 商品の缶は切り抜いて大きく見せ、結露や氷を添えたグラスと組み合わせる - ファーストビューの背景は炭酸と氷のモノクロに近い写真にする - 調査風景は自然光のドキュメンタリー風に撮り、人物の顔を丸く切り抜く - アイコンは紺の線で描いた丸いイラストで、黄色をアクセントにする - 後半の背景は和紙・生成りのむらがある紙の質感にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツ幅を約800pxで中央にまとめ、左右に地色を広げる - 結果カードは PC で3枚を横に並べる - 吹き出しは PC で横に広く散らす - 製法パネルは PC で両脇に商品缶を置く - PC の製品情報には赤い購入ボタンを追加する - 購入ボタンは PC で右下に固定した小さい追従ボタンにする ## 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-603554ab`（元 LP の URL から採番） - **元 LP**: https://www.suntory.co.jp/non-al/sakaba/lp/about/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。