DESIGN.md — 赤×白のアイソメ図解 法人研修講座 LP（Bold Red Isometric Corporate Training LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: クール・先進的、信頼・誠実、力強い・インパクト、情報量多め・訴求型
• キーワード: 赤ベタ帯・アイソメイラスト・欧文大見出し・白カード・カギ括弧装飾・表組み
• 地の質感: フラットな面に、斜めの薄いストライプや光のグラデーションを赤帯へ重ねる程度。影はごく弱い。
• 形: 角丸はほぼ使わない直角ベース。細線のカギ括弧と、ステップをつなぐ角丸の細い線で動きを出す。
• 温度感: 赤は熱量が高い。白・グレーの地で冷静さとのバランスを取る。

Colors

• 地は白・薄グレー・赤ベタ帯の 3 種を交互に並べ、リズムを作る
• 赤帯の上には白カードを置き、カード内の文字は黒にする
• 強調語だけ赤文字にする。マーカーは使わない
• 主 CTA は赤地＋白文字。赤帯の上では白地＋赤文字に反転させる
• 表の見出し列は深紅、本文セルは薄グレーにする
• フッターだけ黒地を使う

Typography

• 欧文の大見出しの直下に、小さな和文の訳語を添える
• 背景に淡い大きな欧文を透かしで敷く
• 本文は 14px・行間 1.8 で、詰めすぎない
• 番号は大きな欧文数字を半透明で使う
• 強調は太字＋赤文字で行う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードや講師紹介は縦積み、FAQ は全幅
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは全幅の帯で、中身は中央寄せのコンテナに入れる
• 見出しは中央寄せ。その下の説明文をカギ括弧の線で囲む
• ステップは左右交互に配置し、細い線でつなぐ
• 講座内容は表組み、日程はガントチャートで見せる
• 会社情報は罫線区切りの 2 列テーブルにする

Elevation & Depth

• 白カードに、ごく薄い影（0 2px 8px rgba(0,0,0,.06)）をつける
• 赤帯の上の白カードは、影を少し強めて浮かせる
• それ以外は影なしのフラットな面にする

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は長方形の角版。講師だけ円形に切り抜く
• セクション境界: 直線で色を切り替える。赤帯には斜めの光のストライプを入れる
• ボタンは長方形で、角丸は 2px 程度にとどめる
• 課題カードとボタンは細い枠線で囲む
• 見出しの周りには、左上と右下に L 字の細線をつける
• FAQ の行は白い長方形にし、右端に＋マークを置く

Components

• 資料請求ボタン（button-primary）: 赤地に白文字。末尾に小さな矢印アイコンをつける
• 赤帯上の反転ボタン（button-inverse）: 白地に赤文字の全幅ボタン。サブは白枠線のみ
• 課題チェックカード（issue-card）: 上部に赤いチェック丸を置き、課題を 2 行でまとめる。細枠で囲み、2〜3 列のグリッドに並べる
• 欧文＋和文見出し（section-title）: 太い欧文の大見出しの下に、和文の小見出しを置く。説明文はカギ括弧の線で囲む
• 赤帯ラベル（ribbon-label）: 下向きの赤い三角の下に、白抜き文字の赤い横帯を置き、解決パートへつなぐ
• 番号付きステップカード（step-card）: 赤帯の上に白カードを置き、横に半透明の大きな番号とイラストを添える
• 受講生の声カード（voice-card）: 左上にアイコンを置き、太字の見出しと属性の注釈、本文の順に並べる白カード
• アコーディオン FAQ（faq-item）: 赤い太字の Q と質問文を並べ、右端に＋を置く。白い行を縦に連ねる
• 講座内容の表（course-table）: 左列は深紅地に白文字、右側は薄グレーのセルに箇条書きを入れる
• 縦線付き小見出し（subhead-bar）: 左に赤い縦線をつけた太字の小見出し

Do's and Don'ts

Do - 白・グレーの地と赤帯を交互に使い、メリハリをつける - セクション見出しは、欧文の大見出しと和文の小見出しをセットで置く - イラストは赤・白・グレーのアイソメ図で統一する - 長い情報は表・チャート・カードに構造化する - CTA は複数のセクションに繰り返し置く

Don't - 赤以外の強い色を足さない - 大きな角丸やピル型ボタンにしない - 濃い影や立体的な装飾を使わない - 手書き風・丸ゴシックの書体を使わない - 赤帯の上に赤文字を直接置かない

Page Structure

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

1. ファーストビュー（講座の対象と価値を示す）: 淡い赤白の地に、透かしの欧文と赤い太字の講座名、タグ 2 つ、右にアイソメのイラストを置く
2. 課題の提起（現場の悩みに共感してもらう）: 白いパネルに、チェック付きの課題カードを 6 枚グリッドで並べる
3. 解決の提示（講座が解決策だと示す）: 赤い三角と赤帯ラベルの後、グレーのボックスに枠囲みのキーワードと電球のイラストを置く
4. ビジョン（受講後の変化を段階で示す）: 赤帯の上に 3 ステップの白カードを左右交互に置き、曲線でつなぐ
5. 講座概要・内容（カリキュラムを詳しく伝える）: 赤枠の白パネルの中に、概要・表組み・ガントチャート状のスケジュールを入れる
6. 特長（差別化ポイントを伝える）: グレーの地に、番号付きの写真と、重ねた白カードを並べる
7. 講師紹介・動画（信頼を補強する）: 円形の顔写真、肩書き、実績リストを並べる。下に、カギ括弧の枠に入れた動画埋め込みを置く
8. 資料請求 CTA（中間のコンバージョン）: 赤グラデの帯に、欧文見出しと白い全幅ボタンを置く
9. 受講生の声（成果の実証）: 赤帯に数値の強調と円グラフのイラストを置き、白い声カードを互い違いに配置する
10. よくある質問（不安を解消する）: グレーの地に、白いアコーディオンの行を並べる
11. お問い合わせ CTA（最終コンバージョン）: 赤グラデの帯に、白の主ボタンと白枠のサブボタン 2 つを置く
12. 運営会社・拠点（企業の信頼性を示す）: 罫線の会社情報テーブルと、グレー見出し付きの拠点カードを 2 列で並べる
13. フッター（ブランドを締める）: 黒地にロゴ・理念文・認定マークを中央寄せで置く

Imagery

• 人物や機器は、赤・白・グレーのアイソメトリックなフラットイラストで描く
• 人物は赤い服を差し色にし、白い台座の上に配置する
• 写真はビジネス・データ・テクノロジー系で、青みのある寒色寄りを使う
• 講師は白背景の顔写真を円形に切り抜く
• 赤帯には斜めの光の筋と、細い曲線を薄く重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は 2〜3 列のカードを、SP では 1〜2 列に落とす
• ステップの左右交互配置は、SP では縦積みにしてイラストを上に置く
• 講座内容の表は、SP ではカード状の縦積みか横スクロールにする
• 欧文の大見出しは、PC 48px 前後から SP 32px に縮める
• ヘッダーのナビは、SP ではハンバーガーメニューと資料請求ボタンにする
• 会社情報の 2 列テーブルは、SP で縦積みにする

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