DESIGN.md — 紺×くすみ青の英語コーチング LP（Navy Slate Coaching Service LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 信頼・誠実、クール・先進的、情報量多め・訴求型
• キーワード: 濃紺・スレートブルー・白カード・斜めカット・赤 CTA・金メダル
• 地の質感: フラットな面が中心。帯の端に斜めストライプのグラフィックや薄いグリッド背景をあしらう
• 形: 角丸はほぼ使わない。平行四辺形の見出しタブ、角の小さい長方形カード、円形の写真切り抜き
• 温度感: 寒色が主体のクールなトーン。赤と金の差し色で温度を足す

Colors

• 地色は白、淡い青グレー、スレートブルー、濃紺を帯で切り替え、セクションの区切りを色で見せる
• 特長のブロックは濃紺の番号見出し帯とスレートブルーの地を交互に置き、上に白カードを載せる
• 主 CTA は赤一色に統一し、濃紺の帯の上に置いて目立たせる
• 金は実績・割引・キャンペーンだけに使い、限定感を出す
• LINE への導線だけ緑を使い、他の CTA とは分ける
• 悩みの文中のキーワードは赤文字にし、ほかの文字は濃紺〜黒に揃える
• button-line は文字 #FFFFFF × 背景 #0CBA2C のコントラスト比が 2.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#098820、4.61:1）を使う。

Typography

• セクションの大見出しと特長のタイトルは明朝、ラベル・本文・ボタンはゴシックにする
• 番号・料金・実績値は太い欧文の大きな数字にし、単位は小さく添える
• 見出しの上に、＼／で挟んだ短い小見出しを置く
• セクションの背後に、薄い色の大きな英字を透かしで置く
• 料金では定価に取り消し線を引いて小さくし、割引後の価格を最大サイズで見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード内は画像と文字を縦に積む
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは画面幅いっぱいの色帯にし、白カードを左右 5% の余白で中央に置く
• 特長は番号見出し→白カード 2 枚の順で 3 回繰り返す
• カード内ではタイトル、灰青のチェックリスト枠、画像の順に並べる
• CTA の帯は人物写真と特典 4 項目を並べ、その下に赤ボタンを置いて途中に繰り返し挟む
• 料金カードは SP では縦に積み、PC では 3 列に並べる

Elevation & Depth

• カードはほぼフラット。白カードを色の付いた地に載せて立体感を出す
• カウンセリング内容のカードだけに、ごく薄い影（0 2px 8px rgba(0,0,0,.08)）を付ける
• スマホのモックアップ画像には柔らかい落ち影を付ける

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。
• 写真の切り抜き: 人物は円形か角のある長方形で切り抜く。講師はカード状の縦長写真にする
• セクション境界: 直線で色帯を切り替える。見出しタブは平行四辺形にし、帯の端に斜めストライプを添える
• CTA だけをピル型にし、ほかの部品は角をほぼ立てる
• 見出しタブは紺の平行四辺形にし、後ろに一段ずらした影の形を重ねる
• 実績は六角形か金の月桂樹メダルの形で見せる

Components

• 赤の主 CTA（button-primary）: 赤のピル型ボタン。文字の後ろに白い▶を付け、上に＼割引情報／の小見出しを添える
• 斜めカットの見出しタブ（heading-tab）: 紺の平行四辺形に白文字で 2 行の見出しを入れ、背後に濃い影の形をずらして重ねる
• 番号付きの特長見出し（feature-number）: 斜体の大きな番号（01〜03）の横に、小さい補足と明朝の見出しを置く。紺か青の帯の上に配置する
• チェックリスト付きの白カード（check-card）: 白カードに小見出し・明朝タイトル・灰青の枠に入れたチェック 3 行・画像を並べる
• 悩みのカード（worry-card）: 白い小さなカードの上端に紺の丸いチェックアイコンを載せ、短い悩みの文を書き、キーワードを赤にする
• お客様の声の吹き出し（voice-bubble）: 円形の人物写真の横に白い吹き出しを置き、受講後の変化を書く。左右交互に配置する
• 料金カード（price-card）: 紺の見出し帯の下に、取り消し線付きの定価、金の給付額ラベル、大きな割引後価格を並べる
• 実績メダル（achievement-medal）: 金の月桂樹と大きな数字で満足度などの数値を示し、小さな※注釈を添える
• LINE 追加ボタン（button-line）: 緑の角丸ボタン。金の枠で囲んだキャンペーン告知の下に置く
• 日程予約フォーム（booking-form）: 白カードに注意事項、カレンダー、時間枠のボタンを順に並べた予約ウィジェット

