DESIGN.md — 青空グラデと黄色帯の爽快チューハイ LP（Sky Blue Gradient Refreshing Chuhai LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: 清潔・爽やか、ポップ・元気、力強い・インパクト
• キーワード: 青空・グラデーション・白抜き文字・黄色帯・浮遊する缶・爽快
• 地の質感: 縦方向の空色グラデーションを帯状に繰り返す。ノイズや紙の質感はなくクリアでデジタルな面。
• 形: 角丸 16px 前後の写真枠に半透明水色の太いフチ。見出しは右端を斜めにカットした黄色リボン。
• 温度感: 寒色が主で、黄色のアクセントで明るい夏の昼を感じさせる

Colors

• 地は濃い青→水色の縦グラデを 1 セクションごとに繰り返し、境目でくっきり切り替える
• 文字は青地上では基本白抜き
• 強調は黄色のみ。帯見出し・マーカー・日付に限定する
• 白は情報カードと枠ボタンの線だけに使う
• 商品の色（オレンジ・紫・緑）は缶写真に任せ、UI には使わない
• page は文字 #1A3A5C × 背景 #52A3C4 のコントラスト比が 4.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#61ABC9、4.53:1）を使う。
• label-band は文字 #FFFFFF × 背景 #15B3E3 のコントラスト比が 2.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#0F7FA2、4.59:1）を使う。

Typography

• 本文も太字で、白抜きでも潰れない太さにする
• 英字見出しは極太にし、淡い水色の縁取りや影で浮かせる
• 本文は中央揃え、ステートメントは左揃えで行間を広く取る
• 商品名は英字を大きく字間を広げ、和名を角括弧で下に小さく添える
• サイズの段階ははっきり分け、中間のサイズを増やさない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品一覧は 3 列、製法の手順は写真と文の 2 列
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションの頭は英字の大見出しを中央に置く
• 写真枠は左右に余白 24px 程度を残す
• 手順は左に写真、右に黄色帯見出しと説明文
• 商品は 3 列グリッドで余った分は左詰め
• グラデ帯の切り替えとセクションの区切りを合わせる

Elevation & Depth

• 影はほぼ使わず、半透明水色の太いフチで写真を浮かせる
• 缶写真には切り抜きと自然な落ち影を付ける
• 英字見出しに淡い外側グローを付ける

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 18px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸の長方形で、水色の太いフチ（6px 前後）で囲む。缶は切り抜き
• セクション境界: 直線。グラデの色が急に切り替わる横の境界
• 黄色帯は右端を斜めにカットし、右へフェードさせたリボン形にする
• ボタンは角丸小さめの白線の枠
• 情報カードは白地で角丸 12px、水色フチ付き

Components

• 英字大見出し（section-title-en）: 極太英字を白抜きにし、水色の縁取りを付けて中央に置く
• 黄色リボン見出し（ribbon-heading）: 黄色の帯に紺文字。右端は斜めカットとフェード
• フチ付き写真枠（framed-photo）: 角丸写真を水色の太いフチで囲む。動画には中央に白丸の再生ボタンを置く
• 白い説明カード（info-card）: 白地に黄マーカーの見出し、青ラベル帯、グラフを収める
• 青ラベル帯（label-band）: カード内のポイントを 2 行で示す青い帯。中央揃えの白文字
• 商品タイル（product-tile）: 缶の切り抜き写真の下に、英字名と和名を角括弧付きで置く。上に黄色の発売日
• 白線の枠ボタン（button-outline）: 透明地に白い 1px 線、角丸小。2 つ横に並べる
• 製法の手順行（step-row）: 左にフチ付き写真、右にリボン見出しと短い説明文

Do's and Don'ts

Do - 地は空色グラデの帯を繰り返して爽快感を保つ - 強調は黄色に限定する - 写真はすべて水色フチの角丸枠に統一 - 缶写真は斜めに傾けて浮遊させる - 白抜き文字は太字にする

Don't - 暖色の背景や暗いセクションを入れない - 細い明朝や細字を使わない - 影の強いカードやグラデのボタンにしない - 黄色以外の強調色を増やさない - 写真を枠なしの四角で置かない

Page Structure

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

1. ファーストビュー（ブランドの世界観とタレントの印象を一気に伝える）: 青空を背景に人物 2 名と浮かぶ缶。中央に縦組みの巨大な白い筆文字ロゴ、左右に縦書きの短いコピー
2. ブランドステートメント（商品に込めた思いを語る）: 青グラデ地に白の大見出しと、行間の広い白い太字本文を左揃えで置く
3. 商品ビジュアル（主力の味を印象づける）: 缶 3 本を大小に傾けて斜めに配置
4. ニュース（受賞などの実績を伝える）: 英字見出しと一文の下に、フチ付きのバナー画像
5. おいしさの秘密（技術の価値を伝える）: ロゴアイコン付きの見出し、果物写真、黄色リボン、中央揃えの説明文
6. 製法の手順（製法を 3 段階で説明する）: 写真と文の 2 列の行を 3 つ縦に並べ、見出しは黄色リボン
7. 紹介動画（動画で理解を深める）: フチ付きサムネイルの中央に白丸の再生ボタン
8. 味わいのポイント（味の特徴を図で示す）: 白カードに黄マーカーの見出し、青ラベル帯 2 本、香味の推移の曲線グラフ
9. 商品ラインナップ（定番品と限定品を見せる）: 英字見出しのあと缶を 3 列で並べ、限定品の小見出しと黄色の発売日
10. CM（広告動画をまとめて見せる）: フチ付きのサムネイル、篇名、秒数の枠ボタン 2 つを縦に繰り返す
11. ページトップ（先頭へ戻す）: 白い太字英字を中央に置く

Imagery

• 人物は青空の下、白〜水色の服で明るく笑う写真
• 缶は水滴の付いた切り抜きにし、斜めに浮遊させる
• 果物は青背景で 1 個だけを主役にしたシズル写真
• 製法写真は青背景の凍結・粉末・気泡のマクロ写真
• グラフは黄色と水色の曲線にぼかした光の円を重ねる
• CM のサムネイルは果樹園など緑の多い屋外シーン
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 60% に絞って中央に置き、地のグラデは全幅
• PC のステートメントは文章を左、缶を右に置く 2 カラム
• 製法の手順は PC で 3 列カードにし、写真の下にリボンと文を置く
• CM は PC で 3 列に横並び
• 商品の 3 列グリッドは PC でも同じ

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