DESIGN.md — 紺×夕焼けグラデの士業向けセミナーLP（Navy & Sunset Gradient Business Seminar LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型、ポップ・元気
• キーワード: 濃紺・夕焼けグラデーション・白カード・タイムテーブル・フチ付き人物イラスト・淡いブルーグレー
• 地の質感: フラットな面に薄い影を落としたカードで構成する。FVだけ写真に水色の半透明三角形パターンを重ねる。
• 形: 角丸8px前後のカード、ピル型CTA、片側だけ角を落とした斜めタブ型ラベル、円形の人物写真。
• 温度感: 寒色の紺と青灰が基調。暖色のオレンジは要所の誘導だけに使う。

Colors

• 地色は白→薄グレー→淡い青灰→白→くすみ水色→薄グレーの順に切り替え、セクションを区切る。
• 濃紺はボタン帯・詳細アイコン帯・FVの見出し・Qマークに限って使う。
• オレンジのグラデーションは申込CTAと送信ボタンだけに使う。
• 講演の種別ラベルは色で分ける（青緑グラデ／赤ピンクグラデ／水色／黄オレンジ）。
• 特典ブロックは金茶の二重線枠と金茶文字にして、上品に目立たせる。
• button-primary は文字 #FFF8F3 × 背景 #FE8464 のコントラスト比が 2.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D92E01、4.6:1）を使う。
• benefit-frame は文字 #B08A4A × 背景 #FFFFFF のコントラスト比が 3.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#90713C、4.55:1）を使う。

Typography

• 見出しは中央揃え。和文の太字の下に、欧文の小さな太字サブタイトルを置く。
• FVのタイトルは濃紺の極太文字に白フチと影をつけ、年号の一部をオレンジにする。
• 時刻は「時計アイコン＋Time」ラベルの下に大きな太字で置く。
• 本文は小さめのサイズで、行間を広く取る。
• 登壇者は所属を小さく、名前を太字にして「様」を付ける。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はタイムテーブルを時刻と内容の横並びにし、講演者カードは 3 列。
• 本文ブロックの幅: 画面幅の約 93%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• カードは左右に約12pxの余白を取って全幅近くに置く。
• タイムテーブルのカード同士は40〜50px空ける。
• カードの中に白い登壇者カードを入れ子にし、右端に紺の縦帯を付ける。
• 休憩の区切りは見出し文字と横長の群像イラストで示す。
• 概要表は2列（項目名と内容）にして、下罫線で区切る。

Elevation & Depth

• カードには薄い影（0 2px 6px rgba(0,0,0,.12)）を付ける。
• FAQの行は白地に薄い影を付ける。
• フォームは白地にして、大きめの角丸と影で浮かせる。
• CTAボタンにはわずかな影を付ける。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 登壇者の写真はグレー背景の円形切り抜き。講演者紹介カードだけ左側に縦長の矩形写真を置く。
• セクション境界: 基本は直線で地色を切り替える。FVとフォームの下端には、白フチ付き群像イラストのシルエットを波形の境界として使う。
• 種別ラベルはカード左上から飛び出すタブ型で、右上だけ大きく丸める。
• 講演者カードの右上に、扇形（1/4円）のグラデーションバッジを置く。
• 特典の枠は角を切り欠いた二重線フレームにする。
• FVの上部バッジは紺枠・白地のピル型にする。

Components

• 申込CTA（button-primary）: オレンジからコーラルへのグラデーションのピル型ボタン。右端に「»」を付ける。
• 開催条件バッジ（badge-pill-outline）: 白地に紺の枠線を付けたピル型。FVの上部に2段で積む。
• 講演者紹介カード（speaker-card）: 左に縦長の写真、右上に扇形の種別バッジ、下部に紺帯の「詳細を見る」ボタン。
• タイムテーブルカード（timetable-card）: 淡青のカード。時刻・講演タイトルを書き、その下に登壇者の小カード（円形写真＋右端の紺の拡大アイコン帯）を入れる。
• 種別タブラベル（tag-tab）: カード左上に重ねる白文字のタブ。色かグラデーションで講演の種別を分ける。
• 特典フレーム（benefit-frame）: 金茶の二重線で囲んだ枠。中に番号付き見出し、価格の比較（矢印＋大きな数字）、注釈を入れる。
• FAQ行（faq-row）: 白地に影を付けた行。左に紺の大きな「Q.」、右端に＋アイコン。
• 申込フォーム（entry-form）: 白いカードに、ラベルと淡青の入力欄を縦に並べる。必須項目は赤い＊、送信ボタンはオレンジの角丸ボタン。
• 概要表（info-table）: 項目名と内容の2列。各行に下罫線を引き、行の高さはゆったり取る。

