DESIGN.md — 黄×黒×ティールの英語コーチングLP（Bold Yellow Black Teal Online Coaching LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 力強い・インパクト、情報量多め・訴求型、信頼・誠実、クール・先進的
• キーワード: 黄黒コントラスト・ティール差し色・白カード・フラットイラスト・料金表・反復CTA
• 地の質感: フラットな単色面。黄帯の背景にうっすら英文タイポを敷き、淡い影でカードを浮かせる
• 形: 角丸8〜12pxのカードとピル型CTA。帯の境界は斜めカットや下向き三角
• 温度感: 明るく温かい黄に墨黒を合わせ、ティールで涼しさを加える

Colors

• 黄・黒・生成り・ティールの帯を交互に並べ、セクションの切り替わりをはっきり見せる
• 料金と課題提起は黒地にし、上に白や黄のカードを重ねる
• CTAの帯はティール地に白カード、ボタン部分はティール塗りにする
• 価格や数字は黄、割引額は赤で強調する
• 白文字の見出しには黒い帯の座布団を敷き、黄地でも読めるようにする
• 表の見出し行は黄、強調行は淡ティールにする
• button-primary は文字 #FFFFFF × 背景 #3CB3BC のコントラスト比が 2.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#2B8188、4.57:1）を使う。

Typography

• 見出しは太いゴシックで中央揃え。下に黄の短い線を引く
• 大事な語句には黄色のマーカー下線を引く
• 数字は大きくして単位は小さく添える
• 英字の小さいサブ見出しを和文見出しの下に置く
• 注釈は※付きの10px・グレー文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード内は 2 列グリッドも使う
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは画面幅の約92%で、中央に置いて影をつける
• 比較は表形式。左列を項目名にする
• CTAブロックを2〜3セクションごとに入れる
• ステップ説明は番号見出し→写真→説明文の順で縦に並べる
• スライダーは左右に次のカードが少し見えるようにする

Elevation & Depth

• 白カードに淡い影 0 4px 12px rgba(0,0,0,.08)
• CTAカードはやや強めの影で浮かせる
• 黒地の上のカードは影なしで、黄の枠線をつける

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形。講師は上半身を縦長に切り抜く
• セクション境界: 斜めカット、下向き三角、直線の帯の切り替え
• CTAはピル型にし、右端に丸い矢印アイコンを置く
• バッジはピル型または角丸の小さなラベルにする
• FAQ行は角丸の白バーにし、右に黄の丸い＋ボタンを置く
• 料金カードは黄の太い枠で囲む

Components

• 主CTAボタン（button-primary）: ピル型。左に白地の小さなコピー、右にティール地に白文字と矢印
• CTAカード（cta-card）: ティール帯の上に置く白カード。上に「＼ ／」で囲んだリード文、黄の大文字で特典語を入れ、右に丸矢印
• 特典告知バー（bonus-pill）: 黒地に黄枠のピル型バー。左に資料サムネイルを置く
• 座布団見出し（heading-band）: 黒い帯に白文字。黄地の上に置く
• 料金カード（price-card）: 黄枠の白カード。ティールのバッジと巨大な黄色の価格数字、青い丸の入会金バッジ
• 料金比較表（price-table）: 黄の見出し行、生成りの項目列、淡ティールの割引行で、割引額は赤
• 特長番号カード（feature-number）: 白カードの左上に黄色の細い大きな数字、その横に太い見出し
• FAQ行（faq-item）: 白の角丸バー。黄色のQ、右に黄の＋丸ボタン
• ステップ見出し（step-label）: 黄色の大きなSTEP番号と太字のタイトル。下に黄の線と三角

Do's and Don'ts

Do - 黄・黒・ティールの3色を中心にし、帯を交互に切り替える - 数字の実績は大きく黄で見せ、単位は小さくする - CTAは同じデザインで何度も繰り返す - 人物イラストはフラットな青系の服で統一する - 表や比較は罫線と色の行ではっきり区切る

Don't - パステル調やグラデーションの多用はしない - 黄地に細い白文字を直接置かない - セリフ体を本文に使わない - CTAの色をティール以外にしない - 余白を詰めすぎてカードの影を消さない

Page Structure

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

1. ファーストビュー（価値を一言で伝え、相談へ誘導する）: 黄地に黒座布団の大見出し。シーン写真の横スライダーとバッジ、CTA、目次ボックス
2. 悩みの提起（学習者の課題を見える化する）: 黒地の白カードに階段イラスト。黒い吹き出しで悩みを並べる
3. 解決宣言（課題をすべて解決すると示す）: 斜めに切った黄帯に英文タイポを敷き、黒座布団の見出しを置く
4. 3つの特長（メソッドの強みを説明する）: 生成り地に番号付きの白カード。図解、比較、イラスト一覧を入れる
5. 料金プラン（価格と内容を明示する）: 黒地に料金カード、技能カード、比較表、プラン内訳表
6. 割引・保証（申込の後押しをする）: 黄ヘッダーの白カードに赤字の割引額。返金保証バナー
7. CTA（無料相談の予約）: ティール帯に白CTAカードと特典告知バー
8. カリキュラム・スケジュール（個別最適な学習を具体的に見せる）: 黄地の白カードに4技能グリッド、例の人物プロフィール、週間表、成長曲線グラフ
9. 実績（成果と信頼を示す）: 受講生カードとスコア棒グラフ、金メダルの満足度、導入企業ロゴ
10. 講師紹介（講師の質を伝える）: 講師写真カードの横スライダー。黄地に数値実績の白カード
11. 申込の流れ（手順の不安をなくす）: STEP番号と写真を縦に3つ並べる
12. よくある質問（疑問を解消する）: 生成り地にアコーディオンの白バー
13. フッター（会社情報とSNS誘導）: 黒地にロゴ、リンク、SNSバナー

Imagery

• ビジネスパーソンの実写写真は明るいオフィスや自宅で、自然光で撮る
• 人物イラストはフラットで線なし。青い服、黒髪、PCとヘッドセット
• アイコンは生成りの丸の中に単色イラストを置く
• 講師は白背景のスーツ姿で、上半身の笑顔
• 背景には大きな英文タイポを淡く敷く装飾を入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央の固定幅（約1000px）にカードを並べ、背景の帯は全幅にする
• PCのFVは写真スライダーを5枚並びにし、ヘッダーにナビとCTAボタンを置く
• 特長カード内の図解はPCで2カラムにする
• 実績カードはPCで3列、割引カードは2列にする
• ステップは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 行書くと起動時に読み込まれる。