DESIGN.md — 青×手描き線画の大学オープンキャンパス LP（Bright Blue Handwritten Campus Open Day LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: ポップ・元気、清潔・爽やか、親しみ・手作り感、情報量多め・訴求型
• キーワード: 鮮やかな青・手書き英字見出し・線画イラスト・ドット・方眼・斜線の地紋・吹き出し・色分けカード
• 地の質感: 白地に方眼・ドット・斜めストライプの薄い地紋を重ねる。写真は明るく白っぽく飛ばした画像を背景に敷く。
• 形: 角丸カード、ピル型ボタン、ギザギザ円（スカラップ）のナビ、アーチ型に切り抜いた写真、雲形と角型の吹き出し。
• 温度感: 明るく爽やかな寒色が中心。黄色・ピンク・緑の差し色で元気さを足す。

Colors

• 地は白が基本。プログラムとアクセスの帯だけクリーム色に切り替える。
• 青をブランド色にして、ナビ・アコーディオン・リンクに使う。
• 主 CTA は水色→紺の横グラデーションのピル型。白い細枠をつける。
• サブ CTA は青・LINE 緑・ピンクの単色ピルで用途ごとに分ける。
• 拠点ごとに緑・青・赤を固定し、カードや見出しの面に一貫して使う。
• 黄色は吹き出しバッジと注意帯に限る。
• 日付の数字は水色、曜日は土曜が青で日祝が赤。
• フッターはチャコールの地に白文字。
• button-sub は文字 #FFFFFF × 背景 #0195E4 のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#017CBE、4.54:1）を使う。

Typography

• セクション見出しは手書き風の英字を中央に大きく置き、和文は添えない。
• 和文は見出しから本文までウェイトの高い明朝で統一し、ゴシックは混ぜない。
• 本文の行間は 2.0 前後で、字間もやや広めにとる。
• 小見出しの前後には「＼ ／」をつけてピンク文字にする。
• 日付は大きな欧文セリフの数字で見せ、年号と時刻は小さく添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。日程カードだけ 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右の余白は約 18px。カードとボタンは幅いっぱいに広げる。
• セクションの頭には手書き英字の見出しを置き、その下に余白を 32px ほどとる。
• 日程カードは 2 列で、端数の 1 枚は中央に寄せる。
• サブ CTA の帯はボタン 3 つを縦に並べ、ボタン間は 16px。
• 左右にイラストやドット装飾をはみ出させて、余白を賑やかにする。

Elevation & Depth

• 日程カードとプログラムカードは、ぼかしの大きい淡い影で浮かせる。
• クリーム地のカードには黄緑寄りの淡い影を使う。
• ギザギザ円のナビには、水色の影を少しずらして重ねる。
• アコーディオンと FAQ は影なしでフラットにする。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: カード内の写真は角丸の長方形。キャンパス写真は上部をアーチ型に切り抜き、下にリボン型のラベルを重ねる。
• セクション境界: 境界は直線で、地色や地紋（方眼・斜線ストライプ・写真の帯）で切り替える。拠点カードの上部は斜めにカットした色面にする。
• ボタンはすべてピル型にする。
• ファーストビューのナビは波形のギザギザ円にする。
• 吹き出しは角丸長方形に三角のしっぽをつける。濃い枠線の雲形も混ぜる。
• FAQ の Q マークは吹き出し形の濃紺アイコンにする。

Components

• 申込グラデーションボタン（button-primary）: 水色→紺のグラデのピル型ボタン。白い細枠と右矢印つき。
• サブ CTA ボタン（button-sub）: 青・緑・ピンクの単色ピルを縦に 3 つ並べる。
• ギザギザ円ナビ（nav-scallop）: 波形の円に「見出し＋小さな補足＋下向き矢印」を入れ、三角形の配置で並べる。
• 日程カード（card-date）: 白い角丸カード。年号、大きな日付、曜日の括弧、時刻を中央揃えで並べる。特別回は色枠とヘッダー帯をつける。
• 学部アコーディオン（accordion）: 青い帯に白い見出しと右端の太い＋／−。開くと白い面に項目が出る。
• プログラムカード（card-program）: 白い角丸カードに写真、中央揃えの見出し、本文を入れる。左上に黄色の吹き出しバッジを重ねる。
• 黄色吹き出しバッジ（badge-bubble）: 黒い枠線の黄色いピル型吹き出し。下にしっぽをつける。
• 拠点カード（card-campus）: 拠点色の斜めカット面に、手書き英字のアーチ文字、アーチ型写真、リボンラベル、本文、拠点色のボタンを重ねる。
• 声の吹き出し（voice-bubble）: 青・緑・ピンク・水色・黄色の吹き出しに白か黒の短文を入れ、空の線画の雲形を散らす。
• FAQ 行（faq-item）: 青い横線で区切った行。左に Q 吹き出しアイコン、濃紺の質問文、右にピンクの円形＋。

