DESIGN.md — ビビッド黄色のチラシ風アイス特集 LP（Bold Catalog Ice Dessert Feature LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: チラシ型・シズル写真・色面ブロック・極太見出し・価格訴求・カテゴリー別配色
• 地の質感: 写真を背景いっぱいに敷き、色ベタ面と細かいストライプ柄を組み合わせる。紙のような質感は使わず、印刷チラシ風のフラットな面で作る
• 形: 角のない四角いブロックを隙間なく並べる。バッジは円・星形・斜めにした帯で動きを出す。ボタンは角丸の小さい横長の長方形
• 温度感: 暖色が主体。黄・オレンジ・赤で元気さを出し、ブロックによっては水色・緑で涼しさを加える

Colors

• ブロックごとに背景色を変え、商品の味や温度感に合わせる（チョコは黄、かき氷は水色、果実は赤、和菓子は抹茶緑と木目）
• 購入ボタンの色はそのブロックの地と反対の色にする（黄地には赤、水色地には黄、木目には赤紫）
• ヘッダーと告知は赤紫とマゼンタに固定し、特集の本文には使わない
• 価格は大きな赤い数字で強調し、税込価格は小さい黒文字で添える
• ページ下部の汎用ガイドは淡いピンクグレーの地に白いカードを置き、特集部分と分ける
• button-primary は文字 #FFFFFF × 背景 #E43A2B のコントラスト比が 4.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E22D1D、4.54:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #2599DB のコントラスト比が 3.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら surface-accessible（#1D7CB2、4.59:1）を使う。
• badge-burst は文字 #FFFFFF × 背景 #E43A2B のコントラスト比が 4.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E22D1D、4.54:1）を使う。
• label-tilted は文字 #FFFFFF × 背景 #F39502 のコントラスト比が 2.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#A76601、4.62:1）を使う。
• heading-band は文字 #FFFFFF × 背景 #6F8C2A のコントラスト比が 3.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#647E26、4.61:1）を使う。
• caption-bar は文字 #FFFFFF × 背景 #02B3E3 のコントラスト比が 2.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#017FA1、4.61:1）を使う。

Typography

• メインロゴは極太の書体を少し傾け、写真と重ねて置く
• ブロック見出しは写真の上に白抜きの明朝で置き、文字の周りに影を付けて読めるようにする
• 価格の数字は本文の 2〜3 倍の大きさにし、単位の「円」は小さくする
• バッジ内の文字は 2〜3 行に分け、強調語だけ色を変える
• 本文は小さめにし、写真と価格に目が行くようにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラムの画像主体。ブロック内で 2〜3 分割の商品タイルを並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 0px、基本単位 8px、カード内 8px（375px 幅換算）
• 特集部分はブロック間を空けず、色面を隙間なく縦に積む
• ブロックの中を 2 分割・3 分割し、それぞれに写真・価格表・購入ボタンを入れる
• 購入ボタンは各商品タイルの下端に横並びで置く
• 見出し帯はブロック幅いっぱいに置く
• フッターのガイドは 2×2 の白いカードで並べる

Elevation & Depth

• 商品の切り抜き写真に薄いドロップシャドウを付けて浮かせる
• 白抜き見出しには文字の影を付ける
• ボタン・カードには影を付けず、フラットにする

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は四角くブロックいっぱいに裁ち落とす。主役商品は切り抜いて斜めに配置する
• セクション境界: 直線で区切り、色面の切り替えで境界を作る
• 購入ボタンは角丸 2〜4px の横長長方形にし、右端に「>」を付ける
• 訴求バッジは円・星形の爆発型・斜めにした帯で作る
• フッターのガイドカードは角丸 4px の白い面にする

Components

