DESIGN.md — 空色×ベリー赤のきらめくアイス新商品 LP（Sparkling Sky Blue Dessert Bar LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 清潔・爽やか、ポップ・元気、かわいい、上品・高級
• キーワード: 空色グラデーション・ミルクのしぶき・ベリーの赤・きらめき・交互カード・シズル感
• 地の質感: 白いしわ加工紙の面、ミルクの渦、星形のきらめき、ぼかした果物の前景を重ねる
• 形: 斜めに切った白い面と、角ばった縁取りカード。CTA だけピル型
• 温度感: 涼しく甘い。青の地に赤とクリーム色で温かさを足す

Colors

• 地は空色にする。上下の端は濃い青、中央は明るい水色にグラデーションさせる。
• 情報カードはクリーム色の面に水色の縁取りを付ける。
• 主役の素材カードだけはベリー赤の面に白文字にする。
• 見出しは濃紺、まとめ文はベリー赤、レビューは灰色と、文字色を役割で分ける。
• 赤は CTA とベリー要素に絞る。緑は限定バッジだけに使う。
• お客様の声はミルク色の暖色系の地に切り替え、雰囲気を落ち着かせる。
• button-primary は文字 #FDFCF6 × 背景 #F4033A のコントラスト比が 4.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E70337、4.57:1）を使う。
• badge-top-link は文字 #FDFCF6 × 背景 #F4033A のコントラスト比が 4.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E70337、4.57:1）を使う。
• badge-limited は文字 #FDFCF6 × 背景 #7DBD2A のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#55801D、4.55:1）を使う。

Typography

• FV キャッチは白文字に青い縁取りと光彩を付ける。一部の語だけピンク色にして強調する。
• カード本文は中央揃えにし、短い改行で 4〜5 行に収める。
• 素材名は太字で、本文より 1.5 倍以上大きくする。
• セクション見出しは字間を広く取り、落ち着いたトーンにする。
• お客様の声はかぎかっこ付きで左揃え、行間を広く取る。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは左右に寄せて交互に配置する
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは幅 55〜60% にし、左寄せと右寄せを交互に重ねる。
• カードの隙間には商品写真や果物を大きくはみ出させる。
• まとめカードは全幅で置き、商品パッケージを下端にかぶせる。
• お客様の声は幅 65% ほどの中央カラムに置き、周囲に果物を散らす。
• CTA の下に SNS アイコンを 3 つ並べる。

Elevation & Depth

• カードの下側にやわらかいドロップシャドウを付ける。
• CTA の下にぼかした影を落として浮かせる。
• 前景の果物はぼかし、奥行きを出す。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品と果物は切り抜きにして、枠からはみ出させる
• セクション境界: 斜めの白い面と、ミルクのしぶきでつなぐ
• カードは角を落とした八角形風にし、二重の縁取りを付ける。
• まとめカードは額縁のように角を切り欠く。
• 限定バッジは正円にする。
• CTA は全幅のピル型にし、右端に矢印を付ける。

Components

• 赤いピル型 CTA（button-primary）: 全幅の赤いピル。白文字と右矢印、下に影
• 右上の情報リンク（badge-top-link）: 右上に置く小さな赤いピル。成分情報などへのリンク
• 期間限定の丸バッジ（badge-limited）: 緑の正円に白文字を 2 行で入れる
• 素材説明カード（card-feature）: クリーム色の面に水色の縁取り。本文と太字の素材名を入れる
• 主役素材の赤カード（card-feature-accent）: ベリー赤の面に白文字。水色の縁取りを付ける
• まとめの額縁カード（card-summary）: 全幅カードに赤文字を中央揃えで入れ、下にパッケージを重ねる
• お客様の声（review-quote）: かぎかっこ付きの灰色テキストを縦に 3 件並べる
• SNS アイコン列（sns-icons）: 丸や角丸のアイコンを 3 つ等間隔に並べる

Do's and Don'ts

Do - 空色の地に光のきらめきを散らし、涼しさを出す。 - 商品と素材は大きく切り抜き、カードからはみ出させる。 - カードは左右交互に重ねて、リズムを作る。 - 強い赤は CTA と主役素材だけに使う。

Don't - 暗い背景やモノトーンにしない。 - カードを大きな角丸の柔らかい形にしない。 - 本文を長い段落にしない。 - 果物の写真を四角い枠に収めない。

Page Structure

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

1. ファーストビュー（味のコンセプトと商品を一目で伝える）: 空色と白い斜めの面の上に、キャッチ・商品・果物・ミルクのしぶきを配置する
2. 商品名（商品名と限定性を示す）: パッケージ写真の横に商品名と英字を置き、緑の丸バッジを添える
3. 素材の特長（3 つの素材の魅力を説明する）: 縁取りカードを左右交互に並べ、合間に断面写真を挟む
4. 注釈（専門用語を補足する）: カードの下に小さな文字で置く
5. まとめ（味わい全体を総括する）: 全幅の額縁カードに赤文字を入れ、パッケージを重ねる
6. お客様の声（共感と信頼を得る）: ミルクの渦の背景にレビューを 3 件。周囲に果物を散らす
7. CTA・SNS（他の商品やシェアへ誘導する）: 空色の地に赤いピル型ボタンを置き、下に SNS アイコンを並べる

Imagery

• 商品は高解像度の切り抜きにする。断面を見せて中のソースのシズル感を強調する。
• 苺・ラズベリー・クランベリーを艶やかに切り抜き、一部はぼかして前景に置く。
• ミルクのしぶきや王冠形の飛沫を大きく描く。
• 白いしわ加工紙のテクスチャを斜めに敷く。
• 星形のきらめきを空色の地に散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅のカラムを置き、左右は空色ときらめきの背景で埋める。
• PC ではカードを 2 列にし、写真を横に並べてもよい。
• PC の CTA は最大幅 480px ほどに抑える。

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