DESIGN.md — 虹色見出し×黒板緑のキャラ講義 LP（Rainbow Anime Character Lecture LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: ポップ・元気、かわいい、情報量多め・訴求型
• キーワード: キャラクター講師・虹色グラデ・黒板グリーン・動画埋め込み・テーマ色の色分け・半透明パネル
• 地の質感: 背景イラストに白の半透明パネルを重ねる。黒板風の深緑、水彩の色ドット、水色ストライプで質感を出す
• 形: 角丸カード、ピル型ボタン、正円のアイコン、斜めのスラッシュ線や円の装飾
• 温度感: 深緑の落ち着いた地に、原色に近い多色を差したにぎやかで温かい印象

Colors

• 地の色はセクションごとに切り替える：オフホワイト → 黒板グリーン → 水彩柄 → 水色ストライプ → 写真＋白パネル
• キャラクターごとにテーマ色を 1 色決め、ラベル・タイトル文字・装飾線・円をその色でそろえる
• 大見出しは赤・橙・黄・緑・青・紫の虹色グラデ文字にする
• ボタンは役割で色を分ける：講義・過去回は赤、グッズは青、詳細はオレンジ、購入は朱色
• 深緑の上には白〜薄グレーの半透明パネルを置き、文字を読みやすくする
• フッターは黒帯に白文字
• section-heading は文字 #EC232B × 背景 #FEFEFE のコントラスト比が 4.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E9141D、4.54:1）を使う。
• speech-band は文字 #FEFEFE × 背景 #EC232B のコントラスト比が 4.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E9141D、4.54:1）を使う。
• button-primary は文字 #FEFEFE × 背景 #EC232B のコントラスト比が 4.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E9141D、4.54:1）を使う。
• button-ornate は文字 #FEFEFE × 背景 #F5A200 のコントラスト比が 2.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#A16A00、4.55:1）を使う。

Typography

• 見出しは極太ゴシックにし、1 文字ずつ色を変えた虹色にする
• 英字ラベルは白い枠の中に置き、和文見出しの上に重ねる
• 本文はほぼ中央揃えにし、行間を 2.0 と広く取る
• キャラ名は大きく、敬称や声優表記は小さくして差をつける
• セリフは赤い帯の上に白文字で縦書きにし、斜めに傾ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。講師アイコンだけ 5 列 × 2 段
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算）
• 講義 1 回分は「キャラ立ち絵＋右寄せラベルパネル」と「全幅の動画カード」を 1 組にする
• 講義の組の間は 80px 前後空けてリズムを作る
• 白パネルは左右 5% の余白を取り、背景イラストを見せる
• ボタンは幅 85〜90% で中央に置く

Elevation & Depth

• 白パネルは不透明度 80〜90% にし、影はごく弱くする
• ボタンには下方向に濃い色の 2〜3px のドロップ影を付け、立体的に見せる
• 見出しの枠は、色線の帯をずらして重ねたオフセット二重枠にする

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 講師アイコンは色リング付きの正円で切り抜く。立ち絵は背景を抜き、パネルからはみ出させる
• セクション境界: 直線で背景を切り替える。斜めの装飾は使わない
• ラベルは角丸 4px の小さな色ベタ
• パネルは角丸 10px
• オレンジ系ボタンは額縁風のアール飾り付き
• スラッシュ線・円の輪郭・ドットをテーマ色で散らす

Components

