DESIGN.md — 紺×ティール×黄の学生応援キャンペーン LP（Deep Navy Teal Youth Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: 力強い・インパクト、ポップ・元気、スポーティ
• キーワード: 濃紺ベース・ティールの帯・黄色マーカー・中央寄せ 1 カラム・動画中心・太い白見出し
• 地の質感: ベタ塗りのフラットな面。グラデーションや質感は使わない。
• 形: 角丸の白カード、ピル型ボタン、角ばった黄色タグ。
• 温度感: 寒色ベースに黄色で熱を足す。若く元気な印象。

Colors

• 基本地は濃紺。企画ごとにティールと中紺の全幅帯で区切る。
• 黄色はボタン・マーカー・角ばったタグだけに使う。
• 濃色地では文字をすべて白にする。
• 白カードの中は黒文字。企画ごとにティールか青を見出しとボタンに使う。
• 黒ボックスは最重要の告知だけに使う。
• フッターだけ淡いグレー地にする。

Typography

• 見出しも本文もすべて中央寄せにする。
• 見出しは極太ゴシックで、白抜きにする。
• 強調する語は黄色マーカー帯の上に紺文字で置く。
• ボタン文字は太字にして、字間を広めにとる。
• 注釈は 10px 程度に小さくし、ステップの下へ添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ステップアイコンだけ 3 列に並べる。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 本文ブロックは中央に寄せ、幅を狭めに保つ。
• 企画セクションは右上に黄色タグを置き、帯の上端に接して配置する。
• 動画サムネイルはコンテンツ幅いっぱいに置く。
• セクションの末尾にピル型ボタンを 1 つ置く。
• カードは縦に 16px 間隔で積む。

Elevation & Depth

• 影はほぼ使わず、フラットにする。
• 白カードは影なしの角丸だけで、地色との差で浮かせる。

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 10px。ボタンはピル型。
• 写真の切り抜き: 16:9 の動画枠。角丸はなし。
• セクション境界: 直線で全幅の色帯を切り替える。
• ボタンはすべてピル型にする。
• タグは角ばった長方形にする。
• 吹き出しバッジは白い楕円にする。

Components

• 黄色ピルボタン（button-primary）: セクション末尾に置く主 CTA。
• 企画案内カード（campaign-card）: 白地の角丸カード。ロゴ型見出し・説明・色付きピルボタンを入れ、右上に弾数タグを付ける。
• 角タグ（corner-tag）: セクション右上やカード右上に付ける、開催状況のラベル。
• 黄色マーカー（marker-highlight）: 景品など重要な語の背面に敷く黄色の帯。
• 3 ステップ線画アイコン（step-icons）: 白い線画アイコンを 3 列に並べ、下に番号付きの説明を添える。
• 黒い告知ボックス（announce-box）: 黒地の角丸に、ロゴと白い太字の宣言文を入れる。
• 動画サムネイル（video-thumb）: 中央に白い再生アイコンを置く 16:9 の枠。
• SNS シェア丸ボタン（share-buttons）: 黒・緑・青の丸アイコンを 3 つ横に並べる。

Do's and Don'ts

Do - 濃紺を基本の地にし、企画ごとにティールと中紺の帯で区切る。 - CTA とマーカーは黄色に統一する。 - 要素はすべて中央寄せにする。 - 動画は再生アイコン付きの 16:9 枠で見せる。 - 手順は白い線画アイコンを 3 列に並べて見せる。

Don't - パステル色やグラデーションを使わない。 - 黄色を広い面に塗らない。 - 左寄せの長文レイアウトにしない。 - 角ばったボタンにしない。 - 白地のセクションを多用しない。

Page Structure

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

1. ヘッダー（ロゴと企画のリンクを置く）: 濃紺の細い帯の左にロゴ、右に縦線区切りのテキストリンクを並べる。
2. ファーストビュー（企画の趣旨をひと目で伝える）: 屋外の全幅写真の上に、白い極太の大見出しとロゴ見出しを重ねる。
3. 企画案内カード（各企画へ誘導する）: 濃紺地に白カードを 2 枚、縦に積む。
4. 第 2 企画の詳細（募集内容を説明する）: ティールの帯に角タグ・ロゴ見出し・動画・マーカー付きの説明を置く。
5. キャンペーン概要（期間と手順を示す）: 期間のテキストと 3 ステップの線画アイコンを並べ、黒い告知ボックスと黄色ボタンで締める。
6. 第 1 企画の詳細（過去企画の報告）: 中紺の帯に、同じ構成でステップ・告知ボックス・動画・ボタンを並べる。
7. 出演者紹介（起用人物を紹介する）: 写真 2 枚の間に小さな白文字のプロフィール文を挟む。
8. シェア・商品ラインナップ（拡散と商品の訴求）: SNS の丸ボタンを並べ、白枠のロゴの下に商品パッケージを 2 段で並べる。
9. お問い合わせ（事務局の案内）: 電話番号と受付時間を、白文字の中央寄せで小さく並べる。
10. コンセプト・再案内（趣旨を語り、再び誘導する）: 見出しとリード文、動画を置き、案内カードを 2 枚並べる。
11. フッター（規約と著作権表記）: 淡いグレー地の左に小さなリンク、右に社名を置く。

Imagery

• 屋外の青空の下で撮った、ハイコントラストで彩度高めの写真。
• 被写体が商品を飲むなど、動きのある瞬間を切り取る。
• アイコンは白い太線の線画で、塗りは使わない。
• 商品パッケージは切り抜いて横一列に並べる。
• 手書き風のロゴ文字を写真に重ねて動きを出す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元の PC 版も中央寄せの狭い 1 カラムで、SP とほぼ同じ構成になっている。
• SP では本文の幅を 88% 程度に広げる。
• SP ではヘッダーのリンクを省略するか、ハンバーガーメニューにまとめる。
• 商品パッケージの並びは SP で 4 列程度に折り返す。
• FV の見出しは SP で 40px 程度に縮める。

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