DESIGN.md — ラベンダー×ピンクの学生コンテスト募集 LP（Pastel Neon Gradient Youth Contest LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: ポップ・元気、かわいい、やさしい・柔らかい、情報量多め・訴求型
• キーワード: パステルグラデーション・ネオン発光文字・フラットイラスト・白カード・ピンクのピル型ボタン・ユース
• 地の質感: ラベンダーとピンクのなめらかなグラデーション。審査員セクションは淡いピンク地に細い方眼グリッドを敷く。
• 形: 角丸の白カード、ピル型ボタン、円形のテーマバブル、月桂冠の賞バッジ。
• 温度感: 明るく甘めの暖色寄りパステル。若々しく前向き。

Colors

• 地はラベンダー→ピンク→白の縦グラデーションでセクションを移り変わらせる。
• 情報カードは必ず白で、パステル地から浮かせる。
• ピンクは見出し、ラベル帯、CTA、点数バッジに限定する。
• 紫は英字の小ラベルとURLリンクに使う。
• 賞バッジは賞ごとに色を分ける（ピンク・緑・青・オレンジ）。
• 募集要項の表だけは濃グレーの帯を使い、引き締める。
• button-primary は文字 #FFF3FD × 背景 #FF7EBA のコントラスト比が 2.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DC0066、4.6:1）を使う。
• button-secondary は文字 #FFF3FD × 背景 #FE9BD1 のコントラスト比が 1.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#DA0278、4.57:1）を使う。

Typography

• FVのタイトルは白文字に色のついた外側グローをかけ、ネオン管のように見せる。
• 手書き風のキャッチは白に発光をかけ、少し斜めに置く。
• 英字の小ラベルを和文見出しの上に添えて二段にする。
• グラデーション地の本文は白の太字で中央揃えにする。
• 賞金額の数字だけは60px級に大きくし、賞の色で塗る。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。審査基準や賞はカード内に縦積み。
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右に約8%の余白を取って中央に置く。
• セクションの頭は英字ラベル＋ピンク地の見出しピルで始める。
• サブ項目はピンクグラデの細い横長ラベル帯で区切る。
• 本文は中央揃えを基本にし、プロフィール本文だけ左揃えにする。
• CTAは横幅約85%の大きなピル型にする。

Elevation & Depth

• 白カードには淡いピンクのぼかし影（0 4px 16px rgba(240,150,200,.2)）をつける。
• テーマ枠はピンクのずらし影でオフセットを出す。
• CTAは下方向に薄ピンクのずらし影をつける。
• 要項表は影なし、細い濃グレー線のみ。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 人物写真は角丸16px程度の矩形。右下に英字の透かし文字を重ねる。
• セクション境界: 直線の境界のまま、地のグラデーションで自然に色を移す。
• カードは角丸12〜16px。
• テーマ分類は大きな正円のバブルにする。
• 賞は月桂冠のリース型で囲む。
• 点数バッジは角丸4pxの小さなピンクの四角。

Components

• ENTRYボタン（button-primary）: 左ピンクから右サーモンへのグラデのピル型。白文字で、下にずらし影をつける。
• ダウンロードボタン（button-secondary）: 淡いピンクグラデのピル型。白文字にアイコンを添える。
• FVのアンカーカード（nav-card）: 白の角丸カード。英字ラベル、見出し、説明、丸い下矢印アイコンの順に並べ、3枚を縦に積む。
• 見出しピル（section-heading-pill）: 英字の小ラベルの下に、ピンク地に白文字の角丸ラベルを置く。
• サブ見出し帯（label-bar）: 横長でピンクグラデ地の細い帯。白文字を中央に置く。
• テーマバブル（theme-bubble）: グラデの大きな円。手書き風の大きな漢字1字とキーワード3行を入れ、周りにカプセル型の飾りを散らす。
• 審査員カード（profile-card）: 角丸の人物写真の下に名前と肩書きを置き、続く白カードに太字の要約と経歴を入れる。
• 賞バッジ（award-badge）: 月桂冠のリースの中に星、賞名、賞金の大きな数字、人数を入れる。
• 募集要項表（spec-table）: 細い線で囲んだ角丸の表。項目ごとに濃グレーの見出し帯（白文字）があり、下に白地の本文が続く。