• 二重枠の虹色見出し（section-heading）: 上に英字ラベルの小枠、下に和文見出しの大枠を置く。枠線は黄・水色・緑をずらして重ねる
• 講師アイコン（teacher-icon）: テーマ色のリングで囲んだ円形の顔アイコン。選択中は塗りの色を濃くする
• 縦書きセリフ帯（speech-band）: テーマ色の帯に白文字の縦書きセリフ。斜めに傾けて立ち絵に重ねる
• 講義ラベルパネル（lesson-label）: 半透明グレーのパネルに、回数ラベル（色ベタ）、テーマ色のタイトル、範囲の小文字を中央揃えで並べる
• 動画サムネイルカード（video-card）: 全幅の 16:9 動画埋め込み。サムネイルにキャラとテーマ色の球体を入れる
• 赤ピルボタン（button-primary）: 白文字に再生アイコンを添えたピル型。下に濃い色の影を付ける
• 額縁風ボタン（button-ornate）: オレンジまたは朱色の面に、内側の装飾線と白文字を入れる
• 青ピルボタン（button-secondary）: グッズ購入用。右端に丸い矢印アイコンを置く
• 商品名タグ（item-tag）: 商品画像の左上に青いピル型の名札を付ける。新商品には赤い円の NEW バッジ
• 唐草風の区切り飾り（ornament-divider）: 見出しの下に置く、オレンジの細い装飾ライン

Do's and Don'ts

Do - キャラクターごとにテーマ色を決め、ラベル・文字・装飾を同じ色にそろえる - 講義は「立ち絵＋ラベル」と「動画」の 1 組を同じ型で繰り返す - 大見出しには虹色グラデとオフセット二重枠を使う - 背景イラストの上には半透明の白パネルを重ねて可読性を確保する - スラッシュ線や円の装飾を散らし、動きを出す

Don't - 見出しを単色の細いゴシックにしない - 黒板グリーンの地に濃い文字を直接置かない - キャラのテーマ色を混ぜて使わない - 角張った四角ボタンを使わない - 余白を詰めて講義の組同士をくっつけない

Page Structure

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

1. ファーストビュー（キャラ全員と企画タイトルで世界観を伝える）: 街並み背景に集合イラストを全面に置き、上部に虹色の手書き風ロゴと放射線の飾りを入れる
2. ストーリー（企画の設定を紹介する）: 俯瞰の街のイラストに白い半透明パネルを重ね、中央揃えの本文を置く
3. 講師紹介（キャラと声優を紹介し、ボイス視聴へ誘導する）: 円形アイコンの選択タブ、テーマ色の円を背景にした立ち絵、縦書きセリフ帯、応援メッセージ、赤ボタンの順に並べる
4. 特別講義一覧（学習動画を回ごとに見せる）: 黒板グリーンの地に、ラベルパネルと動画カードの組を 10 回分繰り返す
5. 過去回への誘導（前作の視聴を促す）: 水彩ドットの背景にキャラと赤ボタン、赤いドットの飾りを置く
6. クレジット（制作協力者を紹介する）: 手書き風の英字、ペンのイラスト、SNS の水色ボタン
7. グッズ紹介（関連商品の購入を促す）: 水色ストライプ地に虹色見出し、斜線で挟んだコピー、商品画像と青タグ、青ボタン
8. 資格説明・テキスト販売（本来の資格への導線を作る）: 光の差す写真背景に大きな白パネルを置き、見出し・飾り線・本文・額縁ボタンを 2 段で並べる
9. フッター（法的リンクと著作権を表示する）: 白地に下線付きのリンク、黒帯に白文字の著作権表記

Imagery

• 女性向けゲーム風のアニメ調男性キャラを、全身の立ち絵で背景を抜いて使う
• キャラごとに髪や服の色がテーマ色と一致するようにする
• 背景は街並み・学園・教室など明るいアニメ背景をぼかして使う
• テーマ色の発光する球体、円の輪郭、斜線、ドットを装飾として散らす
• 水彩の色ドットやパステルのストライプで、軽い地の柄を作る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では講義の組を「左にラベル＋立ち絵、右に動画」の 2 カラムにする
• PC の講師紹介は横長の帯にし、セリフ帯を右側に置く
• PC のファーストビューは横長の集合絵にし、ロゴを中央下に置く
• PC の白パネルは幅 60〜70% で中央に置く
• PC のグッズ紹介は商品を横 2 列に並べる

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