DESIGN.md — 藍紫×白グレーの静かなAI SaaS LP（Indigo Minimal AI SaaS Pre-Registration LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: シンプル・ミニマル、信頼・誠実、クール・先進的
• キーワード: 白地・青紫の単色アクセント・薄グレーカード・UIスクリーンショット・グラデーションの3Dイラスト・余白多め
• 地の質感: フラットな面に、ごく薄い影と淡いグレーの曲線模様を重ねる
• 形: 角丸 8px 程度の控えめな矩形カードと、細い枠線のボタン
• 温度感: やや寒色寄りで落ち着いた、知的でクールな印象

Colors

• 色は青紫の1色だけ。ほかは白・グレー・墨色で組む。
• 青紫の面は解決ボックス・主ボタン・最終CTA帯だけに使う。
• カードは白地に #FAFAFA の薄グレーを置き、境界は色差だけで見せる。
• 小見出しや Step 番号は青紫の文字にして、面を塗らずにアクセントを付ける。
• サブボタンは白地に青紫の細い枠線と青紫の文字にする。
• 最終CTA帯は濃い藍色の上に写真を薄く透かし、ボタンは白地に青紫文字で反転させる。

Typography

• 書体はゴシック1種類にそろえる。欧文は Step 番号とロゴ周りだけに使う。
• 見出しは太字の墨色で中央揃え。装飾は付けない。
• 悩みのテーマ見出しは、左右に細いグレー線を引いて挟む。
• 箇条書きは先頭を「・」にした左揃えにし、行間は 1.8 にする。
• FVのコピーは 3 行に分け、中央揃えにする。
• 強調は文字色を青紫にするだけにし、マーカーは使わない。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 83%
• 余白: セクション間 64px、基本単位 8px、カード内 28px（375px 幅換算）
• コンテンツは左右 32px 程度の余白を取った中央の列に収める。
• カード同士の間は 18px 前後あける。
• カード内では画像・見出し・箇条書き・ボタンを中央の軸にそろえて縦に並べる。
• 悩みの提起は、人物イラスト＋白い吹き出しカードを横に並べ、下向き矢印の先に青紫の解決ボックスを置く。
• FAQ は枠で囲まず、細い横線で区切ったリストにする。

Elevation & Depth

• 白い吹き出しカードには、ごく薄くぼかした影（0 4px 16px rgba(0,0,0,.06)）を付ける。
• FVのUIスクリーンショットには、柔らかく広がる影を付ける。
• 薄グレーのカードには影を付けない。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸 4px の横長矩形にし、カード内側いっぱいに置く
• セクション境界: 直線で区切り、背景色の切り替えだけで見せる。FVとフッターには淡い曲線模様を敷く
• ボタンは角丸 6px 程度の矩形にし、ピル型にはしない。
• カードは角丸 8px にし、枠線は付けない。
• 最終CTA帯は角丸 12px の大きなブロックにする。

Components

• 事前登録ボタン（button-primary）: 青紫の面に白い太字。幅いっぱいに置き、角丸は控えめにする。
• カード内サブボタン（button-outline）: 白地に青紫の 1px 枠線と青紫の文字。カード内で幅いっぱいに置く。
• 悩み吹き出しカード（worry-bubble）: 左に人物イラスト、右に白いカード。薄い影を付け、悩みを2〜3行で書く。
• 解決ボックス（solution-box）: 下向きの青紫矢印とロゴの下に置く青紫の面。白文字の箇条書きを3行並べる。
• ステップカード（step-card）: 薄グレーの面。上から斜体の Step 番号、イラスト、見出し、箇条書き、枠線ボタンの順に置く。
• 役割別メリットカード（merit-card）: 上から青紫の役割名、横長写真、太字見出し、箇条書き3行の順に置く。
• 左右線付き見出し（heading-line）: 太字見出しの左右に細いグレーの水平線を引く。
• 最終CTA帯（cta-banner）: 濃い藍色に写真を薄く透かし、白い見出し・補足と白いボタンを置く。
• FAQ行（faq-item）: 青紫の「Q.」、太字の質問、右端の小さな下向き三角を並べ、上下を細線で区切る。

