DESIGN.md — 氷色ブルー×紺のカフェ購入特典 LP（Icy Sky Blue Coffee Gift Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 清潔・爽やか、シンプル・ミニマル、信頼・誠実
• キーワード: 水色一色・氷のモチーフ・紺の太字・箇条書き中心・夏季限定
• 地の質感: グラデーションなしのフラットな水色の面。氷や結晶のような多角形の装飾は FV 上部だけに置く
• 形: 四角い写真、白いピル型ボタン、日付を入れる白い円形バッジ
• 温度感: 寒色で涼しく、落ち着いた印象

Colors

• 地色は全面水色の 1 色にする。セクションごとに地色を変えない
• 見出しと日付・金額は濃紺、セクション見出しは青で、2 段階に分ける
• 白は CTA ボタン・日付バッジ・枠の囲みなど、小さい面だけに使う
• 茶色は FV の装飾の枠線だけに使い、文字には使わない
• CTA の文字はブランドの深緑にし、ボタンの白い面と組み合わせる
• date-badge は文字 #13A0DC × 背景 #FEFEFE のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#0F7EAD、4.52:1）を使う。

Typography

• FV の英字タイトルは太いセリフ体にして、和文は全部ゴシックにする
• 日付・金額の数字だけを大きくし、単位や曜日は小さく添える
• 本文は左揃えにする。中央揃えはリード文と CTA だけ
• 注釈は ※ を付けて小さい文字で、本文のすぐ下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、PC は中央寄せで一部 2 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 20px でそろえる
• セクションの間は、細い横線と大きめの余白で区切る
• 箇条書きは項目間に 8〜12px あける
• CTA はページの最後に中央寄せで 1 つだけ置く

Elevation & Depth

• 影はほぼ使わずフラットにする
• 商品の切り抜き画像には、うっすら落ち影を付けてよい

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの長方形。商品は背景を切り抜いて置く
• セクション境界: 水色の地の上に細い横線を引く
• ボタンは白いピル型
• 日付は白い正円のバッジに入れ、FV 写真の左下に重ねる
• 補足ラベルは細い紺の枠線で囲む（角丸なし）

Components

• 白いピル型 CTA（button-primary）: 白い面に深緑の太字。横幅は約 60%、中央に置く
• 日付の円形バッジ（date-badge）: 白い正円の中に、日付・時刻・開始の表記を青字で 3 段に入れる
• アイコン付き見出し（section-heading-icon）: 左に氷の結晶のような白いアイコン、右に青の太字の見出しを並べる
• 枠線ラベル（outline-label）: 紺の細い枠線で囲んだ補足ラベル（終了条件など）
• 青い点の商品リスト（dot-list）: 青い小さな丸の後ろに、商品名を太字で 1 行ずつ並べる
• 中黒の条件リスト（bullet-notes）: ・で始まる注意事項。2 行目以降はぶら下げインデントにする
• 装飾付きの英字タイトル帯（fv-title-band）: 淡いグレーの帯の上に、氷のかけらのような水色の多角形と茶色の四角い枠を散らし、中央に紺の英字

Do's and Don'ts

Do - 地色は水色 1 色で通す - 数字（日付・金額）は大きく太い紺色にする - 条件・対象商品は箇条書きでシンプルに並べる - 氷・結晶のモチーフは FV と見出しアイコンだけに使う - CTA は白いピル型にして、最後に 1 つだけ置く

Don't - 暖色の面や濃い背景のセクションを入れない - カードや影で情報を飾りすぎない - 見出しに明朝体や手書き体を使わない - 茶色の装飾を本文エリアに持ち込まない - 派手なバッジや赤い強調を使わない

Page Structure

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

1. ファーストビュー（キャンペーンの内容と開始日を伝える）: 装飾付きの英字タイトル帯の下に、商品の世界観写真を全幅で置き、左下に円形の日付バッジを重ねる
2. 特典の概要（何を買えば何がもらえるかを伝える）: 中央揃えの紺の太字リード 2 行の下に、特典品の切り抜き画像を 2 種並べる
3. 特典の仕様（サイズと非売品であることを示す）: 左揃えの小さな文字の仕様と、※ 付きの注釈
4. 特典の魅力（使う場面をイメージさせる）: 中央の小見出しの下に、使用シーンの写真と本文 3〜4 行
5. 対象条件（購入の条件を明示する）: アイコン付き見出しの下に、金額を大きくした条件文と注釈
6. 期間（開始日時と終了条件を示す）: 大きな日付の数字と、枠線ラベル
7. 注意事項（対象外になる例などを伝える）: 中黒の箇条書きを 9 項目ほど並べる
8. 対象商品（対象商品を一覧で見せる）: 青い点の太字リストを 20 項目ほど。PC は 2 列
9. CTA（商品一覧ページへ誘導する）: 白いピル型ボタンを中央に置き、下に余白を広めにとる

Imagery

• 白い大理石の天板の上で、アイスコーヒーとミルクを注ぐ瞬間を撮った、明るく涼しげな写真
• 特典品は背景を切り抜いた俯瞰写真で、水色系の色にそろえる
• 使用シーンは、ガラスの皿や氷を散らした白背景の俯瞰で撮る
• 装飾は、水色の多角形（氷のかけら）・白い線画の四角・茶色の太い四角い枠を、少し傾けて重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は内容幅を約 900px で中央寄せにし、背景の水色は全幅に広げる
• PC の FV は写真を角なしで中央に置き、周りに装飾を散らす
• PC では概要と特典画像、写真と本文を横 2 カラムに並べる
• PC では対象条件と期間を左右 2 カラムに並べる
• PC の対象商品リストは 2 列にし、CTA はさらに小さくして中央に置く

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