DESIGN.md — 橙グラデと焦げ茶縁取りの菓子ブランド LP（Bold Orange Gradient Snack Brand LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、力強い・インパクト、親しみ・手作り感
• キーワード: 橙グラデーション・焦げ茶の縁取り・ずらし影・クラフト紙・マンガ風の集中線・ちぎり紙
• 地の質感: ベージュ地にクラフト紙の細かいノイズ。橙の面は左上の黄から右下の朱へ流れるグラデーション。
• 形: ぽってりした角丸の白い枠、ピル型ボタン、少し傾けたテキストボックス、ギザギザの爆発形、ちぎり紙のような不揃いな縁
• 温度感: 暖色中心で、熱量が高く甘い印象

Colors

• セクションごとに地を切り替える：ベージュ→橙グラデ→白→橙グラデ→生成り→ベージュ→焦げ茶
• 橙の面は黄(左上)から朱(右下)への斜めグラデにする
• 文字・縁取り・ボタン影は黒ではなく焦げ茶で統一
• 白ボタンは焦げ茶の枠と影、白地の上のボタンは橙の枠と影
• 赤・青はレシピバナー内だけに限定する
• button-secondary は文字 #E55305 × 背景 #FFFFFF のコントラスト比が 3.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#CF4B05、4.5:1）を使う。

Typography

• 大見出しは極太で、白文字に焦げ茶の太い縁取りと下にずらした影をつける
• 見出しの下に、かすれた筆致の白や橙の帯をマーカーのように敷く
• 本文も太めの丸ゴシックで、焦げ茶にする
• 強調ワードは山吹色にし、少し傾けて大小をつける
• 細い明朝体は使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、商品は 2+3 の段組み
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは画面幅いっぱいの地色の帯にする
• ボタンは幅 80% ほどで中央に置く
• レシピカードは縦に積み、間隔は 24px 前後
• テキストボックスは少し傾け、画像に重ねる

Elevation & Depth

• ぼかしの影は使わず、焦げ茶のベタ影を右下に 4〜6px ずらす
• 白い枠にも同じベタ影をつけてステッカーのように見せる
• 動画枠は橙の 1px 線で囲む

Shapes

• 角丸: 小 4px ／ 中 24px ／ 大 48px。ボタンはピル型。
• 写真の切り抜き: 商品は白い不定形の角丸枠に切り抜いて置く。レシピ写真は長方形に切り、下にラベル帯をつける
• セクション境界: 基本は直線で地色を切り替える。レシピエリアはちぎり紙のように不揃いな縁にする
• 商品枠はぽってりした歪んだ角丸にする
• 爆発形や集中線のギザギザを商品の背後に置く
• テキストボックスは角を立てて傾ける

Components

• ずらし影のピル型ボタン（button-primary）: 白地に焦げ茶の 2px 枠と右下のベタ影。文字の後ろに右向き矢印
• 橙の枠のピル型ボタン（button-secondary）: 白地の上で使う。橙の枠・影・文字にし、矢印かアイコンを添える
• 縁取りの極太見出し（heading-outlined）: 白文字に焦げ茶の縁取りと影。下にかすれた筆の帯を敷く
• 焦げ茶の見出しラベル（label-tag）: 焦げ茶の面に白文字。少し傾けた平行四辺形で、白のずらし影
• 商品ステッカー枠（product-sticker）: 白い不定形の角丸枠に商品を斜めに入れ、焦げ茶の影をつける
• 傾いた紹介文の箱（tilted-textbox）: 白い四角を少し回転させ、焦げ茶の影をつけて中に本文を入れる
• レシピカード（recipe-card）: 写真の下にえんじ茶の帯。帯には三角アイコンと白文字の誘導文を入れる
• SNS共有の丸アイコン（share-icons）: 白いラベルの下に丸いSNSアイコンを 3 つ横に並べる

Do's and Don'ts

Do - 地の色はセクション単位で大きく切り替える - 影は必ず焦げ茶のベタで、右下にずらす - 見出しは極太にして縁取り、傾きや大小で動きを出す - 商品は斜めに大きく置き、集中線や爆発形を背後に添える - ボタンには矢印アイコンを添える

Don't - 純黒やグレーの文字は使わない - ぼかし影や細いフラットな線だけのボタンにしない - 寒色をメインの地色にしない - 細い書体で見出しを組まない - 余白を詰めすぎて部品同士をくっつけない

Page Structure

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

1. ファーストビュー（広告ビジュアルで世界観を伝える）: 写真を全幅で敷き、筆文字風の白い巨大コピーを重ねる。左上にロゴ、右上に丸いメニュー
2. 商品ラインナップ（商品の一覧を見せる）: ベージュ地に白い不定形の枠を 2+3 個並べ、下に一覧へのボタン
3. ブランド紹介（定番ブランドであることを伝える）: 橙グラデ地に焦げ茶のラベル、縁取りの大見出し、爆発形と商品、傾いた本文の箱、ボタン
4. 動画（CMを見せる）: 白地に橙の英字見出し、橙の線で囲んだ動画サムネ、橙の枠のボタン
5. 楽しみ方（アレンジの食べ方を提案する）: 橙グラデ地に縁取りの見出し。色の違うバナーを 3 枚縦に積む
6. レシピ紹介（親子で作れるレシピに誘導する）: 生成りのちぎり紙エリアに、手書きの添え書き付きの見出し、リード文、写真カード 3 枚、ボタン
7. 外部バナー・シェア（公式SNSや通販へ誘導する）: ベージュ地に赤いバナーを 2 枚、白いラベルとSNSの丸アイコン
8. フッター（規約リンクと著作権表記）: 焦げ茶の地に、下線付きの白いリンクを縦に並べる

Imagery

• 商品はパッケージを切り抜き、斜めに大きく配置する
• 人物写真は彩度を高くし、迫力のある構図で撮る
• 背景にマンガ風の白い爆発形・集中線・きらめきを置く
• 料理写真は明るい自然光で、ストライプやギンガムの布の上に置く
• 手書きの線・矢印・音符などのラフな装飾を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はグローバルナビを右上に横並びにする
• PC では商品 5 点を 1 列に並べる
• PC のブランド紹介は商品を左、文を右の 2 カラムにする
• 楽しみ方・レシピのカードは PC で 3 列にする
• PC のコンテンツ幅は約 65% で中央寄せ、地色は全幅のまま

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 行書くと起動時に読み込まれる。