DESIGN.md — 紺×水色の爽やかなコンビニスイーツ新商品 LP（Navy and Sky Blue Fresh Dessert LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 清潔・爽やか、ポップ・元気、シンプル・ミニマル
• キーワード: 濃紺の帯・水色の円・白いソフトクリーム・焦げ茶の太字・点線の下線・広い余白
• 地の質感: フラットな単色面にシズル感のある商品写真を重ねる。質感の装飾はほぼなし
• 形: 大きな正円の背景、ハート形の吹き出し、角丸ボタンとピル型ボタン
• 温度感: 涼しげな寒色ベースに、焦げ茶の文字で温かみと食欲を足す

Colors

• 地は白が基本。締めの CTA セクションだけを淡い水色の全面地にする
• 濃紺はファーストビュー下の帯・円背景・吹き出し・主ボタンにまとめて使う
• 本文と大見出しは黒ではなく焦げ茶にして、食品らしい温かみを出す
• 見出しの強調語は濃紺と緑の2色で塗り分ける
• 商品写真の背面には濃紺または水色の大きな円を置き、交互に使い分ける
• 暖色の差し色は使わない。赤紫は写真のソースだけにとどめる

Typography

• 文字はすべて太字。本文も 800 前後の太さで読ませる
• 本文は行間を約 2.3 と広くとり、1行 20 字前後で改行する
• 大見出しは2行に分け、それぞれの行の下に点線を引く
• Point の番号は欧文の太いサンセリフにして、数字だけ大きくする
• 価格は数字を大きく、税込の表記を小さく添える
• 注釈は小さく、ページ末尾にまとめて置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は Point セクションだけ写真と文の 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 商品写真は画面幅いっぱいに大きく見せる
• Point.1 は左寄せ、Point.2 は右寄せにして左右に振る
• セクションの間は 80px 前後の白い余白で区切る
• ファーストビューの下に紺の帯を置き、発売日を1行で載せる
• ボタンは中央に置き、主ボタン・サブボタンの順に縦に並べる

Elevation & Depth

• 影はほぼ使わずフラットにする
• 主ボタンは内側に細い白線を入れた二重枠で立体感を出す
• 商品写真は切り抜いて円の上に重ね、円の外へはみ出させる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品は背景を抜いた切り抜き写真にし、大きな正円の上に配置する
• セクション境界: 直線で区切る（白地から水色の地に切り替える）
• 背景の円は画面幅を超えるほど大きくし、端を切らせる
• サブボタンは白いピル型にし、左に紺の丸い矢印アイコンを付ける
• 主ボタンは角を少し丸めた紺の長方形にし、二重枠で囲む
• 割安訴求はハート形の吹き出しに入れる

Components

• 店舗検索の主ボタン（button-primary）: 紺の地に白文字。左に白い丸の矢印、右に店舗アイコンを置き、二重枠で囲む
• 情報リンクのサブボタン（button-secondary）: 白いピル型。左に紺の丸い矢印を置き、焦げ茶の文字を入れる
• 点線の下線付き見出し（heading-dotted）: 2行の中央揃え見出し。各行の下に点線を引き、強調語だけ紺と緑で塗る
• Point 番号の見出し（point-label）: Point と番号を欧文の太字で書き、下にグラデーションの帯（紺または緑）を敷く
• ハート形の吹き出しバッジ（badge-bubble）: 紺のハート形の吹き出しに白文字を2行入れ、増量などの訴求を載せる
• 発売日の帯（date-band）: 紺の帯を画面幅いっぱいに敷き、中央に白い太字で発売日を書く
• 価格の表示（price-block）: 税抜価格を大きく、税込価格を括弧付きで書く。白い縁取りの紺文字にする
• 円の上に載せた商品写真（circle-photo）: 紺または水色の大きな正円の上に、切り抜いた商品写真を重ねる

Do's and Don'ts

Do - 商品写真は切り抜いて大きく見せ、その背面に円を置く - 配色は紺・水色・白・焦げ茶の4色を軸にする - 見出しは中央揃えにし、点線の下線を付ける - 特長は Point 番号を付けて2つほどに絞る - 注釈は末尾に小さくまとめる

Don't - 本文や見出しを真っ黒にしない - 暖色の差し色やグラデーションのボタンを使わない - カードの影や枠を多用して、画面を詰め込まない - 細い書体を使わない - 背景に写真のテクスチャを敷き詰めない（ファーストビューだけにする）

Page Structure

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

1. ファーストビュー（商品名・商品の見た目・価格を一度に伝える）: 果実を敷き詰めた写真を背景に、中央に商品を置く。上に焦げ茶の極太の商品名、右下に価格、左に認証ロゴを配置する
2. 派生商品の帯（増量版を紹介する）: 紺の帯に、小さな商品写真・吹き出しバッジ・商品名・価格を横一列に並べる
3. 発売日の告知（発売日を知らせる）: 注釈の下に紺の帯を置き、白い太字で発売日を書く
4. コンセプト見出し（味の特徴をひと言で伝える）: 白地の中央に2行の見出しを置き、点線の下線を引く。強調語は2色で塗る
5. 特長1（素材のこだわりを説明する）: Point 見出しを左に置き、その下に太字の本文を書く。紺の大きな円に商品写真を重ねる
6. 特長2（乳原料のこだわりを説明する）: Point 見出しを右に寄せ、ロゴを2つ並べる。本文は右揃えにする
7. 増量版の紹介（上位商品の訴求）: ハート形の吹き出しバッジの下に、水色の円と商品写真を置き、焦げ茶の大きな商品名を重ねる
8. CTA（店舗へ誘導する）: 水色の地に、点線の見出しと2つの商品写真を並べる。その下に紺の主ボタンと白いピル型のサブボタンを置く
9. 注釈（税・取扱いについての注意書き）: 水色の地のまま、小さな文字で左揃えに並べる

Imagery

• 商品は白背景で撮った切り抜き写真にし、少し見上げる角度で質感を見せる
• ファーストビューの背景は、主素材の果実を青みのある石の面に敷き詰めた俯瞰写真
• 写真全体を青寄りの涼しい色調にそろえる
• 産地や認証のロゴは丸いエンブレムや地図のシルエットで添える
• 装飾のイラストは使わず、円と吹き出しの図形だけで構成する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に最大幅 960px 前後のコンテナを置く
• PC のファーストビューは横長にし、商品名と価格を1行にまとめる
• PC の Point は左に円と写真、右に Point.1・2 の文を縦に並べる2カラムにする
• PC の増量版紹介は、左に吹き出しバッジと商品名、右に円と写真を置く
• CTA のボタンは PC でも中央に置き、幅は 400px 前後に抑える

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