DESIGN.md — ケチャップ赤×白カードのポップな食品レシピ LP（Ketchup Red Playful Recipe Campaign LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: ポップ・元気、親しみ・手作り感、かわいい、情報量多め・訴求型
• キーワード: ケチャップレッド・白い角丸カード・極太丸ゴシック・料理写真・キャラクター・レシピ誘導
• 地の質感: ベタ塗りの赤が基本。動画の周りに赤いグロー、レトロ特集だけギンガムチェックと紙のような質感。
• 形: 大きな角丸カード、ピル型ボタン、丸く切り抜いた人物写真、吹き出し型の注記枠。
• 温度感: 暖色だけでまとめた、にぎやかで温かい印象。

Colors

• 地はケチャップレッドで統一し、内容はすべて白い角丸カードに入れる
• カード内の見出し・強調語・ボタン枠は赤にする
• レシピの4分割タイルは黄・オレンジ・えんじ・ピンクの暖色で塗り分ける
• 特集セクションだけピーチベージュと茶色で配色を切り替え、レトロ感を出す
• キャンペーンは焦げ茶の地に黄色ボタンで目立たせる
• 寒色はキャラクターと期間限定バッジの青だけに絞る

Typography

• 見出しは極太の丸い書体で、赤い文字に白フチや影をつけ、看板のように見せる
• 重要語は黄色のマーカー線か赤い文字で強調する
• リードはすべて中央揃え、本文は左揃え
• 小見出しは左右を斜線で挟んだ手書き風にする
• 1文は1〜2行で改行し、子どもにも読みやすくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。レシピタイルは 2×2 グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 40px、基本単位 8px、カード内 24px（375px 幅換算）
• カードの左右には約18pxずつ赤い地を残す
• キャラクターや丸い人物写真をカードの角からはみ出させる
• 写真はカード内いっぱいの幅に置き、その下に料理名ロゴ・説明・ボタンの順に並べる
• レトロ特集では写真とテキストボタンを左右交互にジグザグ配置する

Elevation & Depth

• 白カードはごく薄い影か影なしで、赤地とのコントラストで浮かせる
• 動画には赤く発光するグローの影をつける
• レトロ特集の写真は白フチ付きで少し傾け、落ち影をつけてポラロイド風にする
• ボタンには下に薄い影をつける

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 料理写真は角丸なしの長方形。人物は円形に切り抜いて白フチをつける。料理は白皿ごと切り抜くこともある。
• セクション境界: 多くは色面の直線で切り替える。レトロ特集の終わりはギザギザの紙端にし、フッターはカラフルなストライプにする。
• カードは大きく角丸にする
• ボタンはピル型で、右端に丸矢印アイコンを入れる
• 注記は角丸の枠＋吹き出しのしっぽで囲む
• 期間限定バッジは青いギザギザの円形にする

Components

• 白い角丸セクションカード（card-section）: 赤地の上に置く主コンテンツの箱。キャラクターや人物の円形写真を角からはみ出させる。
• レシピ誘導の白ボタン（button-recipe）: 白地に赤い細枠、赤文字、右端に赤い丸矢印をつけたピル型ボタン。
• 黄色のキャンペーンボタン（button-campaign）: 濃い地の上に置く黄色のピル型ボタン。右端に矢印アイコン。
• 点線枠の白抜きボタン（button-dotted）: 朱赤の地の上に置く、白い点線の枠に白文字のピル型ボタン。
• 斜線つき手書き風の小見出し＋極太見出し（heading-accent）: 斜線で挟んだピンク系の小さな言葉の下に、赤い極太見出しと黄色の波マーカーを置く。
• 吹き出し型のポイント枠（note-bubble）: 左上に赤いラベルを置き、本体は赤枠の角丸ボックスで、右上に吹き出しのしっぽをつける。
• 暖色の 2×2 レシピタイル（recipe-tile）: 色を変えたタイルに、雲形の見出し・キャラクター・料理写真・白文字の料理名・白ボタンを入れる。
• 期間限定バッジ（badge-limited）: 青いギザギザの円に白い太字を入れ、商品画像に重ねる。

Do's and Don'ts

Do - 赤い地＋白カードの基本構成を最後まで守る - 料理ごとに写真・ロゴ風の料理名・説明・ボタンの1セットを繰り返す - キャラクターや湯気・音符などの装飾を余白に散らして楽しさを出す - ボタンは必ずピル型にして矢印アイコンをつける - 特集ブロックでは色と柄を思い切って切り替える

Don't - 寒色や無彩色を地の色に広く使わない - 細い明朝体や繊細な書体を見出しに使わない - カードの角を尖らせない - 文字を詰め込んだ長文の段落を作らない - 赤地の上に赤い文字を直接置かない

Page Structure

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

1. ファーストビュー（企画の内容をひと目で伝える）: 麻布調の背景に、立体的な極太ロゴ・商品・キャラクターを合成した一枚絵。下に赤い帯の導線バーを置く。
2. CM 動画（話題づくりと認知の獲得）: 赤地の上に白い英字の大見出しと説明を置き、グロー付きの動画を埋め込む。
3. 調理法の解説（使い方の提案）: 白カードに斜線つき小見出し、黄マーカーの見出し、赤字を交えた説明、写真、吹き出し型のポイント枠を入れる。
4. おすすめレシピ（具体的なメニューの提案）: 白カードに円形の人物写真を重ね、料理写真＋ロゴ風の料理名＋説明＋赤枠ボタンを繰り返す。
5. レシピのバリエーション（幅広い使い道を見せる）: カードの上部に見出しを置き、下部は暖色4色の2×2タイルにする。
6. レトロ特集（懐かしさで共感を呼ぶ）: チェック柄のビジュアルの後、ピーチ地に傾けた写真とボタンを交互に並べる。
7. SNS 投稿キャンペーン（参加を促す）: 焦げ茶の地に黄色の見出し帯、賞品画像、黄色ボタン。終了時は黒い半透明を重ねて告知する。
8. 付属品の紹介と動画（体験の提案）: ビジュアルの後、赤地に白文字の説明、料理写真、音符の装飾、動画を置く。
9. 商品の万能性（ブランドの訴求）: 朱赤の地に白い極太見出し、商品とキャラクター、切り抜き料理、点線ボタンを置く。
10. 限定パッケージ（購入動機をつくる）: 白カードに青い見出し、青いバッジ付きの商品画像、短い説明、注釈を入れる。
11. フッター（権利表記と締め）: 赤地にキャラクターロゴと権利表記、カラフルなストライプ、トップへ戻るボタン。

Imagery

• 料理は真上からか斜め45度で、木のテーブルや布巾の上に置いて明るく撮る
• 白皿ごと切り抜いた料理を、余白や色面に浮かせて配置する
• 3D 風のキャラクターや人物をカードからはみ出させて動きを出す
• 湯気・音符・星などのシンプルなイラストを散らす
• 料理名はぷっくりした立体ロゴ風の文字にして写真の下に添える
• レトロ特集ではギンガムチェックや紙の質感を背景に使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はページ上部に横長のメインビジュアルを置き、その下にタブ型のアンカーナビを並べる
• PC でも赤地＋中央の白カード構成は同じ。カード幅は約 800px に収める
• PC の解説カードはテキストと写真を左右 2 カラムで並べる
• PC のレシピは左右交互の 2 カラムにする
• PC の 2×2 タイルは横長の帯を4段に積み、写真を左、名前とボタンを右に置く
• 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 行書くと起動時に読み込まれる。