DESIGN.md — ターコイズ×金のレトロなレモン酒類 LP（Teal and Gold Retro Lemon Sour LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: レトロ、清潔・爽やか、信頼・誠実、親しみ・手作り感
• キーワード: ターコイズ×金・紙の質感・白い円と吹き出し・黒枠の見出し・レモンの輪切り・縦書きの明朝コピー
• 地の質感: ザラついた紙やマットな金箔のようなノイズ地。罫線ノートの面も入る
• 形: 大きな正円、吹き出し、黒い太線で囲んだリボン型の見出し枠
• 温度感: 爽やかでやや温かい。冷たい青緑を金とクリームで和らげる

Colors

• 地はターコイズ・金・ベージュ・クリームをセクションごとに切り替える
• FV 直後は左ターコイズ/右金の 2 分割地に白い大円を重ねる
• 白は円・吹き出し・カードの面にだけ使い、地には使わない
• 黄色は帯・マーカー線・記事カードに限定する
• 赤は前編・後編などの小さな丸バッジだけに使う
• 文字は黒に近い焦げ茶で統一し、黒帯の上だけ金文字にする

Typography

• FV は大きな縦書き明朝で、余白を広く取る
• セクション見出しは極太のレトロなゴシックを黒枠で囲む
• リード本文は中央揃えにし、行間を 2 倍程度に広げる
• 本文中の大事な語だけ一回り大きな太字にする
• お客様の声は左揃えにし、末尾に（年齢／性別）を添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品セクションの円形ポイントは 2+1 の配置
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 商品セクションは金の外枠の内側にベージュ面を置く入れ子構造
• 白い大円は画面幅より少しはみ出す大きさで中央に置く
• 吹き出しは左右に交互に寄せ、隙間にレモンの輪切りを置く
• 購入リンクは 3 つのロゴボタンを横に並べる
• 商品情報は 2 列の定義表にする

Elevation & Depth

• 基本はフラット。紙の質感で奥行きを出す
• 記事カードだけ右下に柔らかい影を付ける
• 缶の写真は落ち影で浮かせる

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 9999px。ボタンは角丸の長方形。
• 写真の切り抜き: 缶は切り抜き。人物写真は角丸なしの長方形。レモンは輪切りの円形
• セクション境界: 直線で色を切り替える。白い大円が境界をまたぐ
• ボタン・カードは角丸なしの四角にする
• 見出し枠は黒の太線で、下辺が中央でへこむリボン型にする
• 装飾は正円と吹き出しを主に使う

Components

• 黒枠リボン見出し（heading-ribbon-frame）: 黒の太線で囲み、下辺が V 字にへこむ枠の中に極太の見出しを置く
• 黒帯のページ内ナビ（section-nav-bar）: 黒い帯の上に金色の細枠ボタンを 4 つ並べる
• 白い大円のリード（hero-circle）: 2 色に分けた地の上に白い正円を置き、見出しと中央揃えの本文を入れる
• EC ロゴ購入ボタン（store-buttons）: 白地に金色の細枠を付けたロゴボタンを 3 つ横に並べる。上に線つきのラベルを置く
• レモン輪切りのポイント（lemon-point）: レモンの輪切り画像の中に太字の短い特長を書き、下に V 字の矢印を付ける
• お客様の声の吹き出し（voice-bubble）: ターコイズ地の上に白い楕円の吹き出しを置き、しっぽを下に付ける
• 記事カード（article-card）: 上に写真、下に黄色の面。日付の小さな枠、マーカー線付きのタイトル、サブ文を置く
• 前編/後編の丸バッジ（badge-round）: カードの右上角に重ねる赤い円に白い太字を入れる
• 黄色の斜めラベル（label-tab）: 囲み枠の左上に重ねる黄色い傾いたラベル。中に太字のタイトル

Do's and Don'ts

Do - ターコイズと金を 1 画面の中で隣り合わせて使う - 地にはザラついた紙のノイズを薄くかける - レモンの輪切りを画面の端で切れるように散らす - 見出しは必ず黒枠のリボン型でそろえる - 本文は中央揃えで行間を広く取る

Don't - ピル型やネオン系のボタンを使わない - 白一色の地を広く使わない - グラデーションの強いポップな配色にしない - 赤をバッジ以外に広げない - 細い欧文フォントで見出しを作らない

Page Structure

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

1. ファーストビュー（商品を印象付ける）: 明るいグレーの地。上に縦書きの明朝コピー、下に缶のアップを置く
2. キャッチ帯（一言で定番感を伝える）: 黄色の帯に明朝のコピーと共同開発のロゴを置く
3. ページ内ナビ（各セクションへ移動させる）: 黒帯に金色の枠ボタンを 4 つ並べる
4. コンセプト（商品の狙いを伝える）: ターコイズと金に分けた地に白い大円。中に見出しと中央揃えの本文
5. 商品紹介（商品の価値と購入先を見せる）: 金枠とベージュ面。円形の背景に缶とグラス、本文、EC ボタン 3 つ
6. 特長（こだわりを 3 点で示す）: 罫線ノート風の面に、レモン輪切りのポイントを 3 つ置く
7. 開発パートナー紹介（専門性で信頼を得る）: 黒い細枠の箱に黄色ラベル、ロゴ、本文、注釈を入れる
8. 限定商品（期間限定品を告知する）: 淡いオレンジのグラデーション写真に、見出し・本文・缶・黄色の丸バッジ
9. お客様の声（評判で後押しする）: ターコイズ地に白い吹き出しを左右交互に並べ、レモンを散らす
10. 読み物（開発ストーリーへ誘導する）: クリーム地に黒ラベルと、写真＋黄色面の記事カードを 2 枚
11. 商品情報（仕様を示す）: 金のグラデーション地に 2 列の定義表と缶 2 本。下に大きな英字の透かし
12. フッター（サイト内の導線と注意表示）: 淡いグレー地にロゴ、SNS、リンク一覧、飲酒の注意表示

Imagery

• 缶は水滴の付いた写実的な切り抜き写真にし、柔らかい落ち影を付ける
• レモンの輪切りは真上から撮った鮮やかな黄色で、画面の端で切る
• 氷入りのグラスは缶の後ろに並べて爽快感を出す
• 地は紙やキャンバスのようなノイズ質感にする
• 人物写真は社員や開発者の自然なポートレート
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC の FV は缶を中央に置き、縦書きコピーを左右に分ける
• PC の商品紹介は写真を左、本文を右の 2 カラムにする
• 特長の 3 ポイントは PC で横 1 列に並べる
• 吹き出しは PC で 3 列ほどに散らして配置する
• 記事カードは 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 行書くと起動時に読み込まれる。