DESIGN.md — 紺×焼きオレンジの英語学習アプリ LP（Navy and Burnt Orange English Learning App LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 信頼・誠実、クール・先進的、情報量多め・訴求型、シンプル・ミニマル
• キーワード: 紺と白・焼きオレンジの強調・端末モックアップ・英字ラベル+和文見出し・ビジネス向け
• 地の質感: フラットな単色面。紺帯には大きな半透明の記号シルエット、機能説明部には薄いネットワーク線の背景を敷く。
• 形: 角丸は小さめ（4〜12px）。ボタンは角丸長方形、カードは白地に薄い影。
• 温度感: 紺で冷静・誠実、オレンジで温度と行動喚起を加える中間〜やや冷たい印象。

Colors

• 地は白が基本、ABOUT と料金プランとフッターは紺の全幅帯にしてリズムを作る。
• オレンジは主 CTA、英字セクションラベル、番号、価格、キーワード強調に限定する。
• 見出し・本文はすべて濃紺で書き、黒は使わない。
• 紺帯の上ではカードを白にし、おすすめプランだけオレンジ枠で囲む。
• サブ CTA や二番手のプランボタンは紺塗りにして主 CTA と区別する。
• 比較表は自社列だけオレンジ文字＋淡灰地、他社列は紺文字にする。
• button-primary は文字 #FEF9F3 × 背景 #D45426 のコントラスト比が 3.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C34D23、4.55:1）を使う。

Typography

• セクション頭はオレンジの大文字英字ラベル＋その下に紺の和文見出しを中央揃えで置く。
• 本文も太め（600）で詰まった印象を避けるため行間 1.9 を確保する。
• 機能番号は 30px 前後の太いオレンジ数字＋右に小さな紺のカテゴリ名。
• 価格は大きなオレンジ数字（40〜48px）、円記号と「/月」は小さく紺。
• 見出しの一部の語だけオレンジに変えて強調する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。FV の特長と料金機能アイコンのみ 3〜4 列グリッド。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右余白は 16〜20px。
• セクション見出しは中央、本文説明は左揃え。
• 機能説明は 番号→見出し→本文→端末画像 の縦順。
• CTA はセクション 2〜3 個おきに全幅で挟む。
• 利用の流れはカード縦積み、左上に番号丸を重ねる。

Elevation & Depth

• CTA ボタンは右下にややぼかした影（0 4px 8px rgba(0,0,0,.25)）。
• レビュー・流れのカードはごく薄い影と 1px の淡い枠。
• 料金カードは紺地の上で影なし、白面のコントラストで浮かせる。
• 端末モックアップは画像自体の影のみ。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 端末モックアップは切り抜きで配置。流れの写真はカード上部に横長の長方形で敷く。アバターは円形。
• セクション境界: 直線で色を切り替える。斜めや波は使わない。
• ボタンは角丸 4px の長方形。
• おすすめバッジ・お得額バッジはピル型のオレンジ。
• 番号は円形のオレンジ塗り＋白数字。
• FAQ 行は角丸 6px の淡灰帯、右端に「＋」。

Components

• 主 CTA ボタン（button-primary）: 全幅のオレンジ角丸長方形に白太字、右下に影。
• 紺のサブボタン（button-secondary）: 二番手プランや実績下の CTA に使う紺塗りボタン。
• 英字ラベル付き見出し（section-label）: オレンジの大文字英字の下に紺の和文見出しを中央配置。
• 紺ボックス見出し（fv-headline-box）: 語句ごとに紺の矩形で背景を敷き白抜きにし、「×」で並べる。
• 特長ミニカード（feature-chip-card）: 淡灰地に紺丸アイコン・見出し・短文を 3 列に並べる。
• 料金カード（pricing-card）: 紺帯上の白カード。おすすめはオレンジ枠と上部の王冠付きピルバッジ、機能アイコンを 4 列で表示。
• チェック付き下線見出し（check-heading）: オレンジのチェック記号＋紺の見出し、下に細い灰線。
• 吹き出しレビュー（review-card）: 左に円形アバター、右に白い吹き出しカードで星評価と本文、引用元を灰で記載。
• 番号付きステップカード（step-card）: 上半分に写真、下にチェック付き見出しと説明。左上にオレンジ円の番号を重ねる。
• FAQ アコーディオン（faq-row）: 淡灰の帯に紺太字の質問、右端に紺の＋。