Do's and Don'ts

Do - パステルのグラデーション地と白カードを交互に重ねて柔らかく見せる。 - FVはカラフルなフラットイラストを全面に敷き、ネオン文字を重ねる。 - 英字の小ラベルと和文見出しをセットで使う。 - CTAはページ中盤と末尾に同じピル型で繰り返す。 - 審査基準には点数バッジをつけて、評価の仕組みを見える形にする。

Don't - 濃い原色の広い面や黒地のセクションを作らない（要項表の見出し帯は例外）。 - 角の立った四角いボタンにしない。 - 明朝体を使ってかしこまった印象にしない。 - 白カードに強く濃い影をつけない。 - イラストのタッチを写真風やモノクロに混在させない。

Page Structure

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

1. ファーストビュー（コンテストの存在と世界観を一目で伝える）: ラベンダー〜ピンクのグラデ地に、カラフルな学生のイラストを置く。手書き風の発光キャッチとネオン調タイトルを重ねる。
2. アンカーナビ（テーマ・審査・特典へ誘導する）: 英字ラベル付きの白カード3枚を縦に積み、丸い下矢印をつける。
3. 概要（コンテストの趣旨を説明する）: 白地にピンクの大見出しを置き、中央に本文の段落を組む。
4. 募集テーマ（テーマを印象づける）: 回数バッジと年度ラベルの下に、ずらし影つきの枠を置き、太字のテーマを入れる。
5. テーマの解説（応募を後押しし、取り組む分野の例を示す）: 紫からピンクへのグラデ地に白字で本文を中央揃えにし、分野ごとの円バブルを3つ縦に並べる。
6. テンプレート案内とCTA（応募の準備を促す）: 白カードのスライダー（ドットページャー付き）、ダウンロードボタン、短い一言、ENTRYボタンの順に並べる。
7. 審査員（審査員を紹介して信頼感を出す）: 方眼入りの淡ピンク地に、写真カード、経歴カード、COMMENTカードを1人ずつ繰り返す。
8. 参加対象（誰が応募できるかを示す）: ラベル帯の下にイラストと白カードを2組並べる。
9. 審査基準（評価の仕組みを示す）: 天秤のイラストの下に、点数バッジ付きの番号リストと合計点のピンク帯を入れた白カードを置き、下向きの大矢印につなぐ。
10. 入賞者特典（賞金で意欲を高める）: 色違いの月桂冠バッジを縦に並べ、プラス記号のあとに特典イベントを案内する。
11. 募集要項（条件の詳細を一覧にする）: 濃グレーの見出し帯と白地の本文を交互に重ねた表にする。
12. 最終CTA・フッター（応募と問い合わせ先を示す）: ENTRYのピル型ボタンを置き、グレー地のフッターに主催者ロゴと連絡先を中央揃えで入れる。

Imagery

• FVはグラデ陰影のフラットなベクターイラスト。本・定規・鉛筆・植物と若者を密に重ねる。
• 背景にはカプセル形や円の飾りを散らし、浮遊感を出す。
• 人物写真は自然光のバストアップ。角丸に切り抜き、右下に紫の英字透かしを重ねる。
• 審査基準には天秤、参加対象には学生のフラットなイラストを添える。
• テーマの円はピンク・オレンジ・水色のグラデーションにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではFVイラストを横長に広げ、アンカーカード3枚を横一列に並べる。
• PCではテーマバブル3つを横一列にする。
• PCでは審査員を写真左・経歴右の2カラムにする。
• PCでは参加対象の2枚を横並びにし、副賞バッジ3つも横並びにする。
• PCでは要項表を左に項目名、右に内容を置く2列の表にする。
• PCでは余白に装飾イラストを散らし、コンテンツ幅は約800pxに抑える。

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