DESIGN.md — 紺×水色のフラットイラスト業務SaaS LP（Corporate Blue Flat Illustration SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型
• キーワード: 紺と水色・フラットイラスト・白カードのグリッド・丸角パネル・繰り返す CTA 帯・比較表
• 地の質感: グラデーションや質感は使わない。ベタ塗りの平面だけで組み、影はごく薄くする。
• 形: 角丸 8〜12px のカード、片側を大きく丸めた水色パネル、角丸タグ型の見出しラベル。
• 温度感: やや寒色寄りで落ち着いている。赤と黄の差し色で親しみを出す。

Colors

• 地は白→淡水色→白の順に交互に敷き、セクションを区切る。
• 機能一覧はやや濃い水色の地に白カードを並べる。
• 紺は CTA 帯、見出しラベル、ヒーロー、フッター手前の帯にだけ使う。
• 主 CTA は赤一色。サブ CTA は白地に紺文字で紺の枠線。
• 黄色は価格・実績バッジだけに使う差し色。
• 料金比較は左を淡水色、右を濃い水色にして段階を表す。

Typography

• 見出しは太字ゴシックで中央揃え。2 行に分けて組む。
• 価格の数字は特に大きくし、単位は小さく添える。
• 特長には先頭にチェックアイコンを付けた短い箇条書きを 2〜3 行置く。
• 本文は 14px 前後で行間を広くとる。
• 感嘆符を使った見出しで勢いを出す。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは 2 列のグリッドにする。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 特長ブロックは、イラストとテキストを左右交互に配置する（SP では縦に積む）。
• 特長パネルは片側だけ大きく丸めた水色の面にする。
• 機能カードは白地にして、見出し・説明・図版の順に並べる。
• CTA 帯は 2〜3 セクションおきに挟む。
• 比較表は 2 列の左右対比で組む。

Elevation & Depth

• カードは影をごく薄くするか、影なしの白面にする。
• CTA 帯は影なしの紺のベタ面にする。
• FAQ は白いバーを並べ、影はつけない。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 40px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は切り抜き。UI 画面は角丸の端末モックに入れる。
• セクション境界: 直線で区切り、水色パネルの片側を大きく丸める。
• ボタンは角丸 4px の長方形にする。
• 見出しラベルは紺の角丸タグにする。
• カードの角丸は 8px。

Components

• 主 CTA ボタン（button-primary）: 赤地に白文字で、外部リンクのアイコンを付ける。
• サブボタン（button-secondary）: 白地に紺文字と紺の枠線。
• CTA 帯（cta-band）: 紺の角丸ボックスに見出しと補足を入れ、赤と白のボタンを並べる。
• 特長ラベル（label-tag）: 紺の角丸タグに、特長の名前を白文字で入れる。
• 機能カード（feature-card）: 白カードに見出し・説明・アイコン図版を収める。
• 価格バッジ（price-badge）: 黄色の円の中に大きな価格を入れる。
• 料金比較パネル（price-compare）: 左が無料、右が有料の 2 分割パネル。
• FAQ アコーディオン（faq-item）: 白いバーの左に Q、右に開閉の矢印を置く。

Do's and Don'ts

Do - 紺・水色・白の三層で配色を統一する。 - イラストは紺と水色のフラットな人物と UI に揃える。 - CTA 帯は定期的に繰り返す。 - 数値（価格・社数・削減率）を大きく見せる。

Don't - グラデーションや写真の背景を多用しない。 - 赤を CTA 以外に使わない。 - ピル型や極端に丸いボタンにしない。 - 明朝体や手書きの書体を使わない。

Page Structure

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

1. ファーストビュー（価格の安さと実績を一目で伝える）: 紺と黄の斜めの面に人物写真・UI モック・価格バッジを置き、CTA を 2 つ並べる。
2. 導入企業ロゴ（信頼を示す）: 白地にロゴを横一列に並べる。
3. 料金比較（無料と有料の違いを示す）: 水色の 2 分割パネルの下にボタンを 2 つ置く。
4. 特長（主な価値を説明する）: 丸めた水色パネルに、ラベル・見出し・チェックリスト・イラストを左右交互に入れる。
5. CTA（申込を促す）: 紺の帯に赤と白のボタンを置く。
6. 機能一覧（機能の網羅性を示す）: 水色の地に、白カードを 4 列のグリッドで並べる。
7. 連携サービス（関連製品と組み合わせる価値を示す）: 色分けしたパネルを矢印でつないだ図。
8. 利用ステップ（始め方を示す）: 矢印型の帯の下に、番号付きのカードを 3 つ並べる。
9. セミナー案内（検討層を育てる）: 紺の見出しを付けたカードを 2 枚並べる。
10. 効果の数値（削減効果を示す）: 棒の図と大きな % 表示に、不要になる業務のチェックリストを添える。
11. 実績とセキュリティ（安心感を出す）: 金色の実績表記・ロゴグリッド・認証マーク・項目タイルを並べる。
12. 料金詳細の比較表（プランごとの機能差を示す）: 左右の色が異なる 2 列の表に、紺の見出し帯を付ける。
13. よくある質問（不安を解消する）: 淡水色の地に白いアコーディオンを並べる。
14. 関連サービスとフッター（ほかの製品へ誘導する）: 紺の地に白いサービスカードを並べ、その下に多段のリンク群を置く。

Imagery

• 人物は線の少ないフラットなイラストで、紺のスーツに肌色を合わせる。
• UI はパソコンやスマホのモックで見せ、時刻などの数字を大きく表示する。
• アイコンは水色の面に紺の線で描き、黄色のチェックマークを添える。
• ヒーローにはビジネス服の人物の切り抜き写真を置く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC で 3〜4 列のカードは、SP では 2 列または 1 列にする。
• 左右交互の特長ブロックは、SP ではイラストを上、テキストを下に積む。
• CTA 帯のボタンは、SP では縦に並べて全幅にする。
• 比較表は SP では左右 2 列のまま、文字を小さくする。
• PC の本文幅は 860px 前後で中央寄せにする。

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