--- version: alpha name: Airy Sky Blue Receipt Campaign LP description: 白から淡い水色へ移るグラデーション地に、鮮やかなシアンの文字と金色リボン見出しを重ねたプレゼントキャンペーンLP。応募締切を枠で囲んで示し、賞品をコースごとのカードに並べ、応募手順をステップカードで見せる、情報整理型の爽やかな構成。 colors: primary: '#09A3DC' background: '#FFFFFF' background-alt: '#E3F4FB' secondary: '#71C4E3' accent-1: '#DA9A02' accent-2: '#FDF324' cta: '#EB3523' on-cta: '#FFFFFF' dark-section: '#000001' text: '#384A56' text-muted: '#555555' marker: '#E60012' surface: '#FCFEFE' primary-accessible: '#077DA9' accent-1-accessible: '#9B6D01' cta-accessible: '#E52815' typography: display: fontFamily: Shippori Mincho fontSize: 48px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em accent: fontFamily: Playfair Display fontSize: 64px fontWeight: 700 lineHeight: 1.0 headline-lg: fontFamily: Zen Old Mincho fontSize: 22px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Serif fontSize: 20px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em body-lg: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em rounded: sm: 4px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' deadline-frame: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 380px label-tag: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' height: 28px prize-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 600px gold-ribbon: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 44px course-badge: backgroundColor: '{colors.accent-2}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 80px lottery-count: textColor: '{colors.accent-1}' typography: '{typography.display}' rounded: '{rounded.full}' height: 56px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 200px section-heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 100px button-download: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 60px button-apply: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' height: 56px --- # DESIGN.md — 水色×白と金リボンの飲料プレゼントキャンペーンLP（Airy Sky Blue Receipt Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: 清潔・爽やか、やさしい・柔らかい、情報量多め・訴求型 - **キーワード**: 白と水色・透明感・金色リボン・斜めストライプ枠・食卓写真・応募手順 - **地の質感**: 白から淡い水色へのグラデーション地。背景に大きな筆記体の透かし文字を薄く敷く。 - **形**: 角丸の細線枠、斜めストライプの額縁、リボン型の帯、黄色の円バッジ - **温度感**: 涼しげで明るい。賞品の金色が温かさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#09A3DC` | 見出し・日付・線のシアン | 4% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 34% | 画素の実測 | | `background-alt` | `#E3F4FB` | 淡い水色のグラデーション地 | 25% | 画素の実測 | | `secondary` | `#71C4E3` | ストライプ枠の水色 | 5% | 画素の主要色に補正 | | `accent-1` | `#DA9A02` | 金色リボン・当選数字 | 3% | 画素の実測 | | `accent-2` | `#FDF324` | コース円バッジの黄色 | 1% | 画素の実測 | | `cta` | `#EB3523` | PDFダウンロードの赤ボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `dark-section` | `#000001` | 最終応募ボタンの黒 | 1% | 画素の実測 | | `text` | `#384A56` | 見出し・商品名の濃紺グレー | 3% | 画素の実測 | | `text-muted` | `#555555` | 注釈文字 | 1% | 推定 | | `marker` | `#E60012` | 注意喚起の赤文字 | 0% | 推定 | | `surface` | `#FCFEFE` | カード内側の白 | 10% | 画素の実測 | | `primary-accessible` | `#077DA9` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#9B6D01` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#E52815` | AA を満たす補正値（計算） | | 計算 | - 地は白から淡い水色へのグラデーションを基本にし、濃色の面は使わない。 - 見出し・日付・ステップ線はシアン1色でまとめる。 - 金色は賞品のリボン帯と当選数の数字だけに使う。 - 黄色の円バッジはコース本数の表示専用にする。 - 赤はPDFダウンロードボタンと注意喚起の1行だけに使う。 - 最終の応募ボタンは黒地に白文字で、ページの最後に置く。 - `deadline-frame` は文字 `#09A3DC` × 背景 `#FCFEFE` のコントラスト比が 2.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#077DA9`、4.59:1）を使う。 - `label-tag` は文字 `#FFFFFF` × 背景 `#09A3DC` のコントラスト比が 2.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#077DA9`、4.53:1）を使う。 - `gold-ribbon` は文字 `#FFFFFF` × 背景 `#DA9A02` のコントラスト比が 2.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#9B6D01`、4.58:1）を使う。 - `course-badge` は文字 `#09A3DC` × 背景 `#FDF324` のコントラスト比が 2.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#077DA9`、4.52:1）を使う。 - `step-card` は文字 `#09A3DC` × 背景 `#FCFEFE` のコントラスト比が 2.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#077DA9`、4.59:1）を使う。 - `button-download` は文字 `#FFFFFF` × 背景 `#EB3523` のコントラスト比が 4.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E52815`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVタイトルの和文部分 | 明朝 | Shippori Mincho | 700 | 48px | 1.1 | 0.02em | | `accent` | 透かし・ロゴ風の欧文筆記体 | 欧文スクリプト | Playfair Display | 700 | 64px | 1.0 | 0.0em | | `headline-lg` | セクション見出し（シアン） | 明朝 | Zen Old Mincho | 500 | 22px | 1.4 | 0.08em | | `headline-md` | 締切日付・賞品名 | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.4 | 0.02em | | `headline-sm` | STEPラベル（欧文セリフ） | 欧文セリフ | Noto Serif | 400 | 20px | 1.2 | 0.02em | | `body-lg` | 応募条件のリード文 | ゴシック | Noto Sans JP | 700 | 17px | 1.7 | 0.02em | | `body-md` | 説明文・ステップ本文 | ゴシック | Noto Sans JP | 700 | 13px | 1.6 | 0.02em | | `note` | ※注釈・サイズ表記 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.02em | - 当選数の数字は太い欧文セリフで大きくし、単位は小さめのゴシックにする。 - セクション見出しは細めの明朝をシアンで書き、字間を広めにとる。 - 日付はゴシックの太字にし、曜日は括弧付きで小さくする。 - 本文は太めのゴシックで、行間は1.6以上にする。 - 注釈は※で始め、10px前後の灰色で書く。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は中央寄せ 1 カラムで、ステップだけ 3 列にする - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - 賞品カードは斜めストライプの額縁で囲み、縦に積む。 - リボン帯と円バッジはカード上端の左に重ねて置く。 - ステップカードの間は12px前後の詰めた間隔にする。 - セクション見出しは中央揃えにし、上下に二重線を引く。 - 最後のボタン群は白地の中で縦に並べる。 ## Elevation & Depth - 影はほぼ使わず、細い線と色面で区切る。 - 日付枠は白地に二重の細線を引き、外側をうっすら発光させる程度にとどめる。 - 賞品写真には商品の下に落ちる自然な影だけを残す。 ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 商品は白背景の切り抜き。FVは人物と食卓の写真を全面に使い、下端を白へフェードさせる - **セクション境界**: グラデーションで地色をなめらかに切り替える。見出しは鍋のアイコンを載せたアーチ線で飾る - ステップカードは角丸12px前後で、シアンの細い線で囲む。 - カード内の区切りは点線にする。 - DLボタンは完全なピル型にする。 - 最終ボタンは角丸なしの矩形にする。 ## Components - **締切情報枠**（`deadline-frame`）: 二重細線の角丸枠。上端中央にアーチ飾りを付ける。シアンのラベル帯の下に日付を大きく並べる。 - **シアンラベル帯**（`label-tag`）: 締切の種類を示す小さな帯。シアン地に白文字。 - **賞品ストライプカード**（`prize-card`）: 水色の斜めストライプ額縁の中に白地を置き、商品写真・商品名・当選数を中央揃えで並べる。 - **金色リボン見出し**（`gold-ribbon`）: 右端が切れ込んだ金のグラデーション帯。白文字で賞品の特徴を入れ、やや右上がりに傾ける。 - **コース円バッジ**（`course-badge`）: 黄色い正円の中に、本数を大きなセリフ数字で書き、コース名を小さく添える。 - **当選数表示**（`lottery-count`）: 金色線のピル枠に抽選ラベルを入れ、その横に金色の大きなセリフ数字と単位を並べる。 - **ステップカード**（`step-card`）: 白地にシアン線の角丸カード。上にSTEP番号、点線の区切り、左に説明文、右に線画アイコンを置く。 - **アーチ見出し**（`section-heading`）: 鍋アイコンを載せたアーチ状の線と上下の二重線で、シアンの明朝見出しを挟む。 - **PDFダウンロードボタン**（`button-download`）: 赤いピル型ボタン。白い太字で2行に書く。 - **最終応募ボタン**（`button-apply`）: 黒い矩形の全幅ボタン。白い大きな文字を入れる。上に白地・黒枠の要項ボタンを添える。 ## Do's and Don'ts **Do** - 地は白〜淡い水色にとどめ、透明感を保つ。 - 背景に大きな筆記体の透かし文字を薄く入れる。 - 賞品はコースごとに同じ型のカードで繰り返す。 - 応募手順は番号付きのカードと線画アイコンで見せる。 - 日付・当選数など大事な数字は大きく太くする。 **Don't** - 濃い色の大きな面を背景に使わない。 - 金色を本文や汎用の装飾に広げない。 - 赤を複数のボタンに使わない。 - ステップのアイコンを写真やリアルな絵にしない。線画で統一する。 - カードに強い影を付けない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャンペーンの世界観と、少ない本数から応募できることを伝える）: 人物と食卓の写真を全面に敷き、上部に明朝と筆記体を組み合わせたタイトルを置く。斜めのシアン帯で訴求を入れ、左上に商品缶を配置する。 2. **応募期間**（締切と対象期間を一目で伝える）: 二重線の枠の中に、シアンのラベル帯と大きな日付を縦に並べる。枠の下に年齢制限の注釈を添える。 3. **賞品紹介**（コースごとの賞品と当選数を見せる）: ストライプ額縁のカードを3枚縦に積む。円バッジと金色リボンを左上に重ね、写真・商品名・当選数の順に並べる。 4. **賞品の注釈**（仕様変更などの但し書きを示す）: 小さな灰色の※注釈を左揃えで並べる。 5. **応募方法**（応募条件と手順を説明する）: アーチ見出しの下に太字のリード文を置き、STEPカードを3枚並べる。 6. **郵送応募の案内**（郵送での応募方法を案内する）: アーチ見出しと説明文の下に、赤いピル型のDLボタンと注釈を置く。 7. **対象商品**（応募対象を明示する）: アーチ見出しの下に商品名を中央揃えの太字で書き、容量を小さく添える。 8. **最終CTA**（要項を確認させてから応募へ誘導する）: 白地に赤い注意文を1行置く。その下に黒枠の要項ボタンと、黒い全幅の応募ボタンを並べる。 ## Imagery - FVは明るい自然光で、白い器の食卓と笑顔の人物を写す。白っぽく軽い色調にする。 - 賞品は白背景の切り抜きにし、正面やや上から撮る。 - アイコンはシアン単色の線画にし、スマホ・指・レシートなどの手順を表す。 - 背景には大きな筆記体の欧文を白や淡い水色で透かして敷く。 - 鍋などの小さな線画アイコンを見出し飾りとして繰り返し使う。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは写真を横長にし、タイトルを左、人物を右に配置する。 - PCの締切枠は横長にし、ラベル帯と日付を横一列に並べる。 - PCの賞品カードは左にテキスト、右に写真を置く横組みにする。 - PCのSTEPカードは3列横並びにし、アイコンを下に置く。 - PCでも本文幅は約800pxで中央に寄せる。 ## 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-7c58cc32`（元 LP の URL から採番） - **元 LP**: https://cp.kirin.jp/story/37037 - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。