DESIGN.md — 深緑×金で商品ごとに色を変えるドリンク特集 LP（Deep Green Gold Seasonal Beverage Showcase LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、情報量多め・訴求型
• キーワード: 深緑・金・スポットライト・台座・商品ごとのテーマ色・縦長 1 カラム
• 地の質感: ビロードのような暗いグラデーション。中央から光が差すスポットライトと金属の質感の台座
• 形: ピル型ボタン、正円に切り抜いた素材写真、細い金の区切り線
• 温度感: 温かい。暗い地に金と暖色が映える

Colors

• ページの外側と下部の地は深緑にし、明るい色は使わない
• 商品帯ごとに商品の味を表すテーマ色のグラデーションを敷く。上を明るく、下を暗くする
• 文字は白ではなくクリームや金の暖色系にする
• 主 CTA はベージュ金の塗り、サブ CTA は金線のアウトラインに分ける
• 商品帯が明るい赤のときは CTA を淡いピンクベージュに寄せて同化を防ぐ
• 締めの周年バナーだけ白地に緑で反転させる

Typography

• 本文はすべて中央揃えにし、1 行を短めに改行する
• 英字見出しは縦長のコンデンス書体で大きく置き、字間を広げる
• 主役写真の横に縦書き明朝の短いキャッチを添える
• 価格は商品名の下に太字で置く
• 注釈は 10px 前後で CTA の下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。素材写真と説明は左右交互の 2 分割
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 商品帯は 主役写真 → 名前 → 説明 → 素材 2 点 → 価格と CTA の順でそろえる
• 素材写真は丸写真と説明文を左右に置き、行ごとに左右を入れ替える
• 価格行は小さな商品写真を左に、名前・価格・ボタンを右に置く
• 下部の商品一覧は写真・名前・価格・説明・ボタンを縦に積む
• セクションの間は金の細線で区切る

Elevation & Depth

• カードには影をつけず、暗い地に光を差して奥行きを出す
• 商品の切り抜き写真に柔らかい落ち影をつける
• 主役写真はスポットライトと台座で浮いて見せる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 主役は角版。素材写真は正円。下部の商品は切り抜き
• セクション境界: 商品帯は直線で色を切り替える。下部は金の細い水平線で区切る
• ボタンはすべてピル型にする
• 素材写真は正円に切り抜き、細い縁を残す
• キャンペーン告知のカードは角丸 8px 程度にする

Components

• 商品情報ボタン（button-primary）: ベージュ金で塗ったピル型ボタン。価格の横か下に置く
• 店舗検索・一覧ボタン（button-outline）: 金線のアウトラインのピル型ボタン。左にアイコンを付けられる
• 台座付き主役ビジュアル（hero-pedestal）: スポットライトの下で、金の台座にドリンクを載せる。上にリボン状の名前バッジと年号ラベルを置く
• 素材の丸写真と説明（ingredient-circle）: 正円の素材写真に短い説明 3 行を添える。左右交互に並べる
• 価格行（price-row）: 小さな商品写真、名前、サイズと価格、ノンカフェインなどの枠付きタグ、CTA を並べる
• 英字セクション見出し（heading-en）: コンデンス体の大きな英字をクリーム色で中央に置く
• キャンペーン告知カード（campaign-card）: イラストのキービジュアルの下に、暗い緑の面で条件文と白いピル型ボタンを置く
• 金の区切り線（divider-gold）: コンテンツ幅いっぱいに引く 1px の金線

Do's and Don'ts

Do - 商品ごとにテーマ色の帯を変え、帯の中の構成は全商品で同じにする - 暗い地には金とクリームの文字を合わせる - 主役写真はスポットライトと台座で演出する - 素材写真は正円に切り抜き、左右交互に並べる - 主 CTA は塗り、サブはアウトラインに分ける

Don't - 白い背景を広く使わない（締めのバナーだけにする） - 純白の文字や鮮やかな原色の CTA を使わない - 角張った四角いボタンを使わない - 商品帯ごとにレイアウトを変えない - ドロップシャドウの強いカードを並べない

Page Structure

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

1. ファーストビュー（特集の世界観と全商品の一覧を見せる）: 商品写真をグリッドに並べ、中央に星形のロゴバッジを置く。深緑の地に導入コピーと注釈を続ける
2. 商品紹介①〜⑤（各商品の魅力と素材を伝える）: テーマ色のグラデーション帯に台座の主役写真、縦書きキャッチ、説明、丸い素材写真 2 点、価格行と CTA を置く
3. キャンペーン告知（購入特典のキャンペーンへ誘導する）: イラストのカードに条件文と強調数字、白いピル型ボタンを置く
4. フード（一緒に買う商品を提案する）: 英字見出しの下に、切り抜き写真・名前・価格・説明・ボタンを縦に並べる
5. 季節のコーヒー豆（関連商品を紹介する）: パッケージの切り抜き写真と説明を置き、一覧へのアウトラインボタンを付ける
6. グッズ（記念グッズを紹介する）: 角版の写真と特集へのボタンを置く
7. ギフト（カードとデジタルギフトを紹介する）: サブ見出しごとに商品写真、スマホのモック、正方形のサムネイル 2 枚とボタンを並べる
8. 周年バナー（特設コンテンツへ誘導して締める）: 白地に紙吹雪を散らし、ロゴと緑のピル型ボタンを置く

Imagery

• ドリンクは正面から撮り、暗い背景の上から光を当てて金の台座に載せる
• トッピングの素材は飛び散る動きを入れて周りに配置する
• 素材のアップは正円に切り抜き、断面や質感を見せる
• フードは白背景で切り抜き、柔らかい落ち影をつける
• キャンペーンはジャングルと宝箱のような温かい色のフラットイラストで描く
• 締めのバナーは金と緑の紙吹雪を散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも中央に約 330px 幅の SP 型カラムを固定し、左右は深緑の地で埋める
• PC の左右の余白には周年ロゴとキャンペーンバナーを固定表示する
• SP では画面幅いっぱいにカラムを広げ、余白は 16〜20px 程度にする
• 素材写真の左右交互の配置は 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 行書くと起動時に読み込まれる。