--- version: alpha name: Festive Red and Gold New Year Campaign LP description: 細かい市松模様の赤を全面に敷き、金色の扇・霞雲・紙吹雪で新春らしさを出したエンタメ系キャンペーンLP。各企画は金の二重罫で囲った角切りパネルに収め、パネルの上に扇形の見出しを載せる。 colors: primary: '#FA0103' background: '#FF0037' secondary: '#E40213' accent-1: '#EDDAA0' tint-1: '#F9D285' accent-2: '#629E95' marker: '#FEDB26' on-primary: '#FEF9FA' cta: '#FEFDFD' on-cta: '#CF1315' text: '#D21D0A' surface: '#FFFFFF' dark-section: '#111111' text-accessible: '#BA1A09' typography: display: fontFamily: Playfair Display fontSize: 64px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0.02em headline-lg: fontFamily: Dela Gothic One fontSize: 20px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em body-lg: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 2.0 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.8 note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 500 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 11px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' fan-heading: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 100px gold-frame-panel: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.body-lg}' height: 600px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 34px info-table: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' height: 300px gold-banner: backgroundColor: '{colors.accent-1}' textColor: '{colors.dark-section}' typography: '{typography.body-lg}' height: 80px nav-card: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 105px speech-bubble: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 50px badge-emblem: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 110px --- # DESIGN.md — 紅白金の和柄で祝う新春キャンペーンLP（Festive Red and Gold New Year Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: 和風、ポップ・元気、力強い・インパクト、情報量多め・訴求型 - **キーワード**: 新春・紅白金・市松模様・扇・霞雲・紙吹雪 - **地の質感**: 赤地に細かい市松の地紋。金箔風のグラデーションとざらついたノイズを重ねる - **形**: 四隅を斜めに切った角切りパネル、金の二重罫、扇形の見出し - **温度感**: 非常に暖かい。祝祭感の強い赤が全体を占める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FA0103` | 全体地の朱赤 | 40% | 画素の実測 | | `background` | `#FF0037` | 市松地の明るい赤 | 12% | 画素の主要色に補正 | | `secondary` | `#E40213` | パネル内の深紅 | 10% | 画素の実測 | | `accent-1` | `#EDDAA0` | 金色の罫線・扇 | 6% | 画素の実測 | | `tint-1` | `#F9D285` | 金の市松パネル地 | 6% | 画素の主要色に補正 | | `accent-2` | `#629E95` | 青緑の海色パネル | 7% | 画素の実測 | | `marker` | `#FEDB26` | ロゴ・小見出しの黄色 | 2% | 画素の実測 | | `on-primary` | `#FEF9FA` | 赤地上の白文字 | 3% | 画素の実測 | | `cta` | `#FEFDFD` | 白いピルボタン | 1% | 画素の実測 | | `on-cta` | `#CF1315` | ボタン文字の赤 | 0% | 画素の実測 | | `text` | `#D21D0A` | 金地上の赤い本文 | 1% | 画素の実測 | | `surface` | `#FFFFFF` | はがき見本の白い面 | 3% | 画素の実測 | | `dark-section` | `#111111` | 英字キャッチ・フッター帯 | 0% | 推定 | | `text-accessible` | `#BA1A09` | AA を満たす補正値（計算） | | 計算 | - ページ全体の地は赤の市松模様にし、白い地や灰色の地は使わない - 企画パネルは深紅・金市松・青緑・多色市松を順に切り替えて単調にしない - パネルの枠と装飾はすべて金色の二重罫で統一する - 赤地の上の文字は白にし、小見出しだけ黄色にする - 金地の上の文字は赤の太字にする - ボタンは白地に赤文字の反転配色にする - `fan-heading` は文字 `#D21D0A` × 背景 `#F9D285` のコントラスト比が 3.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-accessible`（`#BA1A09`、4.5:1）を使う。 - `badge-emblem` は文字 `#D21D0A` × 背景 `#F9D285` のコントラスト比が 3.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-accessible`（`#BA1A09`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 英字ロゴ風のメインタイトル | 欧文セリフ | Playfair Display | 900 | 64px | 1.0 | 0.02em | | `headline-lg` | 扇形の企画見出し | ゴシック | Dela Gothic One | 800 | 20px | 1.2 | 0.08em | | `headline-md` | リード見出し・パネルのタイトル | ゴシック | Noto Sans JP | 700 | 22px | 1.6 | 0.03em | | `body-lg` | 中央揃えの説明文 | ゴシック | Noto Sans JP | 700 | 15px | 2.0 | 0.03em | | `body-md` | 番号表などの一覧 | ゴシック | Noto Sans JP | 700 | 12px | 1.8 | 0.0em | | `note` | 注釈 | ゴシック | Noto Sans JP | 500 | 9px | 1.6 | 0.0em | | `accent` | 英字の小見出し・名前の並び | 欧文サンセリフ | Montserrat | 700 | 11px | 1.4 | 0.1em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.03em | - 本文もすべて太字にし、赤地に負けない強さを持たせる - 説明文は中央揃えにして行間を広めに取る - 扇形の見出しは弧に沿って 2〜3 段に積み、1 段目は小さく前振りにする - 日付は下線付きの太字で目立たせる - 英字ナビの見出しは大きなサンセリフにし、下に小さな日本語の説明を添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。一覧はラベルを左、値を右に寄せた 2 列 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算） - 各企画は画面幅の 92% のパネルに収め、上端に扇の見出しを半分はみ出させて載せる - パネルの中にさらに角切りのサブパネルを入れて情報を区切る - 企画への導線になる扇を 3 つ横に並べて目次にする - ページ末尾には英字ナビカードを縦に 3 枚積む ## Elevation & Depth - 影は使わず、金の二重罫で立体感を出す - パネル外周に細い金線と内側の太い金線を重ねる - 動画の枠は黄色の太い縁で額装する ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸なしの矩形で横に並べる。はがきは白い矩形で見せる - **セクション境界**: 境目は直線。パネル同士は赤の市松地の余白で区切る - パネルとカードは四隅を斜めに切った八角形にする - 見出しは扇形にし、放射状の金の筋を入れる - 吹き出しは楕円形で、赤地に黄色の縁を付ける ## Components - **扇形見出し**（`fan-heading`）: 金色の扇に赤い太字で企画名を 2〜3 段で入れ、パネルの上辺にまたがせて置く - **金二重罫パネル**（`gold-frame-panel`）: 角を切った大きな枠。中の地は企画ごとに深紅・金市松・青緑に変える - **白ピルボタン**（`button-primary`）: 赤いパネルの中に置く、白地に赤文字の横長ボタン - **番号一覧**（`info-table`）: 白い区切り線の下に、ラベルを左・コードを右に並べた太字の表 - **金箔バナー**（`gold-banner`）: 金のグラデーション地に濃い文字を入れ、赤い枠を付けたリンクバナー - **英字ナビカード**（`nav-card`）: 角を切った赤いカードに、大きな英字見出しと小さな説明を入れる - **楕円の吹き出し**（`speech-bubble`）: はがき見本の上に重ね、確認する場所を指す - **金の日輪エンブレム**（`badge-emblem`）: 放射状のギザ縁の金円に、明朝体の 2 文字を入れる ## Do's and Don'ts **Do** - 赤の市松地を全セクションに敷き、祝祭感を途切れさせない - 金色は扇・罫線・雲に限って使い、品よく効かせる - 霞雲と紙吹雪をパネルの外側に散らす - 企画ごとにパネルの地柄を変え、リズムを作る - 情報量の多い一覧も、白い太字と区切り線で読みやすくする **Don't** - 白や灰色の広い背景セクションを作らない - 角丸カードや影の強いカードを使わない - 細い文字や淡い色の文字を使わない - 青緑や多色市松を主役にせず、パネルの地だけにとどめる - 寒色のグラデーションをページ全体に広げない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（出演者と祝祭テーマを一目で伝える）: 人物写真の帯で黄色い英字ロゴを上下から挟み、英字の名前を並べ、紙吹雪を散らす 2. **リード**（キャンペーンの趣旨を伝える）: 日輪のエンブレムと霞雲の下に、白い太字の見出しと説明を中央揃えで置く 3. **企画目次**（3 つの企画へ案内する）: 金の扇を 3 つ横に並べる 4. **おみくじ企画**（動画で楽しませる）: 金罫の赤パネルに和柄のロゴ看板を置き、黄色い縁の動画枠を入れる 5. **年賀状が届く企画**（企画の内容を説明する）: 金市松の地に赤字の説明と地図のイラストを置き、下に動画を入れる 6. **年賀状を送る企画**（デザイン素材と印刷方法を伝える）: 青緑のパネルに雲を描き、絵柄のカルーセルを置く。下に店舗別の赤パネルと番号一覧、白いボタンを並べる 7. **素材リンク**（公式サイトへ誘導する）: 金箔風のバナー 8. **抽選会**（プレゼント企画を告知する）: 多色の市松地に赤い告知帯を置き、はがき見本と吹き出しを添える 9. **関連ナビ**（楽曲・会員・リクエストへ誘導する）: 角切りの英字カードを縦に 3 枚積む 10. **フッター**（ロゴと権利表記を示す）: 赤い四角のロゴと白い小さな文字を中央に置く ## Imagery - 人物は和装で明るいグレー背景の前に立たせ、胸から上を写して隙間なく横に並べる - 装飾は金箔風の霞雲・扇・日輪・四角い紙吹雪で作る - 日本地図などは赤系の濃淡でフラットに描く - はがきや年賀状の絵柄はカードとして実物風に見せる - 背景にはわずかなノイズを重ね、印刷物のような質感を出す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はページを中央の約 85% 幅の列に収め、左右は無地の赤で埋める - PC はリード文を 1 行に収め、扇の目次は SP と同じく 3 列にする - PC の一覧やパネルは内側の幅を狭め、中央に寄せる - 動画やカルーセルは列幅に合わせて広げる - 文字サイズは PC でも大きく変えない ## 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-41058059`（元 LP の URL から採番） - **元 LP**: https://jo1.jp/feature/newsmileyear2024 - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。