DESIGN.md — 空色グラデーションの資格スクール LP（Sky Blue Gradient Coaching School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 清潔・爽やか、信頼・誠実、情報量多め・訴求型
• キーワード: 空色グラデーション・白カード・青帯マーカー見出し・手書き英字・オレンジCTA・大きな透かし英字
• 地の質感: フラットな面に、薄い透かし英字と斜めのカットを重ねる。写真は明るく自然光。
• 形: 角丸 8〜12px のカード、斜めに切ったセクション境界、円形の番号バッジ
• 温度感: 爽やかで少しクール。人物写真とオレンジ CTA で温かみを足す。

Colors

• 外側の背景は、上の濃い青から下の淡い水色へ段階的に明るくする。
• 本文は白か淡い水色のカード・カラムの上に置く。
• 強調語には青い帯を敷き、白抜き文字にする。
• オレンジは CTA ボタンだけに使う。
• 濃紺セクションは動画や比較などの山場に限り、ラベルは黄色にする。
• LINE の緑は最下部の登録導線だけに使う。
• button-primary は文字 #FEFFFF × 背景 #E47C2C のコントラスト比が 2.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B65C17、4.63:1）を使う。

Typography

• 見出しは太字ゴシックで 2〜4 行に改行し、左寄せを基本にする。
• キーワードは青い帯の白抜き文字か、一段大きいサイズで強調する。
• 背景に大きな欧文の透かし（白・不透明度 30% 程度）を入れる。
• POINT・VIDEO などの英字ラベルは字間を広げた小さめのサンセリフで書く。
• 写真の角に手書き風の英字を斜めに重ねる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC も中央に 375px 幅相当のカラムを置き、左右は背景にする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• カードは左右 16px の余白を取り、縦に積む。
• 体験談は横スクロールのカルーセルにする。
• 3 つの特長は番号付きの白カードを縦に並べる。
• 比較は『自社/他社』の 2 カラムの小さなカードにする。
• CTA はファーストビュー直下・中盤・最後の 3 回以上置く。

Elevation & Depth

• カードには淡い影（0 2px 8px rgba(0,60,120,0.1)）をつける。
• CTA ボタンは下に濃いオレンジの影をつけ、押せる立体感を出す。
• 濃紺セクションは影なしのフラットにする。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸 8px の長方形。人物写真は丸く切り抜く。
• セクション境界: 斜めのカットと、角丸の濃紺ブロック
• CTA は角丸 6px 程度の横長ボタンにし、左に白丸の『無料』バッジをつける。
• 番号は円形のバッジで青地に白数字にする。
• 帯マーカーは角丸なしの長方形にする。

Components

• 無料体験 CTA（button-primary）: 上に吹き出しの小ラベルを置き、左に円形の『無料』バッジ、右に矢印をつけたオレンジのボタン
• 青帯マーカー見出し（heading-marker）: 強調語を青い長方形の帯に白抜き文字で載せる
• 番号付き特長カード（number-feature-card）: 上に円形の番号、その下に小見出し・青い大見出し・写真。手書き英字を添える
• 体験談カード（testimonial-card）: 上部に写真、左下に青い肩書きタブ、太字の成果見出し、本文、『続きを読む』
• 濃紺ポイントブロック（dark-point-block）: 黄色の POINT ラベルと白い見出しを置き、中に白カードを並べる角丸の濃紺ブロック
• 自社/他社比較カード（compare-card）: 淡い水色の自社カードと、グレーの他社カードを左右に並べる
• サポート内容タグ（tag-chip）: 淡い水色地の小さな四角いチップを 2 列で並べる
• FAQ アコーディオン（faq-item）: 円形の Q アイコンと太字の質問を置き、右端に＋をつける

Do's and Don'ts

Do - 外側の背景は、上から下へ青→水色のグラデーションにする。 - 見出しのキーワードには必ず青帯マーカーか青文字を使う。 - 人物写真は明るい自然光で笑顔のものを使う。 - 大きな欧文の透かしでセクションの切れ目を示す。 - CTA は同じデザインで繰り返し配置する。

Don't - オレンジを CTA 以外に使わない。 - 暗いトーンや彩度の低い写真を使わない。 - 明朝体や丸ゴシックを見出しに混ぜない。 - カラムを広げて複雑な多段組にしない。 - 濃紺セクションを連続させない。

Page Structure

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

1. ファーストビュー（未経験から目指せることを打ち出す）: 空を背景にした女性写真に、太い大見出し・縦書きコピー・円形バッジを重ね、下に CTA を置く
2. 受講生の変化（人生が変わった実例を示す）: 丸い顔写真付きのカードを横スクロールで並べる
3. 特長 3 点（プログラムの柱を伝える）: 青い面の上に、番号付きの白カードを 3 枚縦に並べる
4. 講師の実績（権威性を示す）: 写真 2 枚の横スクロールとキャプション
5. こんな方におすすめ（対象者の悩みに共感する）: 青帯の見出しと、悩みを 4 つ縦に並べたリスト。人物写真をフェードで重ねる
6. 収入実例（成果を数字で示す）: 顔写真と太字の金額見出しを置いたカード
7. 疑問への回答・独自サポート（不安を解消し差別化する）: Q の透かし、キーワードバッジ、タグチップ、POINT 01〜03 のアイコン付きカード
8. 動画紹介（代表者の人柄を伝える）: 濃紺ブロックの中に動画サムネイルと CTA
9. マンツーマンの理由（個別指導の価値を伝える）: 淡い水色のカードに、グラフ・タグ・チャット画面を入れる
10. 学びの効果・オンライン受講（得られる変化と受講の手軽さを示す）: 縦書きで変化を並べ、写真と世界地図のイラストを添える
11. 受講生の声（詳しい体験談で信頼を得る）: 写真付きの縦長カードを 4 枚、活動実績の画像を添えて並べる
12. ロードマップ・他社比較（流れと違いを見せる）: STEP の円バッジによるインタビューと、濃紺ブロック内の比較カード
13. 代表紹介（信頼を高める）: 青いグラデーションの面に写真カルーセル、明朝の氏名、経歴の白ラベル
14. FAQ・最終 CTA（最後の後押しをする）: アコーディオンの FAQ、オレンジ CTA、LINE の緑ボタン

Imagery

• 自然光の明るい室内や屋外で撮った、笑顔の人物写真を使う。
• ノート PC・オンライン面談のシーンで、働く様子を見せる。
• 写真の角に白や紺の手書き英字を斜めに重ねる。
• アイコンは青・オレンジ系のフラットなイラストにする。
• 背景に大きな欧文ロゴの透かしを白で入れる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は 375px 幅前後の中央カラムを固定し、左右をグラデーション背景にする。
• PC のファーストビューでは、左に目次ナビと CTA、右に装飾カードを置く。
• SP はカラムを全幅にし、左右 16px の余白を取る。
• SP の横スクロールカードでは、次のカードを端に少し見せる。

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