DESIGN.md — 紺×藍の青系イラスト BtoB 情報 SaaS LP（Navy and Indigo Clean B2B SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、クール・先進的、シンプル・ミニマル、情報量多め・訴求型
• キーワード: 濃紺の帯・藍色の強調・白カード・青一色のイラスト・ピル型ラベル・3 カラムのグリッド
• 地の質感: フラットで質感はない。カードには薄い影と細い枠線を付ける
• 形: 角丸 8〜12px のカードと小さなピル型ラベル。ボタンは角丸 4px 程度の長方形
• 温度感: 寒色寄りでクール。白地を多めに取って清潔感を出す

Colors

• 地は白と淡いグレーを交互に使う。解決策セクションだけ淡い青のグラデーション地にする
• 濃紺の帯はヘッダー・中間 CTA・フッターに限って使い、ページの区切りにする
• 見出しは黒文字にして、重要な語だけ藍色に変えて強調する
• CTA は鮮やかな青の塗りと白い枠ボタンを並べ、ボタンの重みに差をつける
• イラストやアイコンは青系の 1 色だけで濃淡をつける
• 暖色は使わない。写真以外は寒色だけで組む

Typography

• 見出しは太字のゴシックで、中央揃えにする
• 強調語は藍色に変える。マーカーや下線は使わない
• ブランド名だけ欧文セリフ体にして、和文の見出しに混ぜる
• STEP 番号は小さな英大文字で、藍色にする
• 本文は行間を 1.8 程度まで広げ、読みやすくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは縦に積む（PC は 3 カラム）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクションは「ピル型ラベル→見出し→カード群」の順で並べる
• カードの高さは揃えて、イラスト→見出し→箇条書きの順に配置する
• 中間 CTA は濃紺の全幅の帯にボタン 2 つを横に並べる
• データ項目はアイコン付きの小さなタイルをグリッドで並べる
• FAQ は白カードを縦に並べ、Q と A のバッジを付ける

Elevation & Depth

• カードはごく薄い影（0 2px 8px rgba(0,0,0,.06)）を付ける
• 細い枠線と影を併用して、面を浮かせすぎない
• ボタンには影を付けない

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸 8px の長方形。人物写真も角丸の長方形で切り抜く
• セクション境界: 直線で背景色を切り替える
• ラベルは小さなピル型で、藍色の塗りに白文字にする
• 番号は藍色の塗りの円に白数字を入れる
• カードは角丸 12px にする
• ボタンは角丸 4px の長方形にする

Components

• 資料請求ボタン（button-primary）: 青の塗りに白い太字を載せた主 CTA
• 問い合わせボタン（button-secondary）: 白地に濃い文字のボタン。濃紺の帯の上で主 CTA と並べる
• セクションラベル（section-label）: 見出しの上に置く小さなピル型のラベル
• イラスト付きカード（card-illust）: 青のイラスト、藍色の見出し、チェックアイコン付きの箇条書きで構成する
• 番号の丸バッジ（number-badge）: 機能カードの見出しの前に置く、藍色の丸に白数字のバッジ
• データ項目タイル（data-tile）: アイコンと短いラベルを並べた、淡いグレーの小さなタイル
• FAQ カード（faq-item）: Q と A の丸バッジを付けた、白い角丸カード
• 中間 CTA 帯（cta-band）: 濃紺の全幅帯の中央にボタンを 2 つ並べる
• 導入ステップカード（step-card）: STEP 番号、見出し、箇条書きで構成するカード。カードの間に矢印を置く

Do's and Don'ts

Do - 白地を広く取り、余白で区切る - 強調色は藍色と青の 2 色に絞る - イラストは青一色のフラットな人物シーンで揃える - 濃紺の CTA 帯をセクションの節目ごとに入れる - カード内は短い箇条書きを 3 つ並べる

Don't - 暖色やビビッドな装飾色を加えない - 濃い影や立体的な装飾をしない - 手書き風や丸文字の書体を使わない - カードの高さやイラストのテイストをばらつかせない - ボタンを大きなピル型にしない

Page Structure

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

1. ファーストビュー（価値を一言で伝え、資料請求へ誘導する）: 淡い青の地に大見出しと短いバッジ 2 つを置き、右側にニュース画面の UI を斜めに重ねたビジュアルを配置する
2. サービス概要の帯（サービスを一文で説明する）: 濃紺の帯に白文字の 2 行説明と、CTA 2 つを並べる
3. 導入実績（信頼を補強する）: 藍色の強調入りの見出しの下に、ロゴを横一列に流す
4. 課題提起（悩みを 3 つ示して共感を得る）: グレーの地に、イラスト付きカードを 3 枚並べる
5. 解決策（課題への答えを示す）: 淡い青の地に、対応するカードを 3 枚並べる
6. 機能紹介（主な機能を 3 つ説明する）: 画面写真と番号バッジ付きのカード 3 枚に、補足の箇条書きボックスを添える
7. データ連携図（情報の入力元から出力先までの流れを見せる）: 中央に管理画面のキャプチャを置き、左右に入力元と出力先のラベルを配置する
8. 取得可能データ一覧（対応範囲の広さを示す）: アイコン付きのタイルをグリッドで並べ、もっと見るボタンを置く
9. 中間 CTA（行動を促す）: 濃紺の帯にボタン 2 つを並べる
10. 活用事例（利用シーンを具体的に示す）: 写真、見出し、説明文で構成するカードを 3 列 3 段に並べる
11. よくある質問（不安を解消する）: Q と A のバッジ付きの白カードを縦に並べる
12. 導入の流れ（導入の手軽さを示す）: STEP カード 3 枚を矢印でつなぐ
13. 会社概要（運営者の信頼性を示す）: 代表者の写真と経歴のカード、2 列の会社情報表を置く
14. フッター（ナビゲーション）: 濃紺の地に欧文ロゴと白文字のリンク列を置く

Imagery

• 青一色の濃淡で描いた、オフィスで働く人物のフラットなイラストを使う
• UI のスクリーンショットは斜めに重ね、奥行きを出す
• 事例写真は都市・店舗・新聞・スマホなど、実写の業務シーンを使う
• アイコンは藍色の単色で、線または塗りのシンプルな形にする
• 人物写真はモノトーン寄りの落ち着いた背景で撮る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は 3 カラムのカード。SP では 1 カラムに積む
• データタイルは PC の 5 列から、SP では 2 列にする
• 中間 CTA のボタン 2 つは、SP では縦に並べる
• ファーストビューのビジュアルは、SP では見出しの下に置く
• 会社情報の表は、SP では 1 列にする

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