DESIGN.md — 紺×フレーバー色地のアイスブランドLP（Playful Navy Ice Cream Brand LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、親しみ・手作り感、清潔・爽やか、和風
• キーワード: 紺のロゴ色・フレーバー別地色・縦書き本文・リボン帯・カルーセル・ユーモア実写
• 地の質感: 淡い紙のようなノイズ質感の地。写真は艶のあるシズル感
• 形: 角丸の大きいカード、ピル型ラベル、波打つリボン、地図シルエット
• 温度感: やや涼しめ。水色・グレーが主で、プリン味だけ暖色のクリーム地

Colors

• 見出し・ラベル・下線リンクは紺で統一する
• 動画セクションだけ黒紺地にして、白文字で区切る
• 商品ごとに、味を連想させる地色（グレー／クリーム／淡水色）を全幅で敷く
• 強調は商品名リボンと地図バッジの色に限る
• レシピは水色地に白カードと水色枠を重ねる

Typography

• 和文見出しの下に小さな英字ラベルを中央揃えで添える
• 商品説明は縦書き（writing-mode: vertical-rl）にして中央に置く
• リスト・作り方の行頭には「・」や丸数字を使う
• 商品名はリボン帯の中に明朝体の白文字で入れる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。レシピは横スクロールのカルーセル
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しは中央揃えにし、上下に十分な余白を取る
• 商品写真は全幅帯で見せ、その下にロゴ・リボン・バッジ・縦書き本文を縦に積む
• 下線リンクは幅60%程度で中央に置き、右端に細い矢印を付ける
• カルーセルは左右に次のカードを少し覗かせる

Elevation & Depth

• 影はほぼ使わず、平面的に作る
• カードは影ではなく、太めの水色枠で浮かせる
• 商品写真は切り抜きで立体感を出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: FVと商品写真は全幅の角なし。カード内の写真は角丸。サムネイルは正方形
• セクション境界: 直線で地色を切り替える。レシピ見出しのみ下側が丸い吹き出し形
• カードは大きな角丸と水色の枠
• ラベルはピル型の紺地に白文字
• 商品名は波打つリボン形

Components

• 和英2段見出し（section-heading）: 和文の大見出しの下に小さな英字を置き、中央に揃える
• レシピカード（recipe-card）: 写真・レシピ名・材料・作り方を1枚に収めたカード。カルーセルで横に並べる
• ピル型ラベル（pill-label）: 材料・作り方などの小見出しに使う
• 商品名リボン（ribbon-title）: 波打つ帯の中に商品名を入れる。帯の色は味ごとに変える
• 産地地図バッジ（map-badge）: 黄土色の地図シルエットの上に、こだわりを紺の明朝体で重ねる
• 矢印付き下線リンク（underline-link）: 中央にテキスト、右端に細い矢印、下に1本線を引く
• 動画スライダー（video-slider）: 黒地に置く動画サムネイル。左右の矢印とドットで送る
• ドットインジケーター（carousel-dots）: 小さな丸を並べ、現在位置だけ塗りつぶす

Do's and Don'ts

Do - 商品ごとに味を連想させる地色を全幅で敷く - 見出し・ラベル・線の色は紺に揃える - 説明文は縦書きにして和の雰囲気を出す - 地には淡い紙のようなノイズ質感を入れる - レシピは写真主体のカードにし、カルーセルで並べる

Don't - 濃い影やグラデーションのボタンは使わない - 原色の地色を広い面に使わない - 見出しを左揃えにしない - カードを角のない四角にしない - 1つのセクションに強調色を3色以上入れない

Page Structure

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

1. ファーストビュー（ユーモアで記憶に残し、ブランドを印象付ける）: 自然の中の実写キャラクターを全面に置き、手書き風キャッチ・白ロゴ・商品カップを重ねる
2. CM動画（広告と連動させる）: 黒紺地に英字見出しと動画タイトルを置き、動画スライダーを入れる
3. アレンジレシピ（食べ方を提案して使う場面を広げる）: 水色地に吹き出し形の見出しとレシピカードのカルーセルを置く
4. レシピ写真帯（バリエーションの多さを見せる）: 正方形サムネイルを横一列に並べる
5. 商品情報（味1）（定番の味を紹介する）: グレー地に全幅の商品写真、ロゴ、赤リボン、地図バッジ、縦書き本文、下線リンクを積む
6. 商品情報（味2）（別の味を紹介する）: クリーム地に同じ構成で並べ、ロゴは朱色、リボンは青にする
7. 商品情報（味3）（別の味を紹介する）: 淡水色地に同じ構成で並べ、紺のリボンにする
8. フッター（コピーライトを表示する）: 淡水色地の中央に紺の小さな文字で置く

Imagery

• FVは竹林など自然の中で撮った、意外性のある実写キャラクター写真
• 商品はカップを切り抜き、ミルクやソースが跳ねる背景でシズル感を出す
• レシピ写真は真上や斜め上から撮り、和洋の器と布で彩る
• 装飾として商品シルエットのアイコンを水色地に散らす
• 産地は県や地方の地図シルエットで表す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはヘッダーに英字ナビを置き、FVは横長にする
• PCの商品情報は2カラム（写真と説明を左右交互）に配置する
• PCのレシピカードは横長にし、材料と作り方を左右2列に並べる
• PCではサムネイル帯をレシピ見出しの上下にも並べる
• コンテンツの最大幅は約1000pxで中央に揃える

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