DESIGN.md — 生成りと夕焼けグラデの夏リキュール LP（Sunset Gradient Summer Liqueur LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: 上品・高級、ナチュラル、清潔・爽やか、やさしい・柔らかい
• キーワード: 夏のリゾート・夕焼けグラデーション・生成り・筆記体装飾・シーン提案・イベント情報
• 地の質感: ざらついたノイズを乗せたグラデーション面と、霞んだ淡いぼかし背景
• 形: 角丸 12px 前後の写真カード、丸いアイコン、細い罫線のリスト
• 温度感: 暖色（琥珀・夕焼け）が主で、水色と紺で涼しさを足す

Colors

• 基本の地は生成り #F9F3E7。白とグレージュの面で章を切り替える
• シーン紹介はマスタード→テラコッタ→紺のグラデーションで、昼から夜への流れを見せる
• 色付き地の上の文字は白だけにする
• 見出しと本文は黒ではなく濃紺を使う
• 水色は筆記体の装飾英字とキャンペーン枠だけに使う
• 朱色はスライダー矢印などの小さな操作要素だけに使う
• scene-block は文字 #FFFFFF × 背景 #A57529 のコントラスト比が 4.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#9B6E26、4.51:1）を使う。

Typography

• 和文はすっきりしたゴシックに統一する
• セクション見出しの上に、小さな大文字の英字ラベルを置く
• 筆記体の英字は 90 度回転させて縦に置き、写真と重ねる
• 本文は小さめにし、行間を 1.9 前後とって広く読ませる
• シーン紹介の本文は中央揃え、イベント情報は左揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。料理ペアリングのみ横スクロールのカルーセル
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は左右 16px の余白で幅いっぱいに置く
• ファーストビューと区切りの写真は全幅で端まで裁ち落とす
• イベントは写真、タイトル、本文、白の情報ボックスの順に積む
• 日程リストはサムネ、テキスト、丸矢印の 3 列にする
• 筆記体装飾を置く部分は大きく余白をとる

Elevation & Depth

• 影はほとんど使わない
• 情報ボックスは白の半透明面と極薄の線で浮かせる
• キャンペーン枠は水色の面の上に生成りのカードを乗せる

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸 12px の長方形。料理やドリンクのアイコンは円形
• セクション境界: 直線で区切るほか、グラデーションで滑らかに色を移す
• 写真には必ず角丸を付ける
• 丸い矢印ボタンは細い線の円にする
• キャンペーンカードとフッターには大きめの角丸を付ける

Components

• 縦書き筆記体の装飾（vertical-script-deco）: 水色の英字筆記体を縦に回転させ、写真の端に重ねる
• シーン紹介ブロック（scene-block）: 色付き地に、英字ラベル、ロゴ風タイトル、写真、円形アイコン付きの小見出し、中央揃えの本文を並べる
• ペアリングカード（pairing-card）: 生成りのカードの上半分に写真、下に見出しと本文。左右に朱色の丸矢印を付けたカルーセル
• イベント情報ボックス（info-box）: 半透明の白いボックスに、太字の項目名と値を縦に積む
• 日程リスト行（schedule-row）: サムネ、日付と説明、水色の丸矢印を並べ、行は細い罫線で区切る
• キャンペーンカード（campaign-card）: 水色グラデーションの上に生成りの角丸カード。英字ハッシュタグの見出し、期間、手順リストを入れる
• 英字ラベル付き見出し（section-label）: 小さな大文字の英字の下に、2 行の和文見出しを置く
• フッターパネル（footer-panel）: 濃紺の角丸パネルに、ロゴと白の英字ナビを中央揃えで置く

Do's and Don'ts

Do - 地は生成りと白を基本にし、暖色のグラデーションはシーン紹介だけに使う - 写真は夕日、海、乾杯など光のあるシーンを選ぶ - 見出しの上に英字ラベルを添える - 写真の端に縦書きの筆記体英字を重ねる - 情報は白い角丸ボックスに項目と値の形で整理する

Don't - 真っ黒の文字や、強い原色のボタンを使わない - 太い影や立体的な装飾を付けない - 写真を角丸なしの四角でカードに入れない - 水色を本文や大きな面に広げない - テキストを詰め込みすぎない

Page Structure

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

1. ファーストビュー（夏のリゾートと商品の世界観を一目で伝える）: 海辺のテーブルに商品を置いた全幅写真。上にロゴを白抜きで置き、下に商品画像と大見出しを並べる
2. リード文（季節に合わせた楽しみ方を提案する）: 生成り地に中央揃えの本文を 4 行置く
3. コンセプト（商品の香りや味の魅力を語る）: 全幅写真に筆記体の縦書き装飾を重ね、角丸写真と左揃えの本文を交互に置く
4. 問いかけ（シーン紹介へ誘導する）: 白地にロゴと筆記体を置き、中央に短い 3 行の問いかけ
5. シーン提案（飲み方とシーンを 3 つ紹介する）: マスタード→テラコッタ→紺のグラデーション地に、シーンブロックを縦に 3 つ並べる
6. ペアリング（料理との組み合わせを提案する）: 中央の見出しの下に、横スクロールのカードカルーセルを置く
7. イベント（開催中の体験イベントを告知する）: 淡いぼかし地に縦書き装飾と見出しを置き、写真スライダーと情報ボックスを繰り返す
8. キャンペーン（SNS 投稿を促す）: 水色の地に生成りカードを乗せ、期間、写真の横並び、手順リスト、SNS アイコンを入れる
9. 商品紹介（商品 2 種のスペックを伝える）: 白地に角丸写真、商品名、本文、グレーのスペック注記を並べる
10. 締めのビジュアル（世界観を再確認させる）: 乾杯の全幅写真に白抜きの大見出しを重ねる
11. フッター（SNS への誘導とナビゲーション）: 英字見出しと SNS アイコンの下に濃紺の角丸パネルを置く

Imagery

• 夕日や逆光の暖かい色調で、少し霞んだフィルム調の写真
• 海辺のテーブルにグラスとボトルを置き、ヤシの葉の影を落とす
• 人物はシルエットか手元だけにし、顔は主役にしない
• 料理は暖色の木目テーブルで、寄りの構図で撮る
• グラデーションの面にはノイズのざらつきを加える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像がないため、以下は推奨。PC ではコンテンツ幅を 960px 前後に収め、写真と本文を左右 2 カラムにする
• シーン提案は写真と本文を左右交互に配置する
• ペアリングカードは 3 枚同時に見せる
• 縦書きの筆記体装飾は大きくし、余白に寄せて置く

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