DESIGN.md — 空色×パステル有機図形の大学改革 LP（Pastel Blue Gradient Blob University LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 清潔・爽やか、クール・先進的、やさしい・柔らかい、シンプル・ミニマル
• キーワード: 空色・パステルグラデーション・有機的なブロブ・円形切り抜き・広い字間・粒子ノイズ
• 地の質感: パステルの図形に細かい粒子ノイズを乗せたグラデーション。地はフラットな単色。
• 形: 丸いブロブ、六角形、三角形を不規則に組み合わせる。セクションの境目はゆるい波線。
• 温度感: やや涼しい。青が主体で、ピンクと紫で柔らかさを足す。

Colors

• 前半と後半は空色の地に白文字、中盤の詳しい紹介はライトグレーの地に濃グレー文字にする。
• 強い色はボタンの青紫だけにする。ピンクや紫はグラデーション図形と年号ピルの文字に限る。
• グラデーション図形はピンク・ラベンダー・ミント・水色の 4 色をまぜる。
• グレー地のセクション境界には、セクションごとに色を変えた淡い波線を置く。
• 学部グループごとに丸印の色（青・緑・ベージュ）を変えて見分けやすくする。
• button-primary は文字 #F2FDFF × 背景 #5C7ED5 のコントラスト比が 3.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#486ED0、4.59:1）を使う。
• badge-year-pill は文字 #AF6FA6 × 背景 #FFFEFD のコントラスト比が 3.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#A45B9A、4.59:1）を使う。
• button-disabled は文字 #F2FDFF × 背景 #9E9E9E のコントラスト比が 2.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#747474、4.51:1）を使う。

Typography

• 見出しは細め〜中くらいの太さにして、字間を 0.08em 以上とる。
• 英字はアウトライン（白の細線）で大きく置き、背景の飾りとして使う。
• 見出しは中央揃え、本文は左揃えにする。
• （仮称）などの補足は見出しのすぐ下に小さく添える。
• 本文は小さめの文字サイズで、行間を 2.0 前後と広くとる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC の学修環境セクションは 3 カラムのカード。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 90px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真はグレー地のセクションで画面幅いっぱいに配置する。
• ボタンは本文幅いっぱいに置く。
• トピックは「円形写真→年号ピル→見出し→短いリード」の順で縦に繰り返す。
• 学部リストは本文エリア＋右端の青い矢印タブで 1 行にまとめる。
• セクション頭にはグラデーションのオブジェを中央に置く。

Elevation & Depth

• 学修環境カードには薄くぼかした影（0 4px 12px 程度、黒 10%）を付ける。
• 学部リストとボタンは影を付けずフラットにする。
• グラデーション図形は写真の上に重ね、奥行きを出す。

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 前半の人物写真は円形に切り抜き、背後に濃い青紫の円を置く。中盤の写真は角丸なしの横長矩形。
• セクション境界: 2〜3 本の淡い波線を重ねる。空色エリアの境界もゆるやかな波形にする。
• ボタンとカードの角丸は小さく（4〜6px）する。
• 年号ラベルだけは白のピル型にし、両側に細い横線を伸ばす。
• Read More の横には青い円形の矢印アイコンを置く。
• 飾りの図形はブロブ・六角形・三角形の角を丸めたものにする。

Components

• 詳しく見るボタン（button-primary）: 青紫の帯状ボタン。文字は中央、右端に細い矢印を置く。
• 年号ピル（badge-year-pill）: 白いピルにピンク紫の文字。左右に細い白線を伸ばす。
• 学部リスト行（dept-list-row）: グレーの面に色付き丸印＋学科名＋短い説明。右端に青い矢印タブを付ける。
• 学修環境カード（feature-card）: 空色地に置く白っぽいカード。上にカテゴリ見出し（白文字）、右下に Read More と丸矢印を付ける。
• 英字アウトライン見出し（outline-heading）: 白の細線で縁取った大きな英字。日本語見出しの上に重ねる。
• 円形写真＋ブロブ（circle-photo）: 人物写真を円形に切り抜き、周りにパステル図形を 3 つ前後重ねる。
• スライダードット（slider-dots）: 写真の下に小さな白抜きの丸を並べる。現在位置は青灰色の短い棒で示す。
• 準備中ボタン（button-disabled）: グレーの帯状ボタン。白文字で準備中であることを示す。

Do's and Don'ts

Do - 円形写真の周りには、粒子ノイズの入ったパステルグラデーション図形を重ねる。 - 見出しは細めにして字間を広くとり、軽やかに見せる。 - 空色→グレー→空色の 3 段で、地の色を切り替える。 - 波線でセクションを柔らかく区切る。 - 新しさを年号ピルや年号のリードで先に示す。

Don't - 赤やオレンジなど彩度の高い暖色を CTA に使わない。 - 極太の書体や影付きの文字を使わない。 - 写真の角を大きく丸めたり、四角い枠で囲ったりしない。 - グラデーション図形をくっきりした単色のベタ塗りにしない。 - セクション境界をまっすぐな直線だけで硬く区切らない。

Page Structure

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

1. ファーストビュー（変革の年と大きなメッセージを伝える）: 空色地。英字の小見出しと白の大見出しを置き、円形写真とブロブ図形、短い導入文を続ける。
2. 導入メッセージ（いくつもの新しいことを予告する）: 中央揃えの白文字。下に英字アウトラインの大見出しを置く。
3. トピック一覧（新学部・改革・資格・新校舎を順に示す）: 円形写真・年号ピル・見出し・リードの組を 5 回繰り返す。
4. ブランドメッセージ（理念とスローガンを伝える）: 白い細枠の中にグラデーションのブロブ模様のビジュアル。下に本文とブランドサイトへのボタン。
5. 新学部の詳細（学部の内容を詳しく説明する）: グレー地。波線と飾りオブジェを置き、年号・大見出し・全幅写真スライダー・本文・ボタンを続ける。
6. カリキュラム改革（全学科の新しい特徴を一覧で示す）: 学部名ラベルの下に、矢印タブ付きの学科リスト行を縦に並べる。
7. 資格・課程の紹介（新しい資格取得の道を示す）: 詳細セクションと同じ型。注釈は小さい文字で添える。
8. 新校舎（新しい施設を予告する）: 建物写真のスライダーと本文。ボタンはグレーの準備中ボタンにする。
9. 学修環境（既存の制度や支援を紹介する）: 空色地に英字アウトライン見出し。カテゴリ見出し＋白カードの組を 6 つ並べる。
10. 周年告知（法人の節目を伝える）: スラッシュで挟んだ英字ラベル、白の見出し、全幅写真、本文。
11. フッター（メッセージの再掲とリンク）: 大見出しを再掲し、円の中にグラデーションのイラスト。ロゴ、リンク、縦書きの PAGE TOP、固定のイベントボタン。

Imagery

• 学生が笑顔で話したり作業したりする自然光の写真。明るく、やや高めのキーで撮る。
• 人物は胸から上で円形に切り抜き、背後に濃い青紫の円を置く。
• 装飾はピンク・ラベンダー・ミントのグラデーション。粒子ノイズを入れたブロブ・六角形・三角形にする。
• 抽象的な人型を幾何図形で作ったイラストを、各セクションのアイコンにする。
• 詳細セクションの写真は授業や施設の様子を横長で見せる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC のファーストビューは、左に見出しと本文、右に円形写真の 2 カラムにする。
• PC のトピック一覧は、写真とテキストを左右交互にジグザグ配置する。
• PC の学部詳細は、写真とボタンを中央の約 70% 幅に収める。
• PC の学修環境カードは 3 カラム×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 行書くと起動時に読み込まれる。