DESIGN.md — 濃紺とマゼンタの信頼感ある資格講座 LP（Corporate Navy Certification Training LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 信頼・誠実、クール・先進的、情報量多め・訴求型
• キーワード: 濃紺グラデーション・マゼンタの帯マーカー・黄色ハイライト・白カード・欧文の透かし見出し・ビジネス写真
• 地の質感: ほぼフラット。濃紺の面に薄い斜線グラデーションや光の模様を敷く。淡い青の地に白カードを浮かせる
• 形: 角丸は小〜中。円形に切り抜いた人物写真、下向き三角の区切り、右向き矢印のステップ
• 温度感: 全体はクール寄り。マゼンタと黄色で温かみと勢いを足す

Colors

• 地は白と淡い青を交互に使い、区切りに濃紺グラデーションの申込セクションを挟む
• 見出しの文字は紺。本文は濃いグレー
• マゼンタは帯マーカー、ラベル、比較表の推し列だけに使う
• 黄色は本文のハイライトと小さなバッジ。濃い地の上では強調語の文字色にも使う
• 申込ボタンは濃紺の地に白文字、右端に白丸の矢印を付ける
• 対比させるときは課題側をグレーかピンク、解決側を紺かマゼンタで塗り分ける

Typography

• 和文はすべて太めのゴシック。明朝は「定義を示す枠」の中の見出しだけに使ってよい
• 番号やラベルは欧文セリフの紺で大きく置き、和文見出しと組み合わせる
• セクション見出しの後ろに、薄いグレーの大きな欧文セリフを透かしで重ねる
• 大見出しは中央揃えで2行に分ける。本文は左揃え
• 強調したい一文はマゼンタの帯に白文字で載せる
• 本文の重要箇所は黄色の下線ハイライトで目立たせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ペルソナや比較の項目は縦に積む。ステップ表は横スクロールにする
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは画面端から12〜16pxの余白で置き、濃紺の地や淡い青の地に浮かせる
• データの章は番号付きの白カードを縦に並べ、カード同士は16px空ける
• セクションの終わりは下向き三角とまとめの一文で締める
• 申込セクションは同じ形で4〜5回繰り返す
• 比較表は推し列をマゼンタのヘッダーで強調し、横スクロールにする

Elevation & Depth

• 白カードには薄い紺系の影（0 4px 16px rgba(20,40,90,0.08)）を付ける
• 申込ボタンは影を付けず、濃い地とのコントラストで目立たせる
• 吹き出しや小さなカードはごく薄い影か、影なしにする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は円形に切り抜く。場面写真は横長の角丸長方形にし、カードの上半分に置く
• セクション境界: 直線で地の色を切り替える。セクションの区切りに下向き三角を置き、上端をアーチ状にへこませる箇所もある
• 申込ボタンは角丸8pxの長方形。右端に白丸の矢印アイコンを置く
• ラベルや目安時間のバッジはピル型
• ステップは矢じり型の帯か、右向きにつながる山形でつなぐ
• チェックリストは丸いチェックアイコンを使う

Components

• 申込ボタン（button-primary）: 濃紺の地に白文字を中央に置き、右端に白丸の矢印を付ける。個人向けと法人向けの2本を縦に並べる
• 受付中の丸バッジ（badge-open）: ワイン色の円に白文字を2行で入れる。申込セクションの見出しの左に置く
• マゼンタの帯マーカー（marker-band）: 大事な一文やキャッチの一部をマゼンタの帯に白文字で載せる
• 番号付きのデータカード（numbered-card）: 白カードの左上に欧文セリフの番号と縦線を置き、右に紺の見出し、その下に図表と本文を入れる
• 縦線付きの小見出し（heading-bar）: 左に紺の太い縦線を置き、紺の太字見出しを左揃えで書く
• ペルソナカード（case-card）: Case と番号を左上に、円形の人物写真を中央に、短い説明を下に置く小さな白カード
• 受講前後の比較カード（before-after-card）: 黄色バッジで項目名を示し、上は白地に悩み、下はマゼンタか紺のグラデーションに受講後の変化を書く。円形の人物写真を添え、強調語は黄色の文字にする
• ステップの縦帯（step-flow）: くすんだ青の縦帯に Step 番号を縦書きで入れ、矢じりでつなぐ。右側に円形写真と工程名を置く
• 悩みの吹き出し（speech-bubble）: 淡いグレーの角丸吹き出しに悩みを短く書き、落ち込んだ人物イラストのまわりに散らす
• 比較表（comparison-table）: 左に項目名を置き、推し列はマゼンタのヘッダーと二重丸、比較列はグレーと三角で示す。横スクロールにする

Do's and Don'ts

Do - 申込セクションは同じデザインで、主要な章の合間に繰り返し置く - 数字やデータは大きな数字と円グラフで見せ、出典を小さく書く - 強調には、帯マーカー（マゼンタ）、黄色ハイライト、紺の太字の3つだけを使う - セクション見出しには、欧文の透かしと紺の和文を重ねる - 個人向けはマゼンタ系、法人向けは紺系で塗り分ける

Don't - 緑やオレンジなど、紺・マゼンタ・黄色以外の目立つ色を足さない - 申込ボタンを丸いピル型や派手なグラデーションにしない - 丸ゴシックや手書き風の書体を使わない - 写真に強いフィルターをかけたり、イラストを過度にポップにしたりしない - 白カードの影を濃くしすぎない

Page Structure

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

1. ファーストビュー（講座名と価値をすぐ伝える）: 白地の上にビジネス写真をモザイク状に敷き、紺の極太の講座名、紺帯のキャッチ、認定団体のロゴカード2枚、左上にワイン色の丸バッジを置く
2. 申込CTA（最初の申込導線）: 濃紺グラデーションの地に、丸バッジとマゼンタ帯のキャッチ、短い説明、申込ボタン2本を置く
3. お知らせ・動画（新しさと実績を示す）: 白地に日付付きのニュースを2件並べ、マゼンタのラベルを付けた動画の埋め込みを置く
4. 悩みの提起（読み手に自分の状況を選ばせる）: グレーのカードに課題を、紺のカードに理想をチェックリストで並べ、下向き三角とマゼンタ帯の一文で締める
5. データで見る背景（必要性を客観的な数字で示す）: 濃紺の地に、番号付きの白カードを4枚縦に並べる。円グラフ、吹き出し付きのイラスト、写真、ロゴ、使用例の図を入れる
6. 資格の定義（どんな人材になれるかを示す）: 大きなビジネス写真の上に、ベージュの二重枠で明朝の見出しと箇条書きを重ねる
7. 対象者（自分が対象かを判断させる）: マゼンタのピル型ラベルの下に、Case番号付きのペルソナカードを4枚並べる
8. 資格の概要・仕組み・流れ（制度の信頼性と取得までの道のりを示す）: 淡い青のパネルの中に、縦線付きの小見出しで3つのブロックを並べる。重なる2つの円の図、縦のステップ帯を入れる
9. 学習領域（カリキュラムの中身を示す）: Area番号と写真付きのカードを4枚並べ、各カードに紺の見出しと箇条書きを入れる
10. 特長の比較（他の学び方との違いを示す）: 推し列をマゼンタで強調した比較表を置き、マゼンタ帯の一文で締める
11. メリット（個人と法人それぞれの利点を示す）: 写真の下に、マゼンタまたは紺のラベルカードとチェックリストを置く
12. 受講前後の変化（受講後の姿を具体的に想像させる）: 個人向けはピンク地、法人向けは青地のパネルに、比較カードを4枚ずつ並べる
13. 取得までの流れ・受講形式・料金（申込前の疑問を解消する）: 横スクロールのステップ、アイコン付きの詳しいステップ、形式を比べるカード、濃紺の料金パネルを並べる
14. よくある質問・フッター（最後の不安を解消し、申込へつなぐ）: 紺の菱形のQアイコンを付けた白カードで質問を並べ、回答の要点はマゼンタの文字にする。最後に申込CTAと濃紺のフッターを置く

Imagery

• スーツやオフィスカジュアルの日本人ビジネスパーソンが、PCや資料に向かう明るい写真を使う
• 写真は白と青を基調に、高めの露出で清潔感を出す
• 人物写真は円形に切り抜き、白いカードの中に置く
• イラストは紺とグレーのフラットな人物で、悩む姿や前進する姿を描く。マゼンタの矢印を添える
• 図表は紺系の円グラフや簡単なフロー図で、黄色やマゼンタを少しだけ差す
• セクションの背景には、薄いグレーの大きな欧文セリフを透かしで敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCの最大幅は約1000px。ファーストビューは左に文字、右に写真モザイクの2カラムにする
• PCではペルソナカードと学習領域カードを4列に並べる
• PCでは悩みの対比、メリット、受講前後の変化を2列に並べる
• PCでは横スクロールのステップ表を、6工程すべて横一列に並べる
• PCのヘッダーは、ナビゲーションと申込ボタン2つを右上に置く。SPはハンバーガーメニューにする
• 申込CTAのボタンは、SPでは縦に2本、PCでは横に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 行書くと起動時に読み込まれる。