Do's and Don'ts

Do - 紺と白を主にし、オレンジは CTA と強調に絞る。 - 機能説明には実際の画面を入れた端末モックアップを大きく使う。 - 各セクションの頭は英字ラベル＋和文見出しの型を揃える。 - 価格・実績数字は大きなオレンジ数字で目立たせる。 - 比較表では自社列だけを色分けして優位を示す。

Don't - オレンジを背景の広い面に使わない。 - 黒文字やグレー中心の本文にしない。 - 大きい角丸やピル型の主ボタンにしない。 - 装飾的な手書き書体や明朝を混ぜない。 - セクション境界を波形や斜めにしない。

Page Structure

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

1. ファーストビュー（サービスの 3 機能と価値を一目で伝える）: ロゴ、紺ボックス見出しを×で連結、短いリード、端末 2 台、特長ミニカード 3 列、オレンジ CTA と紺のテキストリンク。
2. サービス紹介（サービスの概要を説明する）: 紺の全幅帯に大きな半透明の記号シルエット。英字ラベル、オレンジ強調のコピー、白の下向き三角、白文字の説明、端末 2 台をオレンジ×で並べる。
3. 悩みの提起（利用者の悩みに共感する）: 白地に線画イラスト 3 点を縦に並べ、各下に短い悩み文。最後に解決を宣言する大見出しを置く。
4. 特長（4 つの機能を詳しく見せる）: オレンジ番号＋カテゴリ名、紺見出し、本文、端末モックアップを交互に繰り返す。末尾に教材サムネのグリッド。
5. CTA（無料体験へ誘導する）: 全幅のオレンジボタンを単独で配置。
6. 使い方の詳細（機能ごとの操作手順を示す）: チェック付き下線見出し＋説明文、丸数字付き端末画面を横スライドで並べ灰の三角でつなぐ。背景に薄いネットワーク線。
7. 料金プラン（プランの価格とお得感を伝える）: 紺の全幅帯に白カード 3 枚を縦積み。おすすめはオレンジ枠と人気バッジ、割引率・大きな価格・お得額ピル・機能アイコン 4 列・ボタン。
8. 他サービスとの比較（競合に対する優位性を示す）: 自社列オレンジ見出し＋淡灰セル、他社列は紺見出しと白セルで記号比較。
9. 実績（利用数で信頼性を示す）: 紺ピルのラベル、巨大なオレンジ数字、灰バーが右肩上がりで最後だけオレンジの棒グラフと曲線矢印。下に紺ボタン。
10. お客様の声（利用者の満足を伝える）: 円形アバター＋吹き出しカードで星評価と感想、引用元を縦に 3 件。
11. ご利用の流れ（始め方の手軽さを示す）: 番号付きの写真カード 5 枚を縦積み。
12. よくある質問（不安を解消する）: 淡灰のアコーディオン行をカテゴリ別に 8 行。
13. フッター（規約類とコピーライト）: 紺帯に白の小さいリンクを横並び、下にコピーライト。

Imagery

• アプリ画面を入れた黒フレームのスマホモックアップを 1〜2 台、少し重ねて斜めに配置。
• 悩みはビジネスパーソンの線画イラスト。肌色・くすんだ青・サーモンの控えめな配色。
• 流れの写真は明るい自然光のストック写真（スマホを見る人、キーボード、アプリアイコン、フラットイラスト）。
• アイコンは紺の円に白の線アイコン。
• 背景装飾は紺地上の大きな記号シルエット、白地上の淡灰のネットワーク図形。
• アバターは円形のシンプルな人物イラスト。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV を左テキスト・右端末の 2 カラムにする。
• PC の特長は文章と端末画像を左右交互に配置。
• 使い方の手順は PC で 4 ステップを横一列に並べる。
• 料金カードとレビューは PC で 3 列横並び。
• 利用の流れは PC で 3 列グリッド。
• CTA は PC で中央寄せの固定幅（約 340px）にする。

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