DESIGN.md — 赤×黒×グレージュの資格スクール LP（Crimson Red Exam Prep School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 信頼・誠実、力強い・インパクト、情報量多め・訴求型
• キーワード: 深紅・黒帯見出し・グレージュ地・実績の数字・繰り返す CTA・タブ切替
• 地の質感: フラットな単色面。グラデーションは使わず、写真と図版で情報量を出す
• 形: 角丸 4〜8px の長方形が基本。斜めの淡いグレーの面と、ギザギザ円のバッジがアクセントになる
• 温度感: やや暖かい。赤とベージュグレーで、真面目さの中に熱意を出す

Colors

• 地はライトグレー・白・グレージュを、セクションごとに切り替えて区切る
• CTA・タブ・強調する見出し語・タグは、すべて同じ深紅にそろえる
• POINT 見出しは黒帯の上に白文字で、左端に赤い斜めのラベルを重ねる
• 数字や重要語は赤文字にし、本文の強調は黄色マーカーを使う
• 青はタグの枠線だけに使い、面には使わない
• 特典カードは淡いピンクの面に赤文字で見せる

Typography

• 見出しは太いゴシックで短く改行し、2 行に収める
• セクション見出しの上に、赤い短い横線と赤い英字ラベルを置く
• 合格率などの数字は大きな極太体にし、% は小さくする
• ボタンの短いラベルは「＼ ／」で挟み、主ラベルを大きくする
• 本文は 14px・行間 1.9 で読みやすさを確保する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。紹介アイコンは 3 列、CTA は 2 列に並べる
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 18px
• セクション見出しは左揃えにする
• コースはタブ＋赤枠のパネルで切り替える
• 2 つ目以降のコースは、赤いアコーディオンバーを縦に並べる
• 特典などの白いカードはグレージュの地に浮かべる
• ページ下部に 2 分割の固定 CTA バーを置く

Elevation & Depth

• 影はほぼ使わず、地の色の差で層を作る
• 図版の写真だけに軽いドロップシャドウを付ける
• 固定 CTA バーは半透明の赤で重ねる

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの長方形。講師の顔は四角いタイルに並べ、紹介アイコンは丸く切り抜く
• セクション境界: 直線で地の色を切り替える。FV だけ淡いグレーの斜めの面を敷く
• CTA は角丸 6px 前後の長方形にし、右端に「>」を付ける
• 対象を示すタグ（赤）と小さな説明ボタンはピル型にする
• 特典番号はギザギザの円形バッジにする
• POINT ラベルは平行四辺形の赤いラベルにする

Components

• 主 CTA ボタン（button-primary）: 左に白丸アイコン、右に「>」。上に小さな前置き、下に大きなラベルを置く
• ページ内リンクボタン（anchor-nav）: 白地に赤枠・赤文字。下向きの矢印付きで 3 つ並べる
• セクション見出し（section-heading）: 赤い横線と英字ラベルの下に、黒の太字の見出しを置く
• POINT 黒帯見出し（point-bar）: 黒帯に白文字。左に赤い斜めの POINT 番号ラベルを付ける
• コース切替タブ（course-tabs）: 赤いタブを 3 つ並べる。選択中は濃い赤にし、下に三角を付ける
• 対象タグ（tag-outline）: 白地に青い細枠・青文字の小さなタグ
• 特典カード（benefit-card）: 淡いピンクの面に、赤いギザギザ番号バッジ・写真・赤文字の特典名・「>」を置く
• 体験談カード（review-card）: 白いカードに写真・太字タイトル・黄色マーカー付きの本文。横スライダーで並べる
• 下部固定 CTA（sticky-cta）: 画面下に固定する赤いボタン 2 つ（資料請求と説明会）

Do's and Don'ts

Do - CTA は FV・各コース・最終セクションで同じデザインのまま繰り返す - 実績の数字は月桂樹の装飾と一緒に大きく見せる - セクションごとに地の色を切り替えてリズムを作る - 注釈を ※ で必ず数字の近くに添える - 強調は赤文字と黄色マーカーの 2 種類に限る

Don't - ボタンを大きく丸めすぎない（主 CTA はピル型にしない） - グラデーションやネオン色を使わない - 赤以外の色を CTA に使わない - 明朝体を使わない - 余白を取りすぎて情報密度を下げない

Page Structure

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

1. ファーストビュー（講座の種類と実績を一目で伝える）: 制服姿の人物写真を縦長に 4 枚並べ、極太の見出し、赤帯のサブコピー、合格率のバッジ、CTA 2 つ、ページ内リンク 3 つを置く
2. コース紹介（志望先に合うコースを選ばせる）: 黒いピル型の年度見出し＋赤タブ＋赤枠パネル。各コースに対象タグ・説明・CTA を付ける
3. 選ばれる理由（スクールの強みを伝える）: 白地。帯のラベル付きキャッチ画像、学習プランの図版、講師の顔写真タイル、実績の赤丸バッジ
4. 合格できる理由（学習法を 4 つの POINT で説明する）: グレー地に POINT 黒帯・図版・本文を縦に並べる
5. 説明会案内（迷っている人を説明会へ誘導する）: グレージュ地の白いカード。悩みのイラストと、丸い紹介アイコン 3 つを置く
6. 特典（今申し込む理由をつくる）: 番号バッジ付きのピンクの特典カード 3 枚と、ガイドブックのバナー
7. レビュー（評価と体験談で信頼を得る）: 総合評価と星の棒グラフ、属性タブ付きの体験談スライダー
8. CTA（最終的な申込み）: 白いカードに CTA を縦 2 つ置き、特典を再掲する
9. フッター（電話での問い合わせとリンク）: グレー地に赤い大きな電話番号、テキストリンク、固定 CTA バー

Imagery

• 人物は白背景や明るいオフィスで、清潔感のあるスーツ・制服姿を撮る
• 学習シーンは自然光のもとで、講師と受講生が向き合う写真にする
• 図版はフラットなイラスト（本の山や矢印）に手書き風の文字を添える
• グラフは赤とグレーの棒グラフに、吹き出しで数字を載せる
• 悩みは赤とグレーの線画イラストで描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 860px 幅のコンテナに収める
• FV は人物写真の横並びの下に、見出しと CTA を左右に分けて配置する
• POINT は図版と本文の 2 カラムにする
• 体験談はスライダーをやめ、3 カラムで並べる
• 固定 CTA は右下に縦並びのボタンとして置く

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