DESIGN.md — 赤×ライトグレーの誠実な社内SaaS LP（Corporate Red Gray-Card SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、シンプル・ミニマル、情報量多め・訴求型
• キーワード: コーポレートレッド・ライトグレー地・白カード・線画人物アイコン・製品スクリーンショット・手書き風番号
• 地の質感: フラットで影はほぼなし。グレー地に白カードを浮かべる面構成
• 形: 角丸の小さいカードと四角寄りのボタン。人物アイコンは円形の切り抜き
• 温度感: やや冷静でニュートラル。ところどころに手書き風の赤い装飾を入れて親しみを足す

Colors

• 地は白とライトグレーをセクション単位で交互に切り替える
• グレー地の上には白カードを置いて情報をまとめる
• 赤はCTAボタン、キャッチコピーの強調語、特長見出し、FAQのQ行だけに使う
• セクション見出しは黒の太字にし、赤は小さな下線アクセントだけにする
• 流れセクションとフッターは一段濃いグレーにして終盤の区切りを示す
• 製品スクショのローズ系は画像の中だけに留め、UIの装飾色には使わない

Typography

• 書体はゴシック1種に統一する
• 見出しは中央揃えの太字にする
• カード見出しも中央揃え、本文は左揃えにする
• 強調語は全角の“”で囲み、赤色と大きめのサイズで目立たせる
• 本文は14px・行間1.8で読みやすさを優先する
• FAQの質問は赤の太字、回答は黒の通常ウェイトにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（CTA は 2 列並び）
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは画面端から約10pxの余白で幅いっぱいに置く
• カード同士の間隔は24〜40px
• 人物アイコンはカード上辺に半分重ねて配置する
• CTAブロックは数セクションごとに繰り返す
• 製品スクショはカード幅いっぱいに置く

Elevation & Depth

• 影は基本的に使わず、グレー地と白カードの対比で階層を作る
• CTAボタンにはごく薄い下影を付ける程度にする
• 事例カードは影の代わりに細いグレー枠線を使う

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は円形の切り抜き、製品画面は角丸なしの長方形
• セクション境界: 直線で切り替える。課題セクションの上端には下向きの三角ノッチを入れる
• 主CTAは角丸4pxの長方形
• 料金の問い合わせボタンだけピル型にする
• カードは角丸8px

Components

• 2連CTAボタン（button-primary）: 赤い面に白の太字。右側に白い線アイコン（書類・モニター）を添えて横に2つ並べる
• 問い合わせCTAブロック（cta-block）: 黒の見出しの一部に赤い短い下線を付ける。ボタン上には赤い線画アイコンと放射線の装飾を置く
• 課題カード（problem-card）: 上辺に円形の線画人物を重ねた白カード。見出し、問いかけ、チェックリスト、グレーのまとめボックスの順で構成する
• チェックリスト（check-list）: チェック付きボックスのアイコンに太字の短文を並べ、3項目で構成する
• 手書き風番号見出し（feature-number）: 赤い線の手書き風数字の横に赤い太字見出しを置く
• 機能カード（feature-card）: 赤い電球アイコンと黒の見出し、本文、製品スクショで構成する白カード
• 導入事例カード（case-card）: 枠線付きの白カード。ロゴ、社名、グレー帯の要約、本文、赤い詳細ボタン（右に矢印）の順に置く
• 流れステップ（flow-step）: 白カードを黒の三角でつなぐ。期間は赤枠と赤字で示し、右側に黒の縦帯（縦書き）を添える
• FAQ項目（faq-item）: 赤い手書き風Qアイコンと赤い太字の質問、グレーのAアイコンと回答を、区切り線なしで並べる

Do's and Don'ts

Do - 赤はCTAと要所の強調だけに絞る - グレー地の上に白カードを置いて情報をまとめる - 人物は線画で描き、ポイントだけ赤い網点を入れる - 製品画面のスクショを大きく見せて機能を説明する - CTAブロックをページ内で3〜4回繰り返す

Don't - 赤をセクションの背景面に広く使わない - グラデーションや強い影を使わない - ポップな丸ゴシックや装飾書体を見出しに使わない - 写真素材を多用しない（人物写真はFV直下の帯だけ） - カードの角丸を大きくしすぎない

Page Structure

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

1. ヘッダー（企業とサービスを明示する）: 白地に黒ロゴを置く。グレー帯に社名とサービス名を並べる
2. ファーストビュー（価値提案と即時CTA）: PCとスマホのモックアップの周りに、赤い手書き円で囲んだ特徴3つを配置する。中央揃えのコピーで強調語を赤にし、2連CTAを置く
3. 人物写真帯（利用者像を想起させる）: 働く人の写真6枚を横一列に隙間なく並べる
4. リードメッセージ（課題の前提を提示する）: 赤い大見出しと短い本文を中央揃えで置く
5. 悩みの提起（ターゲットの課題に共感する）: 上端に三角ノッチを入れたグレー地に、人物付きの課題カードを5枚縦に並べる
6. 3つの特長（要点を簡潔に伝える）: 白地に手書き風の赤い番号、赤い見出し、本文、スクショを3回繰り返す
7. 機能詳細（機能を網羅的に説明する）: グレー地に、電球アイコン付きの白い機能カードを6枚並べる
8. CTA（中間で問い合わせを促す）: 見出しに赤い下線、線画アイコンを添えた2連の赤ボタン
9. 導入メリット（導入後の効果を示す）: グレー地に、人物アイコン付きの白カードを5枚並べる
10. 導入事例（信頼性を補強する）: ロゴを大きく見せた枠線付きカードを4件並べ、それぞれに赤い詳細ボタンを置く
11. ご利用の流れ（導入プロセスの不安を解消する）: 濃いグレー地に、ステップカード、三角矢印、黒の縦帯、バナーを置く
12. 契約プラン（料金体系を示す）: 白カード2枚を赤い＋でつなぎ、ピル型の問い合わせボタンを置く
13. よくある質問（疑問を解消する）: 白地にQ&Aを6組、展開済みの状態で並べる
14. CTA・フッター（最終の問い合わせと回遊）: 2連CTAのあと、グレーのフッターにSNSアイコン、枠線ボタン、リンク群を置く

Imagery

• 人物はモノクロの線画にし、服などに赤い網点やベタを一部だけ入れる
• 人物アイコンは白い円の中に胸から上を描き、円の縁にグレーの細線を付ける
• 製品画面はPCブラウザのスクショを角丸なしで載せ、注目部分は赤い角丸枠で囲む
• FVはノートPCとスマホのモックアップに、手書き風の赤い円を重ねる
• CTAの上には、書類やモニターの赤い線画アイコンと短い放射線を添える
• 人物写真は自然光のオフィスで撮った笑顔の上半身にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約1000px幅のコンテナを置く
• 課題カードとメリットカードはPCで2カラムグリッドにする
• 機能カードはPCでテキストを左、スクショを右に置く
• 事例カードはPCでロゴを左、テキストを右の横並びにする
• 流れはPCで4ステップを横に並べ、伴走の黒帯を下に横長で敷く
• CTAボタンはPCで中央寄せにし、幅を約170pxに固定する

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