DESIGN.md — 山吹イエロー×白の明快なSaaS紹介LP（Bright Yellow Clean SaaS Feature LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: ポップ・元気、信頼・誠実、情報量多め・訴求型、シンプル・ミニマル
• キーワード: 山吹イエロー・白地・スマホモックアップ・アイコングリッド・比較表・円グラフ
• 地の質感: フラットでグラデーションなし。影はごく薄く、細いグレー線でカードを区切る
• 形: 角丸は小さめのカード、ピル型ボタン、黄色の丸番号バッジ
• 温度感: 暖色の黄を主役にした明るく元気な温度感

Colors

• 黄はFV背景・カード写真枠・丸番号・サブボタンに限定する
• セクション地は白と#FAFAFAを交互に切り替える
• 主CTAは黒、サブCTAは黄の2色をセットで横並びにする
• 数値やキーワードは橙黄の文字で強調する
• 比較表では自社列だけ黄の枠と淡黄の行で目立たせる
• 競合列の見出しには青緑・青など寒色を使い自社と差別化する
• pie-chart は文字 #FEBE06 × 背景 #FFFFFE のコントラスト比が 1.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#966F01、4.59:1）を使う。

Typography

• 見出しは中央揃えの太字ゴシック
• FVコピーは極太で字間広め、白地帯や黄地に黒文字
• カード小見出しは橙黄の太字で中央揃え
• 本文は左揃え・行間1.8で読みやすく
• 数値は大きく欧文で強調する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、機能アイコンは3列、カードは1列（PCは3〜4列）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出し→リード→カードグリッド→CTAの順で各セクションを構成する
• アイコングリッドは正方形タイルを均等に並べる
• CTAペアは主要セクションの後に繰り返し配置する
• 比較表はSPで横スクロールにする
• ロゴ一覧は2〜3列の中央揃え

Elevation & Depth

• カードは1px薄グレー枠とごく薄い影のみ
• スマホモックアップにだけ柔らかいドロップシャドウ
• ボタンは影なしのフラット

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: カード上部の黄色い矩形内にスマホ画面を中央配置、写真は角丸小の矩形
• セクション境界: 直線で背景色を切り替えるのみ
• ボタンは全てピル型
• 番号は黄の正円バッジに白数字
• カードは角丸小の矩形で統一
• 装飾的な波線や斜線は使わない

Components

• 主CTA黒ピルボタン（button-primary）: デモ申込用の黒地白文字のピル型
• サブCTA黄ピルボタン（button-secondary）: 資料請求用の黄地黒文字ピル型。主CTAと横並び
• 機能アイコンタイル（feature-icon-tile）: 白い正方形にカラーアイコンと小ラベル、細枠
• 黄枠モックアップカード（yellow-mock-card）: 上半分黄地にスマホ画面、下に橙黄見出しと本文
• 丸番号つき特徴カード（number-badge-card）: 左上に黄丸の番号、橙黄見出し、本文の白カード
• 受賞風メダルバッジ（award-badge）: FV右側の金色の円形バッジで信頼を示す
• 競合比較表（comparison-table）: 自社列を黄枠で囲み、○△×記号で比較
• 黄系円グラフ（pie-chart）: 黄の濃淡で割合を示し、数値を大きく表示
• 実績数値リボン（highlight-ribbon）: FVの赤〜黒帯に白抜きで利用数を強調

Do's and Don'ts

Do - 黄・白・黒の3色を軸に構成する - 機能はアイコンと短いラベルで一覧化する - CTAは黒と黄の2ボタンを必ずセットで置く - 実績は数値・ロゴ・グラフで視覚化する - カード見出しは橙黄で統一する

Don't - 黄以外の暖色を主役にしない - 濃い影や立体的な装飾を付けない - 長文を区切りなしで並べない - ボタンを角張った矩形にしない - 背景に写真を全面敷きしない

Page Structure

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

1. ヘッダー（ナビと常時CTA）: 黄地にロゴ、メニュー、白枠と黒の小ボタン2つ
2. ファーストビュー（サービスの価値を一言で示す）: 黄地に極太コピー、白帯の強調語、右にスマホモック、受賞バッジ、実績リボン
3. 導入ロゴ帯（信頼感の提示）: 白地に企業ロゴを横一列
4. CTA（早期の申込導線）: 黒と黄のピルボタン横並び
5. できること一覧（機能の網羅性を示す）: アイコンタイルのグリッドと黄の詳細ボタン
6. 概要・4つの利点（使いやすさを伝える）: 2行見出しの下に黄枠モックアップカード4枚
7. 3つの特徴（差別化ポイント）: 薄グレー地に丸番号つき白カード3枚
8. 活用事例（課題別の使い方を示す）: イラスト付きカード6枚を3列、CTAペア
9. 導入実績ロゴ（大手実績で信頼）: 数値強調の見出しと大きめロゴ群
10. 導入実績グラフ（利用傾向の可視化）: 薄グレー地に黄系円グラフ2つ
11. 競合比較表（優位性の証明）: 自社列黄ハイライト、記号比較の表
12. 利用の流れ（体験イメージ）: スマホ画面のカルーセルとドットナビ

Imagery

• スマホ実機モックアップに画面UIを入れて見せる
• フラットな多色アイコン（線＋面）で機能を表現
• 活用事例はフラットイラストと簡単な人物・街並み
• グラフは黄の濃淡のみで描く
• ロゴはカラーのまま白地に並べる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは最大幅約1000pxで中央寄せ、SPは画面幅90%
• モックアップカードはPC4列→SP1〜2列
• 特徴・事例カードはPC3列→SP1列
• アイコングリッドはPC6列→SP3列
• FVはSPでコピー→モックの縦積み
• 比較表はSPで横スクロール

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