DESIGN.md — 水色グラデと紺金の爽やかビール LP（Aqua Gradient Premium Beer LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: 清潔・爽やか、上品・高級、シンプル・ミニマル
• キーワード: 水色グラデーション・ぼかし背景・白カード・明朝体・手書きロゴ・濃紺×金
• 地の質感: 水面や霧のように柔らかくぼけた青のグラデーション。紙っぽい質感は使わず、デジタルで滑らかな面。
• 形: 小さめの角丸（4〜8px）の白カード。ボタンは少なく、角は控えめ。セクションは直線で区切る。
• 温度感: 涼しい。青が主で、差し色にコーラルピンクを少しだけ使う。

Colors

• ページの地はほぼ全て水色グラデーションにする。単色ベタでなく、明暗の雲状のぼかしを入れる。
• 情報量の多い中身は白カードに載せ、青地には白文字の見出しと短い本文だけ置く。
• カード内の見出し・番号は紺、本文は黒に近いグレーにする。
• コーラルピンクは商品パッケージやバッジだけの差し色で、面積は 2% 以下。
• フッターは濃紺ベタにし、ロゴとアイコンを金で入れる。
• 成分表など数値セルは生成りの面で区切る。
• badge-new は文字 #FFFFFF × 背景 #EB545C のコントラスト比が 3.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#E5242E、4.54:1）を使う。

Typography

• 見出しと本文は明朝で統一し、上品で静かな印象にする。
• セクション見出しは和文明朝の下に小さい英字太ゴシックを添える 2 段構成。
• 青地の本文は中央揃え・短い改行・行間 2 倍以上。
• 手書きの筆記体英字や和文ロゴを区切りの装飾として大きく斜めに置く。
• 数値・表は読みやすさ優先でゴシックを使う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。製品・成分表のみ 2〜3 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 90px、基本単位 8px、カード内 18px（375px 幅換算）
• 白カードは左右 5% の余白を空けて中央に置く。
• セクション見出しの背後に薄い葉のエンブレムを透かして重ねる。
• 青地のテキストブロックは中央揃えで縦に余白をたっぷり取る。
• カード内は番号見出し→写真→リード→本文の順で縦に積む。
• 成分表は 3 列×2 段の生成りセル。

Elevation & Depth

• 白カードはごく薄い影（0 2px 8px rgba(0,0,0,0.08)）で青地から少し浮かせる。
• 商品写真は背景から切り抜いて柔らかい落ち影を付ける。
• ボタンやバナーに強い影は付けない。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: カード内写真は角なしの横長長方形。商品は切り抜き。
• セクション境界: 直線。青地内はグラデーションで自然につなぐ。フッター境界は水平線で切り替え。
• カード・バナーは小さめの角丸で統一する。
• 円形はエンブレムや NEW バッジだけに使う。
• 比較表は細線の罫線で区切る。

Components

• 和英 2 段のセクション見出し（section-heading）: 白の明朝大見出しの下に英字太ゴシックの小ラベル。背後に半透明の葉エンブレム。
• 番号付きポイントカード（point-card）: 白カード内に「01」の紺明朝数字と小見出し、横長写真、紺のリード、黒の本文。
• 円形の新着バッジ（badge-new）: ぼかした縁のコーラル円に白い太ゴシック英字 2 行。
• 2 列比較表（compare-table）: 紺帯のタイトル、紺の列見出し、縦書きの項目名、細線罫線。セル内に線画イラストや商品画像。
• 成分表グリッド（nutrition-grid）: 生成りセルに項目名と数値を中央揃え、3 列×2 段。
• 写真バナーリンク（image-banner）: 角丸の横長写真に白太ゴシックの大英字と小さい和文を左寄せで重ねる。下に白い説明欄を付ける場合もある。
• 円形エンブレム（emblem-label）: クリーム色の円に葉のマークを置き、白い英字を弧状に配した区切りマーク。
• 濃紺フッター（footer-dark）: 金ロゴ、白の小さいメニュー、細線区切り、金アイコン付きの SNS 一覧。

Do's and Don'ts

Do - 背景は水色の柔らかいぼかしグラデーションで全体をつなぐ。 - 見出しは明朝＋英字ラベルの 2 段にする。 - 詳しい情報は白カードにまとめ、青地は余白多めにする。 - 手書き風の英字や和文を装飾に大きく入れる。 - 商品写真は切り抜いて浮遊感のある角度で置く。

Don't - 原色の赤や黄色のベタ面を広く使わない。 - 太いゴシックの大見出しで押し売り感を出さない。 - 青地に長い本文を詰め込まない。 - 大きい角丸やピル型ボタンを多用しない。 - 金色をフッター以外に乱用しない。

Page Structure

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

1. ファーストビュー（ブランドの世界観と人物で惹きつける）: 水色背景の人物写真に、白の手書き風コピーを斜めに重ねる。左上にロゴ。
2. 新商品の告知（新デザインを伝える）: 斜めに浮かぶ商品缶の切り抜きに、コーラル円の新着バッジを添える。
3. 商品紹介（味と香りを要約する）: 缶とグラスの切り抜き、白明朝の 3 行見出し、中央揃えの短い本文、筆記体英字。
4. 特長（おいしさの理由を 2 点で説明）: 白カードに番号付きの見出し・写真・本文を 2 ブロック縦に並べる。
5. デザイン紹介（パッケージの意図を伝える）: ぼかし背景の角丸パネルに缶を大きく置き、下に白文字の説明。
6. ブランドストーリー（商品カテゴリの背景を語る）: 円形エンブレム、白明朝見出し、中央揃えの長めの本文、手書きロゴで締める。
7. 比較（他方式との違いを示す）: 白カード内に紺帯タイトルの 2 列比較表。線画イラスト付き。
8. 製品情報（容量展開と成分を示す）: 切り抜き商品を 2 列並べ、白カードの成分表グリッドを続ける。
9. 関連リンク（ギフトや飲める店へ誘導）: 写真に白英字を重ねた角丸バナーを縦に 2 枚。
10. ブランドフッター（メニューと SNS への導線）: 濃紺地に金ロゴ、細線区切りのメニューリスト、金アイコンの SNS 一覧。
11. 全社フッター（企業情報と飲酒注意の表記）: 白と淡い水色グレー地に、アコーディオン、ロゴバナー 2 列グリッド、注意表記。

Imagery

• 商品は白背景から切り抜き、斜めに傾けて浮かせ、水滴と柔らかい影を付ける。
• 背景は水色にコーラルの光の玉を大きくぼかして散らす。
• 素材写真は暗めの背景で手元を寄りで撮り、自然光で質感を出す。
• 人物は鮮やかな水色背景で笑顔、商品を手に持つ明るい広告写真。
• 細い線の筆記体英字や手書き和文を白で大きく描く。
• 図解は青の単色の線画イラストにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は上部に横並びの白いグローバルナビを置き、ヒーローは人物左・商品右の横長構図。
• 商品紹介とデザイン紹介は PC で画像左・テキスト右の 2 カラム。
• 特長カードは PC で 2 つを横並びにする。
• 比較表と成分表は PC で中央寄せし、最大幅 約 860px に収める。
• フッターは PC で左にロゴ・メニュー、右に SNS の 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 行書くと起動時に読み込まれる。