--- version: alpha name: Pop SNS Campaign Gacha LP description: 水色と濃い青の帯を交互に重ね、蛍光イエローとライムグリーンで強調するポップなキャンペーンLP。SNS投稿カード風の枠、ギザギザの爆発バッジ、極太の丸みゴシックで、お祭り感とゲーム感を出している。 colors: primary: '#174FCA' background: '#A5EEFD' secondary: '#FFFF3E' accent-1: '#8CFE43' accent-2: '#F57DE0' surface: '#FAFAFB' dark-section: '#061C4B' cta: '#FEFD43' on-cta: '#1B50B5' background-alt: '#FFFCF5' text-muted: '#AB9A75' accent-3: '#B9260F' on-dark: '#FFFFFF' text-muted-accessible: '#82724F' typography: display: fontFamily: Dela Gothic One fontSize: 96px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.02em headline-lg: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 900 lineHeight: 1.2 headline-md: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 28px fontWeight: 900 lineHeight: 1.0 label-button: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 4px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 48px sns-post-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 150px burst-badge: backgroundColor: '{colors.secondary}' textColor: '{colors.primary}' typography: '{typography.display}' height: 140px speech-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 50px label-band: backgroundColor: '{colors.accent-1}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 70px countdown: backgroundColor: '{colors.accent-1}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 56px rarity-row: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.display}' height: 76px faq-item: backgroundColor: '{colors.surface}' textColor: '{colors.text-muted}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 72px --- # DESIGN.md — 水色×青×蛍光イエローのSNS風お酒キャンペーンLP（Pop SNS Campaign Gacha LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型 - **キーワード**: SNS投稿カード風・ギザギザ爆発バッジ・蛍光イエロー強調・ガチャ・レア度・ジグザグ区切り・方眼背景 - **地の質感**: フラットなベタ塗りに、細い方眼グリッドと濃紺の硬い落ち影を重ねる。グラデーションはほぼ使わない - **形**: 角丸小さめのカード、ギザギザの星形、吹き出し、斜めカットのラベル、セクション境界はジグザグ - **温度感**: 明るく賑やかで若い。寒色ベースに蛍光色で熱量を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#174FCA` | 濃い青の帯セクション地・見出し文字 | 30% | 画素の実測 | | `background` | `#A5EEFD` | 水色のメイン地 | 32% | 画素の実測 | | `secondary` | `#FFFF3E` | 蛍光イエローの強調・バッジ・CTA | 5% | 画素の実測 | | `accent-1` | `#8CFE43` | ライムグリーンの見出し帯・番号丸 | 4% | 画素の実測 | | `accent-2` | `#F57DE0` | ピンクの装飾・価格文字 | 1% | 推定 | | `surface` | `#FAFAFB` | 投稿カード・吹き出しの白地 | 10% | 画素の実測 | | `dark-section` | `#061C4B` | 影・濃紺ラベル | 3% | 画素の実測 | | `cta` | `#FEFD43` | 商品ページボタン | 0% | 画素の実測 | | `on-cta` | `#1B50B5` | CTAボタン文字 | 0% | 画素の実測 | | `background-alt` | `#FFFCF5` | FAQの生成り地 | 7% | 画素の実測 | | `text-muted` | `#AB9A75` | FAQの質問文字（ベージュ茶） | 0% | 画素の実測 | | `accent-3` | `#B9260F` | FAQのQ記号の赤 | 0% | 画素の実測 | | `on-dark` | `#FFFFFF` | 青地上の白文字 | 2% | 画素の主要色に補正 | | `text-muted-accessible` | `#82724F` | AA を満たす補正値（計算） | | 計算 | - 水色地と濃い青地のセクションを交互に置き、境目はジグザグで切り替える - 青地の上は白と蛍光イエローの文字、水色地の上は青文字 - 数字・金額・キーワードは蛍光イエローの塗りか縁取りで強調 - ライムグリーンは見出しラベル帯と番号丸、装飾の曲線に使う - ピンクは小さな装飾（ハート、曲線、価格）に限定 - カードには濃紺の落ち影を右下にずらして付ける - FAQだけ生成り地とベージュ文字で落ち着かせる - `faq-item` は文字 `#AB9A75` × 背景 `#FAFAFB` のコントラスト比が 2.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#82724F`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの巨大数字・金額 | 装飾・ディスプレイ | Dela Gothic One | 900 | 96px | 1.0 | -0.02em | | `headline-lg` | セクション大見出し | 装飾・ディスプレイ | Dela Gothic One | 900 | 44px | 1.2 | 0.0em | | `headline-md` | カード見出し・訴求文 | ゴシック | Zen Kaku Gothic New | 900 | 24px | 1.4 | 0.02em | | `headline-sm` | ラベル帯の小見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.4 | 0.03em | | `body-md` | 本文・説明 | ゴシック | Noto Sans JP | 500 | 14px | 1.7 | 0.04em | | `note` | 注釈 | ゴシック | Noto Sans JP | 500 | 11px | 1.6 | 0.02em | | `accent` | 英字の叫び・装飾文字 | 欧文サンセリフ | Montserrat | 900 | 28px | 1.0 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Zen Kaku Gothic New | 900 | 20px | 1.2 | 0.04em | - 数字は本文の3〜5倍に大きくし、単位は小さく添える - 強調数字は白抜き＋青の太い縁取り＋濃紺の落ち影にする - 1行の中で文字サイズと色を混ぜ、キーワードだけ大きくする - 見出しは中央揃え、本文は短く左揃え - SNSカード内のアカウント名は小さい太字の青 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品サムネイルだけ 2 カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 画面の左右端に細い青い縦ラインを引いて全体を枠で囲む - SNSカードは左右に少しずつずらしてジグザグに重ねる - 金額の段は爆発バッジを左、金額を右に並べる - レア度の表は斜めカットの青ラベル＋白い横帯 - 特徴セクションは方眼地に、見出しラベル帯を写真の角に重ねる ## Elevation & Depth - カードとラベルに濃紺のぼかさない落ち影（右下4〜6px） - ぼかしたドロップシャドウは使わない - お客様の声の埋め込みカードだけ薄いグレー枠 ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は角丸なしの長方形。商品は正方形サムネイル。ボトルは切り抜き横並び - **セクション境界**: 細かいジグザグ（ノコギリ波）で色を切り替える - CTAは角丸なしの長方形に落ち影 - 強調数字の背景はギザギザの星形 - 吹き出しは丸みのある角丸と小さなしっぽ - 番号は丸の中に数字 ## Components - **主CTAボタン**（`button-primary`）: 蛍光イエローの長方形に青の太字、濃紺の落ち影と白い外枠 - **SNS投稿風カード**（`sns-post-card`）: 白地に青枠、左上に丸アイコンとアカウント名、下部にいいね等のアイコン列 - **爆発バッジ**（`burst-badge`）: ギザギザの星形に巨大数字を重ねる - **吹き出し**（`speech-bubble`）: 白い角丸の吹き出しに当選確率や短い訴求 - **見出しラベル帯**（`label-band`）: ライムグリーンの帯に濃い青枠と落ち影、写真の角に重ねる - **カウントダウン**（`countdown`）: ライム地に白い小箱で数字を並べる - **レア度の帯**（`rarity-row`）: 左に斜めカットの青ラベル、右に白帯と黄縁取りの金額 - **FAQアコーディオン**（`faq-item`）: 白いカードに赤いQ、ベージュの質問文、右端に＋ ## Do's and Don'ts **Do** - 数字と金額をとにかく大きく、縁取りと落ち影を付ける - SNSの見た目（アカウント名・アイコン列）をカードに借りる - 曲線・稲妻・ハートなどの小さな装飾を余白に散らす - 青と水色の帯をジグザグで交互に切り替える - 注釈は小さく、必ず強調の近くに置く **Don't** - くすんだ色や黒基調にしない - ぼかした影やグラデーションで高級感を出さない - 明朝体を使わない - 装飾のない大きな余白だけの静かな構成にしない - ピンクを大きな面に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企画名と期間を一目で伝える）: スマホ画面とSNSカードのイラストに巨大数字、斜めの英字、方眼背景 2. **カウントダウンと導入**（締切と企画の趣旨を伝える）: ライムのカウントダウン帯、色違いの強調入り中央揃え文、黄色の枠付き帯 3. **商品説明**（商品の仕組みを短く説明）: 青地に大見出し、大きなイラストの周りに白い吹き出しを3つ 4. **3つの魅力**（購入メリットの提示）: 番号付きSNSカードを左右にずらして重ねる 5. **抽選特典**（賞品の豪華さを訴求）: 青地に爆発バッジ＋金額＋当選確率の吹き出しを段で並べる 6. **商品例**（入る商品のイメージ）: 暗い背景の商品写真を入れたSNSカードを重ねる 7. **達成特典**（目標達成時の追加特典）: 数字パネルと特典の段階表（売切れ・近日表示はグレー被せ）、注釈 8. **担当者コメント・推移グラフ**（親しみと応援の呼びかけ）: SNSカード内に本文、折れ線グラフをピンクで描く 9. **プラン紹介とCTA**（購入へ誘導）: ライム方眼地の商品写真パネルと割引バッジ、黄色CTA 10. **お客様の声**（実際の投稿で信頼を得る）: SNS埋め込みカードを横スクロール 11. **レア度説明**（ランクと価格帯を示す）: 斜めカットラベルの帯表、マスコット付き説明パネル、商品2カラム 12. **実績**（販売数と満足度で安心感）: 青地に爆発バッジの数字、黄色の円グラフ 13. **品質の特徴**（作り手と管理体制を伝える）: 方眼地に写真＋ライムのラベル帯＋短い本文を繰り返す 14. **よくある質問**（疑問の解消）: 生成り地に白いアコーディオンカードを縦に並べる ## Imagery - イラストは太い線のフラットな描画で、青・黄・ライム・ピンクだけを使う - 稲妻・くるっとした曲線・ハート・星などの小さなパーツを散らす - 絵文字風の表情アイコンを見出し末尾に添える - 商品写真は暗い背景にスポット光で高級感を出す - 人物写真は作業場や畑で働く自然なドキュメンタリー調 - ボトルを切り抜いて横一列に並べる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では中央に SP 幅（約 450px）のカラムを固定し、左右は水色地で埋める - 左右の青い縦ラインはカラムの端に付ける - PC では両脇にイラストの装飾や CTA を固定で置いてもよい - 横スクロールの口コミは PC で3枚並べる ## 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-abc8ae1a`（元 LP の URL から採番） - **元 LP**: https://kurand.jp/pages/sakegacha-x30man/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（11/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。