DESIGN.md — 抹茶緑×ベリー赤の季節限定アイス LP（Fresh Matcha Green Premium Ice Cream LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ナチュラル、上品・高級、やさしい・柔らかい、清潔・爽やか
• キーワード: 抹茶グリーン・ベリーの赤・浮遊する葉と果実・金縁リボン・花形吹き出し・季節限定
• 地の質感: ぼかした緑の背景写真と、細かいドットや布目のような淡い地模様
• 形: 波打つ花形の円、斜めに切った帯、横長のリボン
• 温度感: 明るく爽やかな初夏の温度感

Colors

• 地は淡い緑白〜ミントで、白っぽさを保つ
• 主役の緑は写真とリボン見出しで表現し、文字は深緑
• ベリーの赤は吹き出し見出しと果実素材だけに限定
• 金色はリボン縁と吹き出しの縁取りのみ
• 期間限定バッジだけオレンジ黄で目立たせる
• ファーストビューと訴求部は写真背景に白文字＋緑のグロー
• scallop-bubble-pink は文字 #D23A4A × 背景 #FDE3D6 のコントラスト比が 3.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#C32D3C、4.56:1）を使う。

Typography

• 見出しの助詞『の』『と』『に』は一回り小さくする
• 説明文は中央揃えで短く改行する
• 本文はやや太めのゴシックを深緑で組む
• 写真上の白文字には緑のぼかしグローを付ける
• 難読語には小さなルビを添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（吹き出しは左右交互にずらす）
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 64px、基本単位 8px、カード内 40px（375px 幅換算）
• 商品写真は画面幅いっぱいか、はみ出すように大きく置く
• 吹き出しは引き出し線で写真の部位と結ぶ
• 吹き出しは左右交互に配置して重ねる
• 葉と果実を画面端からはみ出させる
• お客様の声は 1 枚の縦長カードに区切り線で並べる

Elevation & Depth

• 吹き出しと商品写真に柔らかいドロップシャドウ
• 葉の影を背景に大きくぼかして落とす
• リボン見出しに薄い影と金の縁
• 声カードは半透明白で背景が透ける

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 商品と果実・葉は切り抜きで配置し、背景は全面写真
• セクション境界: ファーストビュー下は斜めのぼかし帯、以降は背景のグラデーションで連続
• 説明は波形の花形円で囲み、金色の縁取りを付ける
• 見出しは両端を切り込んだ横長リボン
• 注釈やリンクは濃緑のピル
• SNS アイコンは円形で横並び

Components

• 期間限定バッジ（badge-limited）: 左端から出る右端斜めカットのオレンジ黄帯。
• 成分情報リンク（pill-link）: 右上に置く濃緑のピル型小ボタン。
• リボン見出し（ribbon-heading）: 緑のグラデーションに金の縁が付いた横長リボン。文字は中央の明朝。
• 黄緑の花形吹き出し（scallop-bubble-green）: 波形の円に金縁。要素名と短い説明を中央揃えで入れる。
• ピンクの花形吹き出し（scallop-bubble-pink）: ソース要素用。見出しはベリーの赤。
• 引き出し線（leader-line）: 細い黒の縦線の先に黒丸。写真の部位を指す。
• お客様の声カード（voice-card）: 半透明白の縦長カード。声を細い区切り線で 3 件並べ、下に注釈ピルを置く。
• 注釈ピル（note-pill）: 濃緑のピルに白の小さな注釈。
• SNS シェアボタン（sns-share）: 円形のブランドアイコンを 3 つ等間隔に並べる。

Do's and Don'ts

Do - 抹茶の緑を主役にし、赤は果実とアクセントだけに使う - 葉や果実を浮遊させて立体感と季節感を出す - 説明は花形吹き出しと引き出し線で写真と結ぶ - 見出しの助詞を小さくして柔らかいリズムを作る - 背景は淡い緑白の地模様で明るく保つ

Don't - 濃い原色や黒の大きな面を使わない - 赤を地色や大面積に使わない - 四角い硬いカードで説明を囲まない - 本文を左右いっぱいに詰めて組まない - 派手な購入 CTA ボタンを多用しない

Page Structure

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

1. ファーストビュー（季節限定の新商品を印象づける）: 緑とピンクがにじむ背景に商品パッケージを斜めに大きく置き、白の細い丸ゴシックでキャッチ。下に期間限定バッジと商品名。
2. コンセプト訴求（味の組み合わせの魅力を伝える）: ぼかした葉の写真背景に、緑グロー付き白文字の大コピーと小コピー。
3. 構成要素の説明（各層の味と食感を解説する）: 断面写真に引き出し線を伸ばし、花形吹き出しを左右交互に重ねる。
4. 商品断面の詳細（外側の素材を説明する）: かじった商品の大写真と布素材の上に、吹き出しを 2 つ配置。
5. 開発のこだわり（作り手の想いを伝える）: リボン見出しの下に中央揃えの短文を並べ、端に果実を置く。
6. 商品パッケージ（購入時の目印を見せる）: パッケージ写真を中央に影付きで置き、葉の影を背景に落とす。
7. お客様の声（実食の評価で安心させる）: リボン見出しと半透明の縦長カード。声 3 件を区切り線で並べ注釈ピル。
8. SNS シェア（拡散を促す）: 抹茶と粉の写真の上に円形アイコンを 3 つ並べる。

Imagery

• 商品は高精細なシズル写真を切り抜きで、断面や一口かじった状態を見せる
• 生の葉とベリーを影付きで画面端に浮遊させる
• 背景は緑のぼかしや抽象的な色のにじみ
• 麻布や抹茶の器・粉など和の素材を添える
• 葉の影を大きくぼかして地に落とす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅のカラムを置き、左右に背景写真を広げる
• 吹き出しは PC で商品写真の周囲に放射状に並べる
• リボン見出しは最大幅 600px 程度に抑える
• 浮遊素材は 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 行書くと起動時に読み込まれる。