DESIGN.md — 水色グラデと3D小物の大学案内 LP（Pastel Gradient Campus Pop LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 清潔・爽やか、ポップ・元気、信頼・誠実、情報量多め・訴求型
• キーワード: パステルグラデーション・3D文具オブジェクト・曲線テキスト・白カード・ハッシュタグ見出し・実績メダル
• 地の質感: なめらかなグラデ地。写真は明るくクリアで、3D風の小物を浮かせて立体感を出す
• 形: 角丸カード、ピル型ボタン、円形アイコン、波打つリボン
• 温度感: 明るく爽やかな寒色が基調。セクションによってピンクやクリームで暖かさを足す

Colors

• 地の色はセクションごとに水色→ピンク→ミント→クリーム→薄紫と変え、上下をグラデで白につなぐ
• 見出しの「#〇〇」は青、サブ見出しと本文は濃い墨色にする
• ボタンは寒色グラデのピル型にする。最も強い誘導だけオレンジにする
• キャンパスや所在地のラベルは緑・青・赤で色分けし、ボタン色もそれに合わせる
• 実績の数字は金色のメダル、項目名は青い帯で見せる
• フッターは青のベタ塗りにして、文字は白にする
• quick-link-icon は文字 #5D80A0 × 背景 #EBF8FF のコントラスト比が 3.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#557491、4.52:1）を使う。
• anchor-button は文字 #FFFFFF × 背景 #6492E9 のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#3571E2、4.55:1）を使う。
• course-button は文字 #FFFFFF × 背景 #6AC27D のコントラスト比が 2.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#378548、4.55:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #FD9B2C のコントラスト比が 2.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B25F02、4.63:1）を使う。

Typography

• セクション見出しには必ず「#」を付け、青で中央揃えにする
• 見出しの下に、黒の太字で2行のサブ見出しを置く
• 本文は左揃えにし、字間を少し広げて読みやすくする
• 実績の数字は詰めた極太の書体にし、単位は小さくする
• 欧文の装飾テキストはセリフ体の大文字にし、曲線に沿わせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（ボタンと実績は2列）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 96px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出し・サブ見出し・本文・コンテンツの順に、縦に積み重ねる
• カードは左右16pxの余白で横いっぱいに置き、間隔は16〜20pxにする
• 実績メダルは先頭の1つを大きく中央に置き、残りを2列で並べる
• セクションの区切りには、曲線の欧文テキストと3D小物を挟む
• FV直下に、円形アイコンのクイックリンクを2×2で置く

Elevation & Depth

• 白カードには弱く広いドロップシャドウを付ける
• 灰色カードは上から下へ薄いグラデにし、影はほぼ付けない
• グラデボタンにはごく薄い影を付ける
• 3Dオブジェクトは柔らかい影と光沢で浮かせる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: カード上部に横長の矩形で載せ、上の角だけ丸める
• セクション境界: グラデで溶かす。曲線リボンと欧文テキストの波形で区切る
• ボタンはすべてピル型にし、右端に円形の矢印アイコンを付ける
• ラベルは小さな角丸の四角にする
• 吹き出しは白い四角に小さなしっぽを付ける
• クイックリンクは円形のグラデアイコンにする

Components

• 円形クイックリンク（quick-link-icon）: グラデの円形アイコンと青い2行ラベルを横に並べ、2×2で配置する
• ハッシュタグのアンカーボタン（anchor-button）: 寒色グラデのピル型。中央に「#項目名」、右に下向き矢印を置き、縦に積む
• 学科リンクボタン（course-button）: 緑グラデの角丸ブロック。左上にキャンパスラベル、小さな学科名、太字のコース名を置き、右に白丸の矢印を付ける
• 特設サイトへのCTA（button-primary）: オレンジグラデのピル型。2行の白文字と、右に白丸の矢印を置く
• 黒ピルの区分ラベル（category-pill）: 黒地に白文字の小さなピルを中央に置き、区分の見出しにする
• 実績メダル（rank-medal）: 王冠と放射線の装飾に、金色の大きな順位の数字を入れる。下に青いピル帯で項目名を置く
• 数値カード（stat-card）: 白カードに青い見出し、フラットなイラスト、極太の大きな数字を載せる
• 在学生の声カード（voice-card）: 写真の下に、青い見出し、本文、イニシャル、所属を置く。地は灰色グラデ
• Q&Aの行（faq-row）: 白い小さな四角に入ったQ、質問文、右端の＋を並べる。行の間は細い線で区切る

