--- version: alpha name: Pop Comic Cashback Campaign LP description: 集中線が入った黄色の地に、濃紺のドット柄の面を重ねたポップなキャンペーンLP。白いボードカードは太い黒フチとカラーの外枠、四隅のピンで留めた形にし、極太の立体見出しと雷マークでお祭り感を出す。 colors: primary: '#2D5998' secondary: '#F9BC28' background: '#FEFEFE' background-alt: '#F1F1F2' tint-1: '#E3EEFC' cta: '#FE3565' on-cta: '#FFFFFF' accent-1: '#F9DD43' accent-2: '#02B1E5' accent-3: '#F7931E' dark-section: '#0A214B' text: '#2E2E44' marker: '#F9DD43' text-muted: '#8A8A8A' cta-accessible: '#ED0139' typography: display: fontFamily: Dela Gothic One fontSize: 72px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.02em headline-lg: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Montserrat fontSize: 24px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 6px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' board-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 900px heading-3d: textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 110px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px info-band: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 110px step-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 320px slant-ribbon: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 40px burst-badge: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 70px clip-notice: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 240px heading-bar: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 36px tag-outline: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 40px --- # DESIGN.md — 黄×紺のコミック調キャッシュバックLP（Pop Comic Cashback Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型 - **キーワード**: 集中線・アメコミ調・ドット柄・ピン留めボード・極太立体文字・紙吹雪 - **地の質感**: 黄色の放射線と網点、紺地の水玉、カード内の薄い方眼で、印刷物のような質感を出す - **形**: 黒の太フチと角丸カード、斜めのリボン、ギザギザのバッジ、雲形の境界 - **温度感**: 暖色の黄とピンクの強調で高い熱量。紺で引き締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#2D5998` | ドット柄の紺地・見出し帯 | 30% | 画素の実測 | | `secondary` | `#F9BC28` | 集中線の黄色地 | 12% | 画素の主要色に補正 | | `background` | `#FEFEFE` | ボードカードの白地 | 32% | 画素の実測 | | `background-alt` | `#F1F1F2` | STEPカード・注意ボックスの灰色地 | 7% | 画素の実測 | | `tint-1` | `#E3EEFC` | 特典ボックスの淡い青 | 5% | 画素の主要色に補正 | | `cta` | `#FE3565` | 参加ボタン・強調数字のピンク | 3% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 1% | 画素の主要色に補正 | | `accent-1` | `#F9DD43` | 立体見出しの黄色 | 2% | 画素の主要色に補正 | | `accent-2` | `#02B1E5` | カード外枠の水色 | 2% | 画素の実測 | | `accent-3` | `#F7931E` | カード外枠のオレンジ | 2% | 推定 | | `dark-section` | `#0A214B` | カードの黒紺フチ・本文 | 4% | 画素の実測 | | `text` | `#2E2E44` | 本文テキスト | 3% | 画素の実測 | | `marker` | `#F9DD43` | 強調文字の下に引く黄色マーカー | 0% | 画素の主要色に補正 | | `text-muted` | `#8A8A8A` | 受付終了ボタンの灰色 | 1% | 画素の実測 | | `cta-accessible` | `#ED0139` | AA を満たす補正値（計算） | | 計算 | - ファーストビューとCTA帯は集中線入りの黄色地にする - 本文エリアは紺のドット柄を全面に敷き、その上に白いボードカードを置く - カードの外枠はセクションごとに色を変える（黄・水色・ピンク・オレンジ） - 数字や曜日など強調したい語はピンクで大きくする - 情報の見出し帯は紺の帯に白抜き文字 - 紙吹雪はピンク・緑・水色・黄の小さな四角で散らす - `button-primary` は文字 `#FFFFFF` × 背景 `#FE3565` のコントラスト比が 3.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#ED0139`、4.5:1）を使う。 - `slant-ribbon` は文字 `#FFFFFF` × 背景 `#FE3565` のコントラスト比が 3.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#ED0139`、4.5:1）を使う。 - `burst-badge` は文字 `#FFFFFF` × 背景 `#FE3565` のコントラスト比が 3.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#ED0139`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの割合・特典の大きな数字 | 装飾・ディスプレイ | Dela Gothic One | 900 | 72px | 1.0 | -0.02em | | `headline-lg` | 黄色に紺フチの立体セクション見出し | 装飾・ディスプレイ | Dela Gothic One | 900 | 40px | 1.2 | 0.02em | | `headline-md` | 小見出し（左の紺バー付き） | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.02em | | `headline-sm` | STEP説明・帯の見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.02em | | `body-md` | 本文・注意事項 | ゴシック | Noto Sans JP | 500 | 14px | 1.7 | 0.02em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | STEP番号の欧文 | 欧文サンセリフ | Montserrat | 900 | 24px | 1.0 | 0.02em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.2 | 0.04em | - 大見出しは黄色の文字に紺の太フチと下方向の影をつけ、立体に見せる - 見出しの左右には斜めの雷マークを置く - 本文はやや太め（500）で読みやすさを保つ - 注釈は※を頭にぶら下げ、2行目以降はインデントする - リンクは青文字に外部リンクアイコンを添える - 強調語はピンクで大きくし、ほかは紺で書く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、STEPは縦積み - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - ボードカードは左右に約12pxの余白を残して置く - カード内側には約20pxの余白をとる - STEPは灰色のカードにし、カード同士を紺の下向き三角でつなぐ - 期間などの情報は紺の見出し帯と白地の本体の2段で組む - FVの要素は中央揃えで縦に積む - 詳細の項目は左揃えで組む ## Elevation & Depth - カードは黒紺の太フチ（約3px）＋右下へずらした色ベタの影で、浮いたように見せる - 動画カードの背面に黄色の板を傾けて重ねる - ぼかした影は使わない ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: 長方形に紺の細枠をつけ、白フチで額装する - **セクション境界**: 黄と紺の境界は雲形（もくもく）や斜めの直線にする - ボードカードの四隅に丸いピン（色違い）を置く - リボンは平行四辺形の斜め帯 - 動画などのバッジはギザギザの円形 - ボタンは角丸小さめで、太フチをつける ## Components - **ピン留めボードカード**（`board-card`）: 白地に方眼柄。黒フチの外側にカラー枠と影をつけ、四隅に丸ピンを置く - **立体見出し**（`heading-3d`）: 黄文字に紺フチ。左右に雷マークを置く - **参加ボタン**（`button-primary`）: ピンク地に白文字。外部アイコンを添え、指のアイコンも重ねる - **期間情報ボックス**（`info-band`）: 上段は紺帯に白抜きの見出し、下段は白地に太字の日付。全体を紺枠で囲む - **STEPカード**（`step-card`）: 紺のタブにSTEP番号を書き、灰色の本体の中に白枠のイラストを入れる - **斜めリボン**（`slant-ribbon`）: ピンクや紺の平行四辺形の帯に、白抜きで条件を書く - **ギザギザバッジ**（`burst-badge`）: ピンクのギザギザ円に白文字。カードの角に重ねて置く - **クリップ留めメモ**（`clip-notice`）: 白いカードにオレンジのクリップを留め、背面に水色の板を傾けて重ねる - **左バー小見出し**（`heading-bar`）: 左に紺の縦バーを置いた紺文字の見出し - **枠線タグ**（`tag-outline`）: 白地に黒枠の角丸タグを横に並べる ## Do's and Don'ts **Do** - 地は黄色の集中線と紺の水玉を交互に使う - カードは太フチ・ずらした影・四隅のピンをセットで使う - 見出しには必ず立体文字と雷マークを使う - 紙吹雪や星のきらめきで賑やかにする - 日付や条件は帯付きのボックスで明確に示す **Don't** - ぼかした柔らかい影や淡いグラデーションは使わない - 細い明朝体や繊細な書体は使わない - カードの外枠を全セクション同じ色にしない - 白地だけの平坦なセクションを作らない - 強調のピンクを本文に多用しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（特典と期間を一目で伝える）: 黄色の集中線の地。上から順に、斜めリボン、ロゴ、巨大な数字、期間帯、条件リボン、額装したキービジュアルを置く 2. **参加方法**（エントリー期間と手順を示す）: 雲形の境界から紺地に入る。ボードカードの中に期間ボックスとSTEP01〜03を縦に並べる 3. **動画**（紹介動画で興味を高める）: ブラウザ窓風のカードに動画を入れ、ギザギザのバッジを添える 4. **特典**（特典内容を強調する）: 淡い青のボックスにコインのイラストを置き、強調語をピンクの大きな文字にする。下に進呈時期の帯を置く 5. **CTA**（参加を促す）: 斜めに区切った黄色の帯に、横幅いっぱいのボタンとクリップ留めのメモを置く 6. **詳細情報**（対象カードや対象商品を示す）: ピンク枠のボード。左バー付きの小見出しで区切り、灰色ボックスに除外条件を書く 7. **注意事項**（法的な注記を載せる）: オレンジ枠のボード。※付きの文を箇条で並べ、最後に関連情報の見出しとリンクを置く 8. **フッター**（規約リンクを置く）: 黒地に白の小さな文字でリンクと著作権表記を書く ## Imagery - イラストは黒の太い線とフラットな塗りのアイコン調（カード、手、コインなど） - 四芒星のきらめきを緑・ピンク・水色・オレンジで散らす - 黄色地には放射状の集中線、網点、ギザギザの雷模様を重ねる - 四角い紙吹雪を傾けて散らす - キービジュアルは賑やかな集合写真を額装して使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央に約70%幅のボードカードを置き、背景の紺のドット柄と雲を左右に広げる - PCのFVは左にコピー、右にキービジュアルの2カラム - PCのSTEPは3カラムで横に並べ、三角矢印は横向きにする - PCの期間帯は見出しと内容を横並びにする - 文字サイズはSPの約1.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-59338818`（元 LP の URL から採番） - **元 LP**: https://www.jcb.jp/promotion/c25_121usj25cb2607/brand.html - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。