--- version: alpha name: Pop Comic Crimson Sports Campaign LP description: 深い赤の地に、紺のパネルと黄色の極太文字を重ねたLP。コミック風のにぎやかなキャンペーン型。切り抜いた人物写真や星・キラキラ・ボールの装飾を余白に散らし、勢いと遊び心を出す。中央のパネルは黄色い縁の角を内側にえぐった額縁形で、そこに情報をまとめる。 colors: primary: '#C72743' secondary: '#1D2087' dark-section: '#011671' accent-1: '#FCF409' cta: '#FEF302' on-cta: '#1D2087' on-primary: '#FDFCFB' surface: '#E8E8F2' marker: '#E32244' background-alt: '#BB3246' accent-2: '#F06FA8' accent-3: '#4FB6E8' text: '#1D2087' line: '#D8D8E8' marker-accessible: '#E32042' typography: display: fontFamily: Dela Gothic One fontSize: 64px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Dela Gothic One fontSize: 30px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 24px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 15px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.02em body-lg: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 2.4 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em label-button: fontFamily: M PLUS Rounded 1c fontSize: 14px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.04em rounded: sm: 6px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 120px components: page: textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' frame-panel: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 600px menu-list: backgroundColor: '{colors.background-alt}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' height: 420px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px section-title: textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 80px case-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 230px marker-highlight: backgroundColor: '{colors.marker}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' height: 24px or-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.secondary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 50px speech-shout: textColor: '{colors.accent-1}' typography: '{typography.headline-md}' height: 120px area-accordion: backgroundColor: '{colors.dark-section}' typography: '{typography.body-md}' height: 48px --- # DESIGN.md — 赤×紺×黄のコミック調スポーツ用品キャンペーンLP（Pop Comic Crimson Sports Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、力強い・インパクト、スポーティ、レトロ - **キーワード**: コミック調・原色3色・極太ゴシック・切り抜き人物・額縁パネル・キラキラ装飾 - **地の質感**: ベタ塗りの平面が基本。紺パネルだけ中央を少し明るくしたグラデーション。ロゴ文字には網点と立体の縁取りを付ける - **形**: 角を内側にえぐった額縁形のパネル、ピル型ボタン、星、斜めの帯文字 - **温度感**: 高温・にぎやか。赤がずっと続き、黄色で熱量を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#C72743` | ページ全体の地の赤 | 50% | 画素の実測 | | `secondary` | `#1D2087` | 情報パネルの紺 | 12% | 画素の実測 | | `dark-section` | `#011671` | 店舗一覧セクションの濃紺 | 8% | 画素の実測 | | `accent-1` | `#FCF409` | 見出しの黄色・パネル縁 | 4% | 画素の実測 | | `cta` | `#FEF302` | 詳細ボタンの黄色 | 1% | 画素の実測 | | `on-cta` | `#1D2087` | ボタン上の紺文字 | 0% | 画素の主要色に補正 | | `on-primary` | `#FDFCFB` | 赤地の上の白文字 | 3% | 画素の実測 | | `surface` | `#E8E8F2` | 条件カード内部の淡いグレー | 2% | 推定 | | `marker` | `#E32244` | キーワードを強調する赤の帯 | 0% | 画素の実測 | | `background-alt` | `#BB3246` | メニューパネルの少し明るい赤 | 4% | 画素の実測 | | `accent-2` | `#F06FA8` | メニューの星(ピンク) | 0% | 推定 | | `accent-3` | `#4FB6E8` | メニューの星(水色) | 0% | 推定 | | `text` | `#1D2087` | カード内本文の紺文字 | 0% | 画素の主要色に補正 | | `line` | `#D8D8E8` | パネル内の細い区切り線 | 0% | 推定 | | `marker-accessible` | `#E32042` | AA を満たす補正値（計算） | | 計算 | - 地は赤一色で通す。情報のまとまりだけを紺パネルに載せる - 黄色は見出し・パネルの縁・ボタン専用。広い面には使わない - 赤地の本文は白の太字、紺パネルの見出しは黄色と白 - 条件カードは淡いグレー地に紺文字。重要語は赤い帯の上に白文字で強調する - ページ末尾は濃紺に切り替え、締めのセクションにする - ピンクと水色は小さな星の装飾だけに使う - `marker-highlight` は文字 `#FDFCFB` × 背景 `#E32244` のコントラスト比が 4.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `marker-accessible`（`#E32042`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | メインのロゴ風英字・大見出し | 装飾・ディスプレイ | Dela Gothic One | 900 | 64px | 1.1 | 0.02em | | `headline-lg` | セクション見出し(和文) | ゴシック | Dela Gothic One | 900 | 30px | 1.2 | 0.02em | | `headline-md` | パネル内の見出し | ゴシック | M PLUS Rounded 1c | 900 | 24px | 1.3 | 0.02em | | `accent` | 見出し下の英字サブラベル | 欧文サンセリフ | Montserrat | 800 | 15px | 1.2 | 0.02em | | `body-lg` | 赤地に置く中央揃えのリード文 | ゴシック | Noto Sans JP | 700 | 15px | 2.4 | 0.08em | | `body-md` | カード内の本文 | ゴシック | Noto Sans JP | 700 | 14px | 1.6 | 0.02em | | `note` | ※印の注釈 | ゴシック | Noto Sans JP | 500 | 10px | 1.7 | 0.02em | | `label-button` | ボタンとメニュー項目 | 丸ゴシック | M PLUS Rounded 1c | 800 | 14px | 1.3 | 0.04em | - すべて太字以上で組み、細い文字は使わない - 見出しは和文を大きく置き、その下に英字の小さなラベルを添えた2段構成にする - リード文は短い行を中央揃えにし、行間を広く取る - 大きなロゴ文字は斜めに配置し、紺の太い縁取りと網点を付ける - 日付などの数字は特大にし、曜日は縦書きにして添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC も中央の約 38% 幅に SP 版をそのまま表示する - **本文ブロックの幅**: 画面幅の約 76% - **余白**: セクション間 120px、基本単位 8px、カード内 20px（375px 幅換算） - 中央のパネルは画面幅の約 75〜80% - パネルの左右と間に切り抜き人物や装飾を散らし、余白を埋める - 見出し・本文・ボタンは中央揃え - セクションの間は大きく空け、その余白に装飾を置く - 2つの条件カードの間に円形の or バッジを挟む ## Elevation & Depth - 影はほぼ使わず、平面で表現する - パネルは黄色い太線と細い赤の二重縁で浮かせる - ロゴ文字には紺色の段差影を付けて立体感を出す ## Shapes - **角丸**: 小 6px ／ 中 10px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 人物は背景を抜いて自由に配置する。ビジュアルは黄色い額縁の中に収める - **セクション境界**: 基本は境界なしの連続した赤。末尾だけ山形(上向き三角)で濃紺に切り替える - パネルは四隅を内側に丸くえぐったチケット・額縁形にする - 条件カードは角丸10px。上部に黄色の帯見出しを付ける - ボタンは黄色のピル型で、文字の後ろに右向き三角を付ける - スライダーの矢印は黄色い円の中に紺の三角 ## Components - **額縁パネル**（`frame-panel`）: 紺または赤の面を黄色い太線で囲み、四隅を内側にえぐったパネル。目次やキャンペーン情報を入れる - **星付きメニュー**（`menu-list`）: 中央揃えの項目を細線で区切り、左右にピンクと水色の星を置いた目次 - **黄色ピルボタン**（`button-primary`）: 黄色地に紺の太字を置き、末尾に三角を付けたボタン - **和英2段の見出し**（`section-title`）: 黄色の大きな和文見出しの下に、白の英字ラベルを置く - **条件カード**（`case-card`）: 上部に黄色の帯と番号、下の淡いグレー地に紺文字の本文を入れたカード - **赤帯の強調**（`marker-highlight`）: 重要語の背面に赤い帯を敷き、白文字を載せる - **orバッジ**（`or-badge`）: 黄色い円に紺の英字を入れ、カードの間に置くバッジ - **人物と斜め叫び文字**（`speech-shout`）: 切り抜いた顔の横に、黄色の斜体キャッチを斜めに添える - **地域アコーディオン**（`area-accordion`）: 濃紺地に白の太字で地域名を並べ、横に下向き三角を付ける ## Do's and Don'ts **Do** - 赤・紺・黄の3色に絞り、原色の強さを保つ - 余白に星・キラキラ線・ボール・切り抜き人物を散らして、にぎやかにする - 情報は必ず黄色縁の額縁パネルに入れる - 見出しは和英2段・黄色で統一する - 重要語は赤帯で強調する **Don't** - 細い文字や明朝体を使わない - パステル調やくすんだ色を足さない - 影を重ねた立体的なカードUIにしない - 装飾を本文の上に重ねて読みにくくしない - 白地のセクションを挟まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企画の世界観とインパクトを伝える）: 放射線背景の上に人物と競技ボールのコラージュを置き、黄色縁で囲む。下部に帯キャッチを入れる 2. **タイトルロゴ**（企画名を印象付ける）: 赤地に白の極太英字と、紺×黄の大きな和文ロゴを置く 3. **イントロ**（キャラクター紹介と呼びかけ）: 白い太字の短い行を中央に並べる。顔の切り抜きと斜めの叫び文字を添える 4. **目次メニュー**（各セクションへ誘導する）: 額縁パネルの中に、星付きの項目を区切り線で並べる 5. **プレゼントキャンペーン**（特典・期間・条件を伝える）: 紺の額縁パネルに傾けた特典画像、斜めの吹き出し帯、特大の日付、条件カード2枚とorバッジ、注釈を順に置く 6. **競技一覧スライダー**（競技ごとのビジュアルを見せる）: 黄色い額縁の中に人物ビジュアルを入れ、左右に黄色い円の矢印を置く 7. **その他のキャンペーン**（関連企画へ誘導する）: 紺の額縁パネルに2つの企画名を区切り線で並べ、黄色ピルボタンを置く 8. **店舗一覧**（店舗情報を案内する）: 山形の境界から濃紺に切り替え、地域アコーディオンを並べる 9. **フッター**（ブランドで締める）: 中央にロゴを置き、左右に顔入りの星アイコンを並べる ## Imagery - 人物は大げさな表情とポーズで撮り、背景を抜いて配置する - ボール・シャトル・ストップウォッチなどの競技道具は、太い紺の輪郭線を付けたイラスト風にする - 背景には放射状の集中線を使い、虹色の光と網点を組み合わせる - 黄色い星と、手描き風の十字キラキラ線を散らす - 特典画像は少し傾け、角に黄色の三角の動き線を付ける - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では中央に SP 幅のカラムを置き、左右は赤地のまま広げる - PC は左に目次パネル、右に装飾コラージュを置いた3分割にする - 中央カラムの左右には細い黄色の縦線を引く - 文字サイズや部品の比率は SP 版のまま維持する ## 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-229a4521`（元 LP の URL から採番） - **元 LP**: https://store.megasports.jp/feature/bukatsu_debut?utm_medium=paid&utm_source=ig&utm_id=120243888848410629&utm_content=120243936060890629&utm_term=120243888848420629&utm_campaign=120243888848410629&fbclid=PAaWdyZARQi79leHRuA2FlbQEwAGFkaWQBqzE5Eq86VXNydGMGYX - **解析に使った画像**: 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/）からご連絡ください。