DESIGN.md — 黄×藍の居酒屋風ノンアル飲料 LP（Izakaya Noren Yellow & Indigo Beverage LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 酒類 ／ 雰囲気: 和風、ポップ・元気、力強い・インパクト、親しみ・手作り感
• キーワード: 居酒屋・のれん・提灯ラベル・筆文字・黄×藍・和紙
• 地の質感: 生成りの和紙テクスチャ、木目の板壁、白い布のれんのドレープ、ぼかした店内写真
• 形: 藍の二重線で囲んだ角型の枠、縦長の短冊札、提灯の形のラベル、筆で刷いた黄色の帯
• 温度感: 暖かく陽気。黄の明るさを藍で引き締める

Colors

• 地の色は黄（FV と左右の縁）・藍（見出しの帯）・生成り（内容カード）の 3 層に分ける
• 見出しと説明文は藍文字で統一し、黒は人物紹介とフッターだけに使う
• 強調したい語の下には黄色の筆で刷いた帯を敷く
• 赤は手書きの煽り文字と限定バッジだけに使う
• 暗い店内写真の上には白の明朝文字を置く
• button-primary は文字 #FFFFFF × 背景 #FD7314 のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C55102、4.61:1）を使う。

Typography

• 見出しは太い明朝で藍色にする
• キャッチと煽りは筆文字で、少し傾けて置く
• 商品名と札の文字は縦書きにする
• 思いを伝える文章は字間を広く取り、ゆったり読ませる
• 本文はゴシックで細かめに組む
• 書体は画像からの推定で、フォント名は近い印象の 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。