DESIGN.md — 紺×黄×赤筆文字の居酒屋風飲料LP（Izakaya Bold Navy Yellow Beverage Survey LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: 力強い・インパクト、情報量多め・訴求型、和風、ポップ・元気
• キーワード: 居酒屋ののぼり・調査結果・大きな%・吹き出し・筆文字・和紙
• 地の質感: 前半はベタ塗りの紺と黄でポスターのよう。後半は和紙調ベージュの紙の質感。
• 形: 角丸なしの四角い枠、ギザギザした手描き風の吹き出し、円グラフ風の黄色い円、V字に切った境界
• 温度感: 温かく賑やか。暖色の赤・黄を寒色の紺で締める

Colors

• 前半は紺→黄→紺と地色を交互に切り替え、テンポを作る
• 数字や結論は赤の筆文字で書き、白か黄の縁取りを付ける
• 黄の地の上の見出しは白い帯に紺の文字を載せ、紺の枠で囲む
• 後半の製法・製品パートは和紙ベージュの地に紺文字で落ち着かせる
• 本文の強調は赤文字と黄色マーカーの2つに限る
• 主CTAだけ赤い面にする。ブランドへの導線は紺のボタンにする

Typography

• インパクトを出す部分は極太の筆系書体を使い、赤字に白か黄で太く縁取る
• 数字は周りの文字の約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

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

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