--- version: alpha name: Navy Cream Classic Ornament Campaign LP description: デニム調の濃紺と生成りのクリーム地を交互に置いたLP。クラシックな飾り罫やリボン、額縁を使い、上品で少しレトロな雰囲気を出している。アイス菓子のレシート応募キャンペーン向けで、手順は白黒の線画イラストでわかりやすく見せる。 colors: primary: '#225594' dark-section: '#18264A' background: '#F6F2E7' background-alt: '#F5EEDE' surface: '#FEFEFE' secondary: '#D9A85A' accent-1: '#D86E8A' cta: '#010A9C' on-cta: '#F7FBFF' accent-2: '#ED8383' tint-1: '#FCB4B5' tint-2: '#9CCBE7' text-body: '#333333' accent-3: '#7A1F1F' accent-2-accessible: '#DF2525' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 40px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Noto Serif JP fontSize: 28px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Playfair Display fontSize: 18px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.05em body-lg: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 500 lineHeight: 2.2 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em rounded: sm: 0px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 24px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' ornament-heading: textColor: '{colors.dark-section}' typography: '{typography.headline-lg}' height: 90px ticket-frame: backgroundColor: '{colors.surface}' textColor: '{colors.dark-section}' typography: '{typography.display}' height: 240px round-badge: backgroundColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 64px ribbon-label: backgroundColor: '{colors.surface}' textColor: '{colors.dark-section}' typography: '{typography.headline-sm}' height: 36px ticket-link-button: backgroundColor: '{colors.surface}' textColor: '{colors.dark-section}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 70px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 60px rule-button: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 60px check-bar: backgroundColor: '{colors.tint-2}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 30px label-chip: backgroundColor: '{colors.dark-section}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 24px --- # DESIGN.md — 紺×生成りの飾り罫アイス菓子キャンペーンLP（Navy Cream Classic Ornament Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: 上品・高級、レトロ、信頼・誠実、情報量多め・訴求型 - **キーワード**: 濃紺デニム調・生成りクリーム・飾り罫・リボン見出し・額縁フレーム・線画手順 - **地の質感**: 濃紺の面には細かい布目のテクスチャ、クリーム地にはうすい斜めストライプを敷く - **形**: 角を内側にえぐったチケット型の枠、両端が切れ込んだリボン、円形バッジ - **温度感**: 濃紺で落ち着かせ、生成りと金色でやや温かくする ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#225594` | ブランドの濃紺・FV背景 | 12% | 画素の実測 | | `dark-section` | `#18264A` | 見出し文字・深い紺 | 4% | 画素の実測 | | `background` | `#F6F2E7` | 生成りのページ地 | 35% | 画素の実測 | | `background-alt` | `#F5EEDE` | 手順・図解ボックスの地 | 12% | 画素の実測 | | `surface` | `#FEFEFE` | 白いカード | 22% | 画素の実測 | | `secondary` | `#D9A85A` | 金茶のアクセント・英字 | 2% | 推定 | | `accent-1` | `#D86E8A` | 見出しの強調ピンク | 1% | 画素の実測 | | `cta` | `#010A9C` | 新規登録ボタン | 1% | 画素の実測 | | `on-cta` | `#F7FBFF` | ボタン上の文字 | 0% | 画素の実測 | | `accent-2` | `#ED8383` | 規約ボタンのサーモン | 1% | 画素の実測 | | `tint-1` | `#FCB4B5` | OK項目の帯 | 1% | 画素の実測 | | `tint-2` | `#9CCBE7` | NG項目の帯 | 2% | 画素の実測 | | `text-body` | `#333333` | 本文 | 2% | 推定 | | `accent-3` | `#7A1F1F` | NGの見出し・ワイン系の枠 | 0% | 推定 | | `accent-2-accessible` | `#DF2525` | AA を満たす補正値（計算） | | 計算 | - 地は生成りクリームにし、FV・導入文・ブランドリンクのところだけ濃紺の面を全幅で敷く - 見出しと罫線は深い紺を使い、黒は線画イラストだけに使う - 強調したい語は濃紺の上では金茶、クリームの上ではピンクにする - 比較する2商品は、紺のグラデと金ベージュのグラデで左右に塗り分ける - OKは淡いピンク帯、NGは淡い水色帯にして直感的に区別させる - ボタンの色は機能で分ける。規約はサーモン、登録は濃い青、無効状態はクリームに灰色文字 - `rule-button` は文字 `#F7FBFF` × 背景 `#ED8383` のコントラスト比が 2.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#DF2525`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | キャンペーン名の大見出し | ゴシック | Zen Kaku Gothic New | 900 | 40px | 1.2 | 0.05em | | `headline-lg` | セクション見出し | 明朝 | Noto Serif JP | 700 | 28px | 1.4 | 0.08em | | `headline-md` | 賞品名・訴求コピー | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.03em | | `headline-sm` | リボン内のSTEP表記 | 欧文セリフ | Playfair Display | 400 | 18px | 1.2 | 0.05em | | `body-lg` | 濃紺面の中央揃えリード文 | ゴシック | Zen Kaku Gothic New | 500 | 15px | 2.2 | 0.1em | | `body-md` | 説明本文 | ゴシック | Noto Sans JP | 500 | 13px | 1.8 | 0.04em | | `note` | ※の注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.03em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 17px | 1.3 | 0.04em | - セクション見出しは紺の明朝にし、下に唐草の飾り罫を必ず添える - 濃紺の面に載せるリード文は白で中央揃えにし、行間を約2.2と広く取る - 人名の上には金茶の細い欧文ローマ字を小さく添える - 数字（賞・人数）は大きくし、単位は小さくする - OK・NGなどの頭文字だけ大きなセリフ体にし、色をつける - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品比較だけ 2 カラムで左右に並べる - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算） - 白カードは画面幅の約90%にし、左右にクリーム地を見せる - 手順ボックスは白カードの中に生成りの地で入れ子にする - 賞品の画像は左に置き、右上に人数の円形バッジを重ねる - 応募期間は上下を紺の細い罫線で挟んで中央揃えにする - フォームのボタンは全幅で縦に積み、間隔は約16px ## Elevation & Depth - 白カードには下方向に淡い影（0 4px 12px rgba(0,0,0,.1)）をつける - チケット型のボタンには小さな落ち影をつけ、紙が浮いているように見せる - そのほかはフラットにする ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は矩形のまま使い、人物は金の飾り額縁で囲む。賞品カードは角丸 - **セクション境界**: 直線で色を切り替える。見出し下には斜線のハッチ罫や唐草罫を置く - 枠は角を内側にえぐったチケット型の二重線にする - 見出しやSTEPは両端が切れ込んだリボン形にする - 弾数や人数は円形バッジにする - フォームのボタンは角丸のない矩形 ## Components - **飾り罫つき見出し**（`ornament-heading`）: 紺の明朝見出しの下に唐草の飾り罫を左右対称に置く - **チケット型タイトル枠**（`ticket-frame`）: 白地に紺の二重線を引き、角を内側にえぐった枠。キャンペーン名を入れる - **円形バッジ**（`round-badge`）: 紺の円に白い細い内側の線を入れ、弾数や当選人数を表示する - **リボンラベル**（`ribbon-label`）: 白地に紺の線で描いた両端が切れ込んだリボン。賞名やSTEPを入れる - **チケット型リンクボタン**（`ticket-link-button`）: 白地に二重線、角はえぐり、右端に三角の矢印。ブランドサイトへの誘導に使う - **会員登録ボタン**（`button-primary`）: 濃い青の全幅矩形ボタン。上に小さな補足、下に大きな行動文言を2段で入れる - **規約ボタン**（`rule-button`）: サーモン色の全幅矩形に白の太字 - **OK・NG項目の帯**（`check-bar`）: 淡いピンクか淡い水色の帯に、濃い文字を左寄せで1項目ずつ縦に並べる - **条件チップ**（`label-chip`）: 紺地に白の小さな文字の角丸チップ ## Do's and Don'ts **Do** - 濃紺とクリームを交互に置き、セクションの区切りを色で示す - 見出しには必ず飾り罫かリボンを添えて、クラシックな品を出す - 手順や図解は白黒の太い線画で統一する - 強調語だけ金茶かピンクで色を変え、ほかは控えめにする - 注意点は短い項目の帯で一覧にする **Don't** - ネオン調や彩度の高い原色を広い面に使わない - ピル型やぽってりした角丸のボタンにしない - 線画イラストをカラーやグラデーションで塗らない - 本文を左右いっぱいまで広げない - リード文の行間を詰めない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品とタレントを印象づける）: 濃紺の背景に人物が商品を食べる写真を置き、上にロゴと手書き風のコピーを重ねる 2. **キャンペーンタイトル**（企画名と弾数を示す）: 斜めストライプの地にチケット型の枠を置き、その下に第1〜3弾の円形バッジを3つ並べる 3. **導入リード**（2商品の魅力を情緒的に伝える）: 布目の濃紺に白の中央揃え文を置き、商品名だけ金茶にする 4. **CM情報**（動画を見せる）: クリーム地に飾り見出しと動画を置き、下にリボン形のキャプションを添える 5. **出演者プロフィール**（タレントを紹介する）: 白カードの中に金の額縁写真、ローマ字、名前、経歴を入れる 6. **商品情報**（2商品を比較する）: 紺と金ベージュの2カラムに円形バッジ、商品写真、説明、チケット型ボタンを縦に並べる 7. **キャンペーン概要**（応募条件を伝える）: ピンクの大きな数字コピーを置き、条件は四角い枠で囲む 8. **賞品紹介**（賞品と当選数を示す）: 弾数バッジの左右に罫線を引き、リボン形の賞名、画像、人数バッジ、罫線で挟んだ期間を置く 9. **応募方法**（手順を説明する）: 白カードの中の生成りボックスに、STEPリボンと線画イラストを3つ縦に並べる 10. **撮影の注意点**（不備による応募を防ぐ）: OKとNGの見出しを置き、それぞれピンク帯と水色帯で項目を並べ、レシートの図解に番号を振る 11. **応募フォーム**（応募に進ませる）: 規約ボタン、同意チェック、無効状態のボタン、濃青の登録ボタンを全幅で縦に積む 12. **お問い合わせ**（事務局の連絡先を示す）: 二重線で挟んだ見出しの下に、星つきの罫と中央揃えの情報を置く 13. **ブランドリンク・シェア**（関連サイトへ誘導する）: 布目の濃紺にチケット型ボタンを2つ置き、その下にクリーム地でSNSの丸アイコンを並べる ## Imagery - 人物写真は青い背景のスタジオで撮り、商品を口元に持つ構図にする - 商品は断面が見える切り抜きにし、層の質感を強調する - 手順や図解は太い黒線とグレーだけのフラットな線画にする - 装飾は唐草の飾り罫、金の額縁、斜めストライプ、布目テクスチャ - 手書き風のオレンジのコピーを写真に斜めに添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では中央に約750px幅のカラムを置き、左右は背景色を延長する - 2商品の比較は PC でも 2 カラムを維持する - FV の写真は PC で横長にトリミングし、ロゴを左右どちらかに寄せる - フォームのボタンは PC で最大幅480px程度にして中央に置く ## 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-2d90ede9`（元 LP の URL から採番） - **元 LP**: https://www.morinaga.co.jp/sandice_2024cp/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。