DESIGN.md — 紺×レモン黄と氷の夏向け菓子 LP（Icy Navy and Lemon Yellow Summer Snack LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 力強い・インパクト、清潔・爽やか、ポップ・元気
• キーワード: 濃紺×黄色・氷のあしらい・極太見出し・夏の清涼感・商品パッケージ主役
• 地の質感: 氷の写真の質感と、フラットな単色の帯を組み合わせる
• 形: 角丸なしの四角い帯と箱が中心。氷は輪郭どおりに切り抜いて散らす
• 温度感: 寒色ベースに暖色の黄色を差した、冷たいのに元気な温度感

Colors

• 地は白と薄グレーを基本にし、区切りに濃紺の全幅帯を入れる
• 黄色は特徴ボックスとCTAなど『見せたい面』に限定する
• 見出し文字は紺地に黄、黄地や白地に紺で反転させる
• 動画など後半は氷の水色写真を地にして涼感を出す
• ピンクは新商品バッジなど極小面積だけに使う
• 最下部は濃紺帯に黄色の購入バナーを置き最大コントラストにする

Typography

• キャッチは極太ゴシックに紺の縁取りや影をつけて黄色で置く
• 本文と小見出しは明朝体にして情報部分を落ち着かせる
• セクション見出しは字間を大きく開けて短く置く
• 縦組みの商品名で和の雰囲気を足す
• 本文は12px前後に抑え、見出しとの差をはっきりつける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央寄せで特徴ボックスと商品画像を 2 カラム
• 本文ブロックの幅: 画面幅の約 96%
• 余白: セクション間 60px、基本単位 8px、カード内 12px（375px 幅換算）
• ヒーローは全幅の写真ビジュアルに文字を焼き込む
• 特徴は黄色の大きな箱1つに小見出し帯と本文を交互に積む
• 見出しラベルは左寄せで箱の上辺にかぶせる
• 動画は横幅いっぱいに縦に並べ、下にキャプションと罫線
• 右下に固定のページトップボタンを置く

Elevation & Depth

• 影はほぼ使わずフラットな面で構成する
• 氷の切り抜き画像だけが立体感の担い手になる
• キャッチ文字には紺の太い縁取りやドロップシャドウで浮かせる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は四角の全幅、商品と氷は輪郭どおりに切り抜き
• セクション境界: 直線の全幅色帯で切り替える
• ボタンや箱は角丸なしの長方形
• 見出しは塗りの四角ラベルか紺の線枠で囲む
• 氷のかけらをセクションの境界やすみに散らす
• ページトップボタンだけ小さな角丸の四角

Components

• ヒーロービジュアル（hero-visual）: 人物写真と氷を背景に、黄色の極太キャッチと商品パッケージを重ね、下に紺文字の一行コピー
• 紺帯キャッチ（band-headline）: 全幅の濃紺帯に黄色の極太文字を一行で置く
• 使い方ボックス（usage-box）: 水色の線枠内にイラストと番号付き手順、右に商品画像
• 紺ラベル見出し（label-heading）: 紺の長方形に黄色の字間広めの見出しを左寄せ
• 線枠見出し（outline-heading）: 白地に紺の太線枠、中央に紺の字間広め見出し
• 特徴ボックス（feature-box）: 黄色の箱に薄グレーの小見出し帯と本文を3組積む
• 動画カード（video-card）: 16:9の埋め込み動画、下に明朝の太字キャプションと紺罫線
• 購入バナー（button-primary）: 濃紺帯上の黄色横長バナー。左にカートアイコン、中央に大きな文言と矢印、右に商品画像
• NEWバッジ（badge-new）: 商品画像下のピンク小ラベル

Do's and Don'ts

Do - 紺と黄の反転配色を見出しとCTAに徹底する - 氷の切り抜き画像をセクション間に散らして涼感を保つ - 商品パッケージを大きく切り抜いて主役にする - 特徴は一つの黄色い箱にまとめて簡潔に書く - 最後は濃紺帯＋黄色バナーで購入へ誘導する

Don't - 暖色系の写真や背景を広く使わない - 角丸の大きいカードやピル型ボタンにしない - 細く軽い書体をキャッチに使わない - 紺・黄・水色以外の強い色を増やさない - 長文の説明セクションを何段も重ねない

Page Structure

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

1. ヘッダー（ブランド表示とメニュー）: 濃紺の細い帯に左ハンバーガー、右ロゴ
2. ファーストビュー（季節感と商品の一目訴求）: 人物と氷の写真に黄色極太キャッチ、商品画像、下に薄グレー帯の一行コピー
3. 用途キャッチ（利用シーンの強調）: 濃紺帯に黄色の極太文字
4. 商品紹介（パッケージと商品名を見せる）: 大きなパッケージ切り抜きと縦組みの商品名、氷のあしらい、NEWバッジ
5. 使い方（食べ方の手順説明）: 水色線枠にイラストと番号付き3ステップ
6. 食べ方キャッチ（特徴的な食べ方を印象付ける）: 氷に囲まれた紺縁取りの黄色ロゴ風文字
7. 商品特徴（3つの特長説明）: 紺ラベル見出しと黄色ボックス内の小見出し帯＋本文
8. 商品ラインナップ（個包装の種類と入数を示す）: 包装を斜めに並べた画像に吹き出し風の文字と注釈
9. CM動画（広告映像で興味喚起）: 氷写真地に線枠見出し、動画2本を縦並び、キャプションと罫線
10. 購入CTA（通販ページへの送客）: 濃紺帯に黄色の横長バナー、カートアイコンと商品画像

Imagery

• 透明感のある氷のかけらを白抜きで切り抜き、角度を変えて散らす
• 人物は夏柄シャツなど鮮やかな衣装で、青い背景に明るく撮る
• 商品パッケージは正面と斜めの切り抜きで大きく見せる
• 手順説明はシンプルな線と面の手のイラスト
• 背景面は氷を敷き詰めた水色の写真テクスチャ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツを中央約70%幅に収め、左右に氷写真を広げる
• PC のヘッダーはテキストのグローバルナビを左に並べる
• PC では商品紹介を横並びにし、使い方とキャッチを左右に配置
• PC の特徴は黄色ボックス左、ラインナップ画像右の2カラム
• 動画とCTAは PC でも中央1カラムで幅を約70%に

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