DESIGN.md — 生成り×紺×朱×黄のレトロポップな講座 LP（Playful Retro Pop Workshop School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: ポップ・元気、レトロ、親しみ・手作り感
• キーワード: 3色刷り風・波形の帯・不定形ブロブ・幾何学の散らし・ゆるい手描き感・字間広めの太ゴシック
• 地の質感: 生成りの紙のようなフラットな地。グラデーションは使わず、版画や印刷物のような質感にする。
• 形: 波線の帯、ぐにゃっとした不定形、ピル型のラベル、太い角丸の枠、点線の枠。
• 温度感: 温かくにぎやか。ただし紺が多いので落ち着きも残る。

Colors

• 使う色は生成り・紺・朱・黄の4色に限る。中間色や灰色の文字は使わない。
• 本文と見出しは紺が基本。強調語だけを朱の文字にするか、朱の地に白文字のマーカーにする。
• セクションの地は、生成り・黄の全面・朱の波帯・紺の波帯を交互に使って区切る。
• 主 CTA は朱の地に白文字。黒の細い枠と、右下にずらした紺の影を付ける。
• 濃紺パネルの中のラベルは生成りのピル型にし、文字は紺にする。
• 黄の地の上では、ブロブを紺、バッジを朱にする。
• button-primary は文字 #F4F4EA × 背景 #FE551E のコントラスト比が 2.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D13401、4.51:1）を使う。
• pill-badge は文字 #F4F4EA × 背景 #FF541E のコントラスト比が 2.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#D03200、4.59:1）を使う。

Typography

• 全体を極太のゴシックで組み、細い書体は使わない。
• 字間は0.05〜0.12emと広めにして、ゆったりしたレトロ感を出す。
• 見出しは中央揃え。本文は左揃えで短い行にする。
• 数字は大きくして、前後の『第』『回』は小さく組む。
• 強調は朱の文字か、朱の地に白文字のマーカーで行う。下線や太字の追加はしない。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カリキュラムはブロブと文章を左右交互に配置
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• セクション見出しは画面幅いっぱいの波形の帯にする。
• カリキュラムは、ブロブ（回数）とテキストの左右を回ごとに入れ替える。
• 左右の余白に幾何学パーツを不規則に散らす。本文には重ねない。
• 開催概要は角丸の濃紺パネルにし、左にラベル、右に内容の2列で組む。
• 大きなまとまりの間には白い細線（約4px）を引いて区切る。

Elevation & Depth

• 影はほぼ使わずフラットにする。
• CTA だけ、右下に約6pxずらした紺の塗りの影（ぼかしなし）を付ける。

Shapes

• 角丸: 小 8px ／ 中 20px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 人物写真は紺の太い枠を付けた正円で切り抜く
• セクション境界: 波形（うねり）の帯や、上下の縁が波打つ面で区切る
• ブロブは手でちぎったような不定形にする。
• 点線の枠は角丸にし、白または紺の丸ドットで描く。
• 吹き出しは手描き風のゆがんだ黄色い面に、短いしっぽを付ける。
• ジグザグ・L字・ドットの列・斜めの太線を装飾に使う。

Components

• 申込ボタン（button-primary）: 朱のピル型。黒の細い枠と紺のずらし影を付け、文字の頭に▶を置く。
• 波形の帯見出し（wave-heading-band）: 画面幅いっぱいの紺または朱のうねる帯に、白抜きの見出しを載せる。
• チェックの悩みリスト（check-list）: 紺の線で描いたチェックボックスの横に、2行程度の悩みを書く。一部の語を朱にする。
• 回数ブロブ（blob-number）: 紺の不定形の中に『第N回』を白で入れる。朱のブロブを重ねてもよい。
• 講師・日時のバッジ（pill-badge）: 朱の小さなピル型に白文字。横に朱の文字で値を書く。
• 点線の枠（dotted-box）: 朱や紺の地の上に置く、白いドットの角丸枠。中に箇条書きを入れる。
• 開催概要パネル（info-panel）: 角丸の濃紺パネル。左に生成りのピル型ラベル、右に白文字を置き、行の間を細線で区切る。
• Q&A の吹き出し（faq-bubble）: 大きな紺の『Q』と番号の下に、黄色い手描き吹き出しで質問を書く。回答は線画の『A』を添える。
• 講師の円形写真（profile-circle）: 紺の太枠で正円に切り抜いた写真。横に、ルビ付きの講師名とスポットライトのイラストを置く。

Do's and Don'ts

Do - 4色だけを使い、黄・朱・紺の面を交互に入れてリズムを作る。 - 左右の余白に、ブロブ・ジグザグ・ドットなどの幾何学パーツを散らす。 - 見出しの帯や枠は波線・不定形で、少しゆがませる。 - 文字は極太のゴシックにし、字間を広く取る。

Don't - グラデーション・ぼかした影・写実的な質感は使わない。 - 細い明朝体や、灰色の本文は使わない。 - 幾何学パーツを本文の上に重ねて、読みにくくしない。 - 直線と四角だけの硬いレイアウトにしない。

Page Structure

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

1. ファーストビュー（世界観とスクール名を伝える）: 生成りの地。中央にスポットライト型のロゴイラストを置き、右上に縦書きのコピー、周りに幾何学パーツを散らす。
2. 悩みの提起（対象者に共感してもらう）: 紺の波帯の見出しの下に、チェックの悩みリストを6つ並べる。
3. スクールの紹介（どんな場かを伝える）: 朱の波帯の見出し、対象者の短文3行、悩む人のイラスト3人、紺ブロブの中の問いかけを順に置く。
4. 導入文と概要（価値と基本情報を示す）: 朱マーカーで強調した本文の下に、紺の角丸枠の簡易概要と申込ボタンを置く。
5. カリキュラム（全回の流れを見せる）: 黄の全面の地。回数ブロブとテキストを左右交互に配置する。
6. ポイント（得られるものを示す）: スポットライトのイラストで見出しを作り、本文の下に紺のピル型で項目を5つ並べる。
7. おすすめの人／合わない人（向き不向きをはっきりさせる）: 上下が波打つ朱と紺の面に、点線の枠で箇条書きを入れる。
8. 講師紹介（講師を見せて信頼を得る）: 円形の写真、名前、プロフィール、ひとことを置き、講師の間を紺の波線で区切る。
9. スペシャルゲスト（特別ゲストで期待感を上げる）: 朱の吹き出し型の見出しに、円形の写真とプロフィールを添える。
10. 開催概要・注意事項（詳細条件を伝える）: 濃紺の角丸パネルに、ラベルと内容の2列で組む。
11. よくある質問（不安を解消する）: 紺の波帯の見出しの下に、黄色い吹き出しの Q&A を5つ置く。
12. CTA（申込へ誘導する）: 余白を広く取り、中央に申込ボタンを1つ置く。

Imagery

• イラストは紺・朱・黄だけで描く平面的なものにし、ざらっとした印刷調の質感を少し加える。
• 人物は太い紺の線で描いた、シンプルで表情のあるイラストにする。
• モチーフとして、UFO状の物体が出すスポットライトを繰り返し使う。
• 装飾は、ブロブ・ジグザグ・L字・ドットの列・斜めの帯・波線で作る。
• 写真は人物の顔写真だけを使い、円形に切り抜く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は本文の幅を約640pxに収めて中央に置き、波帯は画面幅いっぱいに伸ばす。
• PC では左右の余白に幾何学パーツを増やす。
• カリキュラムの左右交互の配置は PC でも保つ。
• 開催概要パネルの最大幅は約800pxにする。

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