• 購入ボタン（button-primary）: 横長の長方形で、中央に購入の文言、右端に矢印を置く。色はブロックごとに赤・オレンジ・黄・赤紫を使い分ける
• 一覧へのボタン（button-secondary）: 特集の最後に置く青い幅広ボタン。右端に矢印を付ける
• 爆発型の訴求バッジ（badge-burst）: 円や星形の色面に 2〜3 行の強調文字を入れ、写真の端に重ねる
• 斜めの見出し帯（label-tilted）: 少し傾けた帯の上に分類名や「人気」などの短い言葉を載せる
• 価格表（price-table）: 本数・税抜・税込を縦に並べ、税抜価格を赤い大きな数字で強調する
• ブロック見出し帯（heading-band）: ブロック幅いっぱいの色帯に白抜きの明朝見出しを置く
• 写真下の説明帯（caption-bar）: 写真の下端に色帯を敷き、太字の小見出しと 2〜3 行の説明を入れる
• ご利用ガイドカード（guide-card）: 白いカードに見出し・箇条書き・決済アイコンを入れ、右下に詳細ボタンを置く

Do's and Don'ts

Do - ブロックごとに地の色を変え、商品の世界観で色を決める - どの商品の近くにも購入ボタンを置き、すぐ買える状態にする - 主役商品は切り抜いて斜めに重ね、チョコ片などを周りに散らして動きを出す - 価格は大きな赤い数字で目立たせる - バッジや帯は少し傾けて、チラシらしい勢いを出す

Don't - 広い余白を取った静かなミニマル配置にしない - 購入ボタンを丸いピル型や大きな影付きにしない - 全ブロックを同じ色にしない - 長い文章を本文の段落として置かない - 細い書体や淡い色だけでメインロゴを作らない

Page Structure

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

1. グローバルヘッダー・告知バー（サイト共通の導線と送料などの告知）: 濃い赤紫のヘッダーに、マゼンタの細い告知バーを重ねる
2. ファーストビュー（主力商品の人気と新しい味を一目で伝える）: 黄色地に極太ロゴ、斜めに並べた切り抜き商品、爆発型バッジ、味別の価格表、赤い購入ボタン
3. ラインナップ導入（商品の幅広さを伝える）: 写真の上に白抜きの明朝大見出し。左右 2 分割で、かき氷（水色）と果実系（赤）を並べる
4. 3 分割の商品タイル（テイストの違う商品を比べて見せる）: 緑・水色・ベージュの 3 列に写真と価格を入れ、下に色帯の説明と黄色ボタン
5. 洋菓子アイス（ケーキのような高級感を伝える）: 白い大理石風の背景に明朝見出し。商品写真を 2〜3 枚並べ、オレンジのボタンを置く
6. 和菓子アイス（素材へのこだわりを伝える）: 抹茶色の見出し帯、木のテーブルの写真、紙のメモ風の説明、赤紫のボタン
7. 健康志向アイス（糖質カットなどの機能を訴求する）: 黄色のストライプ地の中央に吹き出し見出し。周りに円形バッジ付きの商品とオレンジのボタン
8. 一覧導線（商品一覧ページへ誘導する）: 白地に青い幅広ボタンを 1 つ置く
9. お買い物ガイド（支払い・配送・送料・返品について説明する）: 淡いピンクグレー地に 2×2 の白いカード。決済ロゴや送料表を入れる
10. フッター（SNS への導線）: 小さな SNS アイコンを中央に並べる

Imagery

• 商品は真上や斜めから明るく撮り、断面やチョコのかけらでシズル感を出す
• 主役商品は切り抜き、粉々のチョコ片を周りに散らして躍動感を出す
• 和風の商品は木のテーブル・器・小豆などの素材と一緒に、温かい照明で撮る
• 果実系はカットしたフルーツを一緒に並べ、明るい彩度で撮る
• 背景には色ベタ・ストライプ・大理石風などの柄を使い、ブロックの性格を分ける
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版も SP と同じ画像の構成で、中央に幅の固定したカラムで表示する
• PC は左右に余白をとり、特集画像を 900px 前後の幅で中央に置く
• PC のヘッダーはカテゴリーナビを横一列に表示する
• ガイドカードは SP・PC ともに 2 列のまま

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