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・番号付きステップ・企業向け
• 地の質感: 質感のないベタ塗り。影は控えめで、カードに薄い影がつく程度
• 形: ピル型ボタン、正円の番号バッジ、角丸小さめのカード、イラスト内の有機的な曲線
• 温度感: クールな青が基調。淡いピンクとミントの地で少しやわらげる

Colors

• 地は白・淡グレー青・淡ミントを交互に使い、特長セクションだけ濃い青のベタ地にする
• 主ボタンは濃い青、サブボタンはワイン色。2つを縦に並べて並列の選択肢として見せる
• セクション見出しは茶橙で統一する。本文は濃いグレー
• イラストはミント・サーモン・マゼンタ・ラベンダーのパステルを1枚に2〜3色まで
• フォーム送信だけ鮮やかな青を使い、機能的に目立たせる
• 青地の上の文字は白にして、補足の※は少し小さくする

Typography

• 書体はゴシック1種類だけにし、太さの差で階層を作る
• セクション見出しは中央揃えで2行に折り、茶橙にする
• 特長の見出しは左揃えの白字にし、上に円形の番号バッジを置く
• 本文は行間1.8で、読みやすく詰めすぎない
• ※の注釈番号は上付きにし、ページ末尾にまとめて書く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ロゴ一覧だけ 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約12px と狭くし、図解は画面幅いっぱいに大きく見せる
• 特長は『番号→見出し→本文→図解』を縦に積み、細い白線で区切る
• ステップは淡グレーの帯に番号の円を左に置き、点線の矢印でつなぐ
• フォームは幅約82%の中央寄せで、入力欄を縦一列に並べる

Elevation & Depth

• 基本はフラットで影を使わない
• 料金の図解カードと事例カードだけ薄いぼかし影をつける
• 特長セクションの見出しラベルは白い角丸の箱を青地に重ねて浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 図解は角丸なしの長方形。事例写真はカード内に長方形で配置する
• セクション境界: 直線で地の色を切り替える。図解の角に曲線のパステル装飾を少しはみ出させる
• CTAは完全なピル型にする
• 番号バッジは正円にする
• ロゴタイルとカードは角丸小さめ（4px前後）にする
• ファーストビューの背景に大きな曲線の色面を重ねる

Components

• 主CTAボタン（button-primary）: 濃い青のピル型。ファーストビューで中央に大きく置く
• サブCTAボタン（button-secondary）: ワイン色のピル型。主CTAの下に同じ幅で並べる。2行構成にしてもよい
• 特長の番号バッジ（feature-badge）: 白い正円の中に小さなラベルと大きな数字を青字で入れる
• 概要説明ボックス（intro-box）: 淡グレー青の角丸ボックス。中に太字の要約を中央揃えで書く
• 番号付きステップ（step-row）: 淡グレーの帯の左に青い番号の円を置き、帯の間を青い点線の矢印でつなぐ
• 提携先ロゴタイル（logo-tile）: 淡い青紫の地に白いタイルを2列で並べ、ロゴを中央に置く
• 事例カルーセルカード（case-card）: 写真・日付・社名・要約・詳細リンクを縦に並べた白いカード。左右に丸い矢印ボタンを置く
• FAQアコーディオン（faq-item）: Qアイコンと青い太字の質問を並べ、右端に開閉の矢印、下に区切り線を引く
• 資料請求フォーム（form-input）: グレー枠の細い入力欄を縦一列に並べ、最後に鮮やかな青のピル型送信ボタンを置く

Do's and Don'ts

Do - 図解は青・ミント・サーモン・マゼンタのフラットなイラストで説明する - 特長は3つにし、番号バッジで順番をはっきり示す - 数字や効果の主張には※をつけ、ページ末尾に注釈をまとめる - CTAは青とワインの2色で役割を分ける - 地の色をセクションごとに変えて区切りを示す

Don't - グラデーションや強い影を使わない - 明朝や手書き風の書体を混ぜない - 見出しの茶橙を本文やボタンに使わない - イラストに写実的な写真を混ぜない（写真は事例カードだけにする） - 角の尖ったボタンにしない

Page Structure

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

1. ファーストビュー（サービスの価値を伝えて行動を促す）: 淡いピンク地にロゴ、PCの画面イラスト、2行のキャッチ、青とワインのピル型ボタンを縦に並べる
2. パンくず・言語切替（サイト内での位置を示す）: 白地に小さい文字で左にパンくず、右に言語リンクを置く
3. サービス概要（何のサービスかを一言で伝える）: 茶橙の見出しと、淡グレー青のボックス内の太字要約
4. 3つの特長（主なメリットを説明する）: 濃い青のベタ地。白いラベルの見出し、番号バッジ、白字の本文、パステルの図解を3回くり返す
5. 利用ステップ（始め方を示す）: 3段の番号付きの帯を点線の矢印でつなぎ、下に2色のCTAを置く
6. 提携先一覧（掲載先の多さで信頼を伝える）: 淡い青紫の地に白いロゴタイルを2列で並べる
7. 料金の仕組み（課金のしくみを理解してもらう）: ミント地に白いカード。矢羽根型のフロー帯と、円をつないだ図解
8. 活用事例（導入企業の成果を見せる）: 写真付きカードの横スライド。ドットのページ送りと丸い矢印をつける
9. よくある質問（不安を解消する）: 淡グレー地にQアイコン付きのアコーディオン。下に※の注釈をまとめる
10. 資料請求フォーム（見込み客の情報を集める）: 白地に茶橙の見出し、縦一列の入力欄、同意チェック、青い送信ボタン
11. フッター（サポートへの導線と各種リンク）: 温かいグレー地に枠線ボタン2つ、アコーディオン式のリンク群、SNSアイコン

Imagery

• イラストは線を使わないフラットなベタ塗りにし、PC・書類・ビル・パズルなどの記号的なモチーフを使う
• 図解の背景は単色の長方形で塗り、角にはみ出す曲線の色面をあしらう
• つながりは白い点線の曲線と小さな丸で表す
• 事例写真は自然光のオフィスで人物を立ち姿で撮り、明るめに仕上げる
• ロゴは白いタイルの中央に余白をたっぷり取って置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCのファーストビューは左にキャッチとボタンを横並び、右にPCのイラストを置く2カラムにする
• PCの特長は図解と文章を左右交互に並べ、帯の地は青の濃淡を切り替える
• PCでは概要の下に3つの特長をまとめた全体図を1枚追加する
• ロゴ一覧はPCで4列、事例カードは3枚を同時に見せる
• CTAボタンはPCで横並びにする。フッターのリンクは4列に展開する

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