DESIGN.md — 鮮やかな青×オレンジCTAの人材SaaS LP（Bright Blue Flat Illustration SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: クール・先進的、信頼・誠実、清潔・爽やか、ポップ・元気
• キーワード: 鮮やかな青・フラットイラスト・アプリ画面モック・オレンジCTA・色分けされた機能・余白多め
• 地の質感: フラットな単色の面に、ごく薄い影と淡いグラデーション。背景に大きな星や斜めの帯を半透明で敷く
• 形: 角丸8〜16pxのカード、角丸のボタン、円形の番号バッジ、細い線で囲んだピル型ラベル
• 温度感: 明るく爽やか。青は寒色系だが、オレンジとポップなイラストで親しみやすさを出している

Colors

• 地は白と#F5F5F5の薄グレーを交互に使い、セクションの区切りを色で見せる
• ファーストビュー・中間のCTA帯・機能一覧など、要所だけ鮮やかな青の全幅面にする
• 主CTAはオレンジのグラデーション（明るい橙→濃い橙）だけにし、サブボタンは白地に青文字
• 4つの機能・領域には紫・青・オレンジ・ティールを固定で割り当て、番号・ラベル・キャッチの色をそろえる
• 見出しの上に置く英字ラベルは青の文字だけ。見出し本体は濃紺
• 本文中の強調語は、その機能の色で文字色を変えて示す
• button-primary は文字 #FEFAEE × 背景 #FA9343 のコントラスト比が 2.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BB5505、4.56:1）を使う。
• button-outline は文字 #048CF2 × 背景 #FFFFFF のコントラスト比が 3.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0379D1、4.51:1）を使う。
• summary-pill は文字 #7E7CFA × 背景 #D1E4FC のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#4B48F8、4.53:1）を使う。
• category-tag は文字 #048CF2 × 背景 #FFFFFF のコントラスト比が 3.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0379D1、4.51:1）を使う。
• logo-strip は文字 #7E7CFA × 背景 #FBEBEE のコントラスト比が 2.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#4B48F8、4.61:1）を使う。

Typography

• 見出しはすべて太いゴシック。明朝は使わない
• セクションは「英字ラベル（青）→日本語見出し（濃紺）→灰色のリード文」の3段で始める
• ファーストビューのキャッチは左右に斜線（＼ ／）を付けて黄色の文字にする
• システム名は白い角丸の座布団の上に青の太字で置く
• CTAボタンは上に小さな前置き文、下に大きな太字の2段構成にする
• 成果カードの説明は中央揃えで2行程度に収める
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC では成果カードを 3 列、機能はジグザグの 2 カラム、流れは 4 列にする
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約16px。カードは画面幅いっぱい近くまで広げる
• セクションの上下には約64pxの余白をとる
• 機能ブロックは「ピル型の要約 → 番号と機能名 → スマホ画面モック → 色付きキャッチ → 本文」の順に積む
• 比較図は上下に並べ、間に下向きの三角を入れる
• コンセプト図は、円形の図→イラスト→色分けした領域カード4枚→まとめカードの順に並べる

Elevation & Depth

• カードはごく薄い影（0 2px 8px rgba(0,0,0,0.06)）＋1pxの淡い枠線
• スマホ画面モックの上に重ねるUIの切り出しには、少し強めの影を付けて浮かせる
• CTAボタンは影なしのフラットなグラデーション

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸の長方形。アプリ画面はスマホ端末の枠に収め、UIの一部を角丸カードとして重ねる
• セクション境界: 直線で切り替える。背景に半透明の大きな星や斜めの帯を敷く
• ボタンは角丸8px程度の長方形。ピル型にはしない
• ラベル類（成果カードの分類・図のタイトル）は細い青線で囲んだピル型
• 機能の番号は塗りつぶした円に白い数字
• 機能の要約は淡い色の角丸の帯に入れる

Components

• 資料請求ボタン（button-primary）: オレンジのグラデーション。上に小さな前置き文、下に大きな太字を置く2段の文字
• 無料デモボタン（button-secondary）: 白地に青い文字。ファーストビューで主CTAの下に置く
• 一覧へのリンクボタン（button-outline）: 白地に青の2pxの枠線と青い文字
• 英字ラベル付き見出し（section-heading）: 青い英字ラベルの下に濃紺の日本語見出しを中央揃えで置く
• 機能番号バッジ（feature-number）: 直径約44pxの色付きの円に白い2桁の数字。機能名と横に並べる
• 機能の要約の帯（summary-pill）: その機能の色を淡くした角丸の帯に、色付きの文字で要約を1行で書く
• 分類タグ（category-tag）: 白地に細い青の枠線、青い文字の小さなピル型
• 色分けした領域カード（domain-card）: 上がアイコン付きの色帯ヘッダー、下が白地で中央揃えの説明。強調語は色文字にする
• 比較カード（compare-card）: グレーと青のヘッダー付きカードを上下に並べ、イラストと結論文を入れる
• 導入企業ロゴの帯（logo-strip）: 淡いピンクの帯に斜線付きの見出しを置き、その下にロゴを2段で横に並べる

