--- version: alpha name: Japanese Washi Pattern Food Campaign LP description: 生成りやベージュの和紙風の地に、青海波や雲の和柄をうっすら敷いた和風キャンペーンLP。見出しは明朝体で、上に赤いリボン型の英字ラベルを付ける。白いパネルに商品や手順をまとめ、黒帯ボタンと赤枠の注意ボックスで情報を整理する。 colors: primary: '#010101' background: '#FEFEFE' background-alt: '#F9F4ED' tint-1: '#EDDBC3' secondary: '#C4141B' cta: '#C4141B' on-cta: '#FFFFFF' text: '#040302' line: '#DAB897' accent-1: '#986813' accent-2: '#5B2929' tint-2: '#E5F3FC' accent-3: '#FBE7E9' text-muted: '#777777' typography: display: fontFamily: Shippori Mincho fontSize: 40px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 28px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Noto Serif JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em 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.6 letterSpacing: 0.02em accent: fontFamily: Playfair Display fontSize: 11px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.1em label-button: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.08em rounded: sm: 0px md: 2px lg: 4px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' ribbon-label: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.accent}' height: 20px diamond-badge: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 110px nav-bar: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 48px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 48px button-dark: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 48px accordion-bar: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 56px step-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 260px caution-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 240px period-band: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 40px --- # DESIGN.md — 生成り和柄×黒帯の食品プレゼントキャンペーンLP（Japanese Washi Pattern Food Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: 和風、上品・高級、情報量多め・訴求型、信頼・誠実 - **キーワード**: 和柄・生成り・明朝見出し・黒帯・朱赤・金茶ライン - **地の質感**: 和紙のような生成り地に、青海波・雲・麻の葉の柄を低いコントラストで重ねる - **形**: 角丸なしの四角いパネルと黒帯が基本。赤い菱形バッジとリボン型ラベルを差し色にする - **温度感**: 暖かい中間色。黒と朱赤で引き締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#010101` | ナビ・アコーディオン・セクション帯の黒 | | 画素の実測 | | `background` | `#FEFEFE` | パネルの白地 | | 画素の実測 | | `background-alt` | `#F9F4ED` | セクション地の生成り | | 画素の実測 | | `tint-1` | `#EDDBC3` | 和柄セクションのベージュ地 | | 画素の実測 | | `secondary` | `#C4141B` | バッジや強調文字の朱赤 | | 画素の実測 | | `cta` | `#C4141B` | ダウンロードボタンの赤 | | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | | 画素の主要色に補正 | | `text` | `#040302` | 見出しと本文の墨色 | | 画素の実測 | | `line` | `#DAB897` | カード枠の金茶ライン | | 画素の主要色に補正 | | `accent-1` | `#986813` | 見出しの金茶グラデ文字 | | 画素の実測 | | `accent-2` | `#5B2929` | 商品パッケージの臙脂色 | | 画素の主要色に補正 | | `tint-2` | `#E5F3FC` | Good例の水色ボックス | | 画素の実測 | | `accent-3` | `#FBE7E9` | NG例のピンクボックス | | 画素の実測 | | `text-muted` | `#777777` | 注釈文字のグレー | | 推定 | - セクションの地は生成りとベージュの和柄を交互に使い、内容は白パネルに載せる - ナビ・アコーディオン・方法帯は黒で塗り、白い明朝文字を載せる - 朱赤は菱形バッジ・Step番号・注意ボックスの枠・主CTAに限って使う - カード枠は金茶の細線でまとめ、黒い線は使わない - 主見出しは金茶のグラデか墨色にする。色を3色以上混ぜない - 良い例・悪い例の比較だけは水色とピンクで塗り分ける ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのメインコピー | 明朝 | Shippori Mincho | 800 | 40px | 1.2 | 0.02em | | `headline-lg` | セクション見出し | 明朝 | Shippori Mincho | 800 | 28px | 1.3 | 0.05em | | `headline-md` | 小見出し・黒帯タイトル | 明朝 | Noto Serif JP | 700 | 18px | 1.4 | 0.05em | | `headline-sm` | カード見出し・Step名 | 明朝 | Noto Serif JP | 700 | 15px | 1.5 | 0.03em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.03em | | `note` | 注釈（※） | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `accent` | リボンラベルの英字・Step番号 | 欧文セリフ | Playfair Display | 500 | 11px | 1.2 | 0.1em | | `label-button` | ボタン・アコーディオンの文字 | 明朝 | Noto Serif JP | 500 | 14px | 1.4 | 0.08em | - 見出しはすべて明朝体。本文は可読性を優先してゴシックか細めの明朝にする - 日付や当選人数などの数字は大きく太い明朝で、単位は小さく添える - セクション見出しの上に、赤いリボンに英字ラベルを載せる - 本文は中央揃えで短く改行する。長い説明だけ左揃えにする - 注意書きは朱赤の小さい文字で、頭に※を付ける - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは SP で縦積み、PC で2列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 白パネルは画面幅の90%前後で中央に置き、周りの和柄地を見せる - セクション見出しの直下に中央揃えのリード文を2〜3行置く - 商品一覧は3列のグリッド。SP では2列にする - 手順はStep番号付きのカードを並べ、最後のStepは全幅にする - 規約は黒帯のアコーディオンを8px間隔で縦に並べる ## Elevation & Depth - 影はほぼ使わず、地色の差と細い線で階層を作る - 白パネルは平面のまま和柄地に載せる - 商品写真だけ切り抜きにして、軽い自然な影を付けてよい ## Shapes - **角丸**: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品は背景を抜いた切り抜き。調理写真は四角か円で切り抜く - **セクション境界**: 直線で地色を切り替え、和柄の濃淡で区切る - ボタン・カード・帯は角丸なしの四角にする - 当選数のバッジは赤い菱形（45度回転した正方形）にする - 見出しラベルは両端が切れ込んだリボン形にする - PAGE TOP ボタンは黒い菱形にする ## Components - **リボン英字ラベル**（`ribbon-label`）: セクション見出しの上に置く赤い弓なりのリボン。英字を白で入れる - **菱形の当選数バッジ**（`diamond-badge`）: 赤い菱形に白抜きで当選数を入れ、数字を大きくする - **黒帯ナビ**（`nav-bar`）: 黒の全幅帯に明朝のメニュー4つとSNSアイコンを並べる - **赤い主ボタン**（`button-primary`）: 朱赤の四角ボタン。左にアイコン、右に矢印を置く - **黒いリンクボタン**（`button-dark`）: 黒の四角ボタンに白文字と右矢印。商品ページへの誘導に使う - **黒帯アコーディオン**（`accordion-bar`）: 黒い帯の中央に白い明朝の見出し、右端に金色の＋を置く - **Stepカード**（`step-card`）: 白地に金茶の細い枠。上に赤のStep番号、明朝の見出し、説明文とイラストを置く - **赤枠の注意ボックス**（`caution-box`）: 朱赤の細い枠の中に赤い見出しを置き、Good/NG の比較を水色とピンクで並べる - **応募期間ライン**（`period-band`）: 黒い小ラベルの横に、大きい明朝の日付と矢印を並べる ## Do's and Don'ts **Do** - 見出しは明朝体にして、上にリボンラベルを付ける - 背景には和柄を薄く敷き、白パネルで情報をくっきり見せる - 黒帯と朱赤だけで強弱を付ける - 手順は番号付きのカードで1枚1要点にする - 規約や注意事項はアコーディオンに格納する **Don't** - 角丸やピル型のボタンを使わない - ネオンやパステルなどの派手な色を足さない - 和柄を濃くして文字の可読性を落とさない - 強い影やグラデーションのボタンにしない - 見出しをゴシックの太字にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（プレゼント内容と期間を一目で伝える）: ベージュの和柄地に、ロゴ・金茶の明朝コピー・商品写真・赤い菱形バッジ・応募期間を置く 2. **応募方法の要約**（応募の手段を2つ示す）: 金茶の枠のボックスに2列で手段を並べ、それぞれアイコンと矢印で3ステップを見せる 3. **ナビゲーション**（各セクションへのジャンプ）: 黒の全幅帯にメニュー4つとSNSアイコン 4. **キャンペーン概要**（条件と賞品数を説明する）: 生成り地に、リボンラベル・明朝見出し・中央揃えのリード文。数字は赤で強調する 5. **賞品紹介**（賞品の魅力とコラボを伝える）: 白パネルに縦書きの黒帯コピー、菱形バッジ、商品写真、ロゴカードを2つ並べる 6. **賞品の詳細**（中身ごとのこだわりを伝える）: 色付きの枠のカードで、左に商品、右に料理写真。原材料は円形写真を横に並べる 7. **対象商品**（対象商品を一覧で見せる）: ベージュの和柄地に白パネル。切り抜いたパッケージを3列グリッドで並べ、下に黒ボタン 8. **応募方法の詳細**（手順と撮影の注意を伝える）: 黒帯のタブとタイトル、Stepカード、赤枠の注意ボックス、Pointカード2列、NG例の写真 9. **ハガキ応募**（郵送の手順を説明する）: 黒帯タイトル、宛先の文字と記入見本の図、赤いダウンロードボタン、赤枠の注意書き 10. **利用規約**（規約を開いて読めるようにする）: ベージュの和柄地に、黒帯のアコーディオンを11本縦に並べる 11. **お問い合わせ・誘導バナー**（問い合わせ先と商品ページへの誘導）: 細い枠のボックスに電話番号を大きく入れ、下に料理写真とロゴの横長バナーを置く ## Imagery - 商品パッケージは正面から撮り、白背景で切り抜く - 料理写真は上か斜めから撮り、照りのあるシズル感を出す - 背景は青海波・雲・麻の葉を、ベージュの同系色で薄く描く - 原材料は小さな円形の写真で横に並べる - 手順の説明はスマホやレシートを描いたフラットなイラストにする - 当選の場面には紙吹雪とギフトボックスのイラストを使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCはコンテンツ幅を約800pxで中央寄せにし、左右に和柄地を見せる - SPではStepカード・Pointカード・応募手段の2列を1列にする - 商品一覧はPCで3列、SPで2列 - ナビの黒帯はSPで横スクロールにするか、ハンバーガーメニューにする - FVのメインコピーはSPでは36〜40pxにして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-979a06f5`（元 LP の URL から採番） - **元 LP**: https://cp.glico.com/donburi-2026cp/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。