DESIGN.md — 赤×橙の斜めカット法人向け研修LP（Bold Red Orange Corporate Training LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 力強い・インパクト、信頼・誠実、情報量多め・訴求型
• キーワード: 赤×オレンジ・斜め帯見出し・欧文英字見出し・白カード・多角形テクスチャ・上昇矢印
• 地の質感: 薄いグレーと赤の地に、低いコントラストのポリゴン模様（三角形の面）を敷く。赤から黄橙へのグラデーション面も使う
• 形: 角丸カード、ピル型ボタン、ひし形のアイコン台、V字に切り込んだセクション境界、右上に伸びる矢印
• 温度感: 暖色寄りで熱量が高い。白とグレーで情報部分を落ち着かせる

Colors

• 地は白・薄いグレー・赤・オレンジのグラデの4種類を交互に並べ、メリハリをつける
• 赤は特長セクションの全面の地と、見出し内の強調語に使う
• オレンジのグラデはCTAセクション専用にし、右上へ伸びる矢印と組み合わせる
• 悩みのセクションだけは強調色を青にして、不安なトーンを出す
• 黒は見出しの帯ラベルと表の見出しバーに限る
• 赤い地の上には白いカードを置き、カード内の見出しは赤にする
• slant-banner は文字 #FFF0EE × 背景 #E82126 のコントラスト比が 4.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DB171C、4.56:1）を使う。
• step-item は文字 #FFF0EE × 背景 #E82126 のコントラスト比が 4.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DB171C、4.56:1）を使う。
• result-card は文字 #E82126 × 背景 #FFFFFF のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DB171C、4.51:1）を使う。

Typography

• 英字見出しは末尾にピリオドを付け、頭文字だけ赤か黒にして色を変える
• 英字見出しの下には、黒帯に白文字で字間の広い和文ラベルを付ける
• 和文見出しは強調語だけを赤（悩みの部分は青）にする
• 解決を示すコピーは斜体の極太にして、キーワードに赤い下線を引く
• 数字の実績は大きな赤字にする
• 本文は左揃え、見出しは中央揃え
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。広告種類のタグとロゴは2列のグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右に約18pxの余白を取り、白地の角丸で置く
• 赤地の特長セクションでは白カードを縦に積み、カード同士の間を約30px空ける
• カード上部の中央に短い赤の縦線を付け、右上に丸い矢印アイコンを重ねる
• CTAブロックは白カードにロゴ・プラン名・一言・ボタン2つを縦に並べる
• ステップは横向きの赤矢印線、ステップ名、ひし形アイコンの順に縦へ並べる

Elevation & Depth

• CTAボタンには下方向に濃い影を付けて立体感を出す
• オレンジ地のCTAカードには柔らかいドロップシャドウを付ける
• 白地のカードは影を付けず、淡いグレーの2px枠で区切る
• FAQ項目はグレー地に置いた白いフラットなカードにする

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: カード内の写真は角丸の矩形。人物写真は円形で切り抜き、イラストをはみ出して重ねる
• セクション境界: オレンジのCTAセクションは上辺の中央をV字に切り込み、右上に矢印を突き出す。FVの見出しは斜めに傾けた帯にする
• ボタンは完全なピル型にし、上半分を明るくしたツートーンにする
• ステップのアイコンは角丸のひし形にする
• バッジは小さなピル型
• 表の見出しバーは上側だけ角丸にする

Components

• 主CTAボタン（button-primary）: 赤のピル型ボタン。上半分が明るいツートーンで、下に影を付ける
• 資料請求ボタン（button-secondary）: 青のピル型ボタン。主CTAと同じ形にする
• 英字見出しと黒帯ラベル（section-title-en）: 大きな英字見出しの下に、黒帯に白文字の和文サブラベルを置く
• 斜めのキャッチ帯（slant-banner）: 赤からオレンジのグラデの帯を傾け、白の極太文字を載せる。脇に黄色の吹き出しを添える
• 悩みカード（worry-card）: 写真と3行のテキストを入れた角丸の枠付きカード。最終行は青字で、右上に青丸の下向き矢印を付ける
• 特長カード（feature-card）: 赤地の上の白カード。赤字の見出し、本文、角丸写真を入れ、右上に赤丸の矢印を付ける
• 黒見出しの情報ボックス（info-table）: 黒いバーの見出しと白い本文ボックスの組み合わせ。中身は赤い点の箇条書き
• ステップ（step-item）: STEPと赤い大きな番号の下に赤矢印線を引き、ステップ名と赤いひし形アイコンを続ける
• FAQアコーディオン（faq-item）: 白カードの左に赤いQ、右に赤い＋を置く
• 成果カード（result-card）: 赤いヘッダーの下に吹き出しの三角を付け、大きな数字と棒グラフ、黒帯の社名を並べる

