DESIGN.md — 水色×ピンクのグラデ周年キャンペーン LP（Aqua-to-Pink Gradient Anniversary Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 清潔・爽やか、ポップ・元気、クール・先進的
• キーワード: 横グラデーション・斜体欧文見出し・シアン文字・白カードナビ・円形回転テキスト・爽快感
• 地の質感: フラットな白地に、水色→青→紫→ピンクの横グラデ帯を重ねる。カードはやわらかい影で軽く浮かせる
• 形: 角丸 12px 前後のカード、ピル型ボタン、円形の SNS アイコン
• 温度感: クール寄りだが、ピンクで華やかさを足した明るい温度感

Colors

• 地は白が基本。ナビとキャンペーン告知は、左右の端まで届く水色→青→紫→ピンクの横グラデ帯にする
• 見出し・日付・本文・リード文はシアン 1 色でそろえ、黒は歴史説明の本文だけに使う
• グラデ帯の上の文字はすべて白にする
• 情報ボックスはシアンの塗り＋白文字。準備中の要素はグレーのグラデにする
• 数字の強調には黄色マーカーを 1 か所だけ使う
• 濃紺はラベルピルとフッターだけに限定する
• nav-card は文字 #0BADE9 × 背景 #FFFFFF のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#087EAA、4.59:1）を使う。
• button-disabled は文字 #FFFFFF × 背景 #C4C4C4 のコントラスト比が 1.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#767676、4.54:1）を使う。
• info-box は文字 #FFFFFF × 背景 #0BADE9 のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#087EAA、4.59:1）を使う。
• sns-card は文字 #0BADE9 × 背景 #FFFFFF のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#087EAA、4.59:1）を使う。

Typography

• 欧文見出しは太い斜体にし、字間を少し広げる
• 見出しの左寄せ・右寄せをセクションごとに交互に入れ替え、リズムを作る
• 見出しの下には日付、その下に日本語サブタイトルの順で置く
• 本文もシアンで書き、黒は使いすぎない
• グラデ帯の中の文字は中央揃えにする
• グラデ帯の背景に、半透明の大きな欧文の透かし文字を置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ナビカードは 2 列グリッド、商品一覧は 4 列
• 本文ブロックの幅: 画面幅の約 93%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 13px と狭め
• セクションの区切りに、円形に回転する欧文テキストを配置する
• グラデ帯は画面幅いっぱい、カードは内側の幅に収める
• 画像とボックスは幅いっぱいの角丸カードにする
• ボタンは横幅約 85% で中央に置く

Elevation & Depth

• 白カードにやわらかい影（0 4px 12px rgba(0,0,0,0.1)）
• ボタンにも薄い影を付ける
• 商品画像は影なしで並べる
• 装飾として 3D の白いタブレット粒を浮かせる

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形。商品は切り抜きで配置
• セクション境界: 直線で切り替える（グラデ帯と白地の境界）
• ボタンはピル型で、右端に＞矢印を付ける
• ナビカードは角丸 10px の白カードにし、淡色の線画アイコンを透かしで入れる
• SNS アイコンはシアンの塗りの円にする
• 終了済みの項目には、斜めのピンクのスタンプを付ける

Components

• セクションナビカード（nav-card）: 白カードの中に斜体の欧文ラベルと短い日本語説明を置き、右に矢印を付ける。2 列で並べる
• グラデピルボタン（button-primary）: 水色→青→ピンクのグラデーションのピル型ボタン。白文字で、右に矢印を付ける
• 準備中ボタン（button-disabled）: グレーのグラデーションのピル型ボタン
• 斜体の欧文見出しブロック（section-heading）: 大きなシアンの斜体の欧文見出し、日付、日本語サブタイトルの 3 段で構成する
• シアンの情報ボックス（info-box）: シアンで塗った角丸ボックス。白の見出しとアイコン、または画像を中央に置く
• 濃紺ラベルピル（label-pill）: スライダー内で年代などを示す濃紺のピル
• 円形の回転欧文（rotating-text）: セクション名を円周に沿って並べた淡色の装飾テキスト
• SNS フォローカード（sns-card）: キービジュアル画像の下に、シアンの円形 SNS アイコンを横に並べた線枠カード

Do's and Don'ts

Do - 見出しは斜体の太い欧文と日付をセットにする - グラデ帯は水色→青→紫→ピンクの順を守る - 文字の基本色はシアンにする - セクションの区切りに回転テキストや浮遊する粒を添える - 見出しの左寄せ・右寄せを交互に入れ替える

Don't - 暖色の赤やオレンジを主役にしない - 明朝体を使わない - グラデ帯の上に濃い色の文字を置かない - ボタンを角張った四角にしない - 黒い背景のセクションを作らない

Page Structure

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

1. ファーストビュー（周年の世界観を伝える）: 青紫の空と雪山のイラストに、白の周年ロゴと短いコピーを重ねる。右上にハンバーガーメニュー
2. コンテンツナビ（各企画への入口を一覧で見せる）: グラデ帯の上に白の見出しを置き、白カードを 2 列で 9 個並べる。下部に大きな透かし欧文
3. イベント（体験イベントを告知する）: 左寄せの斜体見出し、日付、概要、角丸のゲーム画像、グラデボタンの順に置く
4. サンプリング（来場特典を伝える）: 右寄せの見出しの下に、シアンのボックスと「？」のシークレット画像を置く
5. 区切り帯（リズムを切り替える）: 細いグラデ帯の上に、商品の切り抜きを斜めに配置する
6. 限定アイテム（グッズ発売を告知する）: 見出しの下にシアンの本文、注釈、角丸の告知バナーを置く
7. SNS キャンペーン（SNS 応募企画を予告する）: シアンのボックスに SNS ロゴを入れ、下にグレーの準備中ボタンを置く
8. グッズキャンペーン（第 1 弾・第 2 弾の企画を告知する）: 全面グラデ帯の上に白文字を中央揃えで置き、バナーと準備中ボックスを縦に並べる
9. ブランドヒストリー（歴史を伝えて愛着を高める）: 白カードのスライダーに濃紺のピルラベルを付け、矢印ボタンと黒の本文、円形バッジを添える
10. 商品アーカイブ（歴代商品の多さを見せる）: 淡い水色地にリード文を中央揃えで置き、黄色マーカーで数字を強調。商品画像を 4 列のグリッドで並べる
11. SNS 誘導・フッター（フォローを促す）: キービジュアル付きのカードに SNS アイコンを並べ、その下にリンクと社名ロゴ

Imagery

• 空・雪山・オーロラ風の光を描いた、青紫系のアニメ調背景イラスト
• 商品パッケージは白背景の切り抜きで、斜めに傾けて浮かせる
• 3D の白いタブレット粒を装飾として散らす
• ナビカードには、淡いシアンの線画アイコン（再生・音符・ギフトなど）を透かしで入れる
• 告知バナーは青基調の三角パターン背景に、太字の斜体日本語を載せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約 60% 幅のコンテンツを置き、ナビカードは 4 列にする
• PC では見出し・本文と画像を左右 2 カラムに並べ、セクションごとに左右を入れ替える
• グラデ帯は PC でも画面幅いっぱいにする
• 商品アーカイブは PC で 2 ブロックを横に並べ、8 列相当にする
• ヒストリーは PC でスライダーと本文を横並びにする

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