DESIGN.md — 橙×若草緑の介護研修スクール LP（Warm Orange and Mint Care Training LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: 信頼・誠実、やさしい・柔らかい、情報量多め・訴求型、清潔・爽やか
• キーワード: 法人向け研修・オレンジCTA・緑のステップ線・ピーチ色の面・表組み料金・三色ドット見出し
• 地の質感: フラットな単色面。影はごく弱く、写真は明るく清潔感がある
• 形: カードは角丸小〜中。CTAはピル型。表は角なし
• 温度感: 暖色寄り。オレンジとピーチで温かく、緑で清潔感を足す

Colors

• 地は白とライトグレー #F5F5F5 を交互に使い、セクションを区切る
• 理由セクションだけピーチの淡い地にして、白いカードを載せる
• 行動を促すもの（ボタン・価格・強調語）はオレンジ系にまとめる
• 手順の順番を示す線・矢印・ラベルは緑に統一する
• 中間CTAとキャンペーンは橙の全幅帯にして、白文字で強く見せる
• 表の見出しはクリーム色。サブコースの表だけ淡い緑にして区別する
• button-primary は文字 #FFFFFF × 背景 #EC6D45 のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D44316、4.55:1）を使う。
• campaign-band は文字 #FFFAEB × 背景 #EE8D48 のコントラスト比が 2.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#BA5711、4.51:1）を使う。

Typography

• 見出しは太いゴシックで字間を広めにとる
• 見出し内のキーワードはオレンジまたは緑で色を変える
• 専門用語の見出しにはルビを付ける
• 価格は数字を大きくして、単位と税込表記は小さく添える
• 注釈は※付きのグレーの小さい文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PCは画像とテキストの2カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクション見出しの上に三色の小さなドットを置き、中央揃えにする
• 受講フローは縦に積んだカードを緑の下向き矢印でつなぐ
• 料金・概要は横スクロールできる表にする
• 各セクション末尾に、電話とメールを並べた白いCTAボックスを置く

Elevation & Depth

• カードは影なしか、ごく薄い影にする
• CTAボックスは白地に薄い影を付けて、橙の帯から浮かせる
• FAQの各行は白いバーにする。影はなしで、余白で区切る

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 角丸小の長方形。フローのサムネイルは小さい正方形寄りにする
• セクション境界: 直線で背景色を切り替える。キャンペーン帯の中では緩い曲線と下向き三角を使う
• CTA・ラベル・バッジはピル型にする
• 理由カードの上辺は橙の細い線で強調する
• フローのカードの上辺は緑の線にする

Components

• お問い合わせボタン（button-primary）: メールアイコン付きのオレンジのピル型ボタン
• 電話＋問い合わせボックス（cta-box）: 白い角丸ボックス。左に丸い電話バッジと大きな番号、右にCTAを並べる
• 三色ドット見出し（section-heading）: 橙・緑・赤の小さなドットを中央の大見出しの上に置く
• 番号付き理由カード（reason-card）: 白いカードに写真、番号付きの見出し、ピーチのラベル、小見出し帯を入れる
• フローステップ（step-card）: 上辺が緑線の白いカード。番号、緑の段階ラベル、右にサムネイル。カード間は緑矢印でつなぐ
• 料金表（price-table）: クリーム色の見出し行と、太字の大きな数字の価格セルで組む
• キャンペーン帯（campaign-band）: 橙の全幅帯。円形の割引バッジ、白いカード2枚、合計価格の大きな白文字を入れる
• FAQアコーディオン（faq-item）: オレンジのQ、太字の質問文、右端に＋を置いた白いバー
• 目次ナビ（toc-nav）: 淡い緑地に3列。各項目は下線と↓矢印付きのリンク
• 問い合わせフォーム（form-field）: グレーの地に白い入力欄。項目名の横にオレンジの必須ピルを付ける

Do's and Don'ts

Do - CTAはオレンジ、手順は緑と、色の役割を固定する - セクションごとに白とグレーの地を交互にする - 実績や割引の数字は大きく、色を付けて見せる - 電話CTAには受付時間を小さく添える - 表や注釈で、細かい条件まで正確に載せる

Don't - 緑をCTAボタンに使わない - 濃い影や光沢のあるグラデーションを付けない - 原色の赤を広い面積に使わない（キャンペーン帯の上部だけに限る） - 写真を暗く加工しない - 見出しを明朝体にしない

Page Structure

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

1. ファーストビュー（研修内容と実績を一目で伝え、問い合わせへ誘導する）: 明るいスタッフ写真を全幅に敷く。中央に大見出し、緑のチェック付き実績3点、白いCTAボックスを置く
2. 目次（長いページ内を移動しやすくする）: 淡い緑の帯に、↓矢印付きのリンクを3列で並べる
3. 研修の概要（制度を簡単に説明する）: 左にテキストとチェックリスト付きのグレーの箱、右に実習写真を置く
4. 選ばれる理由（強み3点を示す）: ピーチの地に、番号付きの白いカードを3枚縦に並べる。最後に中央寄せのまとめコピーを置く
5. 中間CTA（問い合わせを促す）: 橙の全幅帯に、白い見出しと白いCTAボックスを置く
6. 受講の流れ（手順を見せる）: タブでコースを切り替える。7つのステップカードを緑の矢印でつなぎ、最後にカリキュラム表を置く
7. 研修の概要表（研修区分の違いを比較する）: クリーム色の見出し行を付けた比較表
8. 開講日程（日程ページへ誘導する）: グレーの箱に案内文と、枠線だけのピル型ボタンを置く
9. 受講料（料金と助成金を示す）: コース別の料金表を並べ、助成金の計算式を大きな数字で見せる
10. キャンペーン（セット割で申込を後押しする）: 橙の帯に割引バッジ、価格カード2枚、合計価格を大きく置く
11. よくある質問（不安を解消する）: グレーの地に白いアコーディオンを並べる
12. 資料請求・問い合わせ（問い合わせを受け付ける）: グレーの箱の中にフォームを置き、オレンジのピル型送信ボタンで締める
13. フッター（運営情報と関連リンクを載せる）: 白地に中央揃えのロゴと住所を置き、関連バナーを2列で並べる

Imagery

• 青いユニフォームのスタッフが笑顔で学ぶ様子を、明るい室内で撮った写真
• 看護実習用の人形や吸引器など、実習機材を白基調で撮った写真
• 青空と緑の草原など、爽やかなイメージ写真
• フローには手元・書類・電卓などの小さなイメージ写真を添える
• アイコンは線画風の単色（オレンジまたは緑）にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPは1カラム。写真をテキストの上に置く
• FVは写真の上に白い半透明の面を敷き、見出しとCTAを重ねる
• 目次はSPでは1〜2列にする
• 表は横スクロールにするか、縦積みのカードに組み替える
• CTAボックスの電話とボタンは縦に積み、全幅にする
• PCは本文幅を約900pxで中央寄せにする

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