DESIGN.md — 水色グラデと濃紺の投資スクールLP（Airy Sky Blue Online Investment School LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 清潔・爽やか、クール・先進的、信頼・誠実、情報量多め・訴求型
• キーワード: 淡い水色・空色グラデ・濃紺グレー・六角形バッジ・斜めライン・赤い大数字
• 地の質感: フラットな面に薄いグラデとぼかし影。斜めの細線と小さな円ドットを散らす
• 形: 角はほぼ直角。六角形バッジ、斜めに切った写真パネル、角丸小のCTA
• 温度感: 寒色ベースで涼しく清潔。CTAと数字だけ暖色

Colors

• 地は淡い水色と白〜薄グレーを交互に敷き、セクションを区切る
• 空色は帯・六角形・カード見出しなど面で使う
• 濃紺は信頼系ブロック（講師・体験談）の地と見出し文字に使う
• 暖色はCTAボタンと金額・0円・強調語のみに限定する
• キャンペーン帯は水色〜薄紫のグラデ背景にする
• button-primary は文字 #FEFFFF × 背景 #F47A4A のコントラスト比が 2.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D3450D、4.53:1）を使う。
• price-card は文字 #E87169 × 背景 #FEFFFF のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DE3429、4.53:1）を使う。

Typography

• 見出しは中央揃え・太字で字間を少し広げる
• 強調語は赤に色替えし、本文中は太字で強調
• 金額は細長い欧文太字で極端に大きくし「円」は小さく
• 見出し上にサービス名入りの小さな前置きラベルを置く
• 背景に大きな半透明の欧文ロゴを敷く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央寄せで画像＋文の 2 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは前置きラベル→大見出し→イラスト→説明ボックスの順
• 説明ボックスは薄グレー面に3〜4枚の小カードを並べる
• キャンペーン帯とCTAはページ内で3〜4回繰り返す
• 体験談は横スライダーで左右のカードをはみ出させる

Elevation & Depth

• 白カードに大きくぼかした淡い青影
• ポイント帯の下に広い柔らかい影
• CTAに淡いオレンジ影
• 濃紺ブロックは影なしの平面

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は切り抜きか斜めの平行四辺形パネル、写真は長方形
• セクション境界: 直線で背景色を切り替え。斜め細線と円ドットで装飾
• 要素バッジは六角形（空色・濃紺）
• 見出しはかぎ括弧形のコーナー線で囲む
• カードは角ほぼ直角

Components

• 主CTAボタン（button-primary）: オレンジ→赤グラデの横長ボタン。上に濃紺の小タブ、右端に丸矢印、下に注釈
• 六角形バッジ（badge-hexagon）: 実績数字や要素名を入れる六角形。×記号で掛け合わせる
• 0円カード（price-card）: 白カードに項目名と赤の大きな0円、背景に薄い番号
• ポイント帯（point-band）: 空色グラデの全幅ボックスに番号ラベル・見出し・写真と文
• 講師カード（profile-card）: 濃紺地の中の白カード。顔写真と箇条書き経歴を濃紺帯に載せる
• 実績カード（result-card）: 濃紺グレーの縦長カードに人物とプラス金額を大きく表示
• FAQ行（faq-item）: 濃紺の丸Qアイコン、質問文、右端に＋、下に区切り線
• 前置きラベル（eyebrow-label）: 上に小さなV字線、サービス名を入れた小さなグレー文字

Do's and Don'ts

Do - 淡い水色地を広く取り、余白を多めにとる - 斜め細線と円ドットを見出しの周りに散らす - 金額・実績は赤やオレンジの大数字で見せる - 同じキャンペーン帯とCTAを繰り返す - アイコンはモノトーンのフラットなイラストにする

Don't - 暖色を背景の広い面に使わない - 角丸を大きくしすぎない - ピル型ボタンにしない - 濃い写真を全面背景に多用しない - 太すぎる装飾書体を本文に使わない

Page Structure

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

1. ファーストビュー（サービスの価値とキャンペーンを伝える）: 左に3つの動詞ラベル・大ロゴ・CTA、右にスマホを持つ手と六角形の実績数字
2. 実績スライダー（受講生の成果で信頼を得る）: 濃紺カードを横に並べ、年齢・職業とプラス金額
3. 紹介動画（短時間で概要を理解させる）: 中央に動画埋め込み、見出しに赤い数字
4. 悩みの提起（ターゲットの願望と悩みに共感する）: 斜めパネルと人物切り抜きを左右交互に、悩みを短文で並べ一部を赤字
5. 解決提示（サービスで解決できると示す）: 円形の淡い光の中にスマホとアイコン群
6. キャンペーン（無料で始められると訴求）: 水色グラデ帯、コーナー線の見出し、0円カード3枚、CTA
7. 特長3本柱（学ぶ・作る・増やすの価値を説明）: 淡青の大文字見出し、モノトーンイラスト、薄グレーの説明ボックス
8. 流れ（成果までのステップを図解）: グレー2箱から下矢印でオレンジグラデ箱へ
9. 3つのポイント（差別化要素を深掘り）: 空色帯と濃紺帯を交互、講師紹介や料金比較表
10. お客様の声（体験談で後押し）: 実績写真パネルと濃紺の体験談スライダー
11. よくある質問（不安を解消）: Qアイコン付きのアコーディオン
12. CTA・会社情報（最後の申込と信頼）: CTAと六角形背景のスマホ、会社情報を右に

Imagery

• 20〜30代の男女を白背景で切り抜き、明るく自然な表情
• スマホを持つ手の写真でアプリ画面を見せる
• お金・チャート・砂時計のモノトーンフラットイラスト
• 海辺やカフェでPC作業する自由な生活の写真
• 斜め細線・円ドット・半透明の大きな欧文ロゴを装飾に
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPは1カラムにし、画像と文を縦積み
• FVはロゴ・CTAを上、スマホ画像を下に
• 説明ボックス内の小カードはSPで2列
• 0円カードはSPで3列を維持し数字を縮小
• スライダーはSPで1枚表示＋左右チラ見せ

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