--- version: alpha name: Christmas Red & Forest Green Camera Campaign LP description: 深い森の緑と赤を交互に地色にし、金に近い黄色で見出しやボタンを光らせるクリスマス向けのキャンペーン LP。写真をタイル状に並べたファーストビューのあと、プレゼントの告知ボックス、インスタントプリント風の写真、白いカードで並べる商品一覧が続く。 colors: primary: '#002E23' secondary: '#C91401' cta: '#FEBD43' on-cta: '#252D2C' background: '#FFFFFF' dark-section: '#6E1414' accent-1: '#F3C85F' on-dark: '#F2FBFA' text: '#272726' accent-2: '#CC1401' surface: '#EBEBEB' line: '#E2D0C2' background-alt: '#41897E' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 900 lineHeight: 1.6 letterSpacing: 0.15em headline-lg: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 21px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 17px fontWeight: 600 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.6 rounded: sm: 4px md: 10px lg: 40px full: 999px spacing: unit: 8px card: 12px section: 48px 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}' rounded: '{rounded.full}' height: 30px button-dark: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px category-nav: backgroundColor: '{colors.cta}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 52px band-heading: backgroundColor: '{colors.primary}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' height: 72px product-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 250px badge-new: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 30px campaign-box: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 520px instant-photo: backgroundColor: '{colors.surface}' rounded: '{rounded.sm}' height: 220px ornament: backgroundColor: '{colors.cta}' rounded: '{rounded.full}' height: 40px --- # DESIGN.md — 深緑×赤×金のクリスマス家電キャンペーンLP（Christmas Red & Forest Green Camera Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 家電・ガジェット ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型 - **キーワード**: クリスマス・深緑と赤・金色の見出し・雪の粒・白カードの商品一覧・インスタント写真の枠 - **地の質感**: 深緑の地に白い小さな雪の粒を散らす。赤い地は斜めストライプの帯で区切り、全体にフラットで光沢は使わない - **形**: 角丸の白いカード、ピル型の黄色ボタン、両端に斜線の飾りがある細長い帯見出し - **温度感**: 温かい。華やかでお祝いの雰囲気 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#002E23` | ブランドの深緑の地（雪を散らすセクション） | 30% | 画素の実測 | | `secondary` | `#C91401` | 商品一覧の赤い地 | 32% | 画素の実測 | | `cta` | `#FEBD43` | ボタンと分類ボタンの黄色 | 6% | 画素の実測 | | `on-cta` | `#252D2C` | 黄色いボタン上の文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 商品カードの白 | 28% | 画素の実測 | | `dark-section` | `#6E1414` | プレゼント告知ボックスの暗い赤 | 7% | 画素の実測 | | `accent-1` | `#F3C85F` | 深緑の地や帯見出しに使う金色の見出し文字 | 1% | 画素の実測 | | `on-dark` | `#F2FBFA` | 暗い地の上の白い見出し文字 | 1% | 画素の実測 | | `text` | `#272726` | カード内のキャッチや型番の文字 | 1% | 画素の実測 | | `accent-2` | `#CC1401` | NEW バッジの赤い丸 | 0% | 画素の実測 | | `surface` | `#EBEBEB` | インスタント写真の枠の白 | 2% | 画素の実測 | | `line` | `#E2D0C2` | 告知ボックスの枠線と区切りの細い線 | 0% | 画素の主要色に補正 | | `background-alt` | `#41897E` | ファーストビューで使う青緑の写真背景 | 4% | 画素の実測 | - 地色は深緑と赤を交互に切り替え、セクションの区切りがはっきりわかるようにする - 深緑の地には白い雪の粒を散らし、見出しは白か金色にする - 商品一覧は赤い地に白いカードを並べ、カードの中は白地に黒い文字にする - 押せるボタンはすべて黄色にする。ただし黄色い地の上では深緑のボタンにする - プレゼントの告知は暗い赤のボックスに入れ、当選数の数字は金色で大きく書く - 赤を使うのは地色と NEW バッジだけにし、文字の色には使わない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューやキャンペーンのキャッチ | ゴシック | Zen Kaku Gothic New | 900 | 26px | 1.6 | 0.15em | | `headline-lg` | 告知ボックスの大見出し | ゴシック | Noto Sans JP | 900 | 24px | 1.3 | 0.02em | | `headline-md` | セクション見出しと帯見出しの大きい行 | ゴシック | Noto Sans JP | 700 | 21px | 1.4 | 0.1em | | `headline-sm` | 帯見出しの上に置くリード文 | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.1em | | `body-md` | カード内のキャッチや説明文 | ゴシック | Noto Sans JP | 700 | 11px | 1.7 | 0.02em | | `accent` | カード内の英字の型番 | 欧文サンセリフ | Montserrat | 600 | 17px | 1.2 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 11px | 1.0 | 0.05em | | `note` | 注釈と権利の表記 | ゴシック | Noto Sans JP | 400 | 8px | 1.6 | 0.0em | - 見出しはすべて太いゴシックにし、字間を 0.1em 前後広げる - 帯見出しは小さいリード文と大きい分類名の 2 段にし、どちらも金色にする - 数字で訴える部分は、数字だけを周りの約 1.5 倍の大きさにする - カード内のキャッチは 1〜2 行の短い一言にとどめる - 注釈は白い小さな文字で、箇条書きにしてページ下にまとめる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ファーストビューは写真を 2〜3 列のタイル状に並べ、分類ボタンは 2×2 に並べる - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算） - 商品カードは画面幅の 92% で、縦に 10px 間隔で並べる - カードの中は、左上にキャッチと色見本の四角、中央に商品写真、その下に型番とボタンを中央揃えで置く - 帯見出しは画面幅いっぱいの深緑の帯にする - 告知ボックスは画面幅の 92% で、細い枠線で囲む - セクション見出しは左右に白い横線を伸ばし、中央に置く ## Elevation & Depth - 影はほとんど使わず、色の面だけで分ける - インスタント写真の枠にだけ、ごく薄い影をつけて紙の厚みを出す - カードは影なしの白い面にし、地色との差で浮かせる ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 商品は背景を切り抜いて白地に置く。人物写真は四角に切り、インスタント写真の白い枠に入れる - **セクション境界**: 直線で区切る。赤い地の上下には斜めストライプの細い帯を入れ、帯見出しは両端に斜線を重ねた飾りをつける - ボタンはピル型で、右端に矢印をつける - 商品カードは角丸 10px 前後にする - NEW バッジは赤い正円に白い文字 - 色見本は角丸 2px の小さな正方形を横に並べる ## Components - **黄色いピル型ボタン**（`button-primary`）: 中央に文字、右に矢印を置く。カードと告知ボックスで使う - **深緑のピル型ボタン**（`button-dark`）: 黄色い地の上で使う。白い文字と矢印 - **分類のジャンプボタン**（`category-nav`）: 大きな黄色いピル型ボタンを 2×2 に並べ、右に丸い下向きの矢印をつける - **帯見出し**（`band-heading`）: 深緑の帯に金色の文字を 2 段で置き、上下に金色の細い線、両端に斜線の飾りをつける - **商品カード**（`product-card`）: 白い角丸のカード。キャッチ、色見本、本体とプリント見本の写真、型番、ボタンの順に並べる - **NEW バッジ**（`badge-new`）: カードの右上に置く赤い正円 - **プレゼント告知ボックス**（`campaign-box`）: 暗い赤の地を細い枠線で囲む。白い見出し、金色の当選数、日時の行、キービジュアル、ボタンの順に並べる - **インスタント写真の枠**（`instant-photo`）: 白い紙の枠の中に写真を入れ、下側の余白を広くとる - **オーナメントの飾り**（`ornament`）: 赤い地の上端から細い線で黄色い丸のオーナメントを吊り下げる ## Do's and Don'ts **Do** - 深緑と赤を交互に使い、クリスマスらしさを保つ - 押せるものはすべて黄色いピル型にする - 商品はすべて同じ型のカードに入れ、要素の並び順をそろえる - 深緑の地には雪の粒を散らす - 金色の文字は暗い地の上でだけ使う **Don't** - パステルや青系を地の色にしない - ボタンを角張った四角にしない - カードに強い影やグラデーションをつけない - 赤い地の上に赤い文字を置かない - 見出しに細い書体や明朝体を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（季節のキャンペーンと出演人物を印象づける）: 緑・赤・深緑の背景で撮った人物写真をタイル状に組み、1 マスを金色の縦書き風キャッチ、別の 1 マスをロゴとキャンペーン名にする 2. **プレゼント告知**（購入者向けの抽選特典を伝える）: 深緑の地に暗い赤の枠付きボックスを置き、当選数を金色で大きく書き、キービジュアルと黄色いボタンを添える 3. **動画**（CM で季節の気分を高める）: 白い角丸の枠に動画のサムネイルを入れ、再生アイコンと字幕を重ねる 4. **写真ギャラリー**（出演人物の撮影写真で楽しさを見せる）: 左右に線を伸ばした白い見出しの下に、インスタント写真の枠を大 1 枚、小 2 枚で並べる 5. **製品ラインアップの目次**（分類ごとに移動できるようにする）: 赤い地にストライプの帯と吊り下げオーナメントを飾り、黄色いピル型ボタンを 2×2 に並べる 6. **分類別の商品一覧**（商品を分類ごとに見せる）: 深緑の帯見出しのあと、白い商品カードを縦に並べる。分類の数だけ繰り返す 7. **関連商品**（フィルムやアクセサリーを一緒に買ってもらう）: 深緑の地に、左に写真、右に黄色い地の文章と深緑のボタンを置いたカードを 2 枚並べる 8. **プレゼント告知（再掲）**（ページの最後で特典をもう一度伝える）: 冒頭と同じ告知ボックスを繰り返す 9. **注釈**（注意事項と商標を表記する）: 深緑の地に、白い小さな文字の箇条書きで書く ## Imagery - 人物は緑や赤の単色背景の前で、ニットなどの冬服を着せ、商品を手に持って笑顔で撮る - サンタクロース、ツリー、リボンを掛けたギフト箱などのクリスマス小物で季節感を出す - 商品は背景を切り抜き、本体の横にプリント見本を添える - 写真はインスタント写真の白い枠に入れて、手作りの温かさを出す - PC では赤い地の余白に、金色の葉や雪の結晶のイラストを散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に幅約 900px でまとめ、背景色は画面幅いっぱいまで広げる - PC のファーストビューは写真のタイルを横長に組み直し、左右に分ける - PC では商品カードを 2 列に並べ、カードが奇数のときは最後の 1 枚を中央に置く - PC の分類ボタンは 4 つを横 1 列に並べる - PC の写真ギャラリーは 3 枚を横 1 列に並べる - PC の関連商品カードは 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-60ce44ed`（元 LP の URL から採番） - **元 LP**: https://instax.jp/xmas2025/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。