Do's and Don'ts

Do - セクションごとにパステルの地色を変え、グラデで滑らかにつなぐ - 3D風の文具や玩具を余白に浮かべ、遊び心を出す - セクション見出しは「#」付きの青文字に統一する - 数値の実績は大きく太い数字で見せる - ボタンはピル型にし、右に矢印アイコンを付けて統一する

Don't - 濃い原色をベタ塗りで地に使わない（フッター以外） - 角張ったボタンや細すぎる線のボタンは使わない - 写真に暗いフィルターをかけない - 1セクションに強調色を3色以上混ぜない - 見出しを左揃えにしない

Page Structure

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

1. ファーストビュー（学生の活気と世界観を伝える）: 角丸の大きなビジュアルに、学生写真、3D小物、手書き風の大きなキャッチを重ねる
2. クイックリンク（申込・相談・資料請求へ誘導する）: 円形グラデのアイコンとラベルを2×2で並べる
3. コンセプト（教育理念を伝える）: 水色グラデ地に紺の見出しを置き、短い文を中央に並べ、最後を大きな一文で締める
4. 目次（強みを6つ示し、各項目へ飛ばす）: 曲線の欧文テキストと写真の下に、グラデのアンカーボタンを縦に6本並べる
5. 学部紹介（学部と学科の幅広さを見せる）: 黒ピルで区分を示し、写真付きのカードと緑の学科ボタンを並べ、最後にオレンジのCTAを置く
6. 実績（資格の合格実績を証明する）: ピンク地に、王冠付きの金メダルを2列で並べる
7. 教育の特徴（独自の教育サイクルを説明する）: 青からピンクへのグラデのリング図に、白丸のキーワードを配置する
8. 教員との距離（手厚いサポートを伝える）: ミント地に白い吹き出しを4つ置き、下に面談の写真を入れる
9. キャンパス紹介（立地と施設を示す）: 青い地図のイラストの下に、建物写真のカードを並べる。カード下端のボタンはキャンパスごとに色を変える
10. 就職実績（就職の強さを数値で示す）: クリーム地に、ドーナツグラフ、折れ線グラフ、数値カード、プログラム紹介のカードを置く
11. 在学生の声（リアルな体験で信頼を作る）: 写真、青い見出し、本文、イニシャルのカードを縦に並べる
12. よくある質問（不安を解消する）: 薄紫地に、カテゴリ見出しの番号付き青文字と、Q＋アコーディオンのリストを置く
13. フッター（ページ内リンクと著作権表示）: 青のベタ地に、白文字のリンクを2列で並べる

Imagery

• 写真は明るい室内で撮った自然な学生の表情。白飛び気味のクリアな色調にする
• 3D風の鉛筆、本、ぬいぐるみ、注射器などを、光沢のある質感で浮遊させる
• 波打つリボンに、セリフ体の欧文を沿わせた装飾を入れる
• 人物はフラットなイラストで描き、青い服とシンプルな線にする
• 地図や図解は青のグラデと白のシンプルな表現にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはコンテンツ幅を約1000pxの中央寄せにする
• アンカーボタンはPCで3列×2段にする
• 学科ボタンはPCで3列グリッドにする
• 学部やお客様の声のカードは、PCで写真を左・文章を右の横並びにする
• 数値カードやプログラムのカードは、PCで2〜3列にする
• FAQはPCで2列にし、フッターのリンクは横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 行書くと起動時に読み込まれる。