DESIGN.md — 橙×青×黄のドット文字キャラ大学 LP（Bold Orange Blue Pixel Mascot University LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: ポップ・元気、力強い・インパクト、親しみ・手作り感、情報量多め・訴求型
• キーワード: 原色ブロック・ドット風極太文字・マスコットキャラ・太い黒線・白カード＋濃影・ギザギザバッジ
• 地の質感: フラットなベタ塗り。イラストに黒の太線と強めのドロップシャドウ
• 形: 四角いブロックを基本に、カードは中程度の角丸、バッジはギザ円形
• 温度感: 暖色オレンジ主体で元気。青で引き締める高コントラスト

Colors

• オレンジ・青・黄の3色をセクションごとに全幅で切り替える
• 色面上の文字は白、白地上の文字は黒に限定
• カード内の強調語はオレンジで書く
• 青カードには白の細枠を少しずらして重ねる
• 黒は帯・ヘッダー・フッター・キャラの輪郭に使う
• グラデーションは使わずベタ塗りのみ
• card-problem は文字 #EB7B1C × 背景 #FEFEFE のコントラスト比が 2.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#B75D10、4.54:1）を使う。
• button-circle-cta は文字 #4548A0 × 背景 #AACD02 のコントラスト比が 4.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B0D502、4.6:1）を使う。

Typography

• 大見出しはドット・ブロック風の極太書体で白抜き
• 本文は太めで小さめ、行間を広く取る
• 本文は左揃えの短い改行で詩のように並べる
• 番号は細長い大数字か斜体で大きく置く
• 英字見出しの下に日本語の小見出しを添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、カードは横スクロールカルーセル
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは全幅の色面で区切る
• 本文ブロックは左寄せで余白多め
• ポイントカードは左に番号円をはみ出させる
• 6項目の写真帯は縦に等間隔で積む
• 青カードは中央寄せで縦に並べる

Elevation & Depth

• 白カードに右下へ濃いぼかし影
• キャラのイラストにグレーのドロップシャドウ
• 青カードは影の代わりに白枠をずらして重ねる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は四角い帯状、人物は切り抜き
• セクション境界: 直線で色面を切り替え、黒帯を挟む
• カードは角丸12px程度
• バッジはギザギザ円の青地白文字
• 矢印ボタンは黒い正円
• CTAは黄緑の正円

Components

• ギザ円バッジ（badge-burst）: 青地に白文字で特徴を2〜4行で載せる星形の円
• 悩みカード（card-problem）: 白カードにオレンジ点線の枠。アイコンと短文を載せ、肉球を飾る
• 番号付きポイントカード（card-point）: 左に大きな斜体番号の白円、オレンジ見出しに本文
• 番号写真帯（photo-number-band）: 青半透明を重ねた写真に白の大数字とコピー
• 青リンクカード（card-link-blue）: 青の四角に白い細枠をずらして重ね、題と写真を中央に配置
• 円形CTA（button-circle-cta）: 黄緑の正円に2行の誘導文字と肉球
• カルーセル矢印（carousel-arrow）: 黒い正円に白三角
• 斜め告知札（tag-ribbon）: 黒帯とオレンジ札を傾けて重ねた吹き出し

Do's and Don'ts

Do - 3原色の面を大胆に切り替える - マスコットを各セクションに登場させる - 見出しは極太ドット書体で白抜き - カードには濃い影で立体感を出す - 強調語はオレンジ文字にする

Don't - 淡いパステルや中間色の地を使わない - 細い明朝体を見出しに使わない - グラデーション背景にしない - 影のない平板なカードにしない - 余白を詰めて本文を詰め込まない

Page Structure

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

1. ファーストビュー（キャラとコピーで印象付ける）: オレンジ地に極太白文字と大きなキャラ群、黒のドット装飾
2. 動画（紹介動画へ誘導）: 青地にキャラのアップ、再生ボタンと斜め告知札
3. コンセプト（学部の想いを伝える）: オレンジ地に大見出しと短い改行の本文
4. 地域性（立地の強みを示す）: 白地に見出しとギザ円バッジ、モノクロ街並み写真にキャラ
5. キャラ紹介（マスコットの設定を語る）: 青地に白の中央揃え本文、左右にキャラ
6. 悩みの例（身近な課題を共感させる）: オレンジ地に白カードの横スクロールと黒丸矢印
7. 3つの強み（特長を整理）: 英字ドット見出しと番号付き白カード3枚
8. 大学の6ポイント（大学全体の強み）: 黄地に青み写真帯6本、大数字と白コピー
9. 関連リンク（詳細ページへ誘導）: 黄地に白枠ずらしの青カード4枚
10. 新校舎（新しい施設を見せる）: 全幅の外観パースにギザ円バッジ
11. オープンキャンパス（来場を促すCTA）: 青紫の見出しタブ、写真帯、黄緑円ボタン
12. アクセス（所要時間と地図）: 青地に白文字、数字を白円で強調、地図埋め込み
13. フッター（SNSと所在地）: 白地にSNS丸アイコン、黒地に白ロゴと住所

Imagery

• 黒の太線で描いた白いクマ系キャラ。力士風の髷とまわしを着せる
• キャラは眉が太く手のひらを広げたポーズで迫力を出す
• 悩みカードはフラットな単色アイコン
• 人物写真は笑顔の学生を切り抜きか帯状で使う
• 街並みはモノクロ写真にしてキャラを際立たせる
• 肉球アイコンを装飾として散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはFVで見出しを右上、キャラ3体を横並びにする
• PCは悩みカードを横に多く並べる
• PCの6ポイントは2列3段、青カードは2列2段
• PCは地域セクションの見出しを縦書きにする
• PCでも色面は全幅、コンテンツは中央60%程度

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