DESIGN.md — 赤×白×クリームの法人向け移転サービスLP（Bold Red Corporate Service Appeal LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 情報量多め・訴求型、力強い・インパクト、信頼・誠実
• キーワード: 赤ベタ帯・クリームの斜めストライプ・黄色マーカー・赤枠カード・電話CTA帯・ワンストップ訴求
• 地の質感: 白地・薄グレー地・クリームの斜めストライプ地を交互に使う。赤帯には放射線状の集中線をうっすら入れる
• 形: 角丸小さめの白カードに赤ヘッダー。見出しは角括弧やスラッシュで囲む。セクション境界は直線が基本で、フォーム背景だけ斜めに切る
• 温度感: 赤と黄で温度は高め。白と薄グレーで事務的な清潔感を足す

Colors

• 地は白→赤帯→薄グレー→クリームストライプの順に交互に切り替え、単調にしない
• 赤は帯・カードのヘッダー・見出しのキーワードに使う。本文には使わない
• 主CTAの問い合わせボタンは青にして、赤地の上でも埋もれないようにする
• サブの一括申込ボタンは黄色ピル。文字は白
• 強調したい語は赤文字か黄色マーカー。白地に黒い四角を敷いた反転文字も時々使う
• 黒帯は悩みの補足だけに使う
• cta-band は文字 #FEF4F1 × 背景 #E11E1A のコントラスト比が 4.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DC1D19、4.59:1）を使う。
• button-secondary は文字 #FEF4F1 × 背景 #FBC101 のコントラスト比が 1.53:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#8B6B01、4.62:1）を使う。
• price-circle は文字 #E11E1A × 背景 #F2F2F2 のコントラスト比が 4.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#DC1D19、4.56:1）を使う。

Typography

• 見出しはどれも極太ゴシック。キーワードだけ赤にするか、文字を大きくする
• 見出しは角括弧［ ］か左右のスラッシュで囲む
• 実績の数字は金色の明朝で大きく、単位は小さく
• 本文は13px前後で短い行にする
• 電話番号は太字の欧文数字で大きく見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。理由カードと事例は縦積み
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションごとに背景を全幅で切り替える
• CTA帯（電話＋問い合わせ）をFV直後・中盤・末尾の3回置く
• 理由カードはPCでは3＋2列、SPでは1列
• フローはSTEPを縦に並べ、カードの間に下向き三角を入れる
• FAQは枠線付きのアコーディオンで、右端に＋を置く

Elevation & Depth

• 白カードには弱いドロップシャドウ（0 2px 6px rgba(0,0,0,.15)）
• CTA帯の白パネルは影なしでフラットに
• 金のエンブレムは立体的な画像素材で見せる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 四角いまま切り抜く。人物はパスで切り抜いて背景に重ねる
• セクション境界: 基本は直線。フォーム背景だけ赤と灰の斜め切り
• ボタンは全てピル型
• カードは角丸小さめで、上辺に赤いヘッダー
• STEPカードは黒い細枠で、左に赤い正方形のアイコン部
• チェックアイコンは黒い丸

Components

• 電話＋問い合わせCTA帯（cta-band）: 赤地に白パネルを置き、左に通話無料の電話番号、右に青いピルボタンを並べる
• 問い合わせボタン（button-primary）: 青のピル型。左にメールアイコン、右に矢印
• 一括申込ボタン（button-secondary）: 黄色の幅広ピルボタン
• 料金の丸バッジ（price-circle）: 赤い太枠の白い円。中に規模名・面積・赤い価格を入れる
• 選ばれる理由カード（reason-card）: 上に赤いヘッダーと番号、その下に写真と短い説明。外枠は赤
• 悩みチェックリスト（worry-check）: 白い横長の枠にチェックアイコン、赤字＋黄マーカーの悩みを入れる
• STEPカード（step-card）: 黒枠の横長カード。左に赤いアイコン部とSTEP番号、右にタイトル（赤）と説明
• FAQ行（faq-item）: 黒枠の白い行。左に赤丸のQ番号、右に赤の＋
• 角括弧の見出し（heading-bracket）: 黒い太い角括弧で、中央の見出しを挟む
• 必須ラベル付きフォーム（form-required）: 赤い小さな必須ラベル、グレーの入力欄、青い送信ボタン

Do's and Don'ts

Do - 赤帯・白地・クリームストライプを交互に使い、セクションの区切りを明確にする - 数字の実績は金のエンブレムで3つ並べる - 強調語は赤文字＋黄マーカーで目立たせる - CTA帯は同じデザインを繰り返し配置する - スーツ姿の人物を切り抜いてテキストの横に添える

Don't - 赤を本文や細い文字に多用しない - パステル調や細い書体にしない - CTAボタンを赤地の上で赤にしない - 角丸を大きくしすぎてポップに寄せない - 装飾のない白地だけのセクションを長く続けない

Page Structure

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

1. ファーストビュー（サービス内容と料金の目安を即座に伝える）: オフィス写真を背景に、赤黒の極太見出し、タグ、料金の丸バッジ3つ、右側に実績の月桂樹
2. 第三者評価（信頼性を示す）: 薄地に調査結果の見出しと金エンブレム3つを置き、下に注釈
3. CTA帯（早めの問い合わせを促す）: 赤地の白パネルに電話番号と青ボタン
4. 悩みの提起（共感を得る）: 頭を抱える人物写真と、チェック付きの悩み4つ。下に黒帯で補足
5. 解決提示（相談先として提案する）: クリームの集中線地に大きな赤文字。続けて赤帯に人物とワンストップ訴求
6. 選ばれる理由（差別化）: 番号付きの赤枠カード5枚
7. 資料ダウンロード（見込み客の獲得）: ストライプ地に白パネル。冊子画像2つとチェックリスト、ボタン
8. 動画紹介（サービスの理解を深める）: 赤い集中線地の中央に動画プレーヤー
9. サービスの特徴（工程ごとの対応範囲を示す）: 赤ヘッダーのカード3枚を矢印でつなぎ、写真グリッドを入れる
10. CTA帯＋関連サービス（問い合わせとクロスセル）: 赤地に電話CTA。白枠内にロゴボタン4つと黄色の一括申込ボタン
11. 事例一覧（実績で安心させる）: 赤ヘッダーのカードに、写真・本文・項目表を入れる
12. 導入の流れ（手順を見せて不安を減らす）: 6つのSTEPカードを縦に並べる
13. よくある質問（疑問を解消する）: クリームのドット地にアコーディオン5行
14. 問い合わせフォーム（コンバージョン）: 赤とグレーの斜め背景に白いフォームパネル、青い送信ボタン

Imagery

• スーツ姿の日本人ビジネスパーソンを切り抜く。表情は明るい案内か、悩むポーズ
• オフィス・作業現場の明るい実写を小さく四角くグリッドに並べる
• 金の月桂樹やエンブレムで実績を見せる
• 赤地には放射線状の集中線、クリーム地には斜めストライプか淡いドット
• アイコンは白か赤の単色線画
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央の約900px幅で組み、SPは1カラムに縦積みする
• 理由カードはPCの3＋2列をSPでは1列にする
• CTA帯はSPでは電話とボタンを上下に分け、電話はタップで発信できるようにする
• FVの料金バッジはSPでも3つ横並びのまま小さくする
• 関連サービスのロゴボタンはSPでは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 行書くと起動時に読み込まれる。