DESIGN.md — 深緑ロゴ×グレー地のポップイラスト大学案内 LP（Playful Pop Illustration Campus Guide LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感、情報量多め・訴求型
• キーワード: ポップイラスト・グリッド枠・ノイズ質感・市松模様・雲形切り抜き・ピクセル風ロゴ
• 地の質感: グレー地に細かいノイズ（紙のざらつき）をのせ、斑点状の濃淡模様や透明を表す市松模様を背景に敷く
• 形: 1px の黒線で区切ったグリッドセル、角丸の大きいカード、雲形・もこもこ形の写真マスク、ピル型ラベル
• 温度感: ニュートラルなグレーに、深緑とパステルの差し色を合わせた明るく軽い温度感

Colors

• 地は #EEEEEE 系のグレーを基本に、セクションごとに白寄り・青みグレーへ少しずつ切り替える
• 大見出しの英字ロゴは深緑一色にして、ブランド色をここに集める
• セクション境界には青紫・ピンクなどの細い色帯を入れて、章ごとに色を変える
• 強調色のパステルは写真背景・ラベル・ドットに小さく使い、広い面には使わない
• ボタンは黒地に白文字、矢印は白丸に黒で統一する
• 枠線と文字は黒で揃え、グレーの文字は使わない

Typography

• 各セクションは深緑の英字ロゴ見出しの下に、括弧付きの和文サブを小さく置く
• セクション頭には、目のアイコン・番号・和文タイトルを小さく 1 行で入れる
• 背景には画面幅からはみ出す極細の白い英字を流して敷く
• 数値は白抜き・黒縁の太い丸文字で特大にし、単位は小さい黒文字にする
• 和文の見出しは太ゴシックにして、強調語だけ色付きの縁取り文字にする
• 英字のラベルは大文字・細めのサンセリフで、下線を付けてリンクにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、人物カードは 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 95%
• 余白: セクション間 40px、基本単位 8px、カード内 20px（375px 幅換算）
• コンテンツは左右 10px ほど内側に寄せ、黒い 1px 枠で囲む
• カードの境界は隙間を空けず、共通の線で区切ったグリッドにする
• データカードは上に番号とラベル、中央にイラスト、下に見出しと数字を置く
• 空いたセルは市松模様で埋める
• セクションとセクションの間には、ノイズ模様のグレー帯を挟む

Elevation & Depth

• 影は基本的に使わず、1px の黒線で立体感の代わりにする
• カードや写真は線の枠で区切り、浮かせない
• スライダーのカードだけは太めの黒線と角丸で額縁のように見せる

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 人物は白背景を抜き、雲形・楕円・斜め四角の色面と市松模様の上に重ねる。黒の細い縁取りを付ける
• セクション境界: 細い色帯の直線と、もこもこの雲シルエット
• 選抜カードは四隅の角丸を大きく取った線枠にする
• ラベルとボタンはピル型にする
• SNS アイコンは雲形の白いバッジに入れる
• 装飾としてキラキラ、ギザギザの星、くるっとした線、丸いドットを散らす

Components

• 黒ピルボタン（button-primary）: 黒地に白文字を中央に置き、右端に白丸の矢印を付ける
• VIEW MORE リンク（link-view-more）: 下線付きの英字だけの小さなテキストリンク
• 章番号ヘッダー（section-eyebrow）: 目のアイコン、番号、和文タイトルを並べた 1 行。下に流れる英字と色帯を付ける
• キャンパスラベル（badge-campus）: 黒線で縁取ったピル型。ベージュと水色で拠点を区別する
• 人物グリッドカード（card-person）: 雲形に切り抜いた人物、学科名、英字名、VIEW MORE を縦に並べる
• 数字データカード（card-data）: 緑ドットの番号とラベル、線画イラスト、見出し、白抜きの特大数字、注釈を入れる
• 選抜方式カード（card-admission）: 角丸の大きい線枠の上辺にピル型タイトルをのせ、色ドットのリストを横線で区切る
• 再生ボタン（button-play）: ミント緑の楕円に黒線と三角を入れ、下に PLAY と書く
• 吹き出しリンク（speech-bubble）: 白地に黒線の角丸の吹き出しで、矢印アイコンを付ける

Do's and Don'ts

Do - 見出しは深緑の英字ロゴと括弧付きの和文サブをセットにする - 黒の細線グリッドでカードを区切る - 人物写真は切り抜いて、パステルの色面と市松模様に重ねる - イラストやキラキラなどの装飾を、枠からはみ出させて遊び心を出す - 数字は白抜きの特大文字で見せる - 地にはノイズ質感のグレーを敷く

Don't - 写真を四角いまま並べない - 濃い色を大きな面で塗らない - 影やグラデーションの立体表現を使わない - 明朝体や筆文字を使わない - パステルの差し色を 1 枚のカードに詰め込みすぎない - 主ボタンを黒以外の色にしない

Page Structure

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

1. ヘッダー（ブランドの提示とナビ）: 流れるテキストの帯、ロゴ、深緑のハンバーガー
2. ファーストビュー（サイトの世界観を伝える）: 角丸の枠の中で、ロゴの周りにイラストの人物・動物・雲を散らす
3. 在学生メッセージ（学科ごとの先輩を紹介する）: 2 カラムのグリッドに、切り抜いた人物のカードを並べる
4. 数字で見る（実績を数値で示す）: 線画イラストと特大数字のデータカードを縦に積む
5. キャンパスライフ（学生の日常を見せる）: 青みグレーの地に雲を置き、額縁風カードのスライダーと丸いサムネイルを並べる
6. 入試方式（選抜の種類を案内する）: 角丸の線枠カードと色付きの強調見出しを使い、最後に黒ボタンを置く
7. 動画紹介（キャンパスの雰囲気を動画で伝える）: 写真の上に緑の再生ボタンを置き、縦長ショート動画の横スクロールとプログレスバーを付ける
8. もっと知る（関連ページへ誘導する）: アイコンイラスト付きのグリッドリンク
9. 公式 SNS（フォローを促す）: 雲形バッジのアイコンを 5 つ横に並べる
10. フッター（問い合わせ先と関連サイト）: ロゴ、連絡先、吹き出しリンク、イラスト付きの 2 分割リンク、コピーライト

Imagery

• イラストは太めの黒い主線と、フラットなパステル塗りにノイズテクスチャを足す
• 人物写真は白背景で明るく撮る。笑顔やピースなどのポーズにして切り抜く
• 写真の背後には、ピンク・青・ベージュ・ミントの不定形の色面と市松模様を置く
• 猿・ワニ・フラミンゴなどの動物キャラを、セクションの角に配置する
• キラキラ、ギザギザの星、くるくる線、緑の丸ドットを散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はグリッドを 4〜5 カラムに広げ、人物カードは 4 列にする
• PC のヘッダーには、章へのナビを横並びで表示する
• PC はセクション全体を色帯の太い枠で囲み、中に白いカードを置く
• データカード・選抜カード・動画は PC で 2 カラムにする
• スライダーは PC で左右のカードも見せて 3 枚並べる

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