DESIGN.md — 空色グラデと琥珀の爽やかウイスキー LP（Airy Sky Blue Highball Whisky LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: 清潔・爽やか、シンプル・ミニマル、上品・高級
• キーワード: 空色グラデーション・琥珀と氷・大文字の欧文見出し・黄色の帯・余白多め・黒フッター
• 地の質感: 雲や光がにじむ柔らかなグラデーション。写真は逆光ぎみで透明感が強い
• 形: 角丸は控えめ。動画とカードは小さめの角丸、ボタンは細い線の四角形
• 温度感: 涼しい青を地に、琥珀・黄で温かみを足した中間の温度

Colors

• 地は白と空色グラデーションを交互に置き、セクションを分ける
• 動画セクションだけベージュ寄りの地にして変化をつける
• 黄色は帯ラベルと見出しの下線だけに使い、面積は小さく抑える
• 琥珀色は商品写真で出し、UI の色には使わない
• フッターは真っ黒の地に薄グレーの文字
• ボタンは白地に黒い細枠で、強い色の塗りボタンは使わない

Typography

• セクション見出しは欧文大文字 1 語にし、字間を 0.2em 程度に広げる
• 本文は小さめの文字を中央揃えにして、行間を 2 倍以上とる
• キャッチはファーストビューで縦書きにし、黄色の縦線を添える
• カード見出しは太字にして、黄色の下線マーカーを引く
• フッターの欧文カテゴリ名は細いウェイトで字間を広げる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ブランドバナーだけ 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 70px、基本単位 8px、カード内 24px（375px 幅換算）
• 各セクションは欧文見出しを中央に置いてから内容を並べる
• 動画は幅 85% で 16:9 比率にし、中央の再生ボタンを重ねる
• 動画の下に黄色帯のキャプションを置く
• 商品集合写真は小さいサイズから大きいサイズへ左から右に並べる
• セクションの上下に 60〜80px の余白をとる

Elevation & Depth

• カードや購入先ボタンにはごく薄い影をつけるか、影なしにする
• 立体感は写真の光と反射で出し、UI では出さない
• 商品写真の下に床の映り込みをつける

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 14px。ボタンは角丸の長方形。
• 写真の切り抜き: 動画サムネとバナーは角丸の長方形。商品とグラスは切り抜いて背景に溶け込ませる
• セクション境界: 直線で区切り、地のグラデーションの切り替えで境界を作る
• ボタンは角丸なしの細い枠線の長方形
• TOP ボタンは正方形の枠線
• SNS アイコンは白い正円
• 言語切替だけピル型の枠

Components

• 細枠リンクボタン（button-outline）: 白地に黒の 1px 枠。中央に太字の文字と右向きの山括弧。両端にグラスの切り抜き写真を重ねることもある
• 黄色帯キャプション（caption-band）: 動画の下に置く横長の黄色帯。白文字で動画タイトルを入れる
• 動画サムネカード（video-card）: 角丸の 16:9 サムネ。中央に半透明の白い円形再生ボタンを置き、左下に黄色マーカー付きのタイトルを重ねる
• 手順カード（step-card）: 白いカードに黄色下線付きの見出しと、太字の番号つき手順を 4 つ並べる
• 購入先ロゴボタン（store-button）: 薄グレー地の上に白い横長カードを縦に並べ、通販サイトのロゴを中央に置く
• セクションアンカーナビ（anchor-nav）: ファーストビューの直下に欧文大文字のリンクを 4 つ横に並べる
• 関連ブランドバナー（brand-banner-grid）: 2 列 3 段の角丸バナー。黒地のロゴ、ビジュアル写真を混ぜる
• 黒フッター（footer-dark）: 黒地に欧文カテゴリ見出しと、ハイフン付きのリンクリストを並べる。下に SNS の円アイコンと飲酒の注意書きを置く

Do's and Don'ts

Do - 地は淡い空色と白を交互に置き、透明感を保つ - 見出しは欧文大文字 1 語にし、字間を広くとる - 強調は黄色の帯と下線マーカーに絞る - 酒・氷・グラスの写真は逆光で明るく撮る - ボタンは細い枠線で上品にまとめる - フッターに 20 歳未満の飲酒禁止などの注意書きを必ず入れる

Don't - 赤やオレンジで塗った太いボタンを使わない - 背景に濃い色を多用しない（黒はヘッダーとフッターだけ） - 本文を左揃えで詰めて組まない - 装飾アイコンやイラストを多用しない - 黄色を大きな面に広げない

Page Structure

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

1. ヘッダー（ブランドロゴと言語切替、メニューを置く）: チャコールの帯に白のロゴ、ピル型の言語切替、ハンバーガーメニュー
2. ファーストビュー（人物と商品で世界観を伝える）: 空色背景に人物がグラスを持つ写真。縦書きのキャッチに黄色の縦線を添え、右上に商品ロゴ
3. アンカーナビ（各セクションへ移動させる）: 白地に欧文大文字のリンクを 4 つ等間隔に並べる
4. コンセプト（味わいと飲み方の広がりを伝える）: 和文の太字見出しの下に、中央揃えの短い詩的な文を 7 行。下に商品とアレンジドリンクを横一列に並べる
5. 動画（CM 映像を見せる）: ベージュのグラデーション地に角丸の動画を置き、下に黄色帯のタイトル
6. 楽しみ方（おいしい飲み方を教える）: 空色地に動画、黄色帯、番号つき 4 手順の白カード、枠線ボタンを順に並べる
7. 商品ラインナップ（容量違いの商品を一覧で見せる）: 切り抜いたボトルを大きさ順に並べ、床に映り込みをつける。下に商品情報への枠線ボタン
8. 購入先（通販サイトへ誘導する）: 薄グレー地に下線付きのリード文。白いロゴカードを縦に 3 つ並べる
9. 関連ブランド（シリーズの他商品へ回遊させる）: 2 列グリッドの角丸バナー 6 枚と、正方形の TOP ボタン
10. フッター（企業サイトへの導線と法的表記を置く）: 黒地に欧文カテゴリ別のリンク、SNS アイコン、注意書き、エンブレムロゴ、コピーライト

Imagery

• 人物は白シャツで自然光の下に置き、柔らかく爽やかな表情で撮る
• 背景は青空と雲がにじむような淡い空色グラデーション
• 琥珀色の酒が入ったグラスと氷を、逆光で透明感が出るように撮る
• ミントやローズマリー、柑橘などのアレンジドリンクを添える
• 商品ボトルは切り抜いて置き、床に映り込みをつける
• セクションの背景に大きなグラスやボトルを半透明で重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では本文と動画の幅を中央の約 50% に収め、左右の背景を広く見せる
• PC ではグローバルナビのテキストリンクをヘッダーに横並びで出す
• PC のアンカーナビは縦線区切りで横に並べる
• PC の手順カードは右側に商品写真を重ねてレイアウトする
• PC の購入先ボタンは 3 つを横並びにする
• PC のフッターはリンク群を 5 列に並べる

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