DESIGN.md — 空色×黄緑グラデのポップな大学OC LP（Vivid Pop Gradient Campus Event LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: ノイズ粒子グラデ・立体ポップロゴ・イラストコラージュ・旗型見出し・タイムテーブル・学園祭感
• 地の質感: グラデーション面にざらっとしたノイズ粒子を乗せたリソグラフ風の質感
• 形: 角を少し波打たせた布・旗のような帯、ピル型ボタン、大きな角丸の白カード
• 温度感: 高彩度でにぎやかな暖寒ミックス。若くてエネルギッシュ

Colors

• 地はFVの空色からページ中盤で黄緑へ、終盤で濃い緑へと縦に移り変わる
• オレンジ・マゼンタ・紺の3色をノイズ入りグラデにし、帯・ボタン・時間バーに使う
• 情報ブロックは白か淡い青白カードにのせ、文字は紺で可読性を保つ
• 申込CTAはマゼンタ→紫のグラデで、ページ内の他部品と区別する
• 学部や系統ごとに水色・黄・青・ピンク・黄緑を割り当てて色分けする
• 終了した項目はグレーで塗って沈める
• button-primary は文字 #FFFFFF × 背景 #EB4BA4 のコントラスト比が 3.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E01988、4.5:1）を使う。
• heading-band は文字 #FFFFFF × 背景 #EC733A のコントラスト比が 2.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#CB4E14、4.53:1）を使う。
• flag-heading は文字 #FFFFFF × 背景 #0BABE4 のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#087FAA、4.54:1）を使う。
• accordion-pill は文字 #FFFFFF × 背景 #72C5CA のコントラスト比が 1.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#328185、4.55:1）を使う。
• tag-faculty は文字 #FFFFFF × 背景 #EDBA04 のコントラスト比が 1.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#907102、4.62:1）を使う。
• burst-badge は文字 #FFFFFF × 背景 #EB4BA4 のコントラスト比が 3.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E01988、4.5:1）を使う。

Typography

• 和文見出しは字間を広めにとり、帯の中央にそろえる
• 日付は太い欧文数字にし、曜日は縦書きの小さな英字を添える
• 英字見出しは中抜き文字か細い線の文字で大きく置く
• 吹き出しの強調文字は斜めに置き、白か黄で目立たせる
• 本文は紺か白で13px前後にし、両端揃えで詰めて組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。日程・会場・写真は2列グリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出し帯は横幅約80%で中央に置く
• 日程カードは2×2のグリッドにする
• キャンパスごとの白カードは画面幅いっぱいに置き、上下を波形に縁取る
• タイムテーブルは縦が項目・横が時刻の表にする
• イラストはブロックの端からはみ出させて重ねる

Elevation & Depth

• カードに影はほぼ付けず、色面で重なりを表す
• PDFボタンだけは白地に薄い影を付けて浮かせる
• イラストや吹き出しは前面に重ね、奥行きをつくる

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 角丸16pxの長方形。FVは切り抜きイラストのコラージュ
• セクション境界: 白カードの上下を緩い弧にし、色付きの縁線を付ける。最後の帯は斜めに切る
• 見出し帯は両端を少しゆがめた布のような形にする
• 旗型見出しはポールと丸い玉を付ける
• 吹き出しは星形・爆発形にする
• タイムテーブルの時間はピル型のバーで表す

Components

• 申込CTA（button-primary）: マゼンタ→紫のノイズグラデを布のような形にし、白文字2行と左右の黄色い矢印を入れる
• 見出し帯（heading-band）: オレンジのグラデのピル帯に白い和文を字間広めで入れる
• 旗型見出し（flag-heading）: ポール付きの旗。青やオレンジのグラデに白文字でキャンパス名を入れる
• 日程カード（date-card）: 白〜淡色グラデのカードに紺の大きな日付、縦書きの曜日、時刻の注記を入れる
• 系統別アコーディオン（accordion-pill）: 系統ごとの色でグラデにしたピル型ボタン。右端に丸の下矢印を付ける
• 学部タグ（tag-faculty）: 小さなピル型のタグを色分けして横に並べる
• タイムテーブル（timetable）: 紺の太枠で囲んだ角丸パネル。上に日付タブを置き、横の時刻軸にグラデのピルバーを並べる
• 爆発型吹き出し（burst-badge）: マゼンタ〜紫の星形バッジに、斜めにした白い手書き風文字を入れる
• PDFボタン（button-outline）: 白いピルに紺の枠と文字

Do's and Don'ts

Do - グラデ面には必ずノイズ粒子を乗せる - イラストと写真を重ねて、にぎやかなコラージュにする - 情報量が多い部分は白カードで整理する - 系統・キャンパスごとに色を一貫させる - CTAはFV直下とページ中盤・末尾にくり返し置く

Don't - フラットな単色ボタンだけで構成しない - くすんだ色や低彩度の配色にしない - 情報表を黄緑地に直接置かない - 明朝の見出しを多用しすぎない - 角張った硬いボックスを並べない

Page Structure

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

1. ファーストビュー（イベントの楽しさを一目で伝える）: 空色地に立体ポップロゴ、旗のコピー、ロボや人物のイラストを散らす
2. 開催日（日程と時間を示す）: 見出し帯の下に日程カードを2×2で並べ、下に申込CTAを置く
3. 開催場所（会場とアクセスを示す）: 校舎写真の上に白カードを2枚並べ、アクセスの小ボタンと爆発バッジを付ける
4. 特典・特別講演（来場の動機をつくる）: 黄緑地に英字見出しを置き、細線の枠内に紺帯、角丸写真、スピーカー名、時刻表を入れる
5. イベント紹介（プログラムを一覧で見せる）: 白いピル見出しを付けた写真カードを2×2で並べる
6. 特典告知・動画（参加のメリットと見どころを伝える）: 布形の白パネルにオレンジ文字を入れ、縦長の動画カルーセルを置く
7. コラボ企画（話題性を出す）: TV型のロゴ枠と爆発吹き出しを左右に並べる
8. 学科イベント（キャンパスごとの体験内容を示す）: 旗型見出し、白い波形カード、学部タグ、写真2枚、色分けしたアコーディオンを置く
9. 当日スケジュール（時間割を詳しく見せる）: PDFボタンの後に、日付タブ付きのタイムテーブルをキャンパスごとに置く
10. アクセス・送迎バス（交通手段を案内する）: 斜めに切った赤〜黄のグラデ帯に、吹き出し形の路線図と紺グラデのピルリンクを置く
11. 来場者の声・フッター（口コミを見せて締める）: 白いボックスの開閉ボタンを置き、白フッターにSNSアイコンを並べる

Imagery

• イラストは高彩度の色をノイズグラデで塗ったフラットなキャラクター・ロボ・小物にする
• 写真は学生が実習する明るい教室を角丸で切り抜く
• FVは実写の校舎とイラストを合成したコラージュにする
• 爆発形・星形・音符などの装飾を余白に散らす
• PCは背景に巨大な英字の中抜き文字を縦に置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはコンテンツ幅を約70%の中央寄せにし、FVのイラストを左右に広げる
• PCの講演ブロックは写真と本文を横2列にする
• PCのイベント写真は4列にする
• PCの動画カルーセルは2本並べる
• PCのタイムテーブルは1行にまとめて横長にし、ヘッダーにナビを並べる

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