DESIGN.md — 朱赤枠×和紙地の和風プレゼントキャンペーンLP（Festive Japanese Red Frame Campaign LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 和風、ポップ・元気、親しみ・手作り感、情報量多め・訴求型
• キーワード: 朱赤の額縁・和紙テクスチャ・霞雲・市松模様・祝祭感・キャラクター
• 地の質感: 生成りの和紙風ざらつき地。白い霞雲が枠をまたいで流れる
• 形: 角を内側にえぐった額縁、正円のステップ、六角形バッジ、梅花型の当選数バッジ
• 温度感: 暖色中心で温かく賑やか

Colors

• ページ全体を朱赤の外枠で囲み、内側は生成り和紙地にする
• セクションごとに生成りと淡クリームを交互に切り替える
• 赤は枠・日付・当選数バッジ・矢印など要所のみに使う
• 白は情報を読ませる面（ステップ円・規約・問い合わせ）に限定
• ストアボタンは公式の黒で統一
• 外部導線バナーだけ深緑や赤で色を変え差別化
• badge-winners は文字 #FFF4EF × 背景 #E41E11 のコントラスト比が 4.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DD1D10、4.57:1）を使う。
• slider-arrow は文字 #FFF4EF × 背景 #E41E11 のコントラスト比が 4.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DD1D10、4.57:1）を使う。

Typography

• 本文はほぼ中央揃えで短い行に改行する
• 見出しは太字で字間を広めにとる
• 数字は欧文の極太で大きく赤にする
• 注釈は※付きで小さく右寄せまたは中央
• 規約本文だけ左揃えでスクロール枠内に収める
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、商品は 2 カラムグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 外枠赤を左右約12pxで常に見せる
• 見出し→説明→コンテンツの縦積みで中央軸を通す
• ステップは正円カードを縦に並べ赤V字矢印でつなぐ
• 景品は写真スライダー＋コースバッジ＋名称のセット
• セクション境界に霞雲を枠からはみ出させて置く

Elevation & Depth

• 影はほぼ使わずフラット
• 白ボックスは細い黒二重線で区切る
• 商品パッケージにのみ軽いドロップシャドウ

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 40px。ボタンは角丸の長方形。
• 写真の切り抜き: 景品写真は角丸なしの矩形＋細い黒枠、キャラクターは切り抜き
• セクション境界: 白い霞雲の重なり、フッター手前は赤白市松帯
• 期間表示はピル型の黒線枠
• ステップは正円に黒細線
• コース表示は六角形バッジ
• 当選数は赤い梅花型バッジ
• 外枠の角は内側にえぐれた額縁形

Components

• 朱赤の額縁枠（frame-border）: ページ全体を囲む赤枠。内側に細い黒線と角のえぐり
• 市松挟み見出し（heading-checker）: 見出し左右に小さな市松ブロック装飾を置く
• アプリストアボタン（button-store）: 黒地の公式ストアバッジを並べ、上に斜線挟みの誘導文
• ステップ円カード（step-circle）: STEP数字の下に白い正円、タイトル下に赤点線、説明は中央
• 六角形コースバッジ（badge-course）: 白地黒線の六角形にアルファベットと小ラベル
• 梅花型当選数バッジ（badge-winners）: 赤い梅花形に白抜きで当選人数
• 期間表示ピル（period-pill）: 白地黒線の横長ピルに期間を2段表示
• 外部リンクバナー（banner-link）: 深緑や生成りの横長バナーに文字と画像を左右配置
• スライダー矢印（slider-arrow）: 赤い丸に白い山括弧、写真左右に重ねる
• 規約スクロール枠（terms-box）: 白地に左揃え本文、赤いスクロールバー

Do's and Don'ts

Do - 赤枠と和紙地の対比を全セクションで保つ - 霞雲・市松・青海波など和柄を控えめに散らす - 数字（期間・当選数）は赤で大きく見せる - 本文は中央揃えの短文で改行する - キャラクターを枠から顔を出すように配置する

Don't - 寒色を地色に使わない - ドロップシャドウやグラデーションボタンを多用しない - 細い明朝で本文を組まない - 赤を広い本文背景に使わない - 和柄を密に敷き詰めて情報を埋もれさせない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（キャンペーン名・景品・期間を一目で伝える）: 黄土地にロゴ、キャラクター集合写真、赤の大きな日付
2. ページ内ナビ（各セクションへ誘導）: 赤地に白太字の項目を縦積み、下に小リンク
3. アプリDL導線（応募手段への早期誘導）: 斜線挟みの誘導文＋ストアボタン2つ
4. 対象商品（購入対象を示す）: キャラ写真が枠上に乗り、説明文後に商品2列グリッドと和風イラスト
5. 景品（賞品の魅力と当選数）: 写真スライダー、六角コースバッジ、梅花当選数バッジ
6. 応募方法（手順の理解）: 期間ピル、正円ステップ3つをV矢印で連結、緑バナー
7. 当選結果発表（当選通知方法の説明）: 市松見出し＋中央揃え短文
8. 応募規約（規約の提示）: 白いスクロールボックス
9. お問い合わせ（窓口情報）: 白地に黒二重線の四角枠
10. クロージングCTA（最終的なアプリDL誘導）: 雲背景にストアボタン縦積み、キャラと料理写真
11. フッター（関連サイト導線と権利表記）: 赤白市松帯の下に横長リンクバナー3本とコピーライト

Imagery

• キャラクターぬいぐるみは法被や鉢巻など和装で、明るい単色背景で撮影
• 商品パッケージは切り抜きで、背後に白い扇形の台座を敷く
• 商品横に素材を表す淡色の線画イラストを添える
• 白い霞雲をセクション境界と枠外に配置
• 料理写真は器ごと正面から、キャラクターを左右に添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCも赤枠と和紙地を維持し中央寄せの単一カラム
• PCのFVはキャラ横一列とロゴ左上、縦書きキャッチを添える
• 商品グリッドはPCで4列
• ステップ円はPCで横3列に並べ赤い>矢印でつなぐ
• PCではストアボタンにQRコードを併記
• フッターリンクバナーはPCで横3列

Agent Prompt Guide

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。