DESIGN.md — 紺夜空×金と街並みシルエットのクラフトビールLP（Night Skyline Craft Beer LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、クール・先進的
• キーワード: 夜の都会・紺と金・都市シルエット・手書き商品名・商品ごとの色分け・クラフト感
• 地の質感: ベタ塗りの紺に、夕焼けやイルミネーションのボケ写真を重ねる。全体はマットでフラットな印象
• 形: 四角が基本で角丸はほとんど使わない。ボタンは細い白枠の長方形で、外側に光るような影を付ける
• 温度感: 紺と青は涼しく夜の印象。ダーク系の商品は茶と黄土で暖かくする

Colors

• ページの地は紺系にし、全体で夜の雰囲気にそろえる
• 商品セクションは商品ごとに地色を変える（青と黄土）。見出し線・丸ポイント・文字色も、その地色に合う色にする
• 金は見出し・ロゴ枠・欧文ラベル・小さな囲み枠だけに使い、面積は小さく保つ
• 紺や青の地では本文を白、黄土の地では本文を濃い茶にする
• 購入ボタンは、対応する商品の色（青・茶）で塗り分ける
• SNSのボタンだけはブランドのグラデーションを許可する

Typography

• 本文は字間0.08em前後、行間2.0で、ゆったり組む
• 商品名とキャッチは手書き風の画像で入れ、ほかの文字はゴシックにする
• 小見出しは金色の明朝にして、左にアイコンを置く
• 商品のサブコピーと説明文は中央揃え、特長と開発者の声は左揃えにする
• 欧文ラベルは大文字・字間広めの金色で、和文の上に小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 各商品セクションは、上端の都市シルエット→商品写真→中央揃えのコピー→特長→開発者の声→下端の都市シルエット、の順に並べる
• 小見出しの下は全幅の1px線で区切る
• 特長は丸ポイント付きで項目名と説明文の2段にする
• 購入ボタンは縦に並べ、間を40px前後あける
• フッターナビは中央揃えで、項目を白線で区切る

Elevation & Depth

• 購入ボタンは、外側に光る影（同系色を12px前後ぼかす）を付けて浮かせる
• 商品写真は下に映り込みと影を入れ、台に置いたように見せる
• そのほかの要素はフラットにし、影は付けない

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 動画サムネイルは角丸なしの16:9。商品は背景を抜いた缶とグラスで置く
• セクション境界: 商品セクションの上下は、都市（電波塔入り）のシルエットで区切る
• ボタンは白の細い枠付きの長方形にし、右上に別窓アイコンを置く
• 金の細枠の囲みラベルは角を立てる
• SNSアイコンだけは丸形にする

Components

• 商品写真付きの購入ボタン（button-purchase）: 左端に缶の写真、中央に2行の文字。白い細枠と光る影、右上に別窓アイコンを置く
• 店舗検索ボタン（button-shop）: 青緑の地に1行の文字を中央に置く。白枠付き
• アイコン付きの金見出し（heading-icon-gold）: 金のアイコン（ホップや人物）と金色の明朝見出しを並べ、下に全幅の線を引く
• 丸ポイントの特長リスト（feature-bullet）: 色付きの丸の後に項目名を置き、その下に説明文を字下げして入れる
• 金枠の囲みラベル（badge-gold-frame）: 金の細い線で囲み、2行の金色テキストを入れる
• 限定の丸バッジ（badge-limited）: オレンジ色の円に、2行の茶色の文字を入れる。商品写真の左上に重ねる
• 動画サムネイル（video-thumb）: 16:9の写真の中央に、半透明の白い再生ボタンを置く。上に動画タイトルを添える
• 欧文ラベル付きのフッターナビ（footer-nav）: 上に金の欧文ラベル、下に白い和文の項目名を置き、項目ごとに白線で区切る

Do's and Don'ts

Do - 地は紺系にして、夜の都会の空気感をつくる - 商品ごとにテーマ色を決め、地・線・ボタンの色をその色でそろえる - セクションの境目に都市シルエットを入れ、街の物語として流れをつなぐ - 金は線・枠・見出しの細い要素だけに使う - 本文は字間・行間を広くとって上品に組む

Don't - ポップな原色や太い枠を使わない - ボタンをピル型にしたり、角を大きく丸めたりしない - 金を大きな面に塗らない - 1つのセクションに、ほかの商品のテーマ色を混ぜない - 白い地のセクションを入れない

Page Structure

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

1. ヘッダー（ブランドを示す）: 紺の帯の中央に金枠のロゴ、右にハンバーガーメニューを置く。下端に金の細線を引く
2. ファーストビュー（世界観と主力商品を伝える）: 夕焼けの都市の写真の上に、手書きのキャッチ、缶とグラス、ロゴを重ねる
3. ブランド動画（情緒的な共感をつくる）: 紺の地に動画タイトルとサムネイルを置く
4. ブランド紹介（作り手と産地の信頼を伝える）: 白い大見出し、4行の本文、金枠ラベルを並べ、青い工場のシルエットイラストを添える
5. 商品1紹介（定番商品の味を説明する）: 青の地に手書きの商品名、都市シルエット、缶とグラス、中央揃えのコピーを置く
6. 商品1の特長と開発者の声（味の根拠と作り手の思いを伝える）: 金見出し、丸ポイントのリスト、左揃えの長文を並べ、下端を都市シルエットで閉じる
7. 商品2紹介（限定商品の味を説明する）: 茶の帯にイルミネーションのボケと手書きの商品名を入れ、黄土の地に限定バッジと缶を置く
8. 商品2の特長と開発者の声（味の根拠を伝える）: 茶の文字と茶の線で、商品1と同じ構成にする。下端は茶の都市シルエット
9. 購入・外部リンク（購入や店舗検索へ誘導する）: 濃紺の地に、商品色の光るボタン4つを縦に並べる
10. フッター（サイト内を回遊させる）: ロゴ、欧文ラベル付きのナビ、丸いSNSアイコン、黒帯の言語セレクトを置く

Imagery

• 夕焼けや夜景の都市の空撮写真を使い、オレンジから紺へのグラデーションの空を見せる
• 背景を抜いた缶と、泡がしっかり立ったグラスを並べ、下に映り込みを入れる
• 都市のシルエットイラスト（電波塔入り）を単色で描き、セクションの区切りに使う
• 限定品の写真には、暖色のボケた光の玉を散らして冬のイルミネーション感を出す
• 見出しアイコンはホップや人物の横顔を金一色で描く
• 人物写真は夕暮れの逆光で撮り、浅い被写界深度にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではヘッダーに欧文ラベル付きのナビとSNSアイコンを横並びにする
• PCの商品セクションは、左に缶とグラス、右に中央揃えのコピーを置く2カラムにする
• PCのブランド紹介は、左に本文、右に工場のシルエットを配置する
• PCの購入ボタンは2×2のグリッドに並べる
• 本文幅は、PCでも最大800px程度の中央寄せにする

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