--- version: alpha name: Festive Gacha Carnival Liquor LP description: 濃紺とピンクのグラデーションに、水色の外側背景と生成りの中央カラムを組み合わせた LP。縁日やカーニバルを思わせる賑やかな作りで、太い装飾文字・コイン・紙吹雪で「ガチャ」の楽しさを出す。中央の細いカラムに、特典を 3 つ順に見せる流れと赤い CTA を重ねて訴求する。 colors: background: '#92CBE6' primary: '#3B3B9B' secondary: '#EA3B85' cta: '#EA2F49' on-cta: '#FFFEFD' background-alt: '#FCF1DB' surface: '#FEFEFE' accent-1: '#E31B03' accent-2: '#F2C94C' tint-1: '#F6C6DA' text: '#8A6A3E' dark-section: '#3A3A3A' on-dark: '#FFFEFD' background-accessible: '#EBF6FA' cta-accessible: '#E81835' text-accessible: '#6C5331' secondary-accessible: '#E1186D' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 900 lineHeight: 1.1 headline-md: fontFamily: M PLUS 1p fontSize: 22px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: M PLUS 1p fontSize: 16px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.03em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 40px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px button-sub: backgroundColor: '{colors.accent-2}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px tab-heading: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 40px benefit-list: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 36px countdown: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 28px sns-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 300px number-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 32px faq-item: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 48px --- # DESIGN.md — 紺×ピンクの祭り風お酒ガチャ LP（Festive Gacha Carnival Liquor LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型、和風 - **キーワード**: カーニバル・ガチャ・縁日・グラデーション文字・コイン紙吹雪・市松模様 - **地の質感**: 紺の面にうっすら市松模様を敷く。ピンクから水色へのグラデーションと、光沢のある立体文字を使う - **形**: 角丸カードと角丸のタブ見出し。斜めの帯リボンと和柄の雲を添える - **温度感**: 暖色と寒色が強くぶつかる、お祭りらしい高揚感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#92CBE6` | 外側の水色の背景 | 65% | 画素の実測 | | `primary` | `#3B3B9B` | セクションの濃紺の面 | 12% | 画素の実測 | | `secondary` | `#EA3B85` | ピンクの面と強調文字 | 4% | 画素の実測 | | `cta` | `#EA2F49` | 赤い CTA ボタン | 2% | 画素の主要色に補正 | | `on-cta` | `#FFFEFD` | CTA ボタン上の文字 | 0% | 画素の主要色に補正 | | `background-alt` | `#FCF1DB` | 中央カラムの生成りの地 | 3% | 画素の実測 | | `surface` | `#FEFEFE` | 白いカードと FAQ の行 | 6% | 画素の実測 | | `accent-1` | `#E31B03` | こだわりセクションの赤い面 | 3% | 画素の実測 | | `accent-2` | `#F2C94C` | 金色のコインとボタン | 1% | 推定 | | `tint-1` | `#F6C6DA` | 淡いピンクのタブ見出し | 2% | 推定 | | `text` | `#8A6A3E` | FAQ の茶色の文字 | 0% | 推定 | | `dark-section` | `#3A3A3A` | レア度紹介の暗い面 | 2% | 推定 | | `on-dark` | `#FFFEFD` | 紺の面の上の白文字 | 1% | 画素の主要色に補正 | | `background-accessible` | `#EBF6FA` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#E81835` | AA を満たす補正値（計算） | | 計算 | | `text-accessible` | `#6C5331` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#E1186D` | AA を満たす補正値（計算） | | 計算 | - 外側は水色で埋め、中央の細いカラムだけに中身を置く - 特典を紹介するブロックは濃紺の面に白文字で組む - ピンクから水色へのグラデーションは見出しの文字と帯にだけ使う - CTA は必ず赤に白文字。周りに金色のコインを散らす - こだわりの紹介は赤の面に切り替えて、見え方に変化をつける - FAQ は生成りの地に白い行を並べ、色を抑える - `page` は文字 `#8A6A3E` × 背景 `#92CBE6` のコントラスト比が 2.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-accessible`（`#EBF6FA`、4.53:1）を使う。 - `button-primary` は文字 `#FFFEFD` × 背景 `#EA2F49` のコントラスト比が 4.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E81835`、4.52:1）を使う。 - `button-sub` は文字 `#8A6A3E` × 背景 `#F2C94C` のコントラスト比が 3.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-accessible`（`#6C5331`、4.53:1）を使う。 - `countdown` は文字 `#FFFEFD` × 背景 `#EA3B85` のコントラスト比が 3.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#E1186D`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 企画名のロゴ風の見出し | 装飾・ディスプレイ | Dela Gothic One | 900 | 40px | 1.1 | 0.0em | | `headline-lg` | 金額や倍率など大きく見せる数字 | 装飾・ディスプレイ | Dela Gothic One | 900 | 44px | 1.1 | 0.0em | | `headline-md` | セクションのタブ見出し | ゴシック | M PLUS 1p | 900 | 22px | 1.3 | 0.02em | | `headline-sm` | 小見出しとカードのタイトル | ゴシック | Noto Sans JP | 900 | 18px | 1.4 | 0.02em | | `body-md` | 説明文 | ゴシック | Noto Sans JP | 700 | 13px | 1.7 | 0.03em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `label-button` | CTA ボタンの文字 | ゴシック | M PLUS 1p | 900 | 16px | 1.2 | 0.03em | - 見出しは極太の書体に白いフチ取りと影をつけ、立体的に見せる - 強調したい語だけをピンクのグラデーションにする - 数字は本文の 3 倍以上の大きさにし、単位は小さく添える - 縦書きのラベルを斜めに置いて、動きを出す - FAQ は細めのゴシックで落ち着かせる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は中央に約 480px のカラムを置き、左右の水色の余白にロゴを飾る - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 40px、基本単位 8px、カード内 16px（375px 幅換算） - セクションごとに角丸の色ブロックを置き、ブロックの間に生成りの地を見せる - 見出しはブロック上辺にかかるタブとして配置する - 特典は「その1〜3」の順に、1 つずつ大きなブロックで見せる - CTA は特典紹介の後とページの中ほどに繰り返し置く - FAQ は全幅の行を縦に積み重ねる ## Elevation & Depth - カードには影をつけず、色の面で区切る - 見出しの文字にだけ濃い影とフチ取りをつけて立体感を出す - CTA ボタンの下に濃い色の影をつけ、押せそうに見せる ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 商品ボトルは切り抜いて斜めに並べる。体験談の写真は角丸の四角で切る - **セクション境界**: 角丸のブロックを積み重ね、ところどころに斜めの帯やギザギザのリボンを挟む - タブ見出しは両端を丸めたピル型にする - 番号ラベルは小さなピル型で見出しの左に置く - チェックボックス風の四角でジャンルの選択を表す ## Components - **赤い CTA ボタン**（`button-primary`）: 赤のピル型ボタンに白文字と矢印を入れる。金色のコインを周りに添える - **金色のサブボタン**（`button-sub`）: 一覧表などへ移る金色のピル型ボタン。黒い右矢印をつける - **タブ見出し**（`tab-heading`）: 淡いピンクのピル型に番号ラベルと太字の見出しを並べ、ブロック上辺にかける - **特典の一覧帯**（`benefit-list`）: 紺の面の上に、番号と短い特典名を書いたピンクのピル型を 3 段重ねる - **カウントダウン帯**（`countdown`）: ピンクの帯の上に、残りの日・時・分・秒を白い小箱で並べる - **SNS 投稿カード**（`sns-card`）: 白いカードに投稿の本文と写真を載せ、横スクロールで並べる - **番号バッジ**（`number-badge`）: 赤の面に白抜きの大きな 2 桁番号を入れる - **FAQ アコーディオン**（`faq-item`）: 白い行の先頭に赤い Q、右端に＋を置き、本文は茶色の文字で書く ## Do's and Don'ts **Do** - 見出しは極太の書体にグラデーションとフチ取りを重ねる - コインと紙吹雪をブロックの角に散らし、賑やかさを出す - 特典は番号をつけて 1 つずつ大きなブロックで見せる - 水色の外側背景と生成りの中央カラムの対比を保つ - CTA を 2 回以上繰り返して置く **Don't** - 細い明朝体や、くすんだ色で上品にまとめない - CTA を赤以外の色にしない - 中央カラムを全幅に広げない - FAQ にまで装飾を入れすぎない - 写真を角張った無装飾の枠に入れない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企画の楽しさと開催期間を伝える）: ピンクのグラデーション背景に、ロゴ風の見出しとボトルを扇状に並べる。日付を大きく入れ、下にカウントダウン帯を置く 2. **企画の紹介**（企画の概要と特典 3 つの全体像を見せる）: 紺のブロックに大きな数字の訴求を入れ、斜めの帯の下に特典の一覧帯を 3 段並べる 3. **特典その1**（お得さを金額で示す）: 紺の面にボトルを斜めに並べ、グラデーションの大きな金額を置く 4. **特典その2**（ジャンルを選べることを伝える）: ピンクの面に白いカードを置き、ボトルの線画とチェック欄を横に並べる 5. **特典その3**（当たりの期待感を高める）: 紺の面に集中線を入れ、倍率と最大額を立体的な大きな文字で見せる 6. **CTA**（購入へ誘導する）: 上に割引の帯を置き、ボトル写真と赤いピル型ボタンを並べる 7. **レア度の紹介**（ランクの仕組みを見せる）: 暗い面にランクを書いたボトルをスポットライト風に並べ、金色のボタンを置く 8. **お試しプラン**（気軽に試せる選択肢を示す）: ピンクから水色へのグラデーションの帯に、大きな数字の見出しと赤い CTA を置く 9. **お客様の声**（体験談で安心感を与える）: 紺の帯の上で、SNS 投稿カードを横スクロールで並べる 10. **こだわり**（品質を裏づける）: 赤い市松模様の面に番号バッジと写真を入れ、白文字で説明する 11. **よくある質問**（不安を取り除く）: 生成りの地に中央揃えの見出しを置き、白いアコーディオンの行を縦に積む ## Imagery - カラフルなボトルを切り抜き、扇状や斜めに並べる - 金色のコイン、紙吹雪、紅白の雲の和柄を装飾として散らす - ガチャのカプセルや招き猫風の小さなイラストを添える - 体験談の写真は自宅のテーブルに置いた商品を自然光で撮る - 製造の現場は温かみのある実写で見せる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP では中央カラムを画面幅いっぱいに広げ、余白は 12px 程度にする - PC は約 480px の中央カラムのまま、左右の水色の余白にロゴと雲の和柄を飾る - SNS 投稿カードはどの画面幅でも横スクロールにする - 大きな数字の見出しは SP で 36〜44px に収める ## 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-e6393655`（元 LP の URL から採番） - **元 LP**: https://kurand.jp/pages/sakegacha-carnival - **解析に使った画像**: PC（PC版） - **確度**: 色 中（6/13 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。