DESIGN.md — 水色地×虹色ブロブの足あと大学 LP（Pastel Blob Footprint Campus LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: やさしい・柔らかい、ポップ・元気、清潔・爽やか、親しみ・手作り感
• キーワード: 足あと・虹色ブロブ・余白多め・コラージュ・字間広め・散歩
• 地の質感: フラットな淡色の面に、ぼかしグラデーションの有機的な形を重ねる。紙っぽい横罫線の背景も使う。
• 形: 不定形のブロブ、角丸の写真、ピル型ボタン、円形の CTA バッジ。
• 温度感: 明るく涼しげで、ほんのり温かい

Colors

• 地は白・淡水色・淡グレーを交互に使い、セクションを切り替える
• 濃い青はメインビジュアルの CTA 円とページ末尾のコンタクト面に絞る
• 虹色のブロブ（オレンジ・黄・緑・紫・水色）は装飾専用。文字の背景には使わない
• 本文は真っ黒ではなく濃紺グレーにする
• 学部カードはそれぞれ違う淡い色の面に、同系色のぼかしブロブを重ねる

Typography

• 和文は字間を広め（0.1em以上）、行間は2倍前後にとる
• コンセプト見出しは1文字ずつ空けて、ゆっくり読ませる
• 本文は中央揃えで短く改行する
• 英字は輪郭線の帯やステンシル風で装飾として使う
• 写真上の極太コピーは学部カードの中だけで使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。学部カードは横スクロールのカルーセル
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 90px、基本単位 8px、カード内 12px（375px 幅換算）
• セクションの間は足あとのイラストでつなぐ
• 写真は本文ブロックの角からはみ出すように、浮かせて配置する
• コンテンツブロックは左右どちらかに寄せた白い角丸パネルにする
• CTA は末尾に3つ並べたピルボタンと、青いコンタクト面にまとめる
• 余白は大きめにとり、密度を上げない

Elevation & Depth

• 影はほぼ使わずフラットにする
• 奥行きは写真やブロブを重ねて出す
• カードには細い黒の外枠を付ける

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形。メインビジュアルは人物や建物を切り抜いたコラージュ
• セクション境界: 直線で切り替え、境界にブロブや足あとを重ねる。メインビジュアルの下には英字ループ帯
• 装飾は不定形のブロブで、角を作らない
• CTA バッジは円形
• ボタンは細線のピル型で、右端に丸付き矢印を付ける

Components

• 円形 CTA バッジ（badge-circle-cta）: メインビジュアル右下に置く青い円。白の英字2行と丸付き矢印
• 英字ループ帯（marquee-band）: 白地に、塗りの英字と輪郭線の英字を交互に並べた横帯
• コンセプト枠（concept-frame）: 淡い青紫の二重枠に白い面。上下の細罫線で見出しを挟む
• 学部カード（card-department）: 淡い色の面＋細い黒枠＋角丸。英字の学部名、写真に重ねた極太コピー、問いかけ文の順。左右に丸矢印
• 足あと装飾（footprints）: 線画の足あとを斜めに連ね、セクション間の動線にする
• 白い角丸パネル（panel-story）: 淡水色の地に置く大きな白パネル。写真とテキストを左右交互に配置
• 細線ピルボタン（button-outline-pill）: 白地にグレーの細線。中央に文字、右端に丸付き矢印。3つ横に並べる
• 白ピルボタン（青面上）（button-primary）: コンタクト面に置く白いピル型のフォームボタン
• 進行インジケーター（progress-goal）: 縦線上に丸を並べ、歩く人アイコンと GOAL の丸を置く

Do's and Don'ts

Do - ブロブはぼかしグラデーションで、画面の端からのぞかせる - 写真は小さめの角丸にして、ブロックの角からずらして浮かせる - セクションの間は足あとでつなぎ、歩いて進む物語にする - 本文は短い行で中央揃えにし、行間を広くとる - 締めは濃い青の面で、連絡先とボタンをまとめる

Don't - 濃い青を中盤のセクションの地に多用しない - 原色ベタの四角い帯で区切らない - 強い影や立体的なボタンを使わない - 極太書体を本文や見出し全般に使わない - 余白を詰めて情報を詰め込まない

Page Structure

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

1. ファーストビュー（世界観とオープンキャンパスへの導線を示す）: 円形に回り込む英字ロゴの中に、建物と人物の切り抜きコラージュと虹色ブロブを置く。右下に青い円の CTA
2. 英字ループ帯（テーマ語をリズムよく印象づける）: 塗りの英字と輪郭線の英字を交互に並べた細い帯
3. コンセプト（ブランドの思いを伝える）: グレー地に二重枠の白パネル。字間の広い見出しと中央揃えの詩的な本文。周りに写真を散らし、足あとを付ける
4. 学び紹介（学部の多様な学びを見せる）: 英字見出しと日本語見出しの組み合わせ。学部カードのカルーセルを3段
5. 授業の紹介（特徴的な授業を伝える）: 全幅写真の上にマーカー風のコピーと白い説明カードを重ね、線画の人物イラストを添える
6. つなぎのメッセージ（授業からキャンパスライフへの導入）: 白の角丸パネルに中央揃えで数行。足あとで次へ誘導
7. キャンパスライフ（過ごす時間のイメージを伝える）: 白パネルに写真と「○○×○○」型の見出しを左右交互に配置。GOAL に向かう進行インジケーター付き
8. 私たちについて・CTA（締めのメッセージと3つの行動導線）: 横罫線の紙のような地に、切り抜き人物と本文。下に細線ピルボタンを3つ
9. コンタクト・フッター（問い合わせ・SNS・関連リンク）: 濃い青の全面。字間の広い英字見出し、電話番号、白ピルボタン、2分割ボタン、SNS アイコン、バナー、住所

Imagery

• 写真は明るい自然光のキャンパスや学生の様子。小さめの角丸で散らして配置する
• 人物や建物を切り抜き、芝生などと合わせたコラージュにする
• 水彩のぼかしのような虹色グラデーションのブロブを装飾にする
• 線画の足あとと、細い線の人物イラストを添える
• 学部カードは比喩的でユーモアのある演出写真に、極太コピーを重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツを中央に寄せ、両脇にブロブを多めに散らす
• 学部カードは PC で3枚並べ、中央のカードを強調する
• キャンパスライフのパネルは PC で横長にし、写真を大きく見せる
• コンタクトは PC で電話番号とフォームボタンを左右2列にする
• メインビジュアルは PC でも中央の円構図を保ち、周りの余白を広げる

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