DESIGN.md — 黄地×分野別カラーの漫画型専門学校 LP（Color-Coded Manga Vocational School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型
• キーワード: アニメ調キャラクター・4コマ漫画・分野別カラー・白カード・数字訴求・黄色の地
• 地の質感: フラットな単色ベタ塗り。影や質感はなく、漫画とイラストで情報量を出す
• 形: 角丸の小さい白カードと、ピル型のボタン。見出しの上に小さなラベル帯を置く
• 温度感: 明るく暖かい。若者向けで親しみやすい

Colors

• ページの外側は鮮やかな黄色一色にする。中央のカラムを浮かせて見せる
• 分野ごとにセクションの地色を変える（青・緑・赤・ピンク・紫）。見出し・ボタン・ラベルもその分野の色に揃える
• カードは必ず白地。色地の上に白カードを重ねて読みやすくする
• 特長ボックスは、その分野の色を薄めた色で塗る
• 就職率などの実績数字は赤の特大文字で強調する
• 本文は濃いグレー。純黒は使わない
• button-field は文字 #FFFFFF × 背景 #5EAE4B のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#478339、4.59:1）を使う。
• feature-label は文字 #FFFFFF × 背景 #039FEB のコントラスト比が 2.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#027DB9、4.53:1）を使う。

Typography

• 見出しは太いゴシックで中央揃え。2行に分けて改行位置を調整する
• 見出しの色はそのセクションの分野色にする
• 数字は特大にし、単位は小さく添える
• 本文は短く改行し、中央揃えか左揃えにする
• 注釈は最小サイズのグレー文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC も中央に約 280px 幅のカラムを置き、左右は固定ナビ
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 40px、基本単位 8px、カード内 16px（375px 幅換算）
• 白カードは色地の上に左右 6% の余白をとって縦に積む
• カード同士の間隔は 16〜24px
• セクションの頭に小カテゴリ名→大見出し→紹介文→キャラクター→性格タグの順で置く
• 4コマ漫画はカード幅いっぱいに縦長で入れる
• 特長は「特徴1〜3」のラベル付きボックスを縦に並べる

Elevation & Depth

• 影は使わない。白と色地のコントラストだけで面を分ける
• 特長カードは影の代わりに 2px の色付き枠線で囲む

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。
• 写真の切り抜き: 人物写真は角丸なしの長方形。キャラクターは背景を抜いた切り抜き
• セクション境界: 直線で地色を切り替える
• カードの角丸はほぼ直角にする（2〜4px）
• ボタンは分野色のピル型にする
• 特徴ラベルは角ばった小さな帯にし、ボックスの上辺中央に重ねる
• 性格タグは白地の小さな長方形を縦に並べる

Components

• 分野別の詳しく見るボタン（button-field）: 分野色で塗ったピル型。白文字で末尾に矢印を付ける
• 実績数字カード（stat-card）: 青枠の白カード。上辺に「特徴N」の青ラベルを付け、赤の特大数字と注釈を入れる
• 特徴ラベル（feature-label）: 分野色の小さな帯に白文字で番号を入れる
• 分野紹介カード（field-card）: 白カードにキャラクターの全身イラスト、分野名、3行の説明、ボタンを中央揃えで入れる
• 4コマ漫画カード（manga-card）: 白カードに分野色の2行見出しを置き、下に縦長の4コマ漫画を入れる
• 卒業生の声カード（voice-card）: 見出し、人物写真、名前の帯、太字の一言、本文の順に並べる
• キャラクター性格タグ（trait-tags）: キャラクター名と性格を書いた白い小タグを縦に3つ並べる
• 淡色の特長ボックス（tint-feature-box）: 分野色を薄めた地に、ラベル、太字の見出し、白いコース名ボックス、箇条書きを入れる
• PC 用固定サイドナビ（side-nav）: 左にテキストのナビとピル型の登録ボタン、右にキャラクターのアイコンボタンを置く

Do's and Don'ts

Do - 分野ごとに色を1つ決め、地色・見出し・ボタン・ラベルをその色で統一する - 分野ごとにアニメ調のキャラクターを1人立て、紹介→漫画→声→特長の順で見せる - 実績は数字を大きくし、注釈で出典を添える - 情報はすべて白カードに入れて、色地の上に積み重ねる - ボタンはピル型にし、矢印を付ける

Don't - 黄色の地をセクションの内側まで広げない - 1つの分野セクションに別の分野の色を混ぜない - 影・グラデーション・質感を足さない - 落ち着いた低彩度の配色にしない - 漫画を小さく横に並べない（必ず縦に積む）

Page Structure

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

1. ファーストビュー（学べる分野の多さとキャラクターで興味を引く）: 斜めに区切った色帯に分野ごとのキャラクターを配置し、明朝風の縦書きコピーを重ねる
2. 学校紹介（学校の理念と学べる分野を伝える）: 白地に青の見出し、中央揃えの短い文、キャラクターの全身集合イラスト
3. 実績・特長（就職率・合格率・求人数で信頼を作る）: 青枠の実績数字カードを3つ縦に並べる
4. 分野紹介一覧（5分野の概要を見せ、各詳細へ誘導する）: 青地に白カードを5枚並べる。各カードにキャラクターと分野色のボタン
5. 分野詳細の導入（分野の魅力とキャラクターの性格を伝える）: 分野色の地に白文字の見出し、キャラクター、性格タグ
6. 4コマ漫画（学びと就職の流れを物語で見せる）: 白カードに分野色の見出しと縦長の4コマを入れ、2本続ける
7. 卒業生・在校生の声（実際の体験談で信頼性を補う）: 写真、太字の一言、本文の白カード
8. 分野の3つの特徴（コースとサポート内容を具体的に示す）: 淡い色のボックスに番号ラベルを付けて3つ縦に並べる
9. 他分野の繰り返し（全分野を同じ型で紹介する）: 地色を緑→赤→ピンク→紫と切り替え、同じ構成を繰り返す

Imagery

• アニメ調の男女キャラクターを、分野ごとに髪色をテーマ色にして描く
• キャラクターは2〜3頭身のデフォルメ全身イラスト。小物（PC・ゲーム機・薬など）を持たせる
• 4コマ漫画は分野色を背景トーンにし、吹き出しの重要語を赤や黄で強調する
• 人物写真は自然光のポートレートで、背景をぼかしたバストアップ
• 装飾は最小限にし、イラストと漫画で賑やかさを出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも中央のカラムは約 280〜300px 幅のままにして、スマホと同じ見た目を保つ
• PC の左余白にはテキストのナビ・住所・登録ボタンを固定表示する
• PC の右余白には分野キャラクターのアイコンボタンを縦に固定し、各分野へ移動させる
• SP では左右のナビを隠し、中央カラムを画面幅いっぱいに広げる

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