DESIGN.md — ヘアライン銀×赤の飲料ブランド LP（Brushed Metal Red Beverage LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: クール・先進的、力強い・インパクト、清潔・爽やか
• キーワード: ヘアライン金属・赤×銀・極太見出し・商品写真中心・冷たさ・キレ
• 地の質感: 縦方向のグラデーションに横方向のヘアライン筋を重ねた、ブラッシュドメタル風の銀色背景
• 形: 角を立てた四角と斜めの三角タブが基本。角丸はカードとフッターのボタンだけ
• 温度感: 寒色寄り。冷えた金属に赤のアクセントで熱量を足す

Colors

• ブランドのページ部分はすべてヘアライン銀の背景にする。単色の白は使わない
• 大見出しは赤の極太体で書く。キャッチは黒、強調語だけ赤にする
• 赤は帯・見出し・ボタン・タブに限って使う。大きな面に使うのは FV の斜め帯だけ
• Q&A カードは淡い青銀のグラデーション。左上に赤、右下に黒の三角を置く
• コーポレート部分（ナビ・SNS・フッター）は白・淡青・紺で分け、ブランド部分の赤銀と混ぜない

Typography

• 欧文の見出しは赤のコンデンス太字で大きく、画面幅の 7〜8 割を占める
• 和文の大キャッチは極太ゴシックで中央揃え。助詞の行は少し小さくする
• Q&A の質問文は太字斜体で 2〜4 行に改行する
• 本文は細めのゴシックで中央揃えにし、行間を広く取る
• ボタン文字は小さく字間を広げ、右端に矢印を添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。Q&A カードは 2 列＋中央 1 枚、ラインナップは 3 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 中央揃えを基本にする
• 商品写真は画面中央に大きく置き、泡や水滴を周りに散らす
• セクションの間は銀背景のまま大きく空け、仕切りを入れない
• ブランド部分の後は白地に切り替え、バナーを縦に並べる
• ラインナップは下端を揃えて置き、容量の差を高さで見せる

Elevation & Depth

• Q&A カードには薄いドロップシャドウを付けて浮かせる
• 商品写真は切り抜き、接地部に淡い影を落とす
• フッターのピル型ボタンには柔らかい影を付ける
• 赤帯ボタンはフラットにし、影を付けない

Shapes

• 角丸: 小 0px ／ 中 6px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は背景を抜いた切り抜き。バナーは角丸なしの長方形
• セクション境界: FV の下に赤い横帯と小さな金の二重線を置く。それ以外は直線で切り替える
• ブランド部分のボタンは角丸なしの横長の赤帯
• Q&A カードは角丸を小さくし、斜め三角のタブを付ける
• FV の左上に赤い斜めの帯を敷く
• ピル型のボタンはコーポレートのフッター部分だけで使う

Components

• 赤帯ボタン（button-primary）: 幅の約 7 割を占める角丸なしの赤帯。中央に小さな白文字、右端に細い矢印線
• Q&A カード（qa-card）: 正方形に近い青銀カード。左上に赤三角と白い Q、右下に黒三角と CLICK と指アイコン
• 欧文大見出し（section-title-en）: 赤のコンデンス太字を中央に大きく置く
• 赤い区切り帯（red-divider-band）: FV の下に全幅の赤帯を敷き、中央に金色の短い二重線を置く
• ラインナップ商品（lineup-item）: 切り抜いた商品写真の下に容量ラベルを付け、3 列で下揃えに並べる
• 関連バナー（banner-card）: 全幅の約 9 割の横長バナー。白地の上に縦に並べる
• 紺ピルボタン（button-pill-dark）: フッター SNS 部分で使う紺のピル型ボタン。白文字に矢印を添える
• 紺フッター（legal-footer）: 紺の地に白文字でタグライン・コピーライト・飲酒の注意表示を置く

Do's and Don'ts

Do - 背景はヘアライン金属風の銀で統一する - 赤の欧文見出しは大きく、余白をたっぷり取る - 商品写真には泡や水滴を添えて冷たさとシズル感を出す - 飲酒年齢や注意事項の注釈を必ず小さく添える - ボタンは赤帯と矢印でシャープに作る

Don't - ブランド部分に角丸やパステル色を使わない - 赤を本文の文字色にしない - 銀背景をベタの白やグレーに置き換えない - 見出しに細い書体や明朝を使わない - 商品写真を枠で囲まない

Page Structure

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

1. ヘッダー（ロゴと検索・メニューを置く）: 白地の細いバーに左ロゴ、右に検索とハンバーガーのアイコン
2. ファーストビュー（新商品と実績、キャッチを伝える）: 銀背景に赤い斜め帯で New と実績表示。缶とグラスの写真を置き、右に黒赤の極太キャッチ
3. 注釈帯（実績の根拠と法定表示を示す）: 白地に極小の注釈を並べ、下に赤い区切り帯
4. ブランドメッセージ（商品の価値観を伝える）: ロゴの下に括弧付きの極太キャッチを 4 行、商品写真、中央揃えのリード文
5. よくある質問（不安を解消する）: 赤の欧文見出しの下に Q&A カードを 3 枚置き、赤帯のもっと見るボタン
6. ラインナップ（容量の違いを見せる）: 赤の欧文見出しの下に切り抜き商品 3 点を下揃えで並べ、容量ラベルを付ける
7. 関連バナー（関連商品やキャンペーンに誘導する）: 白地に横長バナーを 4 本縦に並べる
8. サイトナビ（コーポレートサイトに回遊させる）: 矢印付きのテキストリンクを 2 列に並べる
9. SNS・メルマガ（フォローと登録を促す）: 淡青の地に SNS アイコン、白と紺のピルボタン
10. フッター（コピーライトと飲酒の注意を示す）: 紺の地に白文字。注意マークのアイコンを添える

Imagery

• 商品は正面から撮って切り抜き、銀背景になじませる
• 缶の周りに水しぶきや水滴を散らし、冷たさとシズル感を出す
• 黄金色のビール風グラスと白い泡を背後に添える
• バナーは青空・氷・ジョッキなど爽快感のある写真に、赤白の太字コピーを重ねる
• 背景は横方向のヘアライン筋を入れた銀のグラデーションにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 60% に絞って中央に寄せ、背景の銀は全幅に敷く
• PC の FV は横長にし、ロゴ・商品・キャッチを横一列に並べる
• PC は FV の下に赤いアンカーナビを置き、英日 2 段のラベルで 3 分割する
• PC の Q&A カードは 3 枚を横一列に並べる
• PC のフッターはナビと SNS を左右 2 列に分ける

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