--- version: alpha name: Fantasy Green Vending Campaign LP description: 深い翠緑の背景の中央に、白い縦長カラムを置いた構成の飲料キャンペーン LP。明朝体の見出し、ティール系の矢羽根ラベル、金・緑・ティールのグラデーション賞品カードで、ファンタジーアニメとのコラボらしい上品な雰囲気を出している。 colors: primary: '#05AA72' background: '#FAFDFE' background-alt: '#F6FAFB' secondary: '#489590' accent-1: '#02A3A3' accent-2: '#B9A13A' accent-3: '#05AC72' tint-1: '#EEF6F3' tint-2: '#75D1D2' cta: '#02AB94' on-cta: '#FFFFFF' text-body: '#555555' line: '#D2D7C4' dark-section: '#00409A' accent-3-accessible: '#048759' secondary-accessible: '#3D7F7A' cta-accessible: '#028573' typography: display: fontFamily: Shippori Mincho fontSize: 28px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em accent: fontFamily: Cormorant Garamond fontSize: 11px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.15em headline-md: fontFamily: Shippori Mincho fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-lg: fontFamily: Noto Serif JP fontSize: 30px fontWeight: 600 lineHeight: 1.2 body-md: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Shippori Mincho fontSize: 14px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 2px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' prize-ticket-card: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 280px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.label-button}' height: 48px section-heading: textColor: '{colors.secondary}' typography: '{typography.display}' height: 70px step-flow-box: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.body-md}' height: 44px arrow-label: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 20px nav-tabs: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.label-button}' height: 50px accordion: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' height: 52px contact-box: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.headline-lg}' height: 160px --- # DESIGN.md — 翠緑と金枠のファンタジー調キャンペーン LP（Fantasy Green Vending Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: 上品・高級、清潔・爽やか、情報量多め・訴求型 - **キーワード**: 翠緑・明朝見出し・金枠カード・スマホ幅カラム・ファンタジー・手順説明 - **地の質感**: 白地に薄い魔法陣の透かし模様と、水彩風のミントグラデーション - **形**: 四隅をえぐったチケット型カード、矢羽根型のラベル、角丸ほぼなしの細い線枠ボタン - **温度感**: 爽やかでやや涼しい。金色が温かみを加える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#05AA72` | ページ外側の翠緑背景 | 59% | 画素の実測 | | `background` | `#FAFDFE` | 中央カラムの白地 | 10% | 画素の実測 | | `background-alt` | `#F6FAFB` | セクションの淡い青白地 | 6% | 画素の実測 | | `secondary` | `#489590` | ティールの見出し文字・ラベル | 2% | 画素の実測 | | `accent-1` | `#02A3A3` | ティール色の賞品カード | 3% | 画素の実測 | | `accent-2` | `#B9A13A` | 金色の上位賞品カード | 2% | 推定 | | `accent-3` | `#05AC72` | 緑の賞品カード | 3% | 画素の主要色に補正 | | `tint-1` | `#EEF6F3` | 手順ボックスのミント地 | 4% | 画素の主要色に補正 | | `tint-2` | `#75D1D2` | ファーストビュー水彩のミント | 3% | 画素の実測 | | `cta` | `#02AB94` | アコーディオン帯のティール | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ティール帯上の白文字 | 0% | 画素の主要色に補正 | | `text-body` | `#555555` | 本文のグレー文字 | 1% | 推定 | | `line` | `#D2D7C4` | カードの淡い金ベージュ枠 | 0% | 画素の主要色に補正 | | `dark-section` | `#00409A` | 問い合わせ見出しの濃紺帯 | 0% | 画素の実測 | | `accent-3-accessible` | `#048759` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#3D7F7A` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#028573` | AA を満たす補正値（計算） | | 計算 | - 外側は翠緑一色で塗り、中央カラムは白と淡い青白を交互に使う - 見出しとラベルはティール。本文はグレーにする - 賞品カードはポイント数で色を変える（緑→ティール→金） - 金色は上位賞品と装飾の細線だけに使う - 問い合わせ見出しだけ濃紺にして、公式感を出す - `prize-ticket-card` は文字 `#FFFFFF` × 背景 `#05AC72` のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#048759`、4.55:1）を使う。 - `button-outline` は文字 `#489590` × 背景 `#FAFDFE` のコントラスト比が 3.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#3D7F7A`、4.55:1）を使う。 - `step-flow-box` は文字 `#489590` × 背景 `#FAFDFE` のコントラスト比が 3.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#3D7F7A`、4.55:1）を使う。 - `arrow-label` は文字 `#FFFFFF` × 背景 `#489590` のコントラスト比が 3.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#3D7F7A`、4.58:1）を使う。 - `nav-tabs` は文字 `#489590` × 背景 `#FAFDFE` のコントラスト比が 3.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#3D7F7A`、4.55:1）を使う。 - `accordion` は文字 `#FFFFFF` × 背景 `#02AB94` のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#028573`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション大見出し | 明朝 | Shippori Mincho | 700 | 28px | 1.3 | 0.05em | | `accent` | 見出し上の英字ラベル | 欧文セリフ | Cormorant Garamond | 500 | 11px | 1.2 | 0.15em | | `headline-md` | 小見出し・カードのコース名 | 明朝 | Shippori Mincho | 700 | 18px | 1.5 | 0.05em | | `headline-lg` | 当選人数の大きな数字 | 明朝 | Noto Serif JP | 600 | 30px | 1.2 | 0.0em | | `body-md` | 本文 | 明朝 | Noto Serif JP | 400 | 14px | 1.8 | 0.03em | | `note` | ※から始まる注釈 | 明朝 | Noto Serif JP | 400 | 11px | 1.6 | 0.0em | | `label-button` | 線枠ボタン・ステップラベル | 明朝 | Shippori Mincho | 600 | 14px | 1.4 | 0.05em | - ほぼ全文を明朝で組み、上品なファンタジー感を出す - 大見出しの上に、ティールの小さな英字ラベルを「・」で挟んで置く - 当選人数は数字を大きくし、単位は小さくする - 重要な語だけティールで太くする - 注釈は小さいグレー文字で、※始まりの箇条書きにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は約 470px 幅の中央カラムを固定し、左右は背景ビジュアルにする - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - カードは左右 16px の余白を取って画面幅いっぱいに置く - 手順は縦に積み、▼の吹き出しでつなぐ - 各セクションの末尾に線枠ボタンを置く - 賞品カードは 1 列に積み、カード間は 16px あける ## Elevation & Depth - 影はほぼ使わず、フラットに作る - カードの区切りは細い線枠とグラデーションの面で出す - 右下にページトップへ戻る丸ボタンを固定する ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品写真は白い四角の窓に切り抜きで置く。キャラクターは背景を抜く - **セクション境界**: 直線で切り替え、上部だけ水彩風のぼかしを入れる - 賞品カードは四隅を円形にえぐったチケット型にする - ステップ番号と期間ラベルは両端が尖った矢羽根型にする - ボタンは角丸なしの細いティール線枠で、右端に「>」を付ける - カード内の見出しは左右に唐草風の細い装飾を付ける ## Components - **賞品チケットカード**（`prize-ticket-card`）: グラデーションの地。上から、装飾付きのコース名、白い写真窓、大きな当選人数、白線、賞品名、注釈の順に並べる - **線枠ボタン**（`button-outline`）: 白地にティールの細い線枠と文字。右端に矢印を付ける - **英字ラベル付き見出し**（`section-heading`）: 小さな英字ラベルの下に、明朝の大見出しを中央揃えで置く - **手順吹き出し**（`step-flow-box`）: 線枠の白い箱を縦に並べ、▼でつないで流れを見せる - **矢羽根ラベル**（`arrow-label`）: ステップ番号や回数を示す、ティールの両端が尖ったラベル - **3 分割ナビ**（`nav-tabs`）: 英字と日本語の 2 段で書いた白いボタンを 3 つ横に並べる - **アコーディオン**（`accordion`）: ティールのグラデーション帯。左に白文字、右に＋を置く - **問い合わせボックス**（`contact-box`）: 濃紺の見出し帯の下に、明朝の大きな電話番号と受付時間を置く ## Do's and Don'ts **Do** - 見出しと本文は明朝でそろえる - 賞品カードはポイント数ごとに色を変え、価値の差を見せる - 注釈は※始まりで、カードの直下にまとめる - 淡いミントのぼかしや魔法陣の透かしで、世界観を足す **Don't** - ゴシックの極太や原色の赤を使わない - ボタンをピル型や影の強い立体にしない - 緑以外のビビッドな色を地の色にしない - 装飾を増やしすぎて本文の可読性を落とさない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボの世界観と期間を伝える）: キャラクター、ロゴ、キャンペーンバナーを置き、2 回分の期間を矢羽根ラベルで示す 2. **導入文とナビ**（参加方法の要約とページ内移動）: ティールの中央揃え文の下に、3 分割ナビを置く 3. **キャンペーン概要**（参加の流れを 4 段階で示す）: 手順吹き出しを縦に並べ、最下部にキャラクター集合イラストを置く 4. **対象商品**（対象条件と告知物の見本を示す）: 箇条書きのカード、自販機写真、告知見本の画像を並べ、最後に線枠ボタンを置く 5. **賞品紹介**（回ごと・コースごとに賞品を見せる）: 回数の矢羽根ラベルの下に、チケット型カードを縦に積む 6. **はずれ特典**（必ずもらえる特典を訴求する）: 斜線で挟んだ見出しの下に、線枠カードで壁紙の見本と注釈を置く 7. **参加方法**（ステップ順に操作を説明する）: STEP ラベル付きの線枠カードに、端末イラストと注釈を入れる 8. **規約・よくある質問**（補足情報をたたんで見せる）: ティールのアコーディオン帯を 2 本並べる 9. **問い合わせ**（事務局の連絡先を示す）: 濃紺の見出し帯の下に、電話番号を大きく置く ## Imagery - アニメ調キャラクターは背景を抜き、白地に配置する - 賞品は白背景の切り抜き写真にする - 手順は、端末と指アイコンを使った簡素なフラットイラストにする - 背景にミントの水彩ぼかしと、薄い魔法陣の線画を入れる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はスマホ幅の中央カラムをそのまま表示する - PC の左右の余白は翠緑の背景で埋め、上部にキャラクタービジュアルと 3 分割ナビを置く - SP ではカラムを全幅にし、余白 16px で組む ## 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-ec8a4527`（元 LP の URL から採番） - **元 LP**: https://www.asahiinryo.co.jp/entertainment/campaign/brandall/251001-260430/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。