Do's and Don'ts

Do - アクセント色は青紫の1色に絞る。 - カードは薄グレーにし、白地との微差で区切る。 - 余白を大きく取り、1カードに伝える要点は1つにする。 - 製品UIのスクリーンショットや動画サムネイルを見せて、具体性を出す。 - 箇条書きは3項目前後でそろえる。

Don't - 赤や黄色など、別の強調色を足さない。 - 太い枠線やドロップシャドウの強いカードを使わない。 - ピル型ボタンやポップな装飾アイコンを使わない。 - 背景に濃い色を多用しない（濃色は最終CTA帯だけにする）。 - 見出しにマーカーや吹き出し装飾を重ねない。

Page Structure

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

1. ヘッダー（ブランドの表示と常時の登録導線）: 白地の左にロゴ、右に小さめの青紫ボタンを置く。
2. ファーストビュー（価値提案と製品イメージの提示）: 淡いグレーの曲線模様の地に UI スクリーンショットを置き、その下に3行の太字コピー、説明文、幅いっぱいの青紫ボタンを並べる。
3. 悩みの提起と解決（具体的な困りごとと、解決後の姿を対比させる）: 線付きのテーマ見出し、人物イラスト＋吹き出し、下向き矢印、青紫の解決ボックスの順に並べ、これを2セット繰り返す。
4. サービス内容（ステップ）（導入から活用までの流れを示す）: Step 1〜3 の薄グレーカードを縦に積む。各カードにグラデーションのイラストと枠線ボタンを入れる。
5. デモ動画（実際の画面の動きを見せる）: UIのキャプチャに白い再生ボタンを重ねたサムネイルを置く。
6. 提供価値（役割別メリット）（立場ごとの導入効果を示す）: 4つの役割別カードを並べる。各カードは青紫の役割名、写真、見出し、箇条書きで作る。
7. 開発の背景（代表者の想いで信頼を得る）: グラデーションの装飾を敷いた人物写真の下に、長めの本文と丸数字の要点、署名を置く。
8. 最終CTA（事前登録への誘導）: 濃い藍色に写真を透かした角丸ブロックを置き、白い見出しと白いボタンを入れる。
9. よくある質問（導入前の不安を解消する）: 青紫の Q. と三角アイコンを付けたアコーディオンを、細線で区切って並べる。
10. フッター（関連リンクと会社情報）: 淡いグレーの曲線模様の地に、ロゴ、縦並びのリンク、コピーライトを中央揃えで置く。

Imagery

• 製品のダッシュボードUI（スコアの円グラフ、棒グラフ、レーダーチャート）を白基調で見せる。
• 抽象イラストは、人の頭のシルエットにピンクから青紫へのグラデーションを入れ、銀色の書類や星のきらめきを添える。
• 写真は寒色・低彩度のビジネスシーンにする。窓際の逆光、工場の作業員、ブレのある群像などで、シネマティックに撮る。
• 悩みのパートでは、困り顔のスーツ姿の人物を、シンプルなフラットイラストで描く。
• 代表者写真は白背景の切り抜きにし、背後に青紫の球体や波形の装飾を添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーにナビのリンクを横並びで置き、右端に登録ボタンを置く。
• PC のFVは左にコピーとボタン、右にUIスクリーンショットの2カラムにする。
• 悩みと解決は、PC では2セットを横に並べる。
• ステップカードは、PC では3カラムにする。
• 役割別メリットは、PC では2×2のグリッドにし、各カード内は写真を左、テキストを右に置く。
• 最終CTA帯は、PC では見出しを左、ボタンを右にした横長のバナーにする。

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