DESIGN.md — 紺×水色のアイソメ図解 健康管理SaaS LP（Clean Blue Isometric HR Tech SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型、クール・先進的
• キーワード: 紺と水色・アイソメ線画・円形アイコン・資料請求CTAの反復・白カード・淡い青グレー地
• 地の質感: フラットな面に、うっすら円形のグラデーションと影を重ねる。全体に軽い空気感がある。
• 形: ピル型ボタン、円形アイコンバッジ、角丸が小さい白カード、斜めに切った帯
• 温度感: やや寒色寄りで冷静。差し色に赤・緑・水色を少しだけ使う。

Colors

• 白地と淡い青グレー地を交互に置いてセクションを区切る
• 大見出しは紺、キーワードだけ水色にして二色で強調する
• 主CTAはすべて紺のピル型。色は変えない
• 悩みセクションだけ濃い青灰の帯にして、空気を少し重くする
• 赤は『必須』ラベルなど小さい面にだけ使う
• 赤・緑・水色の3色は、三要素を示す図やタグだけに限る
• pain-label は文字 #E9F8FE × 背景 #6A7593 のコントラスト比が 4.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#66708D、4.53:1）を使う。

Typography

• 見出しは中央揃えで2行に分け、2行目を大きくする
• 見出しの中のキーワードは水色にするか、文字を一回り大きくする
• 本文は12px前後の細めのグレーで、行間を広く取る
• 強調したい本文は水色にして下線は付けない
• 特長の番号は水色の英数字にして、下線を添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。アイコンは2〜4個を横に並べ、フローは4列にする
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションごとに地の色を替え、上下の余白は50〜60pxにする
• 円形アイコンは4個を横1列に並べる
• 資料請求のCTAブロックは3〜4セクションおきに同じ形で繰り返す
• 白カードは淡い影付きで、画面幅から左右16px内側に置く
• 特長ブロックは番号・見出し・イラストの組み合わせにする

Elevation & Depth

• 白カードには淡くぼかした影を付ける（0 4px 16px rgba(0,0,0,0.06)程度）
• 円形アイコンバッジは白地に水色の細線を引き、柔らかい影を付ける
• 背景に大きな円形のグラデーションをうっすら重ねて奥行きを出す

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: イラストは切り抜きで置く。管理画面はPCとスマホのモックアップに収める
• セクション境界: 基本は直線。悩みセクションの下だけ下向きのV字に切る
• CTAはピル型にして、右端に矢印を付ける
• アイコンは真円の白バッジに収める
• 見出しの帯は右端を斜めにカットした水色にする
• 入力欄は角丸なしの淡グレー面にする

Components

• 資料請求ピルボタン（button-primary）: 紺のピル型で右端に矢印を置く。左に『所要時間』の円形バッジを重ねる
• 問い合わせアウトラインボタン（button-outline）: 白地に紺の線と紺の文字。電話番号と横に並べる
• 資料請求CTAブロック（cta-block）: 左に管理画面のモックアップ、右に水色の帯見出しとボタン。下に電話問い合わせのグレー帯を付ける
• 円形アイコンバッジ（icon-badge）: 白い真円に水色の線画アイコンと紺の2行ラベル。4個を並べる
• 悩みカテゴリ帯（pain-label）: くすみ青の横長ラベルに白文字。下に線画イラストと短い説明を2つずつ置く
• 特長番号見出し（feature-number）: 水色の『01』と紺の2行見出しを組み、番号の下に短い線を引く
• チェックリスト（check-list）: 水色の丸チェックアイコンと小さい本文。2列で並べる
• 契約フローステップ（step-flow）: 大きな数字・見出し・人物の線画・説明文を縦に並べる。4列の間を三角の矢印でつなぐ
• 必須ラベル（required-tag）: 赤い小さな四角に白文字。フォームの各項目名の左に置く
• フォーム入力欄（form-field）: 淡グレーの面に薄いプレースホルダーを入れる。項目の間は罫線で区切る

Do's and Don'ts

Do - イラストは青系の線画アイソメトリックで統一する - 資料請求CTAは同じデザインのまま複数回置く - 数字の実績はローレル（月桂樹）と受賞メダルで見せる - 機能は円形アイコンとチェックリストで整理する - 見出しは紺、キーワードは水色の二色にする

Don't - 暖色の大きな面を使わない - 写真の人物を主役にしない - ボタンを角張った四角にしない - 本文を太く大きくしすぎない - セクションの地を濃い色で塗りつぶさない（フッターの帯以外）

Page Structure

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

1. ヘッダー（ロゴと資料請求への導線）: 白地。左にロゴ、右に紺のピルボタンと電話番号
2. ファーストビュー（価値の提示と一元管理の訴求）: 左に紺の大見出しと円形タグ群、右にアイソメのパズル図解
3. CTA（資料請求への誘導）: モックアップ、水色の帯見出し、紺のピルボタン
4. 導入実績（信頼の提示）: ロゴを横に並べ、白カードに継続率とNo.1メダルを置く
5. 悩みの提起（課題への共感）: 青灰の帯。2カテゴリのラベルの下に線画と説明を4つ並べ、下端をV字に切る
6. 解決策（一元化できることの提示）: 円形アイコン4個と、二色の強調見出し
7. 三要素の図（多角的な視点の提示）: 赤・緑・水色の3円を重ねたベン図と、色タグ
8. 特長（3つの強みの説明）: 番号見出し、線画、チェックリストのパネル、連携ツールの紹介
9. 機能一覧（管理できる範囲の提示）: 白カードに円形アイコン4個とチェックリスト。画面キャプチャを矢印でつないだフロー
10. 伴走支援（運用サポートの訴求）: 円形アイコンを横に並べ、グレーのカードにオプションを3列で置く
11. サポート体制（導入後の安心感）: 円形の淡い地に線画を入れ、ラベルを付けて5つ並べる
12. セキュリティ（信頼性の担保）: 左に説明文、右に認証マークの白カード
13. 契約の流れ（手順の明示）: 4ステップを横に並べ、矢印でつなぐ
14. お問い合わせフォーム（リード獲得）: 必須ラベル付きの入力欄、ラジオボタン、チェックボックス。最後に紺のピル型の確認ボタン

Imagery

• 紺・水色・グレーの線画アイソメトリックで、ビジネスパーソンを描く
• パズルピースや台座でシステム連携を表す
• PCとスマホのモックアップに管理画面を入れる
• 背景には大きな白い円と淡いグラデーションを重ねる
• 実績はローレルと金のメダル風の図形で見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央寄せで、本文幅を約800pxに収める
• FVとCTAブロックはPCでも左右2分割を保つ
• フォームはPCで中央の細い幅のままにする
• フッターの会社情報はPCで左にロゴ、右に表を置く2カラムにする
• SPでもアイコン4列とフロー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 行書くと起動時に読み込まれる。