--- version: alpha name: Holographic Pastel Gradient Beverage Brand LP description: ホログラムのような虹色パステルのグラデーション背景に、3D風のボトルやグラスを敷き詰めた飲料ブランドのサイト。見出しは雲形のグラデ帯に置き、各セクションは縦長カプセル形の面に入れる。文字色は鮮やかな青紫で統一し、遊び心と未来感を両立させる。 colors: primary: '#0C09D1' secondary: '#6543FC' cta: '#0101FB' on-cta: '#F1F5FF' background: '#FEFEF0' background-alt: '#E5F0F3' tint-1: '#FEFF7F' tint-2: '#FCEAEF' accent-1: '#FBE445' accent-2: '#FE7901' accent-3: '#FC0202' surface: '#FEFEFE' dark-section: '#010101' line: '#2A2AE0' accent-3-accessible: '#ED0202' accent-2-accessible: '#B45601' typography: display: fontFamily: Dela Gothic One fontSize: 90px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.05em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 32px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.05em accent: fontFamily: Nunito fontSize: 15px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.02em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.08em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.08em label-button: fontFamily: Montserrat fontSize: 15px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em rounded: sm: 8px md: 16px lg: 200px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' cloud-heading: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 90px capsule-section: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' rounded: '{rounded.full}' height: 1100px button-outline: textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 48px arrow-circle: backgroundColor: '{colors.surface}' textColor: '{colors.accent-3}' rounded: '{rounded.full}' height: 50px collab-card: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 560px badge-new: backgroundColor: '{colors.accent-1}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 70px news-panel: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 900px --- # DESIGN.md — 虹色パステルと青紫の飲料ブランドLP（Holographic Pastel Gradient Beverage Brand LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: ポップ・元気、クール・先進的、かわいい - **キーワード**: ホログラム・パステルグラデ・3D容器・雲形見出し・カプセル形・キラ星 - **地の質感**: すりガラスのような柔らかいグラデーションと、つや消しの3Dレンダリング質感 - **形**: 縦長のカプセル（スタジアム形）、雲形の見出し帯、四芒星のキラキラ、ピル型ボタン - **温度感**: 明るく軽い。青紫の文字で少しクールに締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0C09D1` | ブランドの青紫。見出し・本文・線に使う | 6% | 画素の実測 | | `secondary` | `#6543FC` | 商品セクションのカプセル面に敷く紫グラデ | 13% | 画素の実測 | | `cta` | `#0101FB` | 問い合わせの主ボタン | 1% | 画素の実測 | | `on-cta` | `#F1F5FF` | ボタン上の文字 | 1% | 画素の実測 | | `background` | `#FEFEF0` | パステル背景の明るい地 | 25% | 画素の主要色に補正 | | `background-alt` | `#E5F0F3` | 水色寄りのグラデ地 | 10% | 画素の主要色に補正 | | `tint-1` | `#FEFF7F` | レモンイエローのグラデ帯 | 8% | 画素の実測 | | `tint-2` | `#FCEAEF` | ピンク寄りのグラデ帯 | 7% | 画素の主要色に補正 | | `accent-1` | `#FBE445` | 商品カードの矢印ボタンとNEWバッジ | 1% | 画素の実測 | | `accent-2` | `#FE7901` | コラボカードの橙色の面 | 3% | 画素の実測 | | `accent-3` | `#FC0202` | コラボカードの赤 | 2% | 画素の実測 | | `surface` | `#FEFEFE` | 雲形の吹き出しとピル型ボタンの面 | 4% | 画素の実測 | | `dark-section` | `#010101` | コラボカードの黒い文字帯 | 2% | 画素の実測 | | `line` | `#2A2AE0` | 区切り線とアウトラインボタンの線 | 1% | 推定 | | `accent-3-accessible` | `#ED0202` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#B45601` | AA を満たす補正値（計算） | | 計算 | - 背景は黄・水色・ピンク・ラベンダーが溶け合うパステルグラデにし、単色の白地はほぼ使わない - 文字・線・アウトラインボタンは青紫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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ風の大見出し（幾何学的な太い角ゴシック） | 装飾・ディスプレイ | Dela Gothic One | 900 | 90px | 1.1 | 0.05em | | `headline-lg` | 雲形帯の中のセクション見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 32px | 1.2 | 0.05em | | `accent` | 見出しの下の英字ラベル（小文字） | 欧文サンセリフ | Nunito | 800 | 15px | 1.2 | 0.02em | | `headline-sm` | セクションの導入文・カード内の短い説明（太字、中央揃え） | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.7 | 0.08em | | `body-md` | お知らせの本文・フッターの情報 | ゴシック | Zen Kaku Gothic New | 500 | 13px | 1.6 | 0.08em | | `label-button` | MOREボタンなどの英字ラベル | 欧文サンセリフ | Montserrat | 500 | 15px | 1.0 | 0.1em | | `note` | 注意書き・著作権表記 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.03em | - 文字はほぼすべて青紫にし、黒文字は使わない - 見出しは日本語を大きく、その下に英字を小さく添えた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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-7c12f228`（元 LP の URL から採番） - **元 LP**: https://fantasy.asahibeer.co.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。