DESIGN.md — 青空×ひまわりの夏季資格ウェビナーLP（Summer Sky Blue Seminar Event LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 清潔・爽やか、信頼・誠実、情報量多め・訴求型、ポップ・元気
• キーワード: 夏・青空・ひまわり・ウェビナー・資格講座一覧・紺×シアン
• 地の質感: フラットな白地に水色の斜めグラデーション面。影はほぼなく、細い水色の線でカードを区切る
• 形: 角丸小さめのカード、ピル型の CTA、円形アイコン、斜めに切ったグラデーションの背景面
• 温度感: 爽やかで涼しい寒色系に、オレンジと黄色の暖色を差し色で入れる

Colors

• 地は白を基本にし、セクション背景に水色の斜めグラデーション面を敷いて夏の空気感を出す
• 大見出しは紺、帯見出しやテーブル見出しはシアン塗りに白文字
• CTA だけオレンジにして他で使わない
• 黄色は特典・クーポンとひまわり装飾に限る
• カードは白地にシアンの細線枠、内側の補足ボックスは淡い水色
• 本文はグレー寄りの黒、注釈は小さく濃グレー
• button-primary は文字 #FFFFFF × 背景 #F68C40 のコントラスト比が 2.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C25609、4.54:1）を使う。
• band-heading は文字 #FFFFFF × 背景 #39BDD5 のコントラスト比が 2.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1F8193、4.55:1）を使う。

Typography

• 見出しはゴシック太字で装飾フォントは FV だけ
• 金額や割引率は数字を極端に大きく、単位は小さく添える
• FAQ は Q./A. を紺の太字英字で先頭に置く
• 本文は行間 1.8 で読みやすくする
• 講座タイトルは紺太字、リードはシアンで差をつける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。講座カード・声カードは PC で 2 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• セクション見出しの上に円形アイコンを中央配置する
• PC では本文幅を 900px 程度で中央寄せ
• 講座カードは同じ高さで格子状に並べる
• ステップは横並びで三角矢印でつなぐ（SP は縦）
• 概要は左見出しセル付きの 2 列テーブル

Elevation & Depth

• 影はほぼ使わずフラットに作る
• カードの区切りは細いシアン線で表現
• 特典クーポンだけ軽い影で浮かせてもよい

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 講師写真は円形、FV の人物は角丸なしの矩形パネルを敷き詰め
• セクション境界: 水色グラデーション面を斜めに切って次のセクションへつなぐ
• CTA は全幅のピル型にし、右端に小さな矢印
• 帯見出しは角丸小のシアン長方形で、左に台形のタブを重ねる
• ステップのアイコンは白い円の中に紺の線画
• FAQ の項目は下線で区切る

Components

• 申込 CTA（button-primary）: オレンジのピル型全幅ボタン。右端に矢印
• アイコン付き見出し（section-heading-icon）: 紺の円形アイコンに黄色の小円を重ね、その下に紺の見出し
• シアン帯見出し（band-heading）: シアンの横長帯に白文字。左に配信形式を示す台形タブ
• 講座カード（course-card）: シアン線の白カード。上に紺ラベル、水色の期間バー、紺太字タイトル、説明文
• 講師紹介ボックス（speaker-box）: 淡水色の地に円形の講師写真、肩書き・名前・プロフィール
• 特典クーポン（coupon-badge）: 黄色のチケット形。番号の円バッジと大きな金額数字、ひまわりを添える
• 参加ステップ（step-flow）: 白い円の線画アイコン、英字 STEP 番号、三角矢印でつなぐ
• FAQ 項目（faq-item）: Q./A. を紺の太字で先頭に置き、項目は紺の下線で区切る
• 声カード（voice-card）: 淡水色地に人物シルエットアイコンと感想文
• 概要テーブル（info-table）: 左がシアン塗りに白文字の見出しセル、右が白地。シアンの罫線

Do's and Don'ts

Do - 青空とひまわりのモチーフで季節感を出す - 見出しは毎回アイコン＋紺文字の同じ型で統一 - 講座カードは同じ構成（ラベル・期間・タイトル・説明）を繰り返す - CTA はオレンジ 1 色に統一してページ末尾にも置く - 斜めの水色グラデーションで単調な白地に変化をつける

Don't - 暗い背景や黒ベタのセクションを作らない - オレンジを CTA 以外の装飾に使わない - カードに強い影や太い枠を付けない - フォントを何種類も混在させない - 講座ごとにカードのデザインを変えない

Page Structure

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

1. ファーストビュー（イベント名・期間・特典を一目で伝える）: 青空と笑顔の人物写真パネルを敷き詰め、中央に白地のロゴ風タイトル、オレンジのピルで日付、ひまわり型バッジで特典
2. アンカーナビ（各セクションへの移動）: 紺の線アイコン＋小さな文字を横に並べ、右端にオレンジの申込ボタン
3. 導入（イベントの趣旨を伝える）: 左に紺太字のリードと本文、右に動画サムネイル
4. こんな方におすすめ（対象者を明確にする）: オレンジの細線カードに短い悩みを 3 つ並べる
5. 参加特典（申込の動機づけ）: 黄色いクーポン型カードを 2 枚。大きな数字と、下に番号付きの注釈
6. 参加方法（手順の不安をなくす）: 斜めの水色グラデーション上に円形アイコンの 4 ステップを矢印でつなぐ
7. ラインナップ（ゲスト・総合）（コンテンツ内容と講師を紹介）: シアン帯見出しの下に白カード。講座タイトル、説明、講師ボックス
8. 資格別ウェビナー一覧（多数の講座から選ばせる）: 配信期限を見出しで示し、講座カードを 2 カラムのグリッドで並べる
9. よくある質問（疑問の解消）: Q./A. 形式のリスト。項目ごとに紺の下線
10. 参加者の声（社会的証明）: 淡水色カードにシルエットアイコンと感想文を 2 カラムで
11. 概要・CTA（条件の確認と申込）: 淡水色の地に 2 列テーブル、その下に全幅のオレンジ CTA
12. フッター（ロゴと規約リンク）: 淡グレーの地に中央ロゴ、縦線で区切ったリンク、著作権表記

Imagery

• 夏の青空と白い雲、ひまわりを明るく高彩度で使う
• 人物は笑顔の若い社会人や学生、明るい室内で撮った写真
• 講師は白背景の胸から上の写真を円形に切り抜く
• アイコンは紺の線画とシアンの塗りを組み合わせたシンプルなもの
• 声の人物は水色の無個性なシルエットアイコン
• クーポンは黄色いチケット形のイラストで表現
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP ではカードの 2 カラムを 1 カラムに縦積みする
• FV の写真パネルは SP で中央タイトル周りを残して減らす
• アンカーナビは SP で横スクロールか追従の申込ボタンにする
• ステップは SP で縦並びにし、矢印を下向きにする
• 導入の動画は SP でテキストの下に全幅で置く
• 概要テーブルは SP でも 2 列のまま、見出しセルを幅 30% 程度に

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