Do's and Don'ts

Do - 紺・スレートブルー・白の 3 色を主軸にして、帯で交互に切り替える - 特長は番号付きで 3 つに整理し、どれも同じカードの型で繰り返す - CTA の帯をページ途中に 2〜3 回挟む - 数値の実績は大きな欧文数字と金の装飾で見せる - 定価と割引後の価格を並べて、差額が一目でわかるようにする - セクション見出しは明朝で格調を出す

Don't - CTA に赤以外の色を使わない（LINE の導線だけは例外として緑を使う） - 大きな角丸や丸みの強い部品を使わない - パステルや暖色を地色に使わない - 金を本文や装飾に乱用しない - 影を強く付けすぎない - 見出しを全部ゴシックにして明朝との対比をなくさない

Page Structure

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

1. ファーストビュー（サービス価値の提示と即予約）: 薄いグリッド背景の左に紺帯のキャッチと割引の小見出し、赤 CTA を置き、右にタレント写真を切り抜いて配置する
2. 著名人の受講紹介（知名度で信頼を得る）: 見出しタブの下に、写真と目標文、紺のプロフィール帯を組んだカードを左右交互に並べる
3. 動画と声（成果の実感を伝える）: 動画の埋め込みと、吹き出し 2 つを淡い青グレーの地に置く
4. サービス概要（仕組みを図で説明する）: 英字の透かしを背景に明朝の見出し、写真付きのラベル 3 つ、紺の円で要素の関係を示す図を置く
5. 実績（スコアの伸びを示す）: ベージュで英字を透かし、属性タグと大きな点数、人物写真を 3 人分並べる
6. CTA 帯（予約への誘導）: 紺の帯に人物写真、特典 4 項目、赤ボタンを並べる
7. 悩みの提起（共感を得る）: グレーの地にチェック付きのカード 5 枚を置き、下に三角の紺帯で解決の宣言につなげる
8. 特長 3 つ（解決方法を詳しく説明する）: 番号付きの見出しとチェックカードを、紺と青の地で交互に繰り返す。タイムスケジュール図やスマホのモックアップも入れる
9. 実績メダルと講師（品質の裏付け）: 金のメダル 3 つと、講師写真を横に並べたカルーセルを置く
10. 料金（価格の納得感を出す）: 金の見出しのキャンペーン枠、サブスクのカード、給付金コース 3 列、分割払いのバナーを順に並べる
11. 無料相談の内容（相談のハードルを下げる）: 紺の帯に六角形の数値 3 つ、その下に写真カード 3 枚で相談内容を見せる
12. LINE キャンペーン（追加の特典で囲い込む）: 金の枠の中に和柄の割引バナー、ステップ 4 つ、緑のボタンを置く
13. 予約フォームとフッター（その場で予約を完了させる）: 白カードにカレンダーを置き、紺のフッターにロゴを入れる

Imagery

• 人物は明るい屋内で撮った自然な笑顔のビジネスポートレートにし、白背景で切り抜く
• 講師写真は青みのフィルターをかけ、中央の 1 人だけフルカラーにする
• ノート PC やスマホのアプリ画面のモックアップでオンライン感を出す
• 帯の端に、紺と青の斜めストライプや幾何学模様を添える
• 背景には大きな英字の透かしや薄いグリッドを敷く
• 実績は金の月桂樹のメダルのイラストで見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 760px で中央に寄せ、色帯だけを全幅に広げる
• PC のファーストビューは左に文字、右に人物の 2 カラム。SP では文字、人物の順に縦に積む
• 料金と実績の 3 列、悩みカードの 3+2 配置は、SP では 1〜2 列に落とす
• チェックカードは PC では画像と文字を横に並べ、SP では画像を上に置く
• SP では画面下に赤 CTA を固定して表示することを推奨する

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