Do's and Don'ts

Do - 赤・白・グレー・オレンジの地を交互に切り替えて、セクションのリズムを作る - 英字見出しと黒帯ラベルの組み合わせを全セクションで統一する - CTAブロックをページ内に3〜4回繰り返し配置する - 見出しは強調語だけを赤にする - 写真にはビジネスパーソンの明るいストックフォトを使う

Don't - 赤以外の強い色を見出しに使わない（青は悩みと資料請求ボタンだけ） - CTAボタンを角張った形やフラットな形にしない - カードの角丸を省いて、尖った矩形にしない - 本文を中央揃えの長文にしない - テクスチャを濃くして文字を読みにくくしない

Page Structure

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

1. ファーストビュー（得られる成果を一言で示す）: 白地に人物写真を置き、赤橙の斜め帯で大きなキャッチを重ねる。黄色の吹き出しを添え、下に赤のCTAを置く
2. 悩みの提起（担当者の不安に共感する）: グレーのポリゴン地にCHECKラベルと見出しを置く。写真付きの悩みカードを3枚縦に並べる
3. 解決の提示（悩みから解決へ橋渡しする）: 赤い太矢印の下に斜体の極太コピーを置き、キーワードに赤い下線を引く
4. 特長（3つの強みを伝える）: 赤のポリゴン地に英字見出しを置き、白い特長カードを3枚積む
5. 対応範囲（対応できる媒体と種類を示す）: 白地に認定ロゴを置き、黒見出しの表と、グレーのタグを2列で並べる
6. CTA（問い合わせと資料請求を促す）: V字に切り込んだオレンジのグラデ地に白カードを置き、赤と青のボタンを入れる
7. サービス詳細（進め方とカリキュラムを示す）: グレー地に3段のフロー矢印とイラストを置く。月ごとの赤帯でプログラム表を作る
8. 対象者・条件（誰向けか、期間と人数を示す）: 黒見出しの情報ボックスを縦に並べ、中身は赤い点の箇条書きにする
9. 会社紹介・導入実績（信頼性を示す）: 英字見出しとイラストを置き、大きな赤い数字の実績と、取引先ロゴを2列で並べた枠を続ける
10. お客様の声（成果事例を示す）: 見出しの後に本文を置き、赤ヘッダーの成果カードに数字とグラフを入れる
11. 導入の流れ（開始までの手順を示す）: 4つのステップを、赤矢印線とひし形アイコンで縦に並べる
12. よくある質問（不安を解消する）: 写真の帯の後、グレー地に白いアコーディオンを5つ並べる
13. 最終CTA（最後の行動を促す）: 途中のCTAブロックと同じ作りをそのまま繰り返す

Imagery

• 明るいオフィスで働く日本人ビジネスパーソンのストックフォトを使う
• 悩みの写真は、頭を抱えるなど困った表情を寄りで撮ったもの
• サービス説明には、フラットな人物イラスト（PC画面・会議・チャット）を使う
• 赤いひし形の中に白い線画アイコンを入れる
• 背景には淡いポリゴン模様を敷き、右上に伸びる上昇矢印のモチーフを添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは本文幅を約900pxに中央寄せし、背景は全幅にする
• 悩みカード・フロー・ステップは、PCでは3〜4列の横並びにする
• 特長カードは、PCでは本文を左、写真を右に置く横組みにする
• プログラム表は、PCでは6か月を横に並べ、下に色分けの帯を引く
• FAQは、PCでは左に見出し、右にリストの2カラムにする
• PCのCTAボタンは、資料請求と問い合わせを横並びにする

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