--- version: alpha name: Festive New Year Lucky Bag Campaign LP description: 金色の放射背景と市松柄に、赤い福袋モチーフを大きく置いた正月らしいキャンペーンLP。価格ごとにセット内容を金・グレー系の地で切り分け、後半は赤い集中線背景で特典を訴求する。極太ゴシックの見出しと白フチ文字で、賑やかで分かりやすい情報設計にしている。 colors: primary: '#DB142D' secondary: '#4D0203' background: '#E28424' background-alt: '#DEC06D' surface: '#FEFEFD' tint-1: '#F4EECF' tint-2: '#E1D6BB' accent-1: '#E32484' accent-2: '#2B2F6B' dark-section: '#B70C19' marker: '#FFE14A' cta: '#54BDC4' on-cta: '#FEFEFE' text-body: '#5A3A2A' background-accessible: '#E89D51' accent-1-accessible: '#DE1C7E' cta-accessible: '#2E8186' typography: display: fontFamily: Dela Gothic One fontSize: 80px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.05em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 48px fontWeight: 900 lineHeight: 1.1 headline-md: fontFamily: Dela Gothic One fontSize: 30px fontWeight: 800 lineHeight: 1.25 headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' hero-bag-visual: backgroundColor: '{colors.primary}' textColor: '{colors.surface}' typography: '{typography.display}' rounded: '{rounded.lg}' height: 300px limited-ribbon: backgroundColor: '{colors.accent-1}' textColor: '{colors.surface}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 64px schedule-table: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 220px hex-heading-plate: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.headline-md}' height: 56px ticket-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.secondary}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 180px goods-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.secondary}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 500px period-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.surface}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 64px speech-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.secondary}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 70px button-outline: textColor: '{colors.surface}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 56px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 56px --- # DESIGN.md — 紅白×金屏風の正月福袋キャンペーン LP（Festive New Year Lucky Bag Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、和風、力強い・インパクト、情報量多め・訴求型 - **キーワード**: 正月・福袋・金屏風・紅白・市松柄・お得感 - **地の質感**: 金色の放射グラデーションと市松柄、赤の集中線パターンで和の祝祭感を出す。面はベタ塗りで光沢表現は控えめ。 - **形**: 角丸カード、チケット型のギザギザ枠、六角リボン型の見出しプレート、吹き出し。 - **温度感**: 暖色中心で高揚感が強い。一部に紺とくすみグレーを使って区切る。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#DB142D` | 福袋・特典エリアの赤 | 20% | 画素の主要色に補正 | | `secondary` | `#4D0203` | 日付・見出し文字のえんじ茶 | 4% | 画素の実測 | | `background` | `#E28424` | 金色の放射背景 | 18% | 画素の実測 | | `background-alt` | `#DEC06D` | セット内容の金市松地 | 12% | 画素の主要色に補正 | | `surface` | `#FEFEFD` | 情報カードの白 | 11% | 画素の実測 | | `tint-1` | `#F4EECF` | セットカード内の生成り地 | 8% | 画素の主要色に補正 | | `tint-2` | `#E1D6BB` | 2つ目のセット区画のグレージュ地 | 6% | 画素の主要色に補正 | | `accent-1` | `#E32484` | スマホ限定帯のマゼンタ | 2% | 画素の実測 | | `accent-2` | `#2B2F6B` | 2つ目のセット・ラベルの紺 | 2% | 推定 | | `dark-section` | `#B70C19` | 期間ラベルの濃赤帯 | 3% | 画素の主要色に補正 | | `marker` | `#FFE14A` | 強調文字の黄色 | 1% | 推定 | | `cta` | `#54BDC4` | アプリ詳細ボタンの水色 | 1% | 画素の実測 | | `on-cta` | `#FEFEFE` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `text-body` | `#5A3A2A` | 注釈・本文のこげ茶 | 1% | 推定 | | `background-accessible` | `#E89D51` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#DE1C7E` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#2E8186` | AA を満たす補正値（計算） | | 計算 | - 上部は金の放射背景、セット内容は金市松、2つ目のセットはグレー市松、特典は赤集中線と地色で章を分ける。 - 価格の高いセットはえんじ茶、低いセットは紺で枠とラベルを塗り分ける。 - 白カードの上の文字はえんじ茶で統一し、黒は使わない。 - 赤背景上の強調語は黄色、注釈は白で書く。 - 限定訴求の帯はマゼンタで目立たせる。 - リンクボタンは赤地の上で水色を補色的に使う。 - `page` は文字 `#5A3A2A` × 背景 `#E28424` のコントラスト比が 3.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-accessible`（`#E89D51`、4.52:1）を使う。 - `limited-ribbon` は文字 `#FEFEFD` × 背景 `#E32484` のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#DE1C7E`、4.55:1）を使う。 - `button-primary` は文字 `#FEFEFE` × 背景 `#54BDC4` のコントラスト比が 2.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#2E8186`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | メインタイトルの大きな漢字 | 装飾・ディスプレイ | Dela Gothic One | 900 | 80px | 1.1 | 0.05em | | `headline-lg` | 数量・価格の大きな数字 | ゴシック | M PLUS Rounded 1c | 900 | 48px | 1.1 | 0.0em | | `headline-md` | 特典見出し・セクション見出し | ゴシック | Dela Gothic One | 800 | 30px | 1.25 | 0.0em | | `headline-sm` | 商品名・日付 | ゴシック | Zen Kaku Gothic New | 900 | 22px | 1.35 | 0.02em | | `body-md` | 説明文・サイズ表記 | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.02em | | `note` | ※付きの注意書き | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `label-button` | リンクボタン・ラベル | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.03em | - 大見出しは極太で、白フチと濃色の落ち影をつけて立体的に見せる。 - 数字は単位より2倍ほど大きくし、価格と枚数を強調する。 - 曜日は丸囲み、祝日は角丸囲みの小さなバッジにする。 - 注釈は11px前後で※から始め、行頭をそろえる。 - 強調語だけ色を変え、文中で色を混ぜすぎない。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品写真の2点比較だけ2カラム。 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - カードは左右に約16pxの余白をとって中央に置く。 - 期間テーブルは左に色付きの見出し列、右に値の2列構成。 - セクション見出しは六角プレートを中央に置き、次のブロックに少し重ねる。 - セットの内訳は「チケット＋グッズ」の順に＋アイコンでつなぐ。 - 注釈は各ブロックのすぐ下に左揃えでまとめる。 ## Elevation & Depth - カードは影なしのフラット。白フチや濃色の枠線で浮かせる。 - 見出し文字だけ濃色のずらし影で立体感を出す。 - 商品写真には薄い落ち影を入れてもよい。 ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品は切り抜き写真をそのまま置く。四角いトリミングはしない。 - **セクション境界**: 背景パターンの切り替えで区切る。境界は直線で、六角見出しプレートをまたがせる。 - チケットは四隅を内側にえぐったギザギザ枠で描く。 - 期間ラベルは角丸の濃赤帯に〔 〕を添える。 - リンクボタンは角丸12px前後の横長で、右端に＞を置く。 - 吹き出しは白地に濃色の破線か細線で描く。 ## Components - **福袋型メインビジュアル**（`hero-bag-visual`）: 赤い袋の形にタイトルと価格プレート2枚を載せ、周りに商品イラストを散らす。 - **限定訴求帯**（`limited-ribbon`）: 紺の小ラベルとマゼンタの横長帯を組み合わせ、白と黄色の文字で特典を書く。 - **期間テーブル**（`schedule-table`）: 左が生成り色の見出し列、右が白の値列。点線で行を区切る。 - **六角見出しプレート**（`hex-heading-plate`）: 白地に濃色の二重枠をつけた横長六角形。下に三角の矢印をつける。 - **チケット型カード**（`ticket-card`）: 上部に色帯ラベル、中央に枚数の大きな数字、下に合計額。外周をギザギザにする。 - **グッズ紹介カード**（`goods-card`）: 半透明の地に商品名、切り抜き写真、サイズ表記を縦に並べる。 - **期間ラベル帯**（`period-band`）: 濃赤の角丸帯に白文字で〔期間〕と日付を2行で書く。 - **補足吹き出し**（`speech-bubble`）: 白い楕円の吹き出しで、商品の選び方を短く書く。 - **白枠リンクボタン**（`button-outline`）: 赤地の上に白線の枠と白文字を置き、右端に＞をつける。 - **水色リンクボタン**（`button-primary`）: 水色の塗りに白文字。右端に＞をつける。 ## Do's and Don'ts **Do** - 正月らしさは金・赤・市松・水引・松竹梅のモチーフで出す。 - 価格や枚数の数字は極太で大きくし、白フチをつける。 - 価格帯ごとに地の色と枠の色を変え、見分けやすくする。 - 注釈は省かず、各ブロックの下に小さくまとめる。 - キラキラや紙吹雪を余白に散らして賑やかにする。 **Don't** - 黒やグレーの細い明朝体で静かにしない。 - 背景を無地の白一色にしない。 - 細い線の見出しなど、影も枠もない見出しにしない。 - 赤地に赤系の文字を重ねて読みにくくしない。 - 写真を四角いままベタ貼りしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（福袋の発売と2つの価格を一目で伝える）: 金の放射背景に赤い袋型ビジュアルを置き、価格プレート2枚とor表記を並べる。 2. **限定特典の帯**（スマホ限定のおまけを訴求する）: 紺ラベルとマゼンタ帯を組み、強調語を黄色にする。 3. **販売期間**（予約期間・受け取り期間・店頭販売日を示す）: 白い2列テーブルに日付を大きく書き、注意事項はアコーディオンにする。 4. **高価格セットの内容**（チケットとグッズの中身を見せる）: 金市松の地に六角見出しを置き、チケットカード、＋アイコン、グッズカードの順に並べる。 5. **低価格セットの内容**（もう一方のセットの中身を見せる）: グレー市松の地に紺色のチケットカードを置き、商品写真を2カラムで比べる。 6. **会員限定の追加特典**（まとめ買いを促す）: 金カードの見出しの下に赤い集中線の背景を敷き、商品写真と吹き出しを並べる。 7. **引き換え期間と注意事項**（条件をはっきり伝える）: 白カードに濃赤の期間帯を置き、その下に白文字の注釈を並べる。 8. **アプリ誘導**（アプリのダウンロードと連携へ導く）: 白枠ボタン、ストアバッジ2つ、水色ボタンを縦に並べる。 ## Imagery - 商品は白背景で撮ったものを切り抜き、少し傾けて動きを出す。 - 背景の周りにアイスなどの商品イラストを散らす。 - 金の地には市松柄、赤の地には集中線と霞雲のシルエットを入れる。 - 白い四芒星のキラキラと金色の紙吹雪を飾りにする。 - 水引のリボンや松竹梅の小さなアイコンを和の飾りに使う。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では中央に最大幅 480〜600px の SP 版カラムを置き、左右は金や赤の背景パターンで埋める。 - グッズ写真の2カラムは PC でも崩さない。 - ボタンは PC で最大幅 400px にとどめる。 - 見出しの文字サイズは PC でも SP の1.2倍までにする。 ## 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-bb79b3e9`（元 LP の URL から採番） - **元 LP**: https://www.31ice.co.jp/contents/topics/241210_01.html - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（5/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。