--- version: alpha name: Festive New Year Red & Gold Lucky Bag LP description: 朱赤とベージュ金を軸にした正月福袋向けの通販LP。和柄の同心円ラインや菱つなぎの罫線、紙札風の見出しラベルで祝祭感を出す。プランカードや景品カードを縦に並べ、ガチャのワクワク感を伝える構成。 colors: primary: '#E71902' background: '#EAE5D1' surface: '#FFFFFF' secondary: '#BEAF79' accent-1: '#A2906A' line: '#C0B891' accent-2: '#D71603' text: '#2A2724' text-muted: '#9A998F' background-alt: '#FFFCF5' tint-1: '#F9F4EB' accent-3: '#D26A34' on-primary: '#FFFFFF' accent-1-accessible: '#847452' typography: display: fontFamily: Dela Gothic One fontSize: 34px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Zen Maru Gothic fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.15em accent: fontFamily: Montserrat fontSize: 11px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-title: textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 56px plan-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 420px badge-circle: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 56px label-pill: backgroundColor: '{colors.surface}' textColor: '{colors.accent-2}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 48px frame-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 340px prize-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.display}' height: 300px accordion: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 80px carousel-dots: textColor: '{colors.primary}' rounded: '{rounded.full}' height: 8px info-box: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 96px --- # DESIGN.md — 朱赤と金の和柄な正月福袋酒類 LP（Festive New Year Red & Gold Lucky Bag LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: 和風、ポップ・元気、情報量多め・訴求型 - **キーワード**: 正月・朱赤×金・福袋・ガチャ・和モダン・祝祭 - **地の質感**: フラットな単色面が基本。和柄の同心円ラインと菱つなぎの罫線で模様を足す - **形**: 角丸小さめのカード、角を内側にえぐった額縁風の枠、紙札風ラベル - **温度感**: 暖色寄り。朱赤の熱量をベージュと白で落ち着かせる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E71902` | ブランド朱赤（帯・キャンペーン地） | 12% | 画素の実測 | | `background` | `#EAE5D1` | ベージュの地色 | 30% | 画素の実測 | | `surface` | `#FFFFFF` | カード・白セクション | 36% | 画素の実測 | | `secondary` | `#BEAF79` | 金ベージュ（イラスト地・装飾） | 8% | 画素の実測 | | `accent-1` | `#A2906A` | 見出しの金茶文字 | 1% | 画素の実測 | | `line` | `#C0B891` | カード・額縁の金枠線 | 2% | 画素の主要色に補正 | | `accent-2` | `#D71603` | 赤の強調テキスト（期限・限定数） | 1% | 画素の主要色に補正 | | `text` | `#2A2724` | 本文・商品名 | 2% | 画素の実測 | | `text-muted` | `#9A998F` | 価格・注釈のグレー | 0% | 画素の実測 | | `background-alt` | `#FFFCF5` | フッターのクリーム地 | 4% | 画素の実測 | | `tint-1` | `#F9F4EB` | 商品カードの淡い生成り地 | 3% | 画素の実測 | | `accent-3` | `#D26A34` | レア度の銅オレンジ | 0% | 画素の実測 | | `on-primary` | `#FFFFFF` | 赤地上の白文字 | 0% | 画素の主要色に補正 | | `accent-1-accessible` | `#847452` | AA を満たす補正値（計算） | | 計算 | - 地はベージュと白を交互に置き、キャンペーン帯だけ朱赤で塗る - 朱赤の帯の内側にはベージュか白の大きなカードを置き、赤は外枠として見せる - 見出しは金茶文字。赤は期限・限定数・割引などの訴求文字に限る - 枠線はすべて淡い金で細く引き、黒い線は使わない - イラスト内は金ベージュ地に朱赤と白で描き、全体の色数を抑える - フッターは一段明るいクリーム地で終える - `accordion` は文字 `#A2906A` × 背景 `#FFFFFF` のコントラスト比が 3.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#847452`、4.56:1）を使う。 - `info-box` は文字 `#A2906A` × 背景 `#FFFFFF` のコントラスト比が 3.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#847452`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大見出し・景品名 | ゴシック | Dela Gothic One | 900 | 34px | 1.2 | 0.05em | | `headline-lg` | セクション見出し（金茶） | 丸ゴシック | Zen Maru Gothic | 700 | 20px | 1.4 | 0.15em | | `accent` | 見出し下の英字サブ表記 | 欧文サンセリフ | Montserrat | 500 | 11px | 1.2 | 0.05em | | `headline-md` | プラン名・商品名 | ゴシック | Zen Kaku Gothic New | 500 | 18px | 1.4 | 0.08em | | `headline-sm` | プラン上の赤い小見出し | ゴシック | Noto Sans JP | 500 | 10px | 1.4 | 0.05em | | `body-md` | 本文・リード文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.03em | | `note` | 注釈・価格・税込表記 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0em | - セクション見出しは中央揃えで字間を広めにとり、下に英字サブを小さく添える - 限定数・倍率などの数字は太字で大きくし、助詞は小さくする - 価格は右寄せでグレーの細字にして主張を抑える - 訴求のリードは赤文字で短く1行にまとめる - 本文は13px前後・行間1.8で読みやすくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。プランとSNS投稿は横スワイプのカルーセル - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - カルーセルのカードは幅約62%にして、隣のカードの端を見せる - セクションは見出し、リード、カード列の順に中央揃えで積む - 赤い帯セクションは左右12px程の赤縁を残してベージュの内パネルを置く - アコーディオンは画面いっぱいに近い幅で8px間隔に縦に並べる ## Elevation & Depth - 影はほぼ使わず、細い金の枠線で面を分ける - SNS埋め込みカードだけごく薄い影と角丸を付ける - 重なりは同心円の装飾をセクション境界にはみ出させて表現する ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 商品ボトルは白背景の切り抜き。プラン画像は角丸の正方形イラスト - **セクション境界**: 直線で切り替え、境界に同心円の和柄ラインを半分だけ重ねる - 景品・目玉商品カードは四隅を内側に丸くえぐった額縁形にし、二重の金線で囲む - 見出しラベルは白地・金枠のピル形か紙札形にする - 区切りには菱つなぎ（ダイヤ連続）の罫線を使う ## Components - **セクション見出し**（`section-title`）: 金茶の和文見出しに、英字サブを小さく中央揃えで添える - **プランカード**（`plan-card`）: 上に正方形のイラスト、下に赤の期限文・プラン名・右寄せ価格。金の細枠で角丸8px - **丸バッジ**（`badge-circle`）: イラストの左上に赤丸と白丸を重ね、確定本数などを2行で入れる - **限定数ラベル**（`label-pill`）: 白地・金二重枠のピル形。限定数を赤の太い数字で入れ、額縁カードの上辺に重ねる - **額縁カード**（`frame-card`）: 角をえぐった額縁形。左に商品の切り抜き、右に名称・菱罫線・説明・価格・詳細リンク - **景品カード**（`prize-card`）: 倍率の札、大きな赤い等級名、菱罫線、相当額、ボトルの横並び写真、注釈の順に並べる - **アコーディオン**（`accordion`）: 白地に金枠、右端に金の細いプラス記号。FAQは先頭に赤いQを付ける - **カルーセルドット**（`carousel-dots`）: カード下に3点を並べ、現在位置だけ赤、ほかはグレー - **配送情報ボックス**（`info-box`）: 白地に薄いグレー枠。条件は黒、特典は金茶の大きめ文字で1行に並べる ## Do's and Don'ts **Do** - 朱赤・金ベージュ・白の3色を主役にする - 数字（本数・倍率・割引率）は大きく太く見せる - 装飾は同心円の和柄と菱つなぎ罫線に揃える - カードはすべて金の細枠で統一する - キャラクターやボトルのイラストは金地に赤白で描く **Don't** - 青・緑など寒色の面を使わない（SNS埋め込みは例外） - 黒い太枠や濃い影を付けない - 赤を本文の長文に使わない - 見出しを左揃えにしない - グラデーションや写真の背景で地色を濁さない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企画名と期間を一目で伝える）: 金ベージュ地に同心円の和柄、中央に赤い紙札形のタイトル、周りにボトルを斜めに散らし、左下に期間を白抜きで置く 2. **イントロダクション**（企画の概要と魅力を伝える）: 朱赤の帯の中に白いカードを置き、赤文字の見出し、短い赤線、赤文字の本文を並べる 3. **お客様の声**（SNSの口コミで信頼を高める）: ベージュ地にSNS投稿の埋め込みを横スクロールで並べる 4. **プラン一覧**（価格帯別の商品を選ばせる）: 白地にプランごとの赤い小見出しとプラン名、カルーセルのプランカード、ドットを繰り返す 5. **ラインナップ帯**（中身の豪華さを伝える）: 吹き出し調の見出しの下に、ボトルを横一列に並べ、背景に赤い同心円ラインを敷く 6. **目玉商品**（高額な当たり商品で期待を高める）: ベージュ地に額縁カードを縦に並べ、上辺に限定数ラベルを重ねる 7. **キャンペーン**（抽選の特典で購入を後押しする）: 朱赤地にベージュの内パネルを置く。ピル形の見出し、等級別の景品カードを縦に並べる 8. **SNSキャンペーン**（拡散を促す）: 同じ赤帯の続きに、ピル形見出しとSNS投稿カードを縦に並べる 9. **レア度一覧**（当たりの階層を説明する）: ベージュ地に、レア度アイコンを中央に置いたアコーディオンを並べる 10. **よくある質問**（購入前の不安を解消する）: 赤いQと金茶の質問文を入れたアコーディオンを縦に並べる 11. **配送・送料**（送料と配送条件を伝える）: 白地に赤いチェックアイコン付きの見出しと、情報ボックスを2つ並べる 12. **フッター**（ナビゲーションと注意書き）: クリーム地にキャラクターのシルエットを横に並べ、2列のリンク、SNSアイコン、コピーライトを置く ## Imagery - 商品は白背景で切り抜いたボトル写真を正面から撮り、高さを揃えて並べる - プラン画像は金ベージュ地に放射状の光線、開いた箱、？マーク入りのボトルを描いたフラットなイラストにする - キャラクターは赤白の招き猫風。線を使わない単色のシルエットで描く - 装飾は細い線の同心円（和柄の青海波風）を赤か金で描く - 白い小さな菱形の紙吹雪を散らして祝祭感を出す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCはプランカードを3列で並べ、販売終了や近日公開の状態を暗くした重ねで見せる - 目玉商品はPCで3列のグリッドにする - SNS投稿はPCで2〜3列に並べる - 景品の最上位はPCで横長のカードにし、下位は3列に並べる - フッターのリンクはPCで左に置き、注意書きとSNSアイコンを右に置く - コンテンツ幅はPCで約900pxに抑えて中央揃えにする ## 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-03b0dfb3`（元 LP の URL から採番） - **元 LP**: https://kurand.jp/pages/sakegacha-winter - **解析に使った画像**: 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/）からご連絡ください。