DESIGN.md — 水色×ピンクのぼかしグラデ ビール LP（Aqua Pink Gradient Premium Beer LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: 清潔・爽やか、上品・高級、やさしい・柔らかい
• キーワード: ぼかしグラデーション・シアン・ピンクの光・明朝体・白カード・手書き欧文
• 地の質感: 細かいノイズ粒子が乗ったエアブラシ調のぼかしグラデーション。光の玉が漂うような柔らかい質感。
• 形: 小さめの角丸（約6px）の白カードとピル型のアウトラインボタン。直線的で整った表組み。
• 温度感: 涼しげで透明感があり、ピンクの差し色でほのかに温かい

Colors

• 地はシアンを基調に、ピンクと薄紫の光を大きくぼかして散らす
• 情報量の多い内容は白カードに載せ、文字は紺と黒で書く
• シアン地の上の文字はすべて白にする
• 紺は番号・小見出し・表見出し帯・ボタン文字に限って使う
• 金はフッターだけに使い、上品さを足す
• 原色の赤や緑は使わず、写真の中だけに収める

Typography

• 和文の見出しと本文は細めの明朝体で上品にまとめる
• 見出しの下に英字ラベルを小さく字間広めで添え、背面にうっすら紋章を敷く
• シアン地の本文は中央揃えにし、短い行で改行する
• 表・数値はゴシック体にして読みやすくする
• 手書き風の欧文や和文のロゴタイプを区切りに大きく置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード内も縦積み
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 18px（375px 幅換算）
• 白カードは左右に約18pxの余白をとって配置する
• セクション見出しは中央揃えにし、上下の余白を広くとる
• カード内では写真を全幅にし、上に番号見出し、下に紺のリードと黒の本文を置く
• 商品写真は背景を切り抜き、余白を広くとって大きく並べる

Elevation & Depth

• 白カードに薄く広い影（0 4px 16px rgba(0,0,0,0.12)）をつける
• 切り抜いた商品画像にはごく弱い落ち影
• ボタンは影をつけずに線だけ

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: カード内は角なしの長方形。商品は背景を切り抜く
• セクション境界: 境界線を引かず、グラデーションのにじみで移り変わる。フッター上端は金色の光の帯
• カードは角丸6px程度の控えめな丸み
• CTAは紺の細い枠を持つ白のピル型
• 表は細い罫線で仕切る長方形

Components

• 紋章付きセクション見出し（section-heading）: 白の明朝見出しの下に英字ラベルを置き、背面に半透明の紋章を重ねる
• 白コンテンツカード（content-card）: グラデ地に浮かぶ白カード。番号付きの見出し、写真、リード、本文の順に並べる
• 番号付き小見出し（number-heading）: 大きめの明朝の2桁番号に紺の短い見出しを横に並べる
• 比較表（comparison-table）: 紺の帯タイトルの下に2列の比較表。行見出しは紺の縦書き風で、セルに図解やパッケージを入れる
• 店舗検索ピルボタン（button-primary）: 白地に紺の枠と紺の太字。右に外部リンクのアイコン
• 成分グリッド（nutrition-grid）: 白カードの中に、生成りのセルを3列×2段で並べる
• 画像バナーカード（banner-card）: 写真の全面に大きな英字見出しと小さな和文を白で重ねる誘導バナー
• 紺グラデのフッターナビ（footer-nav）: 上端に金の光を置いた紺から濃紫へのグラデに、細線で区切った縦のリンクリストと金のSNSアイコンを並べる

Do's and Don'ts

Do - 背景のピンク・薄紫の光は大きく柔らかくぼかし、粒子ノイズを薄く乗せる - 白カードとグラデ地を交互に見せ、読みやすさと世界観を両立する - 見出しは明朝体の白で、字間を広めにとる - 手書き風ロゴタイプをセクションの区切りに大きく置く - 商品は切り抜いて大きく、余白をたっぷりとる

Don't - 背景を単色のベタ塗りにしない - 太いゴシック体の大見出しや派手な赤のCTAを使わない - カードに強い影や大きな角丸をつけない - シアン地に紺や黒の小さな文字を置かない - 情報を詰め込みすぎず、余白を削らない

Page Structure

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

1. ファーストビュー（ブランドの世界観を一目で伝える）: 人物が飲む写真に、ピンクと水色のぼかしと大きな手書き欧文を重ね、下部に白のロゴタイプを置く
2. キャンペーンバナー（限定品へ誘導する）: 横長のバナーに、左上の金色のタブと限定パッケージ3種を並べる
3. 商品紹介リード（商品の価値を短く伝える）: 缶とグラスの切り抜きの下に、白の明朝で3行のリードと中央揃えの本文。最後に手書き欧文を置く
4. 特長（おいしさの理由を説明する）: 紋章付きの見出しと白カードに、番号付きの項目を2つ。それぞれ写真と説明を添える
5. デザイン紹介（パッケージの魅力を伝える）: グラデのカードに斜めに置いた缶を大きく見せ、紺の明朝コピーを置く
6. ブランドストーリー（コンセプトを語る）: 円形のエンブレムの下に白の明朝で長文を中央揃えし、手書きロゴで締める
7. 比較・解説（カテゴリの違いを理解させる）: 白カードに透かし欧文付きの見出しと紺の帯、2列の比較表を置く
8. 製品情報（ラインアップを見せる）: 切り抜いた缶とパックを縦に大きく並べ、小さな容量表記を添えてピルボタンで締める
9. 栄養成分（スペックを開示する）: 白カードに原材料と、3×2の生成りのセルの成分グリッド
10. 関連コンテンツ誘導（ギフト・店舗へ回遊させる）: 写真に白い英字見出しを重ねたバナーカードを縦に2枚
11. フッター（サイト内ナビとSNS）: 金の光から紺・濃紫へのグラデに、ロゴ・リンク一覧・金のSNSアイコン。その下に淡いグレーの企業共通フッター

Imagery

• 人物は明るい自然光で撮った笑顔のカット。色を飽和気味にし、ピンクと水色のぼかしを重ねる
• 商品は背景を完全に切り抜き、ハイライトのきれいなスタジオ撮影
• 原料・手元は背景を暗くするかぼかして寄りで撮り、素材感を強調する
• 装飾として、大きな手書き風の欧文・和文ロゴタイプを白の細い線で描く
• 見出しの背面に、葉と麦をモチーフにした線画の紋章を半透明で置く
• 比較図解は紺の細い線で描くシンプルなタンクのイラスト
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約80%に広げ、白カードの中を2カラムに並べる
• PC の商品紹介リードは、左に商品画像、右に縦書き風のリード文を置く2カラム
• PC の製品一覧は4つを横1列に並べ、ボタンを2つ横に並べる（白枠と紺ベタ）
• PC のファーストビューは横長の角丸画像にし、上にナビバーを重ねる
• PC のフッターはロゴ・リンク・SNSの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 行書くと起動時に読み込まれる。