Do's and Don'ts

Do - 見出しは手書き風の英字にし、本文は明朝にして、遊び心と誠実さを両立させる。 - 線画の人物イラストをセクションの端にはみ出させて動きを出す。 - 拠点やカテゴリは色を固定して色分けする。 - 主 CTA はグラデのピル型にして、日程の後とページ下部で繰り返す。 - ドット・方眼・斜線の地紋は薄く、部分的に入れる。

Don't - 本文をゴシックの細字にしない。 - 暗い背景や重い写真をフッター以外に使わない。 - 角張った四角いボタンにしない。 - 黄色とピンクを大きな面で使わない。差し色に留める。 - 地紋の濃度を上げて文字を読みにくくしない。

Page Structure

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

1. ファーストビュー（イベント名と年号を印象づける）: 上を見上げる学生の写真に、手書き英字のタイトルを白い帯に乗せて重ねる。線画の人物と文具イラストを浮かべる。右端には縦書きの申込タブを固定する。
2. ナビゲーション（日程・学部・プログラムへ誘導する）: 青いギザギザ円を 3 つ、三角形に配置する。周囲にドット装飾を置く。
3. 日程一覧（開催日を一覧で示す）: 手書き英字見出しと、ピンクの「＼小見出し／」。白い日程カードを 2 列に並べ、特別回は色枠にする。下に注記と申込グラデボタンを置く。
4. 参加できない人向け CTA（相談・LINE・資料請求の受け皿）: 水色の斜線ストライプ地に、左右の走る人物イラストと見出し。3 色のピルボタンを縦に並べる。
5. 学部一覧（学部・学科を探させる）: 方眼地に手書き英字見出しとリード文。青いアコーディオンを角丸のブロックとしてまとめる。
6. プログラム紹介（当日の体験内容を伝える）: 写真帯に白い手書き英字を重ね、点線で囲んだ小見出しへつなぐ。クリーム地に写真入りカードを縦に並べ、黄色バッジを添える。黄色の注意帯と「もっと見る」リンクも置く。
7. 拠点別プログラム（拠点ごとの詳細へ誘導する）: 緑・青・赤の角丸の帯を 3 つ。白文字の 2 行見出しと、右に白丸の＋。
8. アクセス（各拠点の魅力と立地を紹介する）: 拠点色の斜めカット面にアーチ写真とリボンラベルを重ね、本文と拠点色のピルボタンを置く。カードを縦に 3 枚。
9. 参加者の声（体験談で安心感を与える）: 方眼地にカラフルな吹き出しを散らし、下に笑顔の学生集合写真。上下に写真の 3 連帯を置く。
10. よくある質問（疑問を解消する）: 手書き英字見出しの下に、青線区切りの Q 行を並べる。ピンクの円形＋で開閉する。末尾に申込ボタン。
11. 再 CTA（最後の受け皿）: 参加できない人向けの 3 ボタン帯をもう一度置く。
12. フッター（SNS と関連ページへ誘導する）: チャコール地にロゴ、欧文セリフの見出し、白丸の SNS アイコン 5 つ、白枠のグラデボタン 2 つ、コピーライト。

Imagery

• 写真は明るい自然光で、少し露出を上げた爽やかな色調にする（キャンパス・授業・学生）。
• 人物写真は笑顔で、見上げる・話すなどの動きのあるカットを選ぶ。
• イラストは黒の主線に水色・黄色・グレーの少ない塗りで描いた、ポップな学生の全身線画にする。
• 装飾は赤・水色のドット格子、＋記号、斜めストライプ、ノイズ状の小さなグリッチ片を使う。
• 校舎の写真は白く飛ばし気味にして、セクション背景に薄く敷く。
• 建物の写真は空を多めに入れて見上げる構図にし、アーチ型に切り抜く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はファーストビューで写真を左、タイトルを右に置き、ギザギザ円ナビは横 3 つに並べる。
• 日程カードは PC で 5 列のグリッドにする。
• 学部アコーディオンは PC で左に学部タブ、右に学科パネルの 2 ペインにする。
• プログラムカードは PC で 2 列＋3 列、拠点カードは 3 列に並べる。
• サブ CTA の 3 ボタンと拠点別プログラムの帯は、PC では横長にして文字を 1 行にする。
• FAQ は PC で中央 70% 幅に収め、両脇にドットや斜線の装飾を置く。

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