DESIGN.md — 白地×マゼンタの手描き風デザインスクールLP（Playful Magenta Creative School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: シンプル・ミニマル、ポップ・元気、親しみ・手作り感、クール・先進的
• キーワード: 白地・マゼンタ英字見出し・片角丸写真・手書き吹き出し・線画イラスト・幾何学パーツ
• 地の質感: 基本はフラットな白。CTA 前だけクラフト紙のような粒状のベージュ地。フッターは南国の花の大きな柄
• 形: 写真は 1 つの角だけ大きく丸める。番号は細線の正円。ボタンはピル型。セクション境界は直線で、FV の下端のみ波形
• 温度感: やや暖かい。白とチャコールでクールに保ち、マゼンタとベージュで温かみを足す

Colors

• 地は白に統一する。ベージュ地は説明会への導線の 1 ブロックだけに使う
• 強調色はマゼンタ 1 色に絞る。英字見出し・番号・リンク・バッジ・主 CTA に使う
• 文字と線はチャコールの黒。サブボタンは黒地に白文字
• 黄・水色・ピーチは小さな装飾パーツだけに使い、面には広げない
• 注釈はグレーの小さい文字にする
• button-primary は文字 #FFFFFF × 背景 #E33193 のコントラスト比が 4.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DD1E87、4.56:1）を使う。
• button-outline は文字 #E0368F × 背景 #FFFFFF のコントラスト比が 4.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DD2485、4.5:1）を使う。

Typography

• セクション見出しは、細めの幾何学的な英字（マゼンタ）の下に小さな和文ラベルを置く 2 段組
• 項目番号は 01 形式のマゼンタ。その下に太字の見出しと短い横線を置く
• 本文は小さめにし、行間を広くとる
• 手書き書体は英文コピーや吹き出しなど、感情を伝える箇所だけに使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。アイコン一覧は 3 列、校舎紹介は 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真は左右の余白内いっぱいに置く
• 項目は番号→見出し→横線→本文→写真の順で縦に積む
• カリキュラムは左に円形の月数、右に本文のインデント構成
• コラム見出しは上下 2 本の罫線で挟み、線画の人物を罫線に乗せる

Elevation & Depth

• 影はほぼ使わず、フラットに保つ
• 校舎の写真カードだけ、右下に薄いグレーの面をずらして重ねる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 四角形の右上または左下など 1〜2 角だけを大きく丸める。人物は不定形の楕円で切り抜く
• セクション境界: 基本は直線。FV 下端だけ波形のカーブ
• 番号と月数は細い黒線の正円
• アイコンは薄グレーの円の中に線画を置く
• バッジはマゼンタのピル型

Components

• 主CTA（button-primary）: マゼンタ地に白文字、右端に矢印を付けたピル型ボタン
• 資料請求ボタン（button-outline）: 白地にマゼンタの枠線と文字のピル型ボタン
• もっと見るボタン（button-more）: 黒地に白文字と矢印のピル型ボタン
• 英字セクション見出し（section-heading）: 中央揃えのマゼンタ英字の下に小さな和文。PC では左右にマゼンタの細線を伸ばす
• コラム見出し帯（column-heading）: 上下の黒罫線の間に連番ラベルと見出しを置き、線画の人物を罫線に乗せる
• 月数サークル（month-circle）: 黒い細線の正円を縦に連ね、中に数字を入れる
• サポートアイコン（icon-tile）: 薄グレーの円に線画アイコンと 2 行のラベルを入れる
• 手書き吹き出し（speech-bubble）: 手描きの線で囲んだ吹き出しに手書き文字を入れ、写真のまわりに散らす
• ステップ（step-item）: マゼンタ線の円に STEP と番号を入れ、縦線でつなぐ。右に見出しと写真
• FAQ行（faq-row）: Q と質問文の右端に黒い角丸四角の＋。行は黒の罫線で区切る

Do's and Don'ts

Do - マゼンタは見出し・番号・CTA にだけ使い、全体の印象を締める - 写真は 1 つの角だけ大きく丸めて統一する - 手書きの吹き出しや線画の人物で、親しみやすさを足す - 白い余白をたっぷりとり、本文を小さく端正に組む - 小さな幾何学装飾（斜線の円・三角・チェック柄）を余白に散らす

Don't - マゼンタ以外の強い色を面として広く使わない - 写真の 4 つの角をすべて同じ角丸にしない - 濃い影やグラデーションのボタンにしない - 手書き書体を本文に使わない - ベージュ地を何度も繰り返さない

Page Structure

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

1. ファーストビュー（コース名と目指す姿を伝える）: 作業風景の写真の上に円形ロゴ、手書き風の強調語を入れたコピー、給付金を伝えるボックスを重ね、下端を波形にする
2. コンセプト（学びの理念を伝える）: 手書き英文の大きなコピー、短い本文、不定形に切り抜いた人物写真
3. コースの特長（4 つの強みを示す）: 番号・見出し・横線・本文・片角丸写真の組を繰り返す
4. サポート一覧（設備や支援をひと目で伝える）: コラム見出し帯の下に 3 列の円形アイコン、黒いもっと見るボタン
5. カリキュラム（月ごとの学習内容を示す）: 円形の月数を縦に連ね、本文・使用ツールのアイコン・写真を並べる
6. 作品紹介（成果物で実力を示す）: 黒い角丸パネルに作品画像を並べる
7. 受講者像（共感を呼ぶ）: 円形の集合写真のまわりに手書きの吹き出しを散らし、マーカーを引いたコピーを添える
8. スクールライフ（通学のイメージを伝える）: 写真スライダーに手描きの矢印とドットを付け、短い本文を添える
9. サポート詳細（支援を 1 つずつ説明する）: 左右に線を伸ばした小見出しで分類し、番号付きの項目と写真を並べる
10. キャリア支援（就職実績を示す）: 職種の羅列、就職先ロゴのグリッド、ピル型バッジ付きの支援項目
11. 説明会への流れ（申込みまでの不安をなくす）: クラフト紙地に手書き風の見出しと人物イラスト、縦線でつないだ 4 ステップ
12. よくある質問（疑問を解消する）: 罫線で区切ったアコーディオン
13. 校舎紹介（アクセス情報を伝える）: 2 列の写真カード、連絡先、住所、地図へのリンク
14. CTA・フッター（申込みへ誘導する）: 大きな花柄の地にアウトラインボタンと主 CTA、SNS アイコン

Imagery

• 写真は明るい自然光の教室・作業風景。PC に向かう受講生を主役にする
• 人物は笑顔や集中した表情。服の色はやわらかい色にする
• 線画は黒の単線。ゆるいタッチで黄色の服の人物を描く
• 装飾はマゼンタの斜線の円、黄色の三角、水色のチェック柄、波線
• フッターはピンク・ピーチ・クリームの大きな花や葉の柄
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 70% 幅のコンテナ
• PC の特長は写真と本文の 2 列を左右交互に配置する
• サポート詳細は写真を小さくし、横並びのリスト形式にする
• アイコン一覧は PC で 5 列
• ステップは PC で横長の行にし、写真を右に寄せる
• PC は上部固定の白いヘッダーにナビを横並びで置く

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