DESIGN.md — レモン黄×木目×黒帯の居酒屋風酒類LP（Izakaya Wood and Lemon Yellow Pop Drink LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: ポップ・元気、力強い・インパクト、親しみ・手作り感、情報量多め・訴求型
• キーワード: 居酒屋・レモンイエロー・木目・筆文字・黒帯ラベル・切り抜きキャラ
• 地の質感: 木目板の写真背景と、白地に墨のかすれ模様を重ねた和紙風パネル。黒帯は筆でかすれた縁
• 形: 角ばった黒帯と円形の白い切り抜き枠。ボタンは黄地に黒枠の小さな角丸
• 温度感: 暖色寄りで陽気。黄と木の茶色が主体

Colors

• セクションの地は木目→黄→ベージュ+白パネル→木目→黄の順に切り替える
• 黄地の上の見出しやラベルは黒帯に白文字で締める
• 赤はセクション見出し下の筆ストロークと新発売バッジだけに使う
• 製品一覧は白い和紙風パネルをベージュ地の中央に置く
• 緑と水色は関連商品へ送るバナー専用にする
• 本文は墨色で、グレーの文字は使わない
• badge-new は文字 #F3F3F3 × 背景 #E60012 のコントラスト比が 4.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DE0011、4.6:1）を使う。

Typography

• 見出しはすべて手書き・筆系の書体で、居酒屋の品書き風にする
• FVの大見出しは黄の帯ブロックに極太の黒文字を載せる
• 商品スペックは中央揃えで3行にまとめる
• 締めのキャッチは左右に筆のはねを付けて大きく見せる
• フッターだけ普通のゴシックに戻す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム中央揃え。製品一覧は白パネル内で 1 列に並べる
• 本文ブロックの幅: 画面幅の約 70%
• 余白: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算）
• 製品パネルは画面幅の約70%で中央に置き、左右にベージュ地を見せる
• 見出しは中央に置き、真下に赤い筆線を引く
• 商品ごとに黒帯ラベル→缶画像→ボタン→商品名→スペックの順で縦に積む
• 関連商品の緑と水色の2分割バナーを画面下部に固定する
• ページ末尾にページ内ナビの黒帯ボタンを縦に4つ並べる

Elevation & Depth

• 影はほとんど使わず、平面の色面で見せる
• キャラクターや缶は切り抜いて背景から浮かせる
• 固定バナーは他の要素の上に重ねる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は白い正円で切り抜き、商品は背景を抜いて置く
• セクション境界: 直線で色が切り替わる。白パネルの縁は筆のかすれ
• 黒帯は角丸なしで、縁を筆のかすれにする
• 黄ボタンは黒い細枠＋小さな角丸
• 吹き出しは枠なしで、細い黒線の引き出しだけ付ける

Components

• 赤筆下線見出し（heading-brush-underline）: 筆文字の見出しの真下に、赤い筆ストロークを波打たせて引く
• 黒帯ラベル（label-black-band）: 商品カテゴリやキャラ名を示す黒い横帯。白文字に黄色の強調語を添える
• 黄の詳細ボタン（button-detail）: 黄地に黒枠、末尾に＞を付けた小ボタン
• 新発売バッジ（badge-new）: 赤いギザギザの円に白文字で日付と新発売を入れる
• キャラ円形切り抜き（character-circle）: 白い正円の上にキャラクターの頭部をはみ出させて配置する
• 関連商品固定バナー（sticky-cross-banner）: 緑と水色に2分割し、両端に缶画像を置いた画面下の固定帯
• ページ内ナビボタン（nav-black-button）: 黄地の上に置く、かすれ縁の黒い長方形ボタン
• お知らせバナー（news-banner-frame）: 黄地に黒の二重枠で、左にキャラ、右に赤と黒の2行テキストを置く

Do's and Don'ts

Do - 黄・黒・木目の3要素を必ず入れる - 見出しは筆文字にして、赤い下線とセットで使う - 商品は缶を大きく切り抜いて2本並べる - キャラクターは顔を強調し、白い円の中に置く - セクションの地の色をはっきり交互に切り替える

Don't - 淡いパステル調や細い明朝体にしない - グラデーションやドロップシャドウを多用しない - 黒帯の角を丸めない - 赤を本文や広い面に使わない - 見出しを左寄せにしない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（新商品の登場を強く印象づける）: 居酒屋店内の写真の上に黄帯の極太見出し、赤いギザギザの新マーク、キャラと缶を大きく重ねる
2. 最新情報（キャンペーンや関連サイトへ誘導する）: 木目背景に赤下線見出し、バナー画像と黄の枠付きお知らせボタンを置く
3. ブランド紹介（キャラクターでブランドの個性を伝える）: 黄地にキャラの白丸切り抜きを並べ、下に黒帯のプロフィールボタンを付ける
4. 2つのこだわり（製法の特長を説明する）: 淡黄のパネルに番号付きのこだわりを2つ並べ、最後に筆文字の大きなキャッチで締める
5. 製品一覧（ラインナップを比較させる）: ベージュ地の中央に白い和紙風パネルを置き、黒帯ラベル→缶→ボタン→スペックの順で繰り返す
6. 業務用商品（飲食店向けの商品を案内する）: 黄のカードにスペックを書き、ジョッキとレモンの写真を円形で添える
7. 広告紹介（CM動画で興味を深める）: 木目背景にキャラの吹き出しを置き、動画サムネを縦に並べてキャプションを付ける
8. ページ内ナビ（回遊と購入先へ誘導する）: 黄地にトップへ戻るボタンと黒帯ナビ4つ、購入バナー2枚を置く
9. フッター（企業情報と飲酒の注意を表示する）: 白とグレー青の地にアコーディオンメニュー、リンクカード、注意表記を並べる

Imagery

• 居酒屋の店内を暖色照明で撮り、壁の短冊メニューを見せる
• 着ぐるみキャラは満面の笑顔のアップで切り抜く
• 商品缶は正面から撮って切り抜き、350mlと500mlを並べる
• 輪切りのレモンや炭酸グラスをシズル要素として添える
• 背景には明るい木目の板や、墨のかすれ模様を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではFVを横長にし、キャラと缶を左、縦書きの見出しを右に置く
• PCではFVの下に黒帯のグローバルナビを横に4つ並べる
• PCでは製品一覧を2カラムのグリッドにする
• PCでは関連商品バナーを右端に縦に並べ、小さなタブとして固定する
• PCでは動画を大1つ＋小2つで配置する
• PCのフッターは4カラムのリンク一覧にする

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 行書くと起動時に読み込まれる。