DESIGN.md — 焦げ茶×金のクラフト感スナック食品LP（Rustic Kraft Snack Food LP）

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

Overview

• 業種: 食品・飲料 ／ 雰囲気: 親しみ・手作り感、力強い・インパクト、ナチュラル、情報量多め・訴求型
• キーワード: 焦げ茶・金茶・クラフト紙・木目・シズル・円形バッジ
• 地の質感: 黒板・木目・クラフト紙・生成りの紙のテクスチャを背景に敷く。完全なフラットにはしない
• 形: 円形バッジ、吹き出し、角丸の白カード、斜めの帯ラベル
• 温度感: 暖色寄り。焼き色のような茶と金で、温かく香ばしい印象

Colors

• 焦げ茶の暗い地と、生成り・ベージュの明るい地を交互に置く
• 見出しは濃茶を基本にし、キーワードだけ金茶に色を変える
• 味のバリエーションは赤・オリーブ金・グレー茶の色面で見分ける
• 暗い地の本文は白、強調だけ金茶にする
• 白は本文カードと吹き出しにだけ使う
• 寒色は使わない
• badge-circle-stat は文字 #FFFFFF × 背景 #AA742B のコントラスト比が 4.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#9E6C28、4.54:1）を使う。
• benefit-circle は文字 #FFFFFF × 背景 #AA742B のコントラスト比が 4.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#9E6C28、4.54:1）を使う。

Typography

• 見出しは太い丸ゴシックで、文字の大小を極端につける
• 見出しのキーワードは金茶にし、助詞は濃茶のまま小さくする
• 数値（たんぱく質量など）は整数を大きく、小数を小さく組む
• 効果音的な言葉は縦書きや斜め置きの小さな手書き風にする
• 本文は14px前後で、行間を広めに取る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。味の紹介だけ写真と文章の 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは背景色か質感で全幅に切り替える
• 味違いの選択肢は 3 列に並べ、丸ラベル・写真・パッケージを縦に積む
• 利点は円形バッジ 3 個を横に並べる
• 味紹介は左に商品、右に説明と円形の数値バッジ、下にスタッフの吹き出し
• 写真は全幅で敷き、その上に縦書きの帯見出しを重ねる

Elevation & Depth

• 白カードには弱い影（0 4px 12px rgba(0,0,0,.15)）をつける
• 商品パッケージの写真は切り抜いて、うっすら影を落とす
• 円形バッジは影をつけず、白い縁取りの二重線にする

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 料理写真は全幅の角型か円形のお皿形。商品は切り抜き
• セクション境界: 直線の切り替え。テクスチャ地の境目はまっすぐにする
• 味ラベルは円形で、下に吹き出しの尻尾をつける
• 帯見出しは角のある濃茶の帯にし、少し傾けることもある
• メモカードは上辺にリング穴を描いたノート風にする

Components

• 円形の数値バッジ（badge-circle-stat）: 金茶か白の円に二重線を入れ、栄養の数値を大きく入れる
• 味ラベル吹き出し（flavor-bubble）: 味ごとの色で塗った円に吹き出しの尻尾をつけ、白文字で味名を入れる
• 利点の丸バッジ（benefit-circle）: 金茶の円に白い太字で利点を書き、3 個並べる
• 濃茶の帯見出し（label-band）: 白文字を入れた濃茶の帯。中見出しや縦書きの訴求に使う
• クリップボード型チェックリスト（checklist-board）: 木製クリップボードの上の白い紙に、金茶のチェック付きで対象者を並べる
• スタッフ一言の吹き出し（staff-comment）: 左に人物イラスト、右に白い角丸の吹き出しで短い感想を書く
• ノート風メモカード（memo-card）: 白い紙に罫線と手書き文字を入れる。上に丸い見出しタブ、強調は金茶
• 加工工程の図（process-diagram）: 素材→加工→完成を矢印でつないだ横並びの図。最後は円形の結果バッジ

Do's and Don'ts

Do - 背景に木目・クラフト紙・素材の写真のテクスチャを敷く - 見出しの一部を金茶にしてリズムをつける - 食感を表す言葉を手書き風で写真のまわりに散らす - 数値は円形バッジで大きく見せる - 味ごとにテーマ色を決め、セクションの地に使う

Don't - 青や緑などの寒色をメインに使わない - 細い明朝体で見出しを組まない - 背景を真っ白のフラットだけで続けない - 角丸の大きいピル型ボタンを多用しない - 文字の大きさを均一にしない

Page Structure

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

1. ファーストビュー（商品のシズルと主な数値を一目で伝える）: 暗い木目の地に皿盛りの写真を大きく置く。白い斜め帯のキャッチ、金茶と白の極太見出し、左下に円形の数値バッジ
2. バリエーション選択（味の選択肢を見せる）: 暗い地に 3 列。色違いの円形吹き出し、中身の写真、パッケージを縦に並べる
3. 素材の価値（原料の健康価値を伝える）: 素材写真の地に、ベージュの面と極太の大見出し、金茶の丸バッジ 3 個
4. 商品の提案（手軽さを伝える）: 大きな丸ゴシックの見出しを括弧状の線で囲み、下にチップスを横一列に並べる
5. おすすめの人（対象者に当てはまると感じさせる）: クリップボード風の紙にチェックリストを置き、人物写真とビールの切り抜きを重ねる
6. 商品の説明（仕組みを図で説明する）: 黒板の地に白文字の本文と金茶の強調。白い枠と金茶の面で、工程図を 2 段並べる
7. こだわり（形状と食感の差を伝える）: 生成り地に帯見出しと極太見出し。円形に切り抜いた手元写真、食感ワードを入れた濃茶のラベル
8. 味の紹介（味ごとの特徴と数値を伝える）: 素材の写真を全幅で敷き、味の色の面の上に商品・説明・数値バッジ・スタッフの吹き出しを置く
9. 利用シーン（食べる場面を想像させる）: 木のテーブルの写真を全幅で使い、縦書きの濃茶帯と白抜きの文字。家族の写真をグリッドで並べる
10. 国内生産（安心感を伝える）: 工場の線画の灰色地に国旗アイコン付きの見出し、工程写真を 3×2 のグリッド、下に濃茶帯の注記
11. 豆知識メモ（背景の価値を補う）: 木目の地にノート風の白カード。丸いタブ見出しと手書き文字、植物の線画
12. 保存の便利さ（パッケージの利点を伝える）: 木目の地に白い大見出し。パッケージと円形の拡大写真、点線で囲んだ注記
13. 価格の理由（安さの根拠を伝える）: 生成り地に白い角丸カード。左にアイコンとラベル、右に本文を置き、点線で区切る

Imagery

• 暖色の照明で、焼き色がわかる寄りの料理写真を撮る
• 背景は濃い木のテーブルか白い陶器の皿
• 素材（大豆・梅・にんにく・胡椒）を画面いっぱいに敷き詰めたテクスチャ写真を使う
• 人物は自然な笑顔の生活シーン。家族や運動する女性
• スタッフはシンプルな線のイラスト顔アイコンにする
• 黒板・クラフト紙・ノート・線画の植物などの手作り感のある装飾を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像はないため、以下は推奨。PC はコンテンツ幅を約 1000px に収め、テクスチャ背景は全幅に広げる
• 味の紹介は PC で左右の幅を広げ、写真と文章を 1:1 にする
• 工程写真のグリッドは PC で 3 列のまま余白を広げる
• 極太見出しは PC で 1.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 行書くと起動時に読み込まれる。