DESIGN.md — 銀×水色のプラチナ記念プレゼントキャンペーン LP（Platinum Silver Anniversary Present Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 上品・高級、清潔・爽やか、情報量多め・訴求型、信頼・誠実
• キーワード: プラチナシルバー・ダイヤ柄・銀ラメのきらめき・白カード・水色ボタン・周年記念
• 地の質感: グレーのグラデーションに菱形パターンと星のきらめきを散らす。見出し帯は銀のメタリックグラデーション。
• 形: 角丸の白カード、ピル型ボタン、菱形バッジ、ラメで縁取った八角形の賞品フレーム。
• 温度感: やや寒色寄りのニュートラル。銀とグレーに水色の差し色で涼やかに見せる。

Colors

• 地は銀〜グレーのグラデーションにダイヤ柄を重ね、上から下へ少しずつ濃くする。
• 情報はすべて白カードにのせ、グレー地に直接本文を置かない。
• 行動を促す色は水色だけにして、ボタン・注目語・小見出し帯に限る。
• セクション見出しは銀のメタリック帯に白文字を置く。
• 注意・図解エリアは薄グレーの面で白カードと区別する。
• NG例は水色の×、良い例は金色の○で示す。
• page は文字 #444444 × 背景 #ACACAC のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#B1B1B1、4.54:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #1C8FBD のコントラスト比が 3.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#197EA7、4.58:1）を使う。
• label-bar は文字 #FFFFFF × 背景 #55C3F3 のコントラスト比が 2.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#0C7EAF、4.55:1）を使う。

Typography

• 見出しと賞品名は明朝の太字にして、記念品らしい品格を出す。
• 本文・要項・ボタンはゴシックで読みやすくする。
• 当選数などの数字は明朝で大きくし、単位は小さく添える。
• 本文中の重要な語は水色の文字で示す。
• 注釈は※から始め、11px のグレー文字にする。
• 欧文の筆記体はメインビジュアルだけで使う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。応募方法の2種は SP では縦に並べ、PC では2カラムにする。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 40px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションごとに角丸の白カードを置き、上部に銀の見出し帯を付ける。
• 要項は左に項目名、右に内容の2列表にする（SP では縦に積む）。
• ファーストビュー直下と最下部に応募ボタン2種を横に並べる。
• ページ内リンクの白い小カード4つを横一列に並べる。
• NG例は小さいカード5つを横に並べる（SP は3列＋2列）。

Elevation & Depth

• 白カードには薄い影とグレーの細い枠を付ける。
• 応募ボタンは上が明るい水色のグラデーションにし、下に影を少し付ける。
• 見出し帯は銀のメタリックグラデーションと星のハイライトで立体感を出す。
• 賞品フレームは縁に銀ラメを散らし、浮いて見せる。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 14px。ボタンはピル型。
• 写真の切り抜き: 商品写真は角版または切り抜き。賞品はクリアケースに入れて正面から写す。
• セクション境界: 直線の区切りは使わない。グレー地の上に白カードを浮かせて間隔で区切る。
• 主ボタンはピル型。
• 当選数の帯は左右の端を矢羽型に切る。
• 賞品紹介は角を落とした八角形のフレーム。
• 応募方法の2種は角丸の枠線カードにする。

Components

• 応募ボタン（button-primary）: 水色のピル型ボタン。左に端末やハガキのアイコン、右に別窓や矢印のアイコンを置く。
• 銀の見出し帯（section-header-silver）: カード上部に置く銀グラデーションの帯。明朝の白文字で、右上に開閉の＋/−を付ける。
• 当選数の帯（badge-ribbon）: 濃グレーで左右の端が矢羽型の帯。当選数の数字を大きくする。
• 賞品フレーム（prize-frame）: ラメで縁取った八角形の白い枠。賞品名と写真、内容のラベルを入れる。
• ページ内リンク（anchor-nav）: 白い小カードに項目名と下向きの矢印を入れて4つ並べる。
• 応募方法カード（method-card）: グレーの枠線で囲む角丸カード。水色の明朝見出し、線画アイコン、説明文、ボタンの順に入れる。
• 水色の小見出し帯（label-bar）: 注意事項などに付ける水色の帯。白文字にする。
• 良い例/NG例カード（example-card）: 薄グレーのカードにレシートの図を入れる。左上に○や×を付け、下にラベルを置く。
• 要項表（spec-table）: 左に太字の項目名、右に本文を置き、行の間を細い線で区切る。

Do's and Don'ts

Do - グレー地にはダイヤ柄と星のきらめきを入れる。 - 読ませる情報はすべて白カードに入れる。 - 応募の導線は水色のピル型ボタンにそろえる。 - 見出しは明朝、本文はゴシックで分ける。 - 応募の手順は図解と○×の例で見せる。

Don't - 赤や黄色などの暖色を強調色にしない。 - グレー地に直接長い文章を置かない。 - ボタンの形や色をセクションごとに変えない。 - ラメや星を本文の上に重ねない。 - 見出し帯を単色ベタにしない（必ず銀グラデーションにする）。

Page Structure

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

1. ファーストビュー（記念キャンペーンと賞品、締切を伝える）: 濃グレーのダイヤ柄に賞品写真を左右に置く。中央に周年の菱形エンブレム、下に欧文筆記体とロゴ、右上に当選数の円バッジを置く。
2. 応募導線（すぐ応募できるようにする）: 明朝の見出しの下に水色のピル型ボタンを2つ横に並べる。
3. 賞品紹介（賞品の魅力を伝える）: ラメで縁取った八角形の枠に当選数の帯、明朝の賞品名、ケース入りの写真、内容のラベルを入れる。
4. ページ内ナビ（要項へ移動しやすくする）: 白い小カード4つを横に並べる。
5. 応募方法（2つの応募手段を説明する）: 銀帯の見出しの下に枠線カードを2つ並べ、アイコンと説明、ボタンを入れる。
6. 撮影の注意（応募の不備を減らす）: 水色の帯の見出し、番号付きのレシート図解、○の良い例と×のNG例を並べる。
7. 対象商品（対象となる商品を示す）: 商品の切り抜き写真を横一列に並べ、下に商品名の一覧と注釈を置く。
8. 応募要項（条件を正確に伝える）: 銀帯の見出しの下に、項目名と内容の2列表を置く。
9. 利用規約（規約を折りたたんで示す）: 銀帯だけのアコーディオンにし、右に＋を付ける。
10. お問い合わせ（事務局の連絡先を示す）: 白カードに明朝の事務局名、フリーダイヤル、受付期間を置き、薄いクリーム色の枠に注意事項を入れる。
11. 締めCTA（最後に応募を促す）: グレー地の上に応募ボタンを2つ並べる。

Imagery

• 賞品は銀や白の衣装のものをクリアケースに入れ、正面から明るく撮る。
• 背景はグレーの菱形パターンを重ね、白い星のきらめきやラメを散らす。
• 応募方法のアイコンは細いグレーの線画（PC・ハガキ）。
• レシートの図解は簡略化したモノクロのイラストにし、番号に水色の丸数字を使う。
• 対象商品は白背景の切り抜きで、同じ高さにそろえて並べる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に幅約 760px のカードを置き、両サイドにダイヤ柄の地を見せる。
• SP はカード幅を約 92% にし、応募方法カードは縦に積む。
• SP では応募ボタン2つを縦に並べ、幅いっぱいにする。
• 要項表は SP で項目名を上、内容を下に積む。
• ページ内ナビは SP で2×2 にする。
• NG例は SP で3列に折り返す。

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