DESIGN.md — 青灰×朱の建築系マッチングサービスLP（Steel Blue Professional Matching Platform LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型
• キーワード: 二者マッチング・青灰の信頼感・朱色CTA・淡い左右二分割・データ図表・線画人物
• 地の質感: フラットな白地に、ごく淡いグラデーションと柔らかい影をつけたカード
• 形: 角丸は小〜中。ボタンはピル型、カードは影つきの角丸長方形
• 温度感: やや寒色寄りで、朱とピンクを差して温度を足す

Colors

• 地は白と淡いグレー青を交互に使い、二者を比べる場面だけ左は水色、右はピンクに分ける
• 見出し・数字・図表・タグはprimaryの青灰で統一する
• 購入・申込のボタンは必ずcta（朱）だけで塗り、他の要素に朱を使わない
• 強調帯は紅色からオレンジへの横グラデーションを1か所だけ使う
• 本文中の重要語は太字にし、リンクは紺の文字に右向き矢印をつける
• ピンクやオレンジは、受ける側の目印と強調にだけ使う
• gradient-band は文字 #FFFFFF × 背景 #E3494A のコントラスト比が 3.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#DF3132、4.54:1）を使う。

Typography

• 和文はすべてゴシックで組み、太さで強弱をつける
• 数字と連番だけ細めのセリフ体にして、知的な印象を出す
• 見出しの末尾にチェックマークのアイコンを添える
• 見出しの強調語はprimaryかaccent-1の色にし、黄色のマーカーを敷く
• 本文は行間1.8で短く改行し、重要語だけ太字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は 2〜3 カラム（比較は左右 2 分割、実績図表は 3 列）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しは中央揃えで、下に小さいサブ文を添える
• CTAは毎セクションの最後に中央配置し、下にテキストリンクを添える
• 特長は番号・テキスト・写真のジグザグ配置
• 比較セクションは背景色を左右で塗り分ける
• FAQは全幅の細い枠のアコーディオンを縦に並べる

Elevation & Depth

• カードには大きくぼかした薄い影をつける（例: 0 4px 16px rgba(0,0,0,.08)）
• CTAボタンにはわずかな下向きの影
• 写真には弱い影をつけて地から浮かせる
• FAQの枠は影なしで、線だけで区切る

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸小の長方形、人物の顔は円形に切り抜く
• セクション境界: 直線で区切り、背景色の切り替えと薄い影線で分ける
• 主CTAとサブボタンはピル型
• カードは角丸12px程度
• タグやバッジは角丸小の長方形
• 区切りに短い太線（紺）を中央に置く

Components

• 資料請求CTA（button-primary）: 朱色で塗ったピル型ボタン。白抜きの文字と右向き矢印をつける
• サブボタン（button-outline）: 白地に黒枠のピル型ボタン。ガイドやFAQへの誘導に使う
• 対象業種タグ（tag-label）: 青灰の面に白文字のタグ。写真の上やケース番号に並べる
• 強調帯（gradient-band）: 紅色からオレンジへのグラデーション帯に白文字。特許などの権威を伝える
• 悩みイラストカード（worry-card）: 円形の線画人物と見出し、箇条書きを並べる。下線で強調する
• 事例プロフィールカード（case-card）: 影つきの白カード。左に写真、右に■見出しの項目を並べる
• 実績数字（stat-number）: 大きなセリフ数字に小さな単位を添え、下に短い紺の線を引く
• FAQアコーディオン（faq-item）: 細い線の枠にQ.の太字と右端の＋アイコンを置く
• ステップ番号（step-number）: 小さなSTEPの文字に、大きな青灰の数字を組み合わせる

Do's and Don'ts

Do - 二者を比べる場面では、水色とピンクの左右分割を使う - CTAはセクションごとに同じ朱のピル型で繰り返す - 実績は円グラフ・棒グラフなどの図表を青灰の濃淡で見せる - 人物イラストは単色の線画を円の中に収める - 見出しにはチェックアイコンかマーカーを添える

Don't - 朱色をCTA以外の大きな面に使わない - 濃い色の背景のセクションを入れない - 丸ゴシックやポップ体を使わない - グラデーション帯を何度も入れない - カードに強い影や太い枠をつけない

Page Structure

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

1. ファーストビュー（サービスの価値と実績を一目で伝える）: 左にキャッチと月桂樹つきの実績数字、右に握手の写真と業種タグを置き、朱のCTAを入れる。下に導入企業名の帯を並べる
2. 仕組みの説明（二者をつなぐ仕組みを図で見せる）: 左右に人物の円アイコン、中央にサービスのロゴを置き、矢印でつないだ図にする
3. 二者別の価値（依頼する側と受ける側それぞれのメリットを示す）: 水色とピンクの左右2カラムに、写真・箇条書き・リンクを並べる
4. 特長アイコン（要点を4つに絞って示す）: 4列で短い文と単色アイコンを並べる
5. 権威の帯と実績（信頼性を補強する）: グラデーション帯の下にセリフ体の大きな数字を2つ置き、CTAへつなぐ
6. 悩みの提起（ターゲットの課題に共感する）: 線画人物と悩みの見出しを3+2の配置で並べ、オレンジの一文で解決へつなぐ
7. メリット（具体的な利点を詳しく説明する）: セリフ体の番号、青灰の見出し、写真をジグザグに配置する
8. 利用者の声（社会的な証明を示す）: 写真背景のカードに円形の顔写真と引用を載せた横スライダー
9. 利用者データ（利用者の幅広さを数値で示す）: 青灰の円グラフ・棒グラフを3列に並べ、見出しに下線を引く
10. 事例（依頼できる相手の具体像を見せる）: CASE番号つきの影つきカードを縦に3枚並べる
11. 料金（無料であることを訴求する）: 3項目にバッジと大きな数字を並べ、下に赤の小さな文字を添える
12. 利用の流れ（始めるまでの手順を示す）: 左右の水色・ピンクの地にSTEP 1〜3を線画で見せる
13. よくある質問（不安を解消する）: 枠線のアコーディオンを縦に並べ、最後にCTAを置く
14. 案件・メディア紹介（実例と掲載実績を見せる）: 建築写真の3列カードとメディア記事を横並びで配置し、最終CTAを置く

Imagery

• スーツ姿のビジネス人物や握手を、明るい自然光で撮った実写
• 建築模型・図面・竣工建築の写真で業種らしさを出す
• 人物イラストは青灰の単色の線画で、淡い円背景に入れる
• アイコンは単色の塗りで、青灰と朱を使い分ける
• 図表はフラットなデザインで、青灰の濃淡とグレーで描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPでは2カラムの比較を縦に積み、水色とピンクの面を上下に分ける
• ジグザグの特長はSPで写真を上、テキストを下にする
• 4列のアイコンはSPで2×2に並べる
• 図表はSPで1列に並べ、グラフの幅を広くとる
• CTAはSPで幅90%のピル型にする

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