--- version: alpha name: Izakaya Noren Yellow & Indigo Beverage LP description: 鮮やかな黄色と濃い藍色を軸に、のれん・提灯・木の板・和紙といった居酒屋のモチーフで組んだ飲料ブランドの LP。筆文字の見出しと縦書きの品書き札で、にぎやかな酒場らしさを出している。 colors: primary: '#181878' secondary: '#F7E92E' background: '#FDFDF5' background-alt: '#FFFFFF' surface: '#DBCCBB' text: '#19155F' text-body: '#333333' accent-1: '#D11F31' cta: '#FD7314' on-cta: '#FFFFFF' tint-1: '#DDDDDB' tint-2: '#ECF4F7' dark-section: '#402029' on-dark: '#FFFFFF' cta-accessible: '#C55102' typography: display: fontFamily: Yuji Syuku fontSize: 40px fontWeight: 700 lineHeight: 1.2 headline-lg: fontFamily: Shippori Mincho B1 fontSize: 28px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Shippori Mincho B1 fontSize: 22px fontWeight: 800 lineHeight: 1.35 letterSpacing: 0.03em headline-sm: fontFamily: Shippori Mincho B1 fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-lg: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.15em body-md: fontFamily: Zen Kaku Gothic New fontSize: 12px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em accent: fontFamily: Yuji Boku fontSize: 20px fontWeight: 700 lineHeight: 1.1 note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 rounded: sm: 0px md: 4px lg: 16px full: 999px spacing: unit: 8px card: 24px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' noren-header: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 80px lantern-label: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 72px tanzaku-tag: backgroundColor: '{colors.secondary}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 100px brush-highlight: backgroundColor: '{colors.secondary}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 40px menu-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 130px process-circle: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 72px badge-limited: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 36px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' rounded: '{rounded.sm}' height: 44px news-banner: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' height: 64px --- # DESIGN.md — 黄×藍の居酒屋風ノンアル飲料 LP（Izakaya Noren Yellow & Indigo Beverage LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: 和風、ポップ・元気、力強い・インパクト、親しみ・手作り感 - **キーワード**: 居酒屋・のれん・提灯ラベル・筆文字・黄×藍・和紙 - **地の質感**: 生成りの和紙テクスチャ、木目の板壁、白い布のれんのドレープ、ぼかした店内写真 - **形**: 藍の二重線で囲んだ角型の枠、縦長の短冊札、提灯の形のラベル、筆で刷いた黄色の帯 - **温度感**: 暖かく陽気。黄の明るさを藍で引き締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#181878` | ブランドの藍。セクション地・見出し文字・枠線 | 12% | 画素の実測 | | `secondary` | `#F7E92E` | ブランドの黄。FV の地と左右の縁取り | 14% | 画素の実測 | | `background` | `#FDFDF5` | 和紙風の生成りカード地 | 20% | 画素の実測 | | `background-alt` | `#FFFFFF` | フッター周りの白地 | 18% | 画素の実測 | | `surface` | `#DBCCBB` | 木目板の地 | 6% | 画素の実測 | | `text` | `#19155F` | 見出し・説明の藍文字 | 2% | 画素の実測 | | `text-body` | `#333333` | 人物紹介など本文の黒 | 1% | 推定 | | `accent-1` | `#D11F31` | 手書きの赤い煽り文字・限定バッジ | 0% | 画素の実測 | | `cta` | `#FD7314` | 購入ボタンのオレンジ（PC） | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | 購入ボタンの文字 | 0% | 画素の主要色に補正 | | `tint-1` | `#DDDDDB` | のれんの白布 | 3% | 画素の実測 | | `tint-2` | `#ECF4F7` | フッターのリンクタイル地 | 6% | 画素の実測 | | `dark-section` | `#402029` | 動画背景の暗い店内 | 6% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 暗い写真の上の白文字 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#C55102` | AA を満たす補正値（計算） | | 計算 | - 地の色は黄（FV と左右の縁）・藍（見出しの帯）・生成り（内容カード）の 3 層に分ける - 見出しと説明文は藍文字で統一し、黒は人物紹介とフッターだけに使う - 強調したい語の下には黄色の筆で刷いた帯を敷く - 赤は手書きの煽り文字と限定バッジだけに使う - 暗い店内写真の上には白の明朝文字を置く - `button-primary` は文字 `#FFFFFF` × 背景 `#FD7314` のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#C55102`、4.61:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のキャッチ。墨の筆文字 | 手書き・筆 | Yuji Syuku | 700 | 40px | 1.2 | 0.0em | | `headline-lg` | セクション見出し。太い明朝 | 明朝 | Shippori Mincho B1 | 800 | 28px | 1.3 | 0.05em | | `headline-md` | のれんの文字・こだわりの技術名 | 明朝 | Shippori Mincho B1 | 800 | 22px | 1.35 | 0.03em | | `headline-sm` | 料理の組み合わせを紹介する小見出し | 明朝 | Shippori Mincho B1 | 700 | 17px | 1.5 | 0.02em | | `body-lg` | ブランドの思いを伝える文章（暗い写真の上） | 明朝 | Noto Serif JP | 500 | 15px | 1.9 | 0.15em | | `body-md` | 説明文 | ゴシック | Zen Kaku Gothic New | 500 | 12px | 1.8 | 0.03em | | `accent` | 赤い手書きの煽り文字 | 手書き・筆 | Yuji Boku | 700 | 20px | 1.1 | 0.0em | | `note` | 人物紹介・注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.0em | - 見出しは太い明朝で藍色にする - キャッチと煽りは筆文字で、少し傾けて置く - 商品名と札の文字は縦書きにする - 思いを伝える文章は字間を広く取り、ゆったり読ませる - 本文はゴシックで細かめに組む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品カードは 2 列 - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 48px、基本単位 8px、カード内 24px（375px 幅換算） - 画面の左右に黄色い縁を約 6px ずつ残し、内側に藍か木目の地を敷く - 内容は藍の二重線で囲んだ生成りのカードに収める - カードの右上には提灯の形のラベルを少しはみ出させて置く - 料理と商品の組み合わせは、写真のあとに見出しと説明を縦に並べ、区切りに細い藍の線を引く - セクションの頭にはのれんの帯を入れる ## Elevation & Depth - 影はほとんど使わず、線で囲んで奥行きを出す - 札やカードには藍のずらし線をつけ、紙を重ねたように見せる - のれんは布のしわの陰影で立体感を出す ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品缶と料理は切り抜いて黄色い筆の円に重ねる。人物は四角に切る - **セクション境界**: 布のれんの帯と、藍と白の格子柄のライン - 枠は角を立て、二重線にする - 提灯ラベルは縦長で角を大きく丸める - 短冊札は藍の枠と黄色の地にする ## Components - **のれん見出し**（`noren-header`）: 白い布のれんに藍の明朝でセクション名を中央に置く - **提灯ラベル**（`lantern-label`）: 縦長の提灯型。セクション種別を縦書きで入れ、カード右上に置く - **短冊札**（`tanzaku-tag`）: 黄色の地に藍の枠。料理名やカテゴリを縦書きで入れる - **筆の帯つき見出し**（`brush-highlight`）: 見出しの下に黄色い筆の帯を敷く - **品書きカード**（`menu-card`）: 白いカードに藍の線。缶の写真と縦書きの商品名を並べる - **工程の丸アイコン**（`process-circle`）: 藍の線画を入れた白い丸を三角の矢印でつなぎ、3 段で並べる - **限定バッジ**（`badge-limited`）: 赤い丸に白い文字で期間限定などを示す - **購入ボタン**（`button-primary`）: オレンジの横長ボタン。右端に矢印をつける - **新着バナー**（`news-banner`）: 藍の地に横長の画像バナーを縦に並べる ## Do's and Don'ts **Do** - 黄と藍の 2 色を主にし、和紙と木目で温かみを足す - 見出しは藍の太い明朝、煽りは赤い筆文字にする - 商品名とカテゴリは縦書きの札で見せる - 料理と商品は必ず並べて撮り、黄色い筆の円に重ねる - セクションの切り替わりにはのれんを使う **Don't** - 寒色のグラデーションや無機質なフラットデザインにしない - 大きな角丸のポップなカードを使わない - 赤を広い面に塗らない - 見出しを細いゴシックにしない - 影を強くつけたカードにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と世界観を一目で伝える）: 黄色の地に筆文字のキャッチ、缶、笑顔の出演者を重ねる 2. **新着情報**（新商品や限定品を知らせる）: 藍の地に筆の帯つき見出しと横長バナーを 2 本並べる 3. **ブランドの思い**（飲む場面を思い浮かべさせる）: ぼかした店内写真の上に、字間の広い白い明朝を数行置く 4. **こだわり・製法**（味の理由を説明する）: のれんの見出しのあと、藍の地に生成りのカードを置き、3 段の工程アイコンと技術紹介の札を並べる 5. **CM動画**（広告動画を見せる）: 暗い居酒屋写真の上に動画を埋め込む 6. **製品情報**（商品の一覧を見せる）: 木目の地に品書き風のカードを置き、カテゴリの短冊と 2 列の商品カードを並べる 7. **おすすめのおつまみ**（料理との組み合わせを提案する）: 料理名の短冊と、筆の円に重ねた料理と缶の写真、藍の小見出し、説明を繰り返す 8. **出演者紹介**（出演者の経歴を紹介する）: 白地に、黄色背景の四角い人物写真と、名前・プロフィール本文を左右に並べる 9. **フッター**（企業サイトへ案内し、法定表示を載せる）: 開閉式のリンク一覧、淡い水色の地のリンクタイル、SNS アイコン、飲酒の注意書き ## Imagery - 人物は明るく笑い、ジョッキを掲げる。背景は黄色一色 - 商品の缶は切り抜いて、少し傾けて置く - 料理は白い皿に盛って真上から斜め寄りで撮り、黄色い筆の円の上に缶と並べる - 店内は暖色の照明で大きくぼかす - ジョッキやワイングラスの線画イラストを、カードの角にあしらう - 和紙・木目・布のれんのテクスチャを素材として使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は FV が横長になり、キャッチは 1 行、人物は左右に分けて置く - PC では FV の下に購入ボタンを中央に置く - PC の技術紹介は 3 列、料理の提案は 2×2 のグリッドにする - 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-f5438fe4`（元 LP の URL から採番） - **元 LP**: https://www.suntory.co.jp/non-al/sakaba/?fromid=top_prd03 - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。