DESIGN.md — 赤×金×生成りの英国調飲料ラインナップ LP（Classic Gold Frame Beverage Lineup LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 上品・高級、信頼・誠実、シンプル・ミニマル
• キーワード: 英国クラシック・金の額縁・商品カラーで背景を分ける・明朝体・中央揃え・ボトル写真
• 地の質感: ほぼ単色の面。金はグラデーションで光沢を出し、深紅の面は下に向かって少しずつ暗くなる。
• 形: 上端がアーチ状に盛り上がった二重線の金額縁。四隅は面取り。ボタンは角張った長方形。
• 温度感: 暖色。赤・金・黄が中心で、温かく華やか。

Colors

• 商品ごとにセクションの背景を、その商品のパッケージ色（深紅・生成り・レモン黄）に合わせる。
• 額縁・見出しの下線・ボタンは、どのセクションでも共通の金で統一する。
• 深紅の地では見出しと本文を白にする。生成りと黄色の地では金茶にする。
• ボタンは左が濃い金、右が淡い金の横向きグラデーションにする。
• 赤い強調色は注意書きとトップへ戻るボタンだけに使う。
• page は文字 #AD9151 × 背景 #FEFCED のコントラスト比が 2.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#87713F、4.56:1）を使う。

Typography

• 見出し・本文・ボタンは明朝で統一し、クラシックな印象を保つ。
• 英字見出しはすべて大文字のセリフ体にし、下に細い黒線を引く。
• 商品名の下に金の横線を引く（額縁の幅の6割程度）。
• 本文は中央揃えにし、意味の区切りで細かく改行する。
• ゴシックはフッターの補足情報だけに使う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は額縁の中で写真を左・本文を右に置く 2 カラム。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 60px、基本単位 8px、カード内 36px（375px 幅換算）
• 各商品セクションの上下に約50pxの余白を取り、額縁を中央に置く。
• 額縁の中は、商品名→下線→ボトル写真→本文→ボタンの順に縦に並べる。
• ボトル写真の幅は画面幅の約30%にする。
• ボタンは額縁の内側いっぱい（画面幅の約72%）に広げ、縦に約20px間隔で積む。
• 見出し帯は生成りの地に、日本語ラベルと英字見出しを2段で置く。

Elevation & Depth

• 影は使わない。平らな面と線だけで構成する。
• 奥行きは金のグラデーションと二重線で出す。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品ボトルは背景を透過して切り抜く。人物写真は全幅の長方形で、下端に金の細い帯を付ける。
• セクション境界: 境界は直線で、背景色を切り替えるだけ。
• 額縁は金の二重線にし、上辺中央をアーチ状に盛り上げ、四隅は面取りする。
• ボタンは角丸なしの長方形にし、右端に「>」の矢印を付ける。
• アーチの膨らみは額縁の幅の約6割にする。

Components

• 金グラデーションのヘッダー（header-gold）: 左にロゴ、右にSNSアイコンと三本線メニューを置く金色のヘッダー。
• 2段の見出し（section-title）: 上に金の明朝で日本語ラベル、下に大きな英字セリフ体と黒の下線を置く。
• アーチ型の金額縁（arch-frame）: 上部がアーチになった金の二重線の枠。中に1商品分の内容を入れる。
• 商品名と下線（product-title）: 明朝の商品名を中央に置き、下に金の細線を引く。
• 金グラデーションボタン（button-primary）: 濃い金から淡い金への横グラデーション。黒の明朝の文字と、右端に「>」を置く。
• 戻るボタン（button-back）: 金グラデーションで、矢印を左端に置いたトップへ戻るボタン。
• トップへ戻る丸ボタン（pagetop）: 右下に固定した赤い円形ボタン。中に白い上向き矢印を置く。
• 共有ボタンの列（share-row）: 案内文の横に、丸いSNSアイコンを3つ並べる。

Do's and Don'ts

Do - 商品ごとに、パッケージ色に合わせた背景色を使う。 - 額縁・下線・ボタンの金色は全セクションで同じにする。 - 本文は中央揃えの明朝にし、行間を約2.1倍とたっぷり取る。 - ボトル写真は透過で切り抜き、額縁の中央に置く。 - ボタンには矢印を付け、横いっぱいの長方形にする。

Don't - 丸いピル型のボタンやドロップシャドウを使わない。 - 本文にゴシック体を使わない。 - 額縁の中に装飾を詰め込みすぎない。 - 金を黄色一色のベタ塗りにしない（グラデーションで光沢を出す）。 - 寒色系の色を加えない。

Page Structure

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

1. ヘッダー（ブランドを示し、メニューへ誘導する）: 金グラデーションの帯に、ロゴ・SNSアイコン・メニューを置く。
2. ファーストビュー（季節感と人物で興味を引く）: 秋の暖色の背景で人物が商品を持つ全幅の写真に、ロゴを重ねる。下端に金の細い帯を付ける。
3. セクション見出し（商品紹介が始まることを示す）: 生成りの地に、日本語ラベルと英字の大見出し、下線を中央揃えで置く。
4. 商品紹介1（深紅）（主力商品の特長を伝える）: 深紅のグラデーションの地に金の額縁。白文字の商品名・ボトル・本文を置き、金ボタンを2つ並べる。
5. 商品紹介2（生成り）（2つ目の商品の特長を伝える）: 生成りの地に金の額縁。商品名と本文は金茶の文字で、金ボタンを1つ置く。
6. 商品紹介3（黄）（3つ目の商品の特長を伝える）: レモン黄の地に金の額縁。金茶の文字で書き、本文の下に注釈と金ボタンを置く。
7. 戻る導線（ブランドトップへ戻す）: 白地の中央に、左向き矢印付きの金ボタンを置く。
8. フッター（共有を促し、注意書きとパンくずを示す）: 共有アイコン、赤い注意書き、パンくずを置き、右下に赤い丸ボタンを固定する。

Imagery

• 人物写真は紅葉など暖色の背景をぼかし、自然光で柔らかく撮る。
• 商品ボトルは正面から撮り、背景を透過して影も付けない。
• 装飾は金の線（額縁と下線）だけにし、イラストは使わない。
• 写真全体を暖色寄りの色調でそろえる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は額縁を横長にし、ボトルを左、本文とボタンを右に置く。
• PC のファーストビューは、人物写真とキャンペーン告知を左右に分けた横長のビジュアルにする。
• PC の額縁の幅は画面の約65%にし、両側に背景色を見せる。
• PC ではボタンを小さくし、本文の下に右寄せで並べる。
• SP では本文の改行を細かくし、中央揃えにする。

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