Do's and Don'ts

Do - 地色を帯ごとに切り替え、長いページの中でも区切りがわかるようにする。 - オレンジは申込の導線だけに使う。 - 登壇者の写真は同じグレー背景で円形に揃える。 - 種別ラベルの色を統一し、セッションの種類を色で判別できるようにする。 - 白フチ付きのビジネス人物イラストを、境界や休憩の区切りに置く。

Don't - CTA以外にオレンジのグラデーションを使わない。 - カードに強い影や太い枠線を付けない。 - 濃紺以外の暗い色で、面積の大きい帯を作らない。 - 写真を四角いまま不揃いに並べない。 - 見出しの欧文サブタイトルを省かない。

Page Structure

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

1. ファーストビュー（イベント名・日時を伝え、申込へ誘導する）: 都市空撮に水色の三角パターンを重ねる。ピル型バッジ、極太タイトル、日時、受付・開催の小ラベル、グラデCTAを順に置き、下端に群像イラストを並べる。
2. イベント紹介（開催の経緯とテーマを説明する）: 白地に中央見出しと欧文サブタイトルを置き、左揃えの本文を2段落入れる。
3. 参加特典（参加の動機付け）: 左揃えの見出しの下に、金茶の二重線フレームを2つ縦に並べる。
4. 特別講演（目玉の登壇者を示す）: 薄グレー地に講演者カードを3枚並べ、扇形の種別バッジと紺の詳細帯を付ける。
5. タイムテーブル（当日の進行を一覧で示す）: 淡い青灰地に淡青カードを縦に連続させ、タブラベルと登壇者の小カードを入れる。休憩は見出しとイラストで区切る。
6. 参加方法（申込から参加までの流れを示す）: 白地に、ベージュの不定形背景付きフラットイラストと説明文を3ステップ縦に並べる。
7. 開催概要（基本情報を示す）: 罫線区切りの2列表に、地図の埋め込みと住所を添える。
8. 協賛企業（協賛企業を紹介する）: ロゴを横一列に並べる。
9. 懇親会（懇親会の案内）: 短い2列表に、注釈と太字の一文を添える。
10. 申込フォーム（申込を受け付ける）: くすみ水色の地に白い角丸のフォームを置き、下端に群像イラストを並べる。
11. よくある質問（不安を解消する）: 薄グレー地に、Q.マーク付きのアコーディオン行を並べる。
12. サービス紹介・フッター（主催サービスを案内し、関連リンクを置く）: 大きな淡い筆文字を背景に置いた紹介文、製品リンクの一覧、認証マーク、トップへ戻るボタン。

Imagery

• FVは晴天の都市空撮に、青空のグラデーションと半透明の三角形モチーフを重ねる。
• 人物イラストはフラットなビジネスパーソン。紺・水色・オレンジを主に使い、太い白フチとオレンジ・紺のアウトラインで囲む。
• ステップ説明は、ベージュの不定形の背景に小さな人物と道具を描いたフラットイラストにする。
• 登壇者の写真はスーツ姿の胸から上で、グレーのグラデーション背景に揃える。
• 背景に装飾として、淡いグレーの大きな筆文字を置く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはFVを横長にし、タイトルと年号を1行にまとめる。
• PCでは講演者カードを3列で横に並べる。
• PCのタイムテーブルは、左に時刻、右にタイトルを置く横並びのカードにする。
• PCでは右上に追従するオレンジの申込ボタンと、白パネルのナビメニューを出す。
• PCでは余白に白フチ人物イラストを散らす。
• PCでは参加方法の3ステップを横に3列で並べる。

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