Do's and Don'ts

Do - 主CTAは常にオレンジのグラデーションで統一し、セクションの合間に繰り返し置く - 機能ごとの固定色を、番号・要約の帯・キャッチの3か所でそろえる - 機能の説明には、スマホ端末の枠に収めた画面モックを必ず添える - イラストは同じタッチのフラットな人物で統一する - 白とグレーの地を交互に並べ、リズムを作る

Don't - CTAに青やほかの色を使わない（オレンジ以外にしない） - 写真の上に重ねたグラデーションや暗い背景を多用しない - 明朝体や手書き風の書体を混ぜない - 機能の色を途中で入れ替えない - 見出しの英字ラベルを省かない

Page Structure

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

1. ファーストビュー（価値と製品カテゴリを示し、資料請求へ誘導する）: 青の全幅面に黄色のキャッチ、白い座布団の製品カテゴリ名、白い下線付きのサブコピー。手に持ったスマホと特許メダルを置き、下にオレンジのCTAと白いサブボタン
2. 導入実績（業界の大手に選ばれていることを示す）: 淡いピンクの帯に斜線付きの見出し。白地に企業ロゴを2段で並べる
3. お客様の声（導入事例で信頼してもらう）: 写真付きの事例カードのカルーセルと丸いドット。下に枠線だけのボタン
4. 成果例（導入による効果を3つの面から示す）: グレー地に白い角丸のイラストカード。分類タグ・太字タイトル・2行の説明を中央揃えで置く
5. 考え方・比較（従来のツールとの違いを示す）: グレーのヘッダーのカード（モノクロのイラスト）から青のヘッダーのカード（カラーのイラスト）へ、下向きの三角でつなぐ
6. コンセプトモデル（製品を構成する4つの領域を図で理解してもらう）: 淡い水色地に4色の円形の図。その下に、色帯ヘッダーの領域カード4枚と、グラデーションの枠のまとめカード
7. 中間CTA（資料請求を再度うながす）: オレンジのグラデーションの大きなバナーに、資料の表紙のサムネイルと2段の太字
8. 機能紹介（主要な4機能を順に説明する）: 要約の帯・番号と機能名・スマホ画面モック・色付きのキャッチ・本文を、機能ごとに色を変えて繰り返す
9. その他の機能（日常的に使う機能を一覧で見せる）: 青の全幅面に、白いイラストカードをグリッドで並べる（PCでは3列）
10. 特長（サポートやノウハウの強みを示す）: 淡い水色のカードに青い番号ラベル・青い見出し・画面の図
11. 導入の流れ（導入までの手順を示す）: 番号付きのカード4枚。丸いグレーの背景に青いアイコン
12. 料金（料金体系を示す）: 淡い水色地に、青い塗りのボックスと枠線のボックスを「＋」でつなぐ
13. よくある質問（導入前の不安を解消する）: グレーの角丸の帯に、黒丸のQアイコンと右端の「＋」を置くアコーディオン
14. 資料請求フォーム（コンバージョン）: 青からティールのグラデーションの地に白いカード。資料の紹介と、必須バッジ付きの入力欄、オレンジの送信ボタン

Imagery

• 人物はフラットなベクターイラスト。線なしで、ピンク・黄・ティール・紫・青のポップな配色
• 比較の「従来」側だけ、イラストをグレースケールにして対比を見せる
• アプリ画面は角丸のスマホ枠（くすんだ青の縁）に収め、UIの一部を白いカードとして斜め前に重ねる
• 背景には半透明の大きな星形や斜めの帯を薄く敷く
• 実績はメダル型のバッジで見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではファーストビューを左に文字とCTA、右にスマホのビジュアルの2カラムにする
• PCではヘッダーにナビゲーションと2つのボタン（デモ・資料請求）を常に表示する
• 成果カード・その他の機能は3列、導入の流れは4列、領域カードは2×2で並べる
• 機能紹介はPCでは画像と文字を左右交互に置くジグザグにする
• 比較カードはPCでは横に並べ、右向きの三角でつなぐ
• フォームはPCでは左に資料の紹介、右に入力欄の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 行書くと起動時に読み込まれる。