DESIGN.md — 青×シアンのグラデと橙CTAのデザインイベントLP（Blue-Cyan Gradient Creative Event LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: クール・先進的、ポップ・元気、清潔・爽やか、情報量多め・訴求型
• キーワード: 青シアングラデ・流線形グラフィック・大きな英字見出し・白カード・橙グラデCTA・波線オーナメント
• 地の質感: フラットな面とグラデーション。生成りの地に白カードと薄い影
• 形: 角丸カード、ピル型ボタン、円形アバター、流れるような曲線模様
• 温度感: 爽やかでやや涼しげ。橙の差し色で熱量を加える

Colors

• 地は生成りグレー、内容は白カードに載せる
• 大きな帯セクション（特典・タイムテーブル）は左下青→右上シアンのグラデ面
• CTAボタンは必ず黄→橙の横グラデで、青系と補色対比させる
• 見出しキャッチや役職ラベルは青→シアングラデか青文字
• 「あの〜」型の煽り見出しのみ橙グラデ文字を使う
• 販売前・終了など無効状態は彩度を落とした淡色で表す
• button-primary は文字 #FFFFFF × 背景 #F59426 のコントラスト比が 2.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B26208、4.52:1）を使う。
• badge-pill は文字 #FFFFFF × 背景 #F36A27 のコントラスト比が 3.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#CC4B0B、4.59:1）を使う。

Typography

• 英字見出しは太いサンセリフ大文字で、直下に波線オーナメント
• 英字見出しの下に小さく和訳を添えることがある
• 数字（日付・価格・時刻）は太字の欧文で大きく、単位は小さく
• CTA上に「＼ 〜 ／」型の橙マイクロコピーを置く
• 人名は特大太字で白箱に載せる
• 本文は黒、強調見出しだけ色付けする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。インフルエンサー紹介は 3 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは左右約18pxの余白で画面幅いっぱい近くに配置
• 登壇者は作品カード→人物写真→経歴文の縦並び
• 人物写真は右寄せで、左に役職ラベルと名前が重なる
• タイムテーブルは時刻→白カード（題目枠＋人物）の繰り返し
• CTAはファーストビュー・特典後・チケット後・注意事項後・FAQ後に配置

Elevation & Depth

• 白カードはごく薄い影か影なしで、青→シアングラデの太い枠線
• CTAボタンには柔らかいドロップシャドウ
• タイムテーブルカードは影なしのフラット白

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: カード内は角丸なしの矩形写真、アバターは円形切り抜き
• セクション境界: 直線の切り替え（グラデ帯と生成り地）
• カード枠線は3px前後のグラデーション線
• ラベル類は角丸なしの矩形帯
• Qアイコンは円形グラデ
• 抽象グラフィックは有機的な曲線

Components

• 購入CTA（button-primary）: 黄→橙グラデのピル型、右端に「>」
• 英字見出し＋波線（heading-en-wave）: 太字英字の下に青→シアンの波線ドット
• グラデ枠カード（card-gradient-border）: 白地に青→シアンの枠線、青見出し＋写真＋本文
• 役職ラベル（label-role）: 青→シアングラデの矩形帯に白文字、名前は白箱に黒特大
• 前置きピル（badge-pill）: 橙グラデか白地＋青枠のピル型で見出し前置き
• インフルエンサーカード（card-avatar）: 細い青枠角丸カードに円形写真、青キャッチ、名前、ハッシュタグ
• チケット価格表（ticket-table）: 販売状況バッジ＋席種を色帯セル、価格大きく。無効期は淡色
• Q&A（faq-item）: グラデ枠の白Q箱に円形Qアイコン、下に青Aと本文
• 参加者の声（voice-card）: グラデ面カード内に白見出し箱、白本文、右下に円形写真

Do's and Don'ts

Do - 青→シアンと黄→橙の2種のグラデだけで色を構成する - 英字見出しには必ず波線オーナメントを添える - 人物は役職ラベルと名前を写真に重ねて紹介する - CTAの直前に＼／のマイクロコピーを置く - 生成りの地を十分残し白カードを浮かせる

Don't - CTAを青系にしない - 黒や濃紺のベタ面を広く使わない - 明朝体や手書き書体を混ぜない - カード枠を単色の灰色線にしない - 影を強く付けすぎない

Page Structure

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

1. ファーストビュー（イベント名・日時・会場を印象づける）: 生成り地に流線形の頭部グラフィック、装飾英字ロゴ、縦書きコピー、日付大きく、橙CTA
2. 特典訴求（無料講座特典で購入を後押し）: グラデ帯に花火装飾、橙グラデ大見出し、白カードにツールアイコン3つ、CTA
3. コンセプト・参加メリット（参加価値を3点で伝える）: 英字見出し＋青キャッチ、グラデ枠カード3枚（見出し・写真・本文）
4. 登壇者紹介（実績で権威を示す）: 橙煽り見出し、番号大見出し、グラデ面の作品カード、人物写真に役職ラベル
5. 主催者（主催者の信頼性）: 英字見出し、人物写真＋ラベル、実績企業の箇条書き
6. ゲスト紹介（身近な有名人で親近感）: 3列の円形アバターカードグリッド
7. タイムテーブル（当日の流れ）: グラデ帯に白カード、時刻見出し、題目を淡グレー枠＋グラデ帯文字で
8. 参加者の声（社会的証明）: グラデ面カードに白見出し箱と円形写真
9. 交流会案内（付帯イベントの魅力と会場情報）: 英字見出し、青キャッチ、集合写真、丸ドット付き情報、地図
10. チケット（価格と席種の比較）: 販売期別の価格表、席種カード（ヘッダー色帯＋箇条書き）、特典バナー、注意事項、CTA
11. よくある質問（不安解消）: カテゴリ小見出し＋Q&Aリスト
12. フッター（リンク・追従導線）: グラデ帯にロゴと規約リンク、円形の追従ボタン

Imagery

• 人物は明るい自然光か鮮やかな色ライトのポートレート、上半身
• イベント写真は会場の熱気が伝わる俯瞰・集合カット
• 作品写真は白・淡グレー背景の物撮り
• 背景に淡青の大きな流線形・有機曲線グラフィックを薄く敷く
• 特典部に花火風の放射線イラストを黄〜橙で
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央寄せで本文幅約800px
• ファーストビューは英字ロゴを横一列に、日付は右上
• 特典帯は左に見出し、右に講座カードの2カラム
• メリットカードは写真左・文章右の横組み
• 登壇者は作品カードと人物を左右並列、ゲストは5列グリッド
• 声は3列、席種カードは2列、右下に追従円形ボタン

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