DESIGN.md — 映画調の写真と昭和レトロ放射柄のお菓子 LP（Nostalgic Cinematic Snack Brand LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: レトロ、親しみ・手作り感、ポップ・元気、ラグジュアリー・ダーク
• キーワード: ノスタルジー・映画のワンシーン・古い写真・昭和レトロ・縦書き明朝・放射柄
• 地の質感: 前半は粒子感のある暗い映像トーン。中盤はクラフト紙調ベージュと白フチの古写真。後半は和紙風の生成り地にマットなパステル色を重ねる。
• 形: 古写真は白フチで少し傾けて重ねる。商品カードは上がアーチ型。見出しの枠は角丸の太い黒帯。境界は波線やうねる曲線。
• 温度感: 暖色寄り。セピアがかった茶と朱赤が中心で、補色に緑とターコイズを少し使う。

Colors

• 前半の物語パートは写真の暗いトーンを地にして、文字は白だけにする。
• 古写真パートは白またはクラフトベージュの地にして、写真の色を主役にする。
• ブランド赤は最上部と最下部の帯、SNS ボタンにだけ使う。
• CTA は朱色の塗りに黒い影線を付け、どの地でも同じ見た目にする。
• 投稿カードは赤・緑・ターコイズ・オレンジを順番に塗り分ける。
• 放射柄はくすんだパステル（赤・山吹・緑青・生成り）でまとめ、蛍光色は使わない。
• button-primary は文字 #FFFFFF × 背景 #EA6145 のコントラスト比が 3.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DC3A19、4.5:1）を使う。
• polaroid-stack は文字 #D2D2D2 × 背景 #FFFFFF のコントラスト比が 1.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#767676、4.54:1）を使う。
• episode-card は文字 #FFFFFF × 背景 #DD694E のコントラスト比が 3.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D04828、4.53:1）を使う。
• theater-video は文字 #FFFFFF × 背景 #DD694E のコントラスト比が 3.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D04828、4.53:1）を使う。

Typography

• 物語パートは縦書きの明朝で、1 文を 2〜3 行に区切って余白を広くとる。
• 縦書きでは強調したい語だけを太く大きくして、メリハリを付ける。
• 後半のレトロ見出しは丸みのある太い装飾書体を使い、2〜3 段で大小を付ける。
• 本文は明朝の太めを中央揃えにし、行間を広くとる。
• SNS やフッターなどの機能的な部分だけゴシックにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品カードは 2 列×2 段、SNS ボタンは 2 列グリッド。
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算）
• 物語パートは写真を画面幅いっぱいに置き、セクションの間に余白を入れない。
• 古写真は左右に交互に寄せ、反対側に縦書きの文字を置く。
• 投稿カードは縦に積み、カード間を 30px ほど空ける。
• 動画サムネイルは画面幅の 92% で中央に置く。
• CTA は幅 45% ほどで中央に置く。

Elevation & Depth

• CTA には影ではなく、右下へ 3px ずらした黒いベタ影を付ける。
• 投稿カードの下に生成り色の厚みを付けて、紙を重ねたように見せる。
• 古写真には薄いドロップシャドウを付け、2 枚を少しずらして重ねる。
• 動画枠と商品カードは影なしのフラットにする。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 物語の写真は全幅の矩形。古写真は白フチ付きで ±3° 傾ける。商品カードは上部がアーチ型。
• セクション境界: ヘッダーとフッターの赤帯は波線。商品パートの境は雲形のうねる曲線。他は直線で切り替える。
• CTA は黒フチ付きのピル型にする。
• 投稿カード・動画枠は角丸 12px にする。
• SNS ボタンは角丸 24px の大きなタイルにする。
• 見出し上のラベルは黒茶のピル型にする。

Components

• 黒影付き朱色ピルボタン（button-primary）: 朱色の塗りに黒フチと右下の黒ベタ影を付け、明朝の白文字を載せる。
• 縦書きキャッチ（vertical-caption）: 写真の右上に白の縦書き明朝を 2〜3 行で重ねる。
• 重ね古写真（polaroid-stack）: 白フチの写真を 2 枚、少し傾けてずらし重ねる。脇に縦書きの一言を添える。
• アーチ型商品カード（product-arch-card）: 白いアーチ型の上部に商品を置き、下に朱色の帯ボタン（▶付き）を付ける。
• 色違い投稿カード（episode-card）: 色付きの面に、投稿者名・細い区切り線・明朝の本文を白で載せる。下に紙の厚みを付ける。
• 黒茶ピルラベル（label-pill-dark）: 大見出しの上に置く小さな前置きラベル。
• 劇場幕の動画枠（theater-video）: 上部に赤い幕の絵、左右にカーテンのイラストを付けた動画サムネイル。タイトルと種別ラベルを添える。
• SNS タイル（sns-tile）: 各 SNS の色で塗った大きな角丸タイル。アイコン・名前・右矢印を載せる。

Do's and Don'ts

Do - 前半は映画のスチルのような暗い写真と、縦書きの明朝で余白を多く見せる。 - 古写真は白フチ・傾き・2 枚重ねで、アルバムをめくる感じを出す。 - 後半は放射柄やパステル色で、空気が明るく切り替わるようにする。 - ボタンは黒い影線付きのピル型で全体を統一する。 - 投稿カードは 4 色をローテーションで塗る。

Don't - 物語パートに派手な色やゴシックの太字を入れない。 - 写真を彩度の高いまま使わない。セピア寄りに色を落とす。 - 影をぼかしの大きいドロップシャドウにしない。 - ブランド赤を本文の地に広く使わない。 - 古写真を整然としたグリッドに並べない。

Page Structure

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

1. ヘッダー（ブランドの表示とメニュー）: 赤帯の左にロゴ、右にメニューを置く。下端は波線にする。
2. ファーストビュー（物語の世界に引き込む）: 人物の横顔を全幅で暗く見せ、右に縦書きの白い明朝コピーを重ねる。
3. リードと動画（コンセプトを伝え、動画へ誘導する）: 風景写真の上に中央揃えの白い明朝文を置く。その下に動画サムネイルと朱色の CTA を並べる。
4. 情景シーン（食べる場面で共感を生む）: 手元のクローズアップ写真に縦書きコピーを重ねる。
5. 思い出コラージュ（物語の核となるメッセージ）: クラフト地の中央に朱色の水彩の花形を置き、縦書きの文字を載せる。周りに古写真を散らす。
6. 思い出エピソード列（時系列で情緒を積み上げる）: 白地に重ね古写真を左右交互に置き、反対側に淡いグレーの縦書きの一言を添える。
7. ブランドメッセージ再掲（キャッチを再び印象付ける）: 雲形の曲線で切り抜いた 2 人の人物写真を左右に並べ、中央に縦書きコピーを置く。
8. 商品ラインナップ（商品・ブランドサイトへの導線）: 商品そのものの写真を地にして、アーチ型の白カードを 2×2 で並べる。
9. ユーザー投稿（共感と参加感をつくる）: レトロな放射柄の地に、黒茶ピルのラベル、大見出し、色違いの投稿カードを縦に積む。
10. レシピ紹介（アレンジの提案）: 和紙風の地に、花形の皿に盛った料理写真をカルーセルで見せる。下に CTA を置く。
11. 歴史バナー（企業の歴史への導線）: 黒フチで囲んだ横長バナーに、商品写真と黒地のレトロ文字を組み合わせる。
12. 動画ギャラリー（CM・WEB 動画を視聴してもらう）: 劇場幕の装飾を付けた動画カードを 2 枚、縦に並べる。
13. SNS・フッター（公式アカウント・通販への導線）: 白地に SNS タイルを 2 列で並べ、キャラクターのロゴを置く。最下部は波線の赤帯フッター。

Imagery

• 人物写真は映画のスチルのように撮る。夕方や夜の暗い室内、浅い被写界深度、セピア寄りの低い彩度。
• 思い出の写真は祖母と孫などの家族の日常を切り取り、白フチの古いプリント風に加工する。
• 商品はパッケージの切り抜きを明るくはっきり見せる。地には中身を敷き詰めた写真を使う。
• 背景の装飾は昭和レトロの放射柄、水彩の花形、劇場幕などの手描き風イラストを使う。
• 料理写真は真上寄りの角度で、ポップな花形の皿にのせて撮る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 75% にし、ヘッダーにグローバルナビと SNS アイコンを横に並べる。
• PC のリード文は 3 行の横長にし、動画を中央に小さめに置く。
• PC の古写真列は大きな樹木の写真を地にして、曲線の点線で写真同士をつなぐ。
• PC の商品カードは 4 列 1 段にする。
• PC の投稿カードは大きさの違う 2 列のモザイク状に並べる。
• PC の SNS タイルは 6 個を 1 列に並べる。

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