DESIGN.md — 赤×黄の線画イラストで見せるAI集客SaaS LP（Bold Red Yellow Flat Illustration SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 力強い・インパクト、ポップ・元気、情報量多め・訴求型、信頼・誠実
• キーワード: 赤黄の2色ブロック・線画イラスト・白カード・丸バッジ・太ゴシック・番号付き
• 地の質感: グラデーションなしのフラットな単色面。カードに軽い影だけを付ける
• 形: 角丸8〜16pxのカードと正円バッジ。ボタンは角丸の長方形
• 温度感: 暖色が中心で元気。白とグレーのセクションを挟んで落ち着かせる

Colors

• 赤→白→黄→赤→白→黄→白→赤→黒の順で、セクションごとに地の色を切り替える
• 赤地の上には白カードか白文字を置く。黄地の上には白カードと黒文字を置く
• 主CTAは赤地でも白地でも黄色地＋黒文字に統一する
• 見出しの一部だけを赤（白地のとき）や黄（赤地のとき）で強調する
• イラストは黒線に黄色を差し、要所にだけ赤を使う
• ネガティブ要素の×印は赤の細い手書き風にする

Typography

• 見出しは極太ゴシックで中央揃えにし、2〜3行に改行する
• セクション見出しの上に小さなリード文を置く
• 本文は短く2〜3行に収める
• 数字は赤の大きな太字にして、単位を小さく添える
• 強調語は色を変えるか、黒帯で囲んだ白抜き文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はカードを3列・2列で並べる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードの左右余白は約15px
• カード同士の間隔は12〜16px
• セクションの上下余白は56〜72px
• FVはイラストを上、コピーを下に置く
• チェックリストは点線で区切る

Elevation & Depth

• メリットカードには柔らかい影（0 4px 12px rgba(0,0,0,.15)）を付ける
• FVの丸バッジは黒の細枠＋薄い影
• 悩みカードは影を付けず、1pxのグレー枠だけにする
• フォームカードには軽い影を付ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 背景を抜いた線画イラストをそのまま置く。写真は使わない
• セクション境界: 直線で色面を切り替える
• ボタンは角丸4〜6pxの横長長方形
• 数値バッジや特長アイコンは正円にする
• MERIT番号は黄色の正円にし、カードの左上にはみ出させる
• ステップ番号は赤の正円を縦線でつなぐ

Components

• 主CTAボタン（button-primary）: 幅いっぱいの黄色ボタン。黒の太字に右矢印を付け、軽い影を落とす
• キャッチ帯ラベル（label-band）: FVの見出し上に置く、幅いっぱいの細い黄色帯ラベル
• 数値丸バッジ（stat-circle）: 白い正円にアイコン・項目名・赤の大きな数字を縦に並べ、2×2で配置する
• 悩みカード（problem-card）: グレー枠の白カード。赤い×印・太字の見出し・短い説明を中央揃えで置く
• メリットカード（merit-card）: 赤地に置く白カード。左上に黄色丸の番号、中央に線画アイコンを置く
• ステップタイムライン（step-timeline）: 赤丸の番号を赤い縦線でつなぎ、右側に見出しと説明を置く
• FAQアコーディオン（faq-item）: 赤丸のQアイコン・質問文・右端の赤い▼を並べ、下罫線で区切る
• 問い合わせフォーム（form-card）: 赤地に置く白カード。ラベルに赤の必須バッジを付け、入力欄はグレー枠の角丸にする

Do's and Don'ts

Do - 地の色は赤・黄・白の3色を大きな面で交互に使う - イラストは黒線＋黄色ベタで統一する - 数字や価格は大きな赤い太字で目立たせる - CTAはどの地の上でも黄色ボタンで統一する - カードは白地で角丸8pxにする

Don't - グラデーションや写真の背景を使わない - 赤と黄以外の鮮やかな色を足さない - 細い明朝体を使わない - 赤地の上に赤いボタンを置かない - 1カードに長文を詰め込まない

Page Structure

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

1. ヘッダー（ブランドの表示とナビゲーション）: 白地。左にピンアイコン付きのロゴ、右にハンバーガーメニュー
2. ファーストビュー（課題の提起と価値の提示）: 赤地。人物イラスト・黄帯ラベル・白い極太コピー・チェックリスト3行・数値丸バッジ4つ・黄色CTAの順に並べる
3. 悩みの提起（よくある課題への共感）: 白地。×印付きの枠カードを3枚縦に並べる
4. 原因の提示（課題の根本原因を示す）: 悩む人物2人のイラストの下に、グレーボックスで×印付きの箇条書きを4つ置く
5. 解決策（サービスの概要を伝える）: 黄地。中央揃えのリード文と黒帯の強調見出しを置き、白い丸アイコンを3つ横に並べる
6. メリット（5つの利点を示す）: 赤地。黄色丸の番号付き白カードを縦に5枚並べ、それぞれ大きな線画アイコンを入れる
7. 利用の流れ（導入の手軽さを示す）: 白地。赤丸番号の縦タイムラインで3ステップを見せる
8. 選ばれる理由（他社との違いを示す）: 黄地。黄色数字・小さなイラスト・太字見出しを入れた白カードを4枚置く
9. よくある質問（不安の解消）: 白地。Qアイコン付きのアコーディオンを5つ並べる
10. CTA・フォーム（無料相談の申込）: 赤地。白文字の見出しの下に白いフォームカードを置き、黄色の送信ボタンとグレーのピル型電話ボタンを付ける
11. フッター（補足リンクとコピーライト）: 黒地。中央にロゴ・リンク・コピーライトを置く

Imagery

• 黒の太めの線に黄色ベタを入れたフラットな人物イラスト。スーツ姿のビジネスマンや店舗スタッフを描く
• スマホ・ロボット・コイン・店舗・グラフを均一な線幅のアイコン調で描く
• 赤はグラフの矢印など、一部にだけ差す
• 背景は透過にして、白カードや色面の上に直接置く
• 人物は困り顔や指差しなど、感情がわかるポーズにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはFVを左テキスト・右イラストの2カラムにし、数値バッジを4つ横一列に並べる
• PCは悩みカードを3列、メリットを3列＋2列、理由カードを2×2で並べる
• PCはヘッダーにアンカーナビと小さな黄色CTAを置く
• PCはフォームの入力欄を2列に組む
• PCは本文の幅を約800〜960pxで中央に寄せる

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