--- version: alpha name: Nostalgic Cinematic Snack Brand LP description: 前半は暗くフィルム調の映像カットに縦書き明朝の短い言葉を重ね、思い出の物語として見せる。後半は商品写真の地、昭和レトロの放射柄、色違いの投稿カード、劇場幕の動画枠でにぎやかに切り替える。エモーショナルな前半とポップな後半の二部構成で作るブランド LP。 colors: primary: '#E50112' cta: '#EA6145' on-cta: '#FFFFFF' dark-section: '#010001' on-dark: '#FFFFFF' background: '#FFFFFF' background-alt: '#EDDBC2' surface: '#F2EBDC' accent-1: '#DD694E' accent-2: '#93B26C' accent-3: '#55A5A2' tint-1: '#F5C154' text: '#190901' text-muted: '#D2D2D2' cta-accessible: '#DC3A19' text-muted-accessible: '#767676' accent-1-accessible: '#D04828' typography: display: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.12em headline-lg: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.15em headline-sm: fontFamily: Zen Maru Gothic fontSize: 24px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 600 lineHeight: 1.85 letterSpacing: 0.04em label-button: fontFamily: Shippori Mincho fontSize: 15px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 1.5 rounded: sm: 6px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px vertical-caption: textColor: '{colors.on-dark}' typography: '{typography.display}' height: 260px polaroid-stack: backgroundColor: '{colors.background}' textColor: '{colors.text-muted}' typography: '{typography.headline-md}' height: 320px product-arch-card: backgroundColor: '{colors.background}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.lg}' height: 200px episode-card: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 260px label-pill-dark: backgroundColor: '{colors.text}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 40px theater-video: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 290px sns-tile: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 120px --- # DESIGN.md — 映画調の写真と昭和レトロ放射柄のお菓子 LP（Nostalgic Cinematic Snack Brand LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: レトロ、親しみ・手作り感、ポップ・元気、ラグジュアリー・ダーク - **キーワード**: ノスタルジー・映画のワンシーン・古い写真・昭和レトロ・縦書き明朝・放射柄 - **地の質感**: 前半は粒子感のある暗い映像トーン。中盤はクラフト紙調ベージュと白フチの古写真。後半は和紙風の生成り地にマットなパステル色を重ねる。 - **形**: 古写真は白フチで少し傾けて重ねる。商品カードは上がアーチ型。見出しの枠は角丸の太い黒帯。境界は波線やうねる曲線。 - **温度感**: 暖色寄り。セピアがかった茶と朱赤が中心で、補色に緑とターコイズを少し使う。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E50112` | ブランド赤（ヘッダー・フッター・SNSボタン） | 4% | 画素の実測 | | `cta` | `#EA6145` | 朱色の CTA ボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA ボタン上の文字 | 0% | 画素の主要色に補正 | | `dark-section` | `#010001` | 映像シーンの暗い地 | 25% | 画素の実測 | | `on-dark` | `#FFFFFF` | 写真に重ねる縦書きの白文字 | 1% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 古写真が並ぶ白地 | 14% | 画素の実測 | | `background-alt` | `#EDDBC2` | クラフト紙調のベージュ地 | 9% | 画素の実測 | | `surface` | `#F2EBDC` | 和紙風の生成り地（レシピ・動画） | 7% | 画素の実測 | | `accent-1` | `#DD694E` | 投稿カードの赤 | 4% | 画素の主要色に補正 | | `accent-2` | `#93B26C` | 投稿カードの緑 | 2% | 画素の実測 | | `accent-3` | `#55A5A2` | 投稿カードのターコイズ | 2% | 画素の実測 | | `tint-1` | `#F5C154` | 放射柄の山吹色 | 3% | 画素の実測 | | `text` | `#190901` | 見出しの黒茶・見出し帯 | 2% | 画素の実測 | | `text-muted` | `#D2D2D2` | 白地に置く淡いグレーの縦書き | 0% | 画素の実測 | | `cta-accessible` | `#DC3A19` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#767676` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#D04828` | AA を満たす補正値（計算） | | 計算 | - 前半の物語パートは写真の暗いトーンを地にして、文字は白だけにする。 - 古写真パートは白またはクラフトベージュの地にして、写真の色を主役にする。 - ブランド赤は最上部と最下部の帯、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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 写真に重ねる縦書きのキャッチ | 明朝 | Shippori Mincho | 500 | 30px | 1.4 | 0.12em | | `headline-lg` | レトロ見出し（エピソード・レシピ・動画） | 装飾・ディスプレイ | Dela Gothic One | 400 | 40px | 1.2 | 0.02em | | `headline-md` | 古写真に添える縦書きの一言 | 明朝 | Shippori Mincho | 600 | 20px | 1.5 | 0.15em | | `headline-sm` | 投稿カードの投稿者名 | 装飾・ディスプレイ | Zen Maru Gothic | 700 | 24px | 1.3 | 0.05em | | `body-md` | リード文・投稿本文 | 明朝 | Noto Serif JP | 600 | 13px | 1.85 | 0.04em | | `label-button` | CTA・カード下のボタン | 明朝 | Shippori Mincho | 500 | 15px | 1.2 | 0.05em | | `note` | フッターリンク・SNS ボタンの文字 | ゴシック | Noto Sans JP | 700 | 10px | 1.5 | 0.0em | - 物語パートは縦書きの明朝で、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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-7501a7ac`（元 LP の URL から採番） - **元 LP**: https://www.oyatsu.co.jp/product/babystar_omoide/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。