DESIGN.md — 青×ピンクのグラデーションが映える法人向け音声ソフトLP（Blue-Pink Gradient Isometric SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: クール・先進的、信頼・誠実、清潔・爽やか、情報量多め・訴求型
• キーワード: 青→ピンクのグラデーション・等角投影のイラスト・白いカード・マゼンタで強調・番号付きの特長
• 地の質感: フラットな面に薄いグラデーションをかけ、ドット状の波模様を背景に敷く。カードにはごく弱い影をつける。
• 形: 斜めに切ったファーストビュー、角丸のカード、ピル型ボタン、V字に切り替わる帯
• 温度感: やや涼しげ。ピンクを混ぜて親しみを出す

Colors

• 地は白と薄いグレーを交互に敷き、セクションを切り替える
• グラデーションは青→紫→ピンクに固定。使うのはFVと問題解決の帯だけ
• 強調とCTAは濃いマゼンタ一色にする
• 番号と特長見出しは青〜紫のグラデーション文字で表す
• フォームはグレーのラベル帯と白い入力欄で落ち着かせる
• 必須バッジはマゼンタの地に白文字
• solution-band は文字 #FFFFFF × 背景 #A080D0 のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#8A62C5、4.53:1）を使う。

Typography

• 本文は行間2.0でゆったり組む
• 強調語はマゼンタの太字にして文中に埋め込む
• 特長の番号は細い大きな数字にグラデーションをかけ、見出しの左に置く
• 小見出しはマゼンタ文字にマゼンタの下線を引く
• 英字ラベルは細字で日本語見出しの上に小さく置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。悩みカードだけ2列
• 本文ブロックの幅: 画面幅の約 91%
• 余白: セクション間 70px、基本単位 8px、カード内 20px（375px 幅換算）
• 本文の左右余白は約18px
• 特長は「番号見出し→本文→イラスト→白いボックス」の順で構成する
• デモやサンプルは薄いグレーの面の中に白いカードを並べる
• 製品カードは縦に積み、間隔は約14px
• フォームは「ラベル帯＋全幅の入力欄」を繰り返す

Elevation & Depth

• カードには影をごく弱くつける（0 2px 10px rgba(0,0,0,.08)）
• CTAには薄い影をつけ、上から下へわずかなグラデーションをかける
• フォームは影なしで、枠線だけで区切る

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: イラストは切り抜いて背景になじませ、一部は円形に収める
• セクション境界: FVは白い面を斜めに切る。問題解決の帯は上辺を浅いV字にする
• 悩みカードは左上を斜めに欠き、そこに番号を置く
• 悩みカードの下辺に小さな吹き出しの尾をつける
• カルーセルの矢印は円の線画にマゼンタの矢印

Components

• 主CTAボタン（button-primary）: マゼンタのピル型ボタン。左に円形のアイコン、右に三角の矢印を置く
• サブボタン（button-secondary）: 停止などの補助操作に使う濃いグレーのピル型ボタン
• 悩みカード（worry-card）: 白い角丸カード。左上の欠けに番号、中央にアイコン、悩みを3行で書く
• 問題解決の帯（solution-band）: 青→ピンクのグラデーション帯。白文字に白い箱の見出しを添える
• 番号付き特長見出し（numbered-heading）: 大きなグラデーション数字と青紫の見出しを並べる
• 下線小見出し（underline-heading）: マゼンタ文字にマゼンタの下線を引き、中央に揃える
• 音声サンプルカード（sample-card）: グレーのヘッダーにタイトル、イラスト、オーディオプレーヤーを順に入れる
• 製品カード（product-card）: 白い角丸カード。上にリード2行、中央にロゴ、下に説明文
• フォーム項目（form-field）: 左に濃い縦線を入れたグレーのラベル帯に必須バッジ、その下に白い入力欄
• 必須バッジ（badge-required）: マゼンタの地に白い小さな文字

Do's and Don'ts

Do - グラデーションは青・紫・ピンクの3色の範囲で使う - イラストは等角投影の人物やデバイスでそろえる - 強調色はマゼンタ1色に絞る - 白とグレーの面を交互に敷いて情報を区切る - 体験できるデモやサンプルをカードで見せる

Don't - 原色の赤や黄色を追加しない - 写真を多用して質感を変えない - 見出しを明朝体にしない - 強い影や太い枠線を使わない - 本文を中央揃えで長く組まない

Page Structure

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

1. ファーストビュー（製品の価値を伝え、デモへ誘導する）: 斜めに切った白い面に分類ラベル・ロゴ・強調付きのキャッチ・CTAを置き、下にグラデーション背景のイラストを配置する
2. 導入実績（信頼を示す）: 大きなマゼンタの数字の見出しと、ロゴを流す帯
3. 悩みの提起（課題に共感してもらう）: グラデーション文字の見出しの下に、番号付き悩みカードを2×2で並べる
4. 問題解決の帯（解決策へ橋渡しする）: 悩む人物のイラストとV字のグラデーション帯に白文字を載せる
5. 特長1 操作性（手軽さを訴求する）: 番号見出し・本文・イラストの後、白いボックスに画面キャプチャのカルーセルを入れる
6. 特長2 音質（品質を証明する）: 吹き出しのイラストの下に音声サンプルカードを縦に並べる
7. 特長3 話者とデモ（体験してもらう）: 群衆イラストの後に、話者選択タブ・入力欄・スライダー・合成ボタンを並べる
8. 特長4 提供形態（製品を比較・選択してもらう）: 円形のイラストの下に製品カードを縦に積み、SDKはグレー面の小カードで並べる
9. お客様の声（導入事例で後押しする）: 淡い水色〜ピンクの地に白いカードのカルーセルを置き、ドットのページャーをつける
10. お問い合わせ（リードを獲得する）: 英字ラベル付きの見出し、マゼンタのピル型分岐ボタン2つ、ラベル帯付きのフォームを順に並べる

Imagery

• 等角投影のフラットイラストで、人物・PC・吹き出しを描く
• 人物の服は青・紫・ピンク・グレーに限定する
• 背景にドットでできた波線模様を薄く敷く
• 円形や吹き出し形の中にパステルのグラデーションを入れる
• 画面キャプチャは白枠のカルーセルで見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではFVのテキストを左、イラストを右に並べて横長に収める
• PCの悩みカードは4列に並べる
• PCの特長は本文とイラストを左右2カラムにし、左右を交互に入れ替える
• PCの音声サンプルと製品カードは3列に並べる
• PCのフォームはラベルを左、入力欄を右の表組みにする
• PCのお客様の声は、両隣のカードが見切れる3枚表示のカルーセルにする

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