DESIGN.md — 紺×空色リボンの地中海風プレミアムビール LP（Mediterranean Blue Ribbon Premium Beer LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: 上品・高級、清潔・爽やか、シンプル・ミニマル
• キーワード: 地中海・濃紺・空色・サテンリボン・欧文セリフ・余白
• 地の質感: フラットな単色面に、光沢のある青いリボンの写真素材と高彩度の青空・海の写真を重ねる
• 形: 角丸なしの四角いボタンと写真。リボンの曲線だけでやわらかさを出す
• 温度感: 涼しげで爽やか。温かい要素は料理写真と暗い室内写真で少し足す程度

Colors

• 白地を基本に、動画セクションのみ濃紺の全面地で切り替える
• ABOUT は空と海の写真で空色の地を作り、文字は白
• ボタンは濃紺の面に白文字で統一し、他の強調色は使わない
• 見出し・本文の文字色は黒ではなく紺を使う
• 写真カードの上は暗めの写真に白文字を載せる
• フッターの SNS ブロックだけ淡い青のグレー地にする

Typography

• 英字はセリフ体で大きく、和文は小さめのゴシックで添える
• 英字見出しのすぐ下に「— 和文サブタイトル」を置く
• 本文は行間 2 前後、字間 0.1em で、ゆったり詰めない
• 英字見出しの下には小さなカタカナのルビを付ける
• ファーストビューのコピーは縦書きの明朝にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードと動画は横スクロールのカルーセル
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右の余白は約 30px で、左揃えを基本にする
• カルーセルは次のカードを右端に少しはみ出させる
• 写真カードは画面幅の 84% で、文字とボタンは内側に重ねる
• 動画見出しは左右に細線を引いて中央揃えにする

Elevation & Depth

• 影はほぼ使わずフラットにする
• フッターのピル型ボタンにだけ薄い影を付ける
• 奥行きはリボン素材を重ねて出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。商品写真は切り抜きで重ねる
• セクション境界: 青いサテンリボンが波打ってセクションの境目をまたぐ
• メインのボタンは角丸なしの四角
• フッターの SNS ボタンだけピル型にする
• カルーセルの矢印は細線の丸ボタン

Components

• VIEW MORE ボタン（button-primary）: 濃紺の四角いボタンに白い英字と右矢印
• 詳しく見るボタン（button-small）: 小さな濃紺の四角に白文字と＋記号
• 英字セリフ見出し（heading-serif）: 大きな英字にダッシュ付きの和文サブタイトル
• 細線つき中見出し（heading-lined）: 中央の英字の左右に細い横線を引き、下にルビ
• 動画カルーセル（video-carousel）: 16:9 のサムネイルに丸い再生アイコン。ページ数表示と丸矢印付き
• 写真オーバーレイカード（photo-card）: 暗い写真の上に英字見出し・白い本文・ボタンを重ね、リボンが角にかかる
• 店舗検索/購入の二分割バー（sticky-action-bar）: 白地に細線で 2 分割。アイコン・ラベル・丸いプラスボタン
• SNS ブロック（footer-sns）: 淡い青地にアイコンを並べ、白と紺のピル型ボタンを置く

Do's and Don'ts

Do - 見出しの英字はセリフ体で大きく組む - セクションの境目に青いリボン素材を流して、つながりを出す - ボタンは濃紺の四角に統一する - 写真は青空・海・白いテーブルなど明るい光で選ぶ - 余白を大きく取り、1 セクションの主張は 1 つにする

Don't - 赤や黄色の派手な強調色やセール風のバッジを使わない - 本文を黒の太字で詰めて組まない - ボタンを丸くしたりグラデーションにしたりしない - 文字を中央揃えで多用しない（本文は左揃え） - 20 歳未満の飲酒防止など、必要な注意表記を省かない

Page Structure

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

1. ファーストビュー（ブランドの世界観と発売告知）: 海を背景にした人物写真に縦書きのコピー。その下に明朝の大きな実績見出しと、リボンを巻いた商品缶
2. 購入導線バー（店舗検索とオンライン購入へ誘導）: 白地に細線で 2 分割し、アイコン付きのラベルを並べる
3. ブランド紹介（味の特長を伝える）: 空と海の写真の地に白い英字の大見出しと本文、ボタン。下部に商品 3 種を並べる
4. 動画（CM で認知を広げる）: 濃紺の全面地に細線つき見出しとカルーセル。下端をリボンで区切る
5. 体験提案（新しい楽しみ方を紹介）: 白地に紺の英字大見出し、料理写真、ルビ付きの英字小見出し、紺の本文
6. 楽しみ方カード（体験を具体的に見せる）: 縦長の写真カードを横スクロールで並べ、小見出しと小さなボタンを付ける
7. 関連動画（体験の動画を見せる）: 白地に細線つき見出しと動画カルーセル
8. シーン提案・店舗検索（飲用シーンと店舗検索へ誘導）: 暗い写真のカードに英字見出し・白い本文・ボタンを重ね、リボンを掛ける
9. フッター（関連リンク・SNS・注意表記）: 矢印付きリンクを 2 列に並べ、淡い青の SNS ブロックと濃青の帯に注意表記を置く

Imagery

• 青空と地中海の海岸を背景にした明るい自然光の人物写真
• 白いテーブルに料理とグラスを並べた、明るい俯瞰ぎみの物撮り
• 光沢のある濃青のサテンリボンを切り抜き、波打つ形で重ねる
• バーや食卓の暗めで温かい人物写真は、白文字を載せる地に使う
• 商品は切り抜いて、水滴でシズル感を出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューを左に見出しと商品、右に人物写真の 2 分割にする
• PC の ABOUT は左に文字、右に大きな商品写真の横並び
• PC の動画カルーセルは中央を大きくし、左右に前後のスライドを半透明で見せる
• PC の楽しみ方カードは写真と文字を互い違いにずらして配置する
• PC のシーン提案カードは 2 枚を横並びにする
• PC のフッターはリンク列と SNS ブロックを横に並べる

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