DESIGN.md — オレンジ×水色の図解型資格案内 LP（Orange and Sky Blue Qualification Guide LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 信頼・誠実、情報量多め・訴求型、親しみ・手作り感
• キーワード: 図解・色分け比較・線画イラスト・吹き出し・資料請求
• 地の質感: ベタ塗りのフラット面。イラスト背後だけ淡いピンク〜黄色のグラデーションの不定形の影
• 形: 四角の帯見出しと角のない表。吹き出しは楕円。CTA はピル型
• 温度感: 暖色オレンジと寒色水色が半々。明るく前向き

Colors

• 地は白と薄グレーを交互に置いてセクションを区切る
• 2 つの資格は緑と水色で色分けし、帯・矢印・表・スケジュールでも同じ色を使う
• オレンジは資格名の強調文字と資料請求バナーにだけ使う
• 本文中の強調は色マーカー下線（緑・水色）で入れる
• 淡い水色・薄緑・クリームは図解の背景だけに使う
• button-primary は文字 #FFFFFF × 背景 #02AAEB のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#017EAE、4.57:1）を使う。
• kanji-grid は文字 #E49443 × 背景 #FDECC1 のコントラスト比が 2.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#9E5B17、4.53:1）を使う。
• tag-label は文字 #FFFFFF × 背景 #E49443 のコントラスト比が 2.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#9E5B17、4.55:1）を使う。
• color-band は文字 #FFFFFF × 背景 #24A50B のコントラスト比が 3.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#1E8809、4.58:1）を使う。
• speech-bubble は文字 #FFFFFF × 背景 #02AAEB のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#017EAE、4.57:1）を使う。
• point-box は文字 #FFFFFF × 背景 #02AAEB のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#017EAE、4.57:1）を使う。
• faq-item は文字 #FFFFFF × 背景 #02AAEB のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#017EAE、4.57:1）を使う。

Typography

• 見出しは中央寄せの黒文字。キーワードだけオレンジ・緑・水色にする
• 左寄せ小見出しには左に黒い短い横線を付ける
• 本文は細めの 12px で行間を広くとる
• 強調したい語句は太字に色マーカー下線を付ける
• 数字や重要語はマス目枠で一字ずつ囲む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。図解の中だけ左右に人物を置いて中央へ矢印を向ける
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 本文ブロックは左右 8〜12px の余白でほぼ全幅
• セクションは背景色を全幅で切り替えて区切る
• 表・グラフ・スケジュールは白いカードに入れて薄グレーの地に置く
• 比較図は同じ構図を 2 回並べ、2 回目に要素を足して違いを見せる

Elevation & Depth

• 影はほぼ使わずフラットにする
• 画面右下に固定の資料請求バナーだけ浮かせる
• イラストの背後に淡いグラデーションの不定形を敷いて奥行きを出す

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの横長長方形で全幅
• セクション境界: 基本は直線で切り替え。一部は下向きの三角の切り欠きで次へつなぐ
• 帯ラベル・表・FAQ は角丸なしの四角
• 吹き出しは楕円に小さな尻尾を付ける
• タグ見出しは右端を矢羽根の形に切る

Components

• 資料請求ピルボタン（button-primary）: 水色のピル型で、右に白丸のアイコンを入れる
• 資料請求バナー（banner-cta）: オレンジから黄色への斜め帯に、白マスの大きな文字と冊子アイコンを置く
• マス目タイトル（kanji-grid）: クリーム地にオレンジ枠の正方形を並べ、一字ずつ入れる
• 矢羽根タグ（tag-label）: 左端に付けるオレンジのタグ見出し。右端は矢羽根の形
• 資格の色帯ラベル（color-band）: 緑または水色の帯に白文字の資格名
• 問いかけ吹き出し（speech-bubble）: 水色の楕円に白い太字で問いかけを書き、イラストの横に置く
• 比較表（compare-table）: 見出し行は水色と緑、分類列はクリーム。行はグレーと白の交互。○は水色、×は赤
• 注目ボックス（point-box）: 水色の箱の上部に白い見出し帯。中はオレンジのチェック付きで白文字の箇条書き
• FAQ アコーディオン（faq-item）: 水色の帯の左に Q、右に＋を置き、白文字で質問を書く
• 概要表（spec-table）: 左列はグレーに白文字、右列は白に黒文字の 2 列表

Do's and Don'ts

Do - 2 つの対象は必ず緑と水色で色分けし、全ページで統一する - 説明は文章より図解・表・グラフを優先する - セクションの間に資料請求バナーを繰り返し置く - 人物イラストは黄色スーツの線画で統一する - 白と薄グレーの地を交互に置いてリズムをつくる

Don't - 濃い影や立体的なボタンを使わない - オレンジを本文や背景の大きな面に使わない - 写真の上に長い文章を重ねない（最終セクションを除く） - 角丸を大きくしすぎない（ボタンと吹き出しは除く） - 緑と水色の役割を入れ替えない

Page Structure

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

1. ファーストビュー（対象者に呼びかけ、資料請求へ誘導する）: オレンジと黄緑の斜め帯の上に、白文字のマス目コピー、ピル型 CTA、笑顔の人物写真を置く
2. 資格の紹介（資格名を印象づける）: マス目タイトルと下線付きの問いかけ。下に線画イラストを 3 つ並べる
3. 資格とは（制度の概要を説明する）: 薄グレーの地に中央見出し、本文、全幅写真
4. 違いの図解（もう 1 つの資格との役割の違いを見せる）: 矢羽根タグ、吹き出しの疑問、薄緑と水色の帯で範囲を比較し、人物と矢印で図解する
5. 補足説明と CTA（意義を補い、資料請求へ誘導する）: 白い地の本文、並木の写真、資料請求バナー
6. 合格者インタビュー（体験談で実現できることを示す）: 吹き出しと喜ぶイラスト、グレー地に名前見出し・写真・本文、色分けした月別スケジュール
7. 試験範囲の比較表（共通範囲の多さを示す）: 困り顔のイラストと吹き出し、○×の比較表、下線付きのまとめ文
8. 注目ポイントと合格者データ（数字で根拠を示す）: 水色の注目ボックス、吹き出しとイラスト、白いカードに棒と折れ線の複合グラフ
9. よくある質問（疑問を解消する）: 水色帯のアコーディオンを 3 つ
10. 試験概要（日程・費用などの詳細を示す）: グレーの見出しセルと白セルの 2 列表、続けて資料請求バナー
11. 締めのメッセージ（最後のひと押しをする）: 淡い都市の空撮写真の上に中央寄せのメッセージを置き、右下に固定 CTA

Imagery

• 人物は黒い線画に黄色のスーツ、白い肌のフラットなイラスト
• イラストの背後に淡いピンクから黄色・水色へのグラデーションの不定形を敷く
• 写真は明るい自然光のビジネス・住宅・並木道。彩度は高め
• 最終セクションは青空の都市空撮を白っぽくして背景に使う
• 太い緑・水色の矢印と、グレーの楕円の吹き出しで関係を示す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 1000px 幅の固定コンテンツ
• ファーストビューは左にコピー、右に人物写真の横並び
• 説明と写真、見出しと吹き出しイラストは左右 2 カラムに並べる
• 比較の色帯は PC で左右に並べる
• 表・FAQ・バナーは中央寄せで幅を広げる

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