DESIGN.md — 黄金色×焦げ茶の映画風スナック菓子 LP（Cinematic Golden Corn Snack LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ナチュラル、ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 映画ポスター風・黄金色・木目と麻布・シズル写真・縦書き明朝・波形の区切り
• 地の質感: 木のテーブル・麻布・粒の質感がわかる高精細な食品写真を全面に敷き、写真の上に白文字を直接のせる。
• 形: 角ばった全面写真が主体。区切りは緩い波形のカーブ、ラベルは上部が丸いタブ型。
• 温度感: 暖かい。夕焼けと黄色・茶色で夏の収穫期のような温度感。

Colors

• 地は黄色・クリーム・写真の3種を交互に使う。
• 見出し文字は焦げ茶、写真上は白文字にする。
• 黄色地には同系の濃い黄色でモチーフ柄を薄く敷く。
• 緑はサステナブル訴求と装飾の葉だけに限定する。
• 冒頭だけ空色と夕焼けで映画的な世界観を出す。
• cinema-hero は文字 #FFFFFF × 背景 #A3D5E4 のコントラスト比が 1.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-dark-accessible（#575757、4.54:1）を使う。
• flavor-tab は文字 #FFFFFF × 背景 #C27E24 のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#A46A1E、4.51:1）を使う。

Typography

• 情緒的なコピーは明朝の縦書きにし、字間を広げる。
• 商品の楽しさは極太の丸みのある書体で表す。
• 写真上の白文字には薄いドロップシャドウを付けて読みやすくする。
• 本文は太字・中央揃えで3〜4行に収める。
• 英字の小さな筆記体を見出しの上に添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。レシピのみ 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 0px、基本単位 8px、カード内 12px（375px 幅換算）
• セクションは隙間なく全幅写真でつなぐ。
• テキストは写真の余白部分に直接重ねる。
• 味の紹介は左に商品パッケージ、右に説明文を置く。
• 見出しは左右に葉のイラストを配置して中央揃えにする。

Elevation & Depth

• パッケージ写真に柔らかい落ち影を付ける。
• 白文字に薄い黒シャドウを付ける。
• カードやボタンの影は使わない。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 全幅の長方形写真。レシピは角丸の小さい長方形
• セクション境界: 緩い波形カーブ。冒頭は緑とオレンジの細いリボン状の波
• 味ラベルは上部が山形のタブ型にする。
• ロゴ帯はとうもろこし形の焦げ茶シルエットにする。
• レシピ写真の角に細い白い引き出し線を付ける。

Components

• 映画ポスター風ヒーロー（cinema-hero）: 空の写真に字間の広い白い告知見出しと日付を縦線で挟んで置く
• 波形フォトストリップ（photo-strip）: 人物写真を横に並べ、上下を色付きの波線で区切る
• 縦書きキャッチ（vertical-copy）: 暗い写真に白い明朝体を縦書きで重ねる
• 焦げ茶ロゴ帯（logo-banner）: とうもろこし形の焦げ茶シルエットにクリーム色の太字ロゴ
• 味ラベルタブ（flavor-tab）: キャラメル色のタブに白抜きの味名、上部にアイコン
• 放射線付き見出し（burst-heading）: 黄色地に筆記体英字と放射線を添えた焦げ茶の極太見出し
• レシピカード（recipe-card）: 2列の料理写真に小さな補足文と太字の料理名
• 成分バッジ（badge-healthy）: 緑と白の六角形バッジで含有量を表示

Do's and Don'ts

Do - 写真は粒の質感とつやがわかる寄りのシズルカットにする。 - 黄色地と暗い木目写真を交互に置いてリズムを作る。 - マスコットキャラクターを要所に小さく添える。 - 見出しは焦げ茶か白の2色だけで表現する。

Don't - 寒色の地や無機質なグレーを多用しない。 - 細い文字を写真上に影なしで置かない。 - ボタンや枠を多用して EC 風にしない。 - ネオン色や蛍光色を使わない。

Page Structure

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

1. ファーストビュー（商品と産地の世界観を一目で伝える）: 畑と空の写真の手前に、木の台の上の商品3袋と収穫物を並べる
2. 映画風ティザー（ストーリー性で興味を引く）: 空色の背景に告知風の見出し、波形の人物写真帯、夕焼けの一本道に縦書きコピー
3. 食感訴求（食感と美味しさを伝える）: 暗い背景のシズル写真に白い明朝の大見出し
4. 品質・製法の要点（安心感を与える）: 木目と麻布の写真に縦書きコピーと3行の要点を白文字で
5. 商品紹介（ブランドと商品ラインを示す）: クリーム〜麦色地に焦げ茶ロゴ帯と商品集合写真、成分バッジ
6. 素材訴求（自然素材であることを強調）: 素材を敷き詰めた写真に巨大な白い数字と短い本文
7. 味わいの特長（懐かしさと新しさを伝える）: 夕焼けの畑写真に葉の飾り付き見出し、浮かぶ商品とキャラクター
8. 製法（新鮮さの理由を説明）: 素材のクローズアップに白い明朝見出しと説明
9. 味のバリエーション（3種の味を紹介）: 黄色柄地の放射線見出しの後、波形で区切った写真ごとにタブ・パッケージ・説明文
10. 食べるシーン（子供のおやつと大人のおつまみの両方を提案）: シーン写真を斜めに分割し、白縁付きの太字コピーを重ねる
11. アレンジレシピ（使い方を広げる）: 黄色地にモチーフ柄、2列×2段のレシピカード
12. サステナブル訴求（環境への配慮を伝える）: 黄色柄地に緑の葉アイコン、焦げ茶の本文、商品3袋
13. 締めのビジュアル（最後に商品を印象付ける）: 粒をぼかした背景に極太見出しと商品集合写真、白帯に明朝のメッセージ

Imagery

• 暖色の照明で、木のテーブル・麻布・石板の上に素材を散らした俯瞰やななめ上からの写真。
• 夕焼けや夏空の畑など、映画のスチール写真のような広い風景写真。
• 素材を画面いっぱいに敷き詰めたテクスチャ写真を背景に使う。
• 小さく素朴なマスコットイラストと、線画の葉・放射線の装飾。
• 黄色地には素材モチーフのシルエット柄を同系色で敷く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では画像を中央 750px 程度の固定幅で表示し、左右は黄色や木目の地で埋める。
• 全幅写真は PC で横長に切り抜き、テキストは左右どちらかの余白に寄せる。
• レシピは PC で 4 列にする。
• 縦書きコピーは PC でも縦書きのまま大きくする。

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