--- version: alpha name: Bold Black Manga Collab Campaign LP description: 黒い地に、赤・青・黄の斜めストライプで左右の縁を囲んだ、にぎやかな漫画コラボのキャンペーンLP。極太のゴシック体と黄色い帯の見出し、赤く傾いたCTAで勢いと高揚感を出す。商品写真は円形パターンの台座に載せて並べ、賞品はカルーセルで紹介する。 colors: background: '#000000' primary: '#C1000F' cta: '#C1000F' on-cta: '#FFFFFF' accent-1: '#FEE464' secondary: '#1E6FE0' dark-section: '#B0141A' surface: '#FEFFFE' on-dark: '#FFFFFF' text: '#131619' surface-alt: '#3A3A3A' tint-1: '#F6C6CC' tint-2: '#BFE3F2' on-dark-accessible: '#595959' typography: display: fontFamily: Dela Gothic One fontSize: 36px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Dela Gothic One fontSize: 28px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New 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.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.7 accent: fontFamily: Montserrat fontSize: 32px fontWeight: 900 lineHeight: 1.0 label-button: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0.03em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 64px 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}' height: 56px heading-band: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 48px label-ribbon: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 24px tab-work: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 90px anchor-nav: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 36px product-disc: backgroundColor: '{colors.tint-1}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 200px course-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 96px carousel-dots: backgroundColor: '{colors.surface-alt}' textColor: '{colors.on-dark}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 40px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 620px terms-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.md}' height: 300px --- # DESIGN.md — 黒地×赤青黄ストライプの漫画コラボ懸賞LP（Bold Black Manga Collab Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: 力強い・インパクト、ポップ・元気、情報量多め・訴求型 - **キーワード**: 黒地・三色斜めストライプ枠・極太ゴシック・黄色帯見出し・傾いた赤CTA・漫画コラボ - **地の質感**: ベタ塗りの黒地。縁取り付きの文字と斜めストライプで、漫画やゲームのような勢いを出す - **形**: 平行四辺形のボタン、太い帯の見出し、円形の商品台座、角丸の白カード - **温度感**: 高温。赤と黄が強く、熱量の高いお祭り感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#000000` | ページ全体の地色 | 45% | 画素の実測 | | `primary` | `#C1000F` | CTAと作品タブの赤 | 6% | 画素の主要色に補正 | | `cta` | `#C1000F` | 主CTAボタンの面 | 2% | 画素の主要色に補正 | | `on-cta` | `#FFFFFF` | CTA上の白文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#FEE464` | 見出し帯・ラベル・強調数字の黄 | 4% | 画素の主要色に補正 | | `secondary` | `#1E6FE0` | 作品タブ・ストライプの青 | 2% | 推定 | | `dark-section` | `#B0141A` | 作品紹介ブロックの深紅グラデ地 | 8% | 画素の主要色に補正 | | `surface` | `#FEFFFE` | 手順・規約の白カード | 10% | 画素の実測 | | `on-dark` | `#FFFFFF` | 黒地上の本文・日付 | 3% | 画素の実測 | | `text` | `#131619` | 白カード内の文字 | 2% | 画素の主要色に補正 | | `surface-alt` | `#3A3A3A` | カルーセルの矢印・番号の暗灰 | 0% | 推定 | | `tint-1` | `#F6C6CC` | 商品台座の淡いピンクストライプ | 2% | 推定 | | `tint-2` | `#BFE3F2` | 商品台座の淡い水色ストライプ | 2% | 推定 | | `on-dark-accessible` | `#595959` | AA を満たす補正値（計算） | | 計算 | - 地は全面を黒にし、左右の縁に赤・青・黄・白の斜めストライプを細く入れる - 黄は見出しの帯・ラベル・当選数の数字だけに使う - 赤は主CTAと作品紹介ブロックの地に絞る - 赤・青・黄の3色は作品ごとのタブに割り当てて見分けられるようにする - 情報量の多い手順・規約は白カードに置き、黒文字で読みやすくする - 商品台座の淡色ストライプは商品ごとに色を変える - `product-disc` は文字 `#FFFFFF` × 背景 `#F6C6CC` のコントラスト比が 1.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `on-dark-accessible`（`#595959`、4.63:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | キャンペーンタイトル | 装飾・ディスプレイ | Dela Gothic One | 900 | 36px | 1.1 | 0.0em | | `headline-lg` | セクション見出し（白文字＋黒縁取り） | 装飾・ディスプレイ | Dela Gothic One | 900 | 28px | 1.2 | 0.02em | | `headline-md` | 応募期間の日付・賞品名 | ゴシック | Zen Kaku Gothic New | 900 | 22px | 1.3 | 0.02em | | `headline-sm` | 作品名（黄）・商品名 | ゴシック | Noto Sans JP | 900 | 18px | 1.4 | 0.03em | | `body-md` | 説明文・手順文 | ゴシック | Noto Sans JP | 700 | 13px | 1.6 | 0.02em | | `note` | 規約・問い合わせ・著作権表記 | ゴシック | Noto Sans JP | 500 | 10px | 1.7 | 0.0em | | `accent` | STEPの番号・カルーセルの番号 | 欧文サンセリフ | Montserrat | 900 | 32px | 1.0 | 0.0em | | `label-button` | CTA・SNSボタン（斜体） | ゴシック | Zen Kaku Gothic New | 900 | 20px | 1.0 | 0.03em | - ほぼすべての文字を太字か極太にし、細い字は規約だけにする - 見出しは白文字に黒の太い縁取りを付け、少し斜体にする - 当選数などの数字は黄の極太で大きくし、単位は小さくする - STEPの番号は斜体の欧文で大きく見せる - 本文は中央揃えで短く改行する - 規約と問い合わせは左揃えの小さな字にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品一覧と手順は 2 列グリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 左右の縁に約12pxの斜めストライプ枠を固定する - セクション見出しは横いっぱいの黄の線の中央に置く - 商品は2列で、円の台座の上に写真、下に2行の商品名 - 賞品は1つずつカルーセルにし、点線の区切りで並べる - セクション内へ移る3つのアンカーボタンを横に並べる ## Elevation & Depth - 影はほぼ使わない。縁取りと色の差で階層を表す - 白カードは黒地の上に置き、影は付けない - CTAは平行四辺形にして、立体感の代わりに傾きで目立たせる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品は切り抜き写真を円形の淡いストライプ台座に重ねる。キービジュアルは長方形 - **セクション境界**: 黄の水平線の中央に見出しを重ねる。賞品同士は白の点線で区切る - 主CTAは右上がりに傾けた平行四辺形にし、右端に三角の矢印を付ける - ラベルは黄の帯で、両端を切り欠いたリボン形にする - カルーセルの番号は円形。選択中は白、それ以外は暗い灰色 - SNSボタンは白い枠線だけの角丸四角 ## Components - **傾いた主CTA**（`button-primary`）: 赤い平行四辺形に白い斜体の極太文字と右向きの三角を置く - **黄帯のセクション見出し**（`heading-band`）: 横いっぱいの黄の線に、白文字＋黒縁取りの見出しを重ねる - **黄色リボンラベル**（`label-ribbon`）: 期間などの項目名を黄の帯に黒字で載せる - **作品切替タブ**（`tab-work`）: 赤・青・黄の3色タブに白縁取りの文字を載せる - **アンカーボタン**（`anchor-nav`）: 黄の平行四辺形に黒縁取りの文字、下に白い矢印を3つ並べる - **商品円台座**（`product-disc`）: 淡いストライプの円に商品写真を重ね、下に商品名を白文字で入れる - **コース月桂冠バッジ**（`course-badge`）: 黄の円に月桂冠と星を付け、中にアルファベットとコース名を入れる - **番号付きカルーセル**（`carousel-dots`）: 左右に灰色の円形矢印、下に円形の番号1〜5を並べる - **手順カード**（`step-card`）: 白カードの中に、黄の下線付きSTEP番号・線画アイコン・説明を2×2で並べる - **規約スクロール枠**（`terms-box`）: 白い角丸の枠にスクロールバーを付け、小さな文字の規約を入れる ## Do's and Don'ts **Do** - 地は黒に固定し、縁に三色の斜めストライプを入れる - 見出しは極太の縁取り文字にする - CTAは傾けた赤い平行四辺形にし、ページ内で2回以上置く - 数字や期間は大きく太く見せる - 作品ごとに赤・青・黄のどれかを割り当てる **Don't** - 細い明朝体や繊細な書体を使わない - 淡い色の地や余白の多い上品な構成にしない - グラデーションや影を多用しない - 黄を本文に使わない - 角丸の大きいピル型ボタンにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボの世界観とタイトルを一目で伝える）: 上部に商品の帯。作品イラストを縦に3段重ね、間に傾けた極太のタイトル文字を挟む 2. **応募期間**（期間と条件を明示する）: 黄のリボンラベルの下に白い極太の日付を2組置く 3. **CTA**（応募に誘導する）: 傾けた赤い平行四辺形のボタン 4. **作品紹介**（コラボ作品と限定パッケージを見せる）: 3色タブで切り替える。赤い地にキャラクター・ロゴ・説明文・パッケージの2列グリッド 5. **アンカーナビ**（主要セクションへ移動させる）: 黄のボタン3つを横に並べ、下に矢印 6. **対象商品**（対象となる商品を示す）: 円形台座に載せた商品写真を2列で並べ、最後に注記を入れる 7. **SNSシェア**（拡散を促す）: 白い枠線のボタン3つを横に並べる 8. **賞品**（コースと賞品の魅力を伝える）: 月桂冠バッジと黄の当選数で示し、作品ごとのカルーセルを点線で区切る 9. **応募方法**（手順をわかりやすく示す）: リード文のあと、白カードの中に4ステップを2×2で並べ、矢印でつなぐ 10. **CTA**（手順を読んだ人を応募へ導く）: 主CTAを再び置く 11. **応募規約**（法的な情報を載せる）: 白い角丸のスクロール枠 12. **お問い合わせ**（問い合わせ先を案内する）: 黒地に白の極太見出し、本文は箇条書きの小さな白文字 ## Imagery - コラボするキャラクターのイラストは、断ち切りで大きく使う - 商品は切り抜き写真にし、少し傾けて動きを出す - 賞品は白い背景の物撮りを黒地にそのまま置く - 手順アイコンは黒い太線のアウトラインで、同じ線幅に揃える - 漫画風の吹き出しや擬音の飛び散りで勢いを足す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央に約900px幅で置き、左右の縁のストライプ枠はそのまま残す - PCのファーストビューは、作品イラスト3枚を横に並べ、上にタイトルの帯を置く - 対象商品はPCで3〜4列にする - 賞品のカルーセルはPCで3列に並べ、縦の点線で区切る - 手順はPCで4つを横一列に並べる - 作品紹介は、PCではキャラクターと説明文を横に並べ、パッケージも6つを横一列にする ## 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-5306b461`（元 LP の URL から採番） - **元 LP**: https://cp.glico.com/giant-2025spr/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（3/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。