DESIGN.md — グレー×チャコールに紫と黄を差す業務SaaS LP（Monochrome Gray Enterprise SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: クール・先進的、信頼・誠実、シンプル・ミニマル
• キーワード: ライトグレー地・白カード・チャコールパネル・薄い英字の大見出し・紫の矢印リンク・黄のチェック
• 地の質感: うっすらノイズのかかったグレー地に、影の柔らかい白カードを浮かせる。3Dワイヤーフレームの立体を淡く敷く
• 形: 角丸は小さめ（4〜16px）の長方形が基本。チェックは丸、図版はアイコン化した幾何形
• 温度感: やや寒色寄りのニュートラル。黄が少しだけ温かみを足す

Colors

• 地はライトグレー、情報のまとまりは白カード、重要な機能・価格はチャコールパネルにする
• 紫は問い合わせボタンとテキストリンクの矢印だけに使う
• 黄はチェック丸・機能タグ・見出し前の小ドットなどの小さい点に限る
• セクションの英字見出しは地より少し濃いだけの淡グレーにする
• ロゴ帯や実績帯は白の全幅帯にして、グレー地から切り替える
• 写真の多色は使わず、図版はチャコールと淡グレーの2色で描く
• button-cta は文字 #FFFFFF × 背景 #8B65EB のコントラスト比が 4.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#825AEA、4.57:1）を使う。

Typography

• 英字の大見出しを淡色で置き、その下に和文の小さめ見出しを重ねる2段構成にする
• 和文の見出しは中太で、大きくしすぎない
• 本文は小さめにして行間を広く取り、読みやすさを保つ
• リンクやボタンの文字は太字にして字間を少し開ける
• 数字やチェック項目は短い2行の箇条書きにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。機能タブ・活用カードは 2 列のグリッド
• 本文ブロックの幅: 画面幅の約 91%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右に約16pxの余白を取り、カード幅をそろえる
• セクションの頭は英字見出し、和文見出し、リード文の順に左揃えで並べる
• 補足ボタンはセクションの最後に中央揃えで1つ置く
• 事例やお知らせは縦にカードやリストを積む
• 問い合わせ帯は全幅のグレー面にして、白カードを3枚重ねる

Elevation & Depth

• 白カードには下向きの柔らかく広い影を付ける（0 4px 16px 程度・薄いグレー）
• 活用シーンのカードは白から淡グレーへの縦グラデーションに影を付ける
• チャコールパネルは影なしのベタ面にする
• FVのメインパネルは半透明の白にして、背景の3D画像を透かす

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は使わない。ロゴは白カードの中央、アイコンは単色のフラットな幾何形にする
• セクション境界: 直線で切り替える。白の全幅帯とグレー地の境目で区切る
• ボタンは角丸が小さい長方形にする
• FVの機能カードだけは角丸16pxで柔らかく見せる
• サブボタンは白地に1.5pxの黒枠を付ける
• タグは角丸のラベル型にする

Components

• 濃色資料ボタン（button-primary）: チャコールの面に白い太字を載せた中央配置のボタン
• 問い合わせボタン（button-cta）: 紫の面に白文字を載せた主CTA
• 枠線サブボタン（button-outline）: 白地に黒枠と黒い太字のボタン。セクションの最後に置く
• 矢印テキストリンク（link-arrow）: 太字のテキストの右に紫の長い矢印を付ける
• 淡色英字見出し（section-heading-en）: 大きな淡グレーの英単語の下に和文の小見出しを置く
• 黄チェック箇条書き（check-list）: 黄色の丸に白いチェックを入れ、太字の短文を2行で添える
• 黄色機能タグ（feature-tag）: 濃色パネル上に並べる黄地・黒文字の小さいラベル
• 機能タブ（tab-grid）: 2×2の白タブ。選択中はチャコールの面に白文字で、頭にチェックを付ける
• 事例カード（case-card）: 白カードの中央にロゴを置き、カテゴリタグ、太字タイトル、矢印リンクの順に並べる
• お知らせ行（news-row）: 日付とグレーのタグの下に下線付きのタイトルを置き、右端に紫の矢印を付ける。行間は罫線で区切る

Do's and Don'ts

Do - 強調色は紫と黄の2色だけにし、どちらも小さい面積で使う - セクションの頭は必ず淡色英字と和文見出しのセットにする - 図版はチャコールと淡グレーのフラットな幾何形で描く - 白カードには柔らかい影を付けて地から浮かせる - 機能や価格のように重要なブロックはチャコールパネルにまとめる

Don't - 鮮やかな原色のグラデーションや写真の背景を多用しない - ボタンをピル型や大きな角丸にしない - 紫を大きな面の背景に使わない - 見出しを極太で大きくして、圧迫感を出さない - 装飾の3D線画を濃い色で目立たせない

Page Structure

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

1. ファーストビュー（製品カテゴリと価値を一目で伝える）: 3D背景の上に半透明の白パネルを置く。大きな英字ラベル、短いコピー、説明文を並べ、強み3つを角丸カードのグラフや図で見せ、資料ボタンを置く
2. 新着バナーカルーセル（ウェビナーやニュースへ誘導する）: 白カードにサムネイル・タグ・タイトルを並べた横スライダー。下にドットのインジケーターを置く
3. 特長（何をするツールかを図で説明する）: 淡色英字見出しとリード文の下に、左の連携元ボックス群から曲線の矢印でロゴへつなぎ、右の連携先へ流れる図を置く
4. 機能紹介（主要機能をタブで切り替えて見せる）: 2×2のタブの下にチャコールパネルを置き、黄タグ、チェック、UIの線画、説明文を入れる
5. 活用シーン（用途別の使い方を示す）: グラデーションの白カードを縦に積む。中央に単色アイコン、黄ドット付きの見出し、短い説明を入れる
6. 導入事例（大手企業の実績で信頼を得る）: ロゴ入りの事例カードを3枚並べ、枠線ボタンで一覧へ誘導する
7. 導入実績ロゴ帯（導入規模を数字で示す）: 白の全幅帯に企業ロゴを横に流し、中央に実績数の見出しと枠線ボタンを置く
8. 学習コンテンツ（検討段階の見込み客を育てる）: 紫の丸い再生ボタン付きの動画リンクと、アイコン入りの白カードを縦に並べる
9. 価格・動作環境（導入条件を示す）: チャコールパネルに白ボタンと白枠ボタンを置き、白カードの中に黄チェックのリストを入れる
10. お知らせ（更新情報を伝える）: 日付、タグ、下線付きタイトル、矢印の行を罫線で区切って並べる
11. お問い合わせ（問い合わせ・資料・体験版へ誘導する）: グレーの全幅帯に中央見出しと紫ボタンを置き、チェックボックス風アイコンの白カードを3枚並べる
12. フッター（サイト内を回遊させる）: 白地の中央にロゴを置き、2列のリンク一覧、罫線、小さいグレーの法務リンクとコピーライトを並べる

Imagery

• FVの背景は白〜灰色の立体ブロックが集まった3DCGで、ソフトフォーカスをかける
• 背景装飾はトーラスや球体の細い3Dワイヤーフレームを淡いグレーで描く
• 機能図はウィンドウ枠・ブロック・矢印・カーソルを簡略化した線画とベタ面で描く
• アイコンはチャコール単色の太い幾何形にし、抽象的なモチーフにする
• グラフは淡い線と黒い太線で比較を示し、黄のラベルで強調する
• 学習コンテンツのアイコンは淡い紫の等角投影の箱で描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは上部に白いグローバルナビの帯を置き、右上に紫の問い合わせボタンを置く
• PCの活用シーンは先頭の1枚を全幅、残りを2列グリッドにする
• PCのカルーセルは複数枚を同時に見せる
• PCの価格・動作環境は内側のカードを2列に並べる
• PCのフッターのリンクは4列にする
• PCのコンテンツ幅は約900pxで中央にそろえ、余白を広く取る

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