DESIGN.md — 秋のチェック柄×青の宅配水キャンペーンLP（Autumn Plaid Campaign Water Service LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 親しみ・手作り感、信頼・誠実、情報量多め・訴求型、清潔・爽やか
• キーワード: 秋のチェック柄・テラコッタ赤・オリーブ緑・落ち着いた青・価格の大きな数字・特典カード
• 地の質感: 前半は布のようなタータンチェック柄と淡い格子の地。後半は無地の淡い水色と白カードでフラット。
• 形: 角丸は小さめ。商品写真は不定形・ひし形に切り抜き、線の縁取りを添える。ボタンはズレた影付きの長方形。
• 温度感: 前半は暖かい秋色、後半は爽やかな寒色。

Colors

• 前半のプレゼント訴求は暖色チェック柄と淡いピンク／クリーム地で秋を表現する。
• 後半の料金・機種・特長は青と淡い水色地に切り替え、信頼感を出す。
• 申込ボタンは全セクション共通で朱色に統一し、他の要素には使わない。
• 価格の数字はオレンジで特大にし、税込などの注記は小さく添える。
• 商品ごとにブランド色（赤・オリーブ）をボタンと縁取り線に使い分ける。
• セクションの境目にチェック柄の帯を挟んで区切る。
• button-primary は文字 #FFF8F3 × 背景 #FC5E43 のコントラスト比が 2.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E02404、4.52:1）を使う。
• button-product は文字 #FFF8F3 × 背景 #DC5E45 のコントラスト比が 3.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#CD4226、4.54:1）を使う。
• benefit-card は文字 #4C79B1 × 背景 #FFFFFF のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#4B78AF、4.56:1）を使う。
• plan-table は文字 #F58A1F × 背景 #FFFFFF のコントラスト比が 2.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#B55F08、4.56:1）を使う。
• feature-card は文字 #4C79B1 × 背景 #FFFFFF のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#4B78AF、4.56:1）を使う。
• contact-box は文字 #4C79B1 × 背景 #FFFFFF のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#4B78AF、4.56:1）を使う。

Typography

• 見出しは重要な語を大きく、助詞を小さくして強弱をつける。
• 価格は数字だけを特大にし、「円」は中くらい、税込注記は小さく括弧書き。
• 強調したい語はオレンジ文字にする。
• 番号ラベルは細い欧文で大きく書く。
• 本文は字間を広めにとり中央揃えか左揃えにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。プラン比較のみ 2 列の表。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは画面幅の約88%で中央に置く。
• セクションごとにCTAボタンを入れる。
• 特長カードは左に青い番号帯、右に本文と図。
• 申込の流れは左にテキスト、右に丸いイラストを置き、下向き三角で繋ぐ。
• 規約はスクロールできる枠に収める。

Elevation & Depth

• CTAボタンは右下に淡い同系色の影をずらして重ねる（ぼかしなし）。
• カードは影なしで白い面と細い線だけで分ける。
• FVの告知パネルには薄いドロップシャドウ。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品写真は不定形の丸みやひし形に切り抜き、少しずらした色の縁取り線を重ねる。
• セクション境界: チェック柄の帯や、ゆるい波の形でセクションを区切る。
• 主CTAは角丸ごく小さめの長方形。
• 特長カード内の「詳しく見る」はピル型。
• 特典番号はリボン型のタブ。
• 機種選択タブは角丸の正方形。

Components

• 申込ボタン（button-primary）: 朱色の長方形で、再生アイコン＋文字＋書類アイコン。右下にずれた淡い影。
• 商品詳細ボタン（button-product）: 商品のブランド色の帯ボタン。右端に＋、ずれた影付き。
• 特典価格バナー（price-banner）: 紺のテクスチャ帯に白い見出しとオレンジの特大価格、丸い「初回限定」バッジ。
• 特典カード（benefit-card）: 白いカードの左上に青いリボン型の番号タブ。図と灰色の料金ボックス。
• プラン比較表（plan-table）: 2列の表。列見出しは水色とピンクの色帯、イラスト入り。料金はオレンジ。
• 特長カード（feature-card）: 左に青い縦帯で番号、右に青・オレンジの見出しと図、下にピル型の青ボタン。
• 申込の流れ（step-item）: Stepの欧文番号と本文、右に丸い白背景のイラスト。間を水色の下向き三角で繋ぐ。
• 問い合わせ枠（contact-box）: 青い見出し帯と青枠の箱。WEBと電話を点線で上下に分ける。

Do's and Don'ts

Do - 前半は暖色チェック柄、後半は青系に切り替えて訴求と信頼を分ける。 - 価格の数字はオレンジで特大にし、注記を小さく添える。 - 朱色のCTAを各セクションの終わりに入れる。 - 商品写真には不定形の切り抜きと色の縁取り線を使う。 - イラストは青い線と淡い色のフラットなものにそろえる。

Don't - CTAの朱色を見出しや装飾に使わない。 - 後半の情報セクションにチェック柄を広げない。 - 影をぼかして強くしない。 - 本文を詰めすぎない。 - 原色の強いグラデーションを使わない。

Page Structure

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

1. ファーストビュー（必ずもらえるプレゼントと期間・価格を伝える）: 食卓の写真の上に告知パネル（期間・初回価格）と、2つの商品の六角形ラベルを重ねる。
2. キャンペーン概要とナビ（条件を伝え、ページ内を案内する）: 生成り地にチェック柄の縁、商品名をマーカー強調。下に4つのアンカーと朱色CTA。
3. プレゼント商品紹介（選べる2商品の魅力を伝える）: 商品ごとに不定形の写真、ロゴ、説明、ブランド色の詳細ボタン。間をチェック柄の帯で区切る。
4. 新規特典（初回価格と特典の内容で得を示す）: 紺の価格バナー、番号タブ付き特典カード2枚、合計のお得額を大きく。
5. プラン比較（2つのプランの違いを示す）: 2列の比較表。色帯の見出しとイラスト、料金はオレンジ、下に注釈。
6. 機種紹介（サーバーとボトルの選択肢を示す）: 水色地に白カード。角丸タブで機種を選び、スライダーで写真・説明・月額を表示。
7. サービスの特長（品質と安心を伝える）: 青い番号帯付きの横長カードを3枚縦に並べる。
8. 申込の流れ（手続きの簡単さを示す）: 3ステップを丸いイラストと三角矢印で繋ぎ、最後にCTA。
9. キャンペーン規約（条件と注意事項を示す）: 白地に中央見出し、スクロール枠の規約文。
10. 問い合わせ・フッター（相談窓口と会社情報を示す）: 青枠の問い合わせ箱、ロゴとSNS丸アイコン、リンク一覧、青いコピーライト帯。

Imagery

• 商品は木のテーブルにチェックのランナーを敷き、果物・炭酸水・料理と並べた秋の食卓写真にする。
• 商品単体は白い背景の切り抜きで正面から撮る。
• 人物とアイコンは青い線のフラットイラスト、肌と髪は淡い色。
• スタッフは制服姿で笑顔、丸い水色背景に切り抜く。
• 装飾として小さな丸の線や点線の吹き出しを散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは本文幅約900pxで中央に置く。
• 商品紹介は写真とテキストの左右2カラムにし、交互に並べる。
• 特典カードと特長カードは横に2〜3枚並べる。
• 申込の流れは3ステップを横に並べ、右向き三角で繋ぐ。
• 問い合わせ枠はWEBと電話を左右に分ける。
• FVは横長の写真の中央に告知パネルを置き、ナビの右に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 行書くと起動時に読み込まれる。