DESIGN.md — 虹色パステルと青紫の飲料ブランドLP（Holographic Pastel Gradient Beverage Brand LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: ポップ・元気、クール・先進的、かわいい
• キーワード: ホログラム・パステルグラデ・3D容器・雲形見出し・カプセル形・キラ星
• 地の質感: すりガラスのような柔らかいグラデーションと、つや消しの3Dレンダリング質感
• 形: 縦長のカプセル（スタジアム形）、雲形の見出し帯、四芒星のキラキラ、ピル型ボタン
• 温度感: 明るく軽い。青紫の文字で少しクールに締める

Colors

• 背景は黄・水色・ピンク・ラベンダーが溶け合うパステルグラデにし、単色の白地はほぼ使わない
• 文字・線・アウトラインボタンは青紫1色に統一する
• セクション見出しの雲形帯は、橙から紫へのグラデか白地に紫文字のどちらかにする
• コラボカードは橙・赤・黒などの強い単色を使い、パステル地の上で目立たせる
• 黄色はNEWバッジや矢印ボタンなどの小さな強調だけに使う
• 主ボタンはべた塗りの青に白文字。他のボタンは白地か透明地に青紫の枠線
• arrow-circle は文字 #FC0202 × 背景 #FEFEFE のコントラスト比が 4.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#ED0202、4.52:1）を使う。
• collab-card は文字 #F1F5FF × 背景 #FE7901 のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#B45601、4.5:1）を使う。

Typography

• 文字はほぼすべて青紫にし、黒文字は使わない
• 見出しは日本語を大きく、その下に英字を小さく添えた2段組みにする
• 導入文は中央揃えの太字で、1行15〜20文字の2行にまとめる
• 字間は0.05〜0.1emほど広めに取り、軽く見せる
• ディスプレイ書体の一部に虹色グラデを入れてもよい
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品は横スクロールのカルーセルで見せる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 各セクションは画面幅いっぱいの縦長カプセル形の面に収める
• カプセルとカプセルの間には、3D容器を敷き詰めた背景をのぞかせる
• 見出し→導入文→カード→ボタンの順に、すべて中央揃えで並べる
• カードの右下に円形の矢印ボタンを少しはみ出させて重ねる
• お知らせは角丸パネルにまとめ、日付と本文の2列を細線で区切る

Elevation & Depth

• 基本的に影はつけず、グラデーションで奥行きを出す
• 円形の矢印ボタンには薄くぼかした影をつける
• 3D容器のレンダリング画像そのものが立体感を担う

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 200px。ボタンはピル型。
• 写真の切り抜き: 商品は背景を切り抜いた単体画像。コラボ画像は四角か看板形に切り抜く
• セクション境界: 上下が半円になった縦長カプセル形の面で区切る
• 見出し帯は角がもこもこした雲形にし、下に丸い点を2つ添えて吹き出しに見せる
• 四芒星のキラキラ（ピンク→紫のグラデ）をカプセルの縁に散らす
• ボタンはピル型か正円にする
• パネルは角丸16pxにする

Components

• 雲形見出し（cloud-heading）: 雲形の帯に、日本語の見出しと英字の小見出しを2段で入れる。下に丸い点を2つ添えて吹き出し風にする
• カプセル面（capsule-section）: 画面幅いっぱいの縦長スタジアム形の面。中はグラデーションで塗る
• アウトラインボタン（button-outline）: 透明地に青紫の細い枠線を引いたピル型ボタン。文字は中央に置く
• 問い合わせボタン（button-primary）: 青のべた塗りに白文字のピル型。アイコンを付け、2行目に補足を小さく入れる
• 円形の矢印ボタン（arrow-circle）: 白か黄色の円に「>」を描く。カードの右下にはみ出すように重ねる
• コラボカード（collab-card）: 強い単色の看板形カード。上部にロゴ風の大きな見出し、下部に2行の白い太字説明を入れる
• NEWバッジ（badge-new）: 黄〜緑のグラデの円に、青紫の英字を入れる
• お知らせパネル（news-panel）: パステルグラデの角丸パネル。日付と本文を2列に並べ、間を細線で区切る

Do's and Don'ts

Do - 背景には必ず虹色パステルのグラデーションと3D容器を使う - 見出しはすべて雲形の帯で統一する - 文字色は青紫1色に揃える - カプセルの縁に四芒星のキラキラを2〜3個置く - 商品は切り抜き画像にし、白い雲形の台座に乗せる

Don't - 黒やグレーの本文文字を使わない - 四角い単色の白背景のセクションを作らない - 影を強くつけたり、立体的なボタンにしたりしない - 明朝などの硬い書体を見出しに使わない - 強い原色を広い面に使わない（コラボカードだけの例外にする）

Page Structure

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

1. ファーストビュー（ブランドの世界観を一目で伝える）: 3D容器を並べたグラデ背景に、ロゴ風の大見出しと2行の短いコピーを置く。下に「〜とは」のアウトラインボタンを置く
2. コラボレーション（話題性のある企画を紹介する）: パステルのカプセル面に雲形見出しと導入文を置き、強い単色のコラボカードを縦に並べる
3. 商品ラインナップ（挑戦的な商品群を見せる）: 紫グラデのカプセル面に、大きな商品画像と白い雲形の台座カードを置く。下に商品サムネのカルーセルとドット送りを付ける
4. ポイント制度（会員の特典を伝える）: 水色〜ピンク〜黄のカプセル面に雲形見出し・2行の説明・MOREボタンを置き、3Dコインのイラストを青い角丸パネルに入れる
5. お知らせ（最新の告知を伝える）: 角丸のグラデパネルに日付と本文の一覧を並べ、最後にMOREボタンを置く
6. フッター・問い合わせ（窓口と規約を案内する）: ロゴを再び置き、白い注意枠・青いピル型の問い合わせボタン・電話情報・細線で区切ったリンク一覧・飲酒の注意書きを並べる

Imagery

• グラス・瓶・缶・ジョッキを、つや消しのホログラム調グラデで3Dレンダリングし、背景に敷き詰める
• 商品は正面向きの切り抜きで、少し傾けて動きを出す
• 四芒星のキラキラは、ピンク〜紫〜黄のグラデで描く
• コイン等のアイコンも、同じパステル3D質感で作る
• 人物写真を使うときは、赤い放射線や紙吹雪を添えたポップな看板風にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC ではカプセルを横長に倒し、左にカード群、右に見出しと説明を置く2カラムにする
• PC の商品カルーセルは、5〜6枚を横に並べて同時に表示する
• PC のお知らせパネルは中央寄せで、幅を60%程度にする
• PC のフッター情報は横に並べ、リンクはスラッシュで区切って1行にする

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