DESIGN.md — 蛍光グリーンのグラデーションが映えるデザイン人材支援 LP（Vivid Green Gradient B2B Design Service LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: クール・先進的、清潔・爽やか、情報量多め・訴求型、信頼・誠実
• キーワード: 蛍光グリーン・グラデーション地・白パネル・黒ボタン・黄緑ピル CTA・マーカー強調
• 地の質感: なめらかな発光感のあるグリーングラデーションに、フラットな白い面と濃い緑のベタ面を重ねる。薄い円弧のリング装飾を角に置く。
• 形: 大きく角丸にした白パネル（上側の角）、角丸が小さいカード、ピル型ボタン、黒い四角の吹き出し。
• 温度感: 爽やかで少し冷たい。活発でテック寄りの印象。

Colors

• 地は蛍光グリーンのグラデーションにする。上に白い角丸パネルを重ねて、コンテンツ面を切り替える。
• 悩み提起だけは深緑のグラデーションにして、黒い吹き出しを置く。
• 強調語は明るい緑のマーカー塗りか緑の文字にする。
• 主 CTA は黄緑に濃い文字。資料請求などのサブ CTA は黒地に白文字。
• カード・声・フッター上の面には濃い緑のベタ（primary）を使う。
• 赤や青など、緑系統から外れる強い色は使わない。
• step-card は文字 #FFFFFF × 背景 #13A92E のコントラスト比が 3.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0F8925、4.54:1）を使う。
• voice-card は文字 #FFFFFF × 背景 #13A92E のコントラスト比が 3.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0F8925、4.54:1）を使う。

Typography

• 見出しは太いゴシック体にする。キーワードだけ 1.3 倍に拡大するか、緑にする。
• 数字と英字ラベルは太い欧文サンセリフ体にする。
• 見出しは中央揃え。特長と流れのセクションだけ左揃えにする。
• 本文は 14px 前後、行間は 1.8。
• 見出しのキーワードには、緑のマーカー塗りを文字の背面に敷く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（PC は 3 列のカード、または 2 列の写真＋テキスト）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 白パネルは画面幅いっぱいにし、上の角を 32px 前後の角丸にして重ねる。
• 特長は大きな写真の左下か右下に、白いカードを半分重ねる。左右を交互に置く。
• 事例とお客様の声は横スクロールのカルーセルにして、端を見切らせる。
• 流れのセクションは、番号の丸と罫線で区切ったリストにする。
• 料金は 3 枚の並列カードにし、おすすめのプランは黒いヘッダーで区別する。

Elevation & Depth

• 影はほとんど使わず、フラットな面の色差で階層を作る。
• 白カードには、ごく薄い影（0 2px 8px rgba(0,0,0,0.06)）までにとどめる。
• 写真に白カードを重ねることで奥行きを出す。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 長方形の角を落とさない（またはごく小さく丸める）。特長の写真は横長のワイドにする。
• セクション境界: 白パネルの上辺を大きく角丸にして重ねる。直線のグラデーション切り替えも使う。
• ボタンとバナー状の CTA はピル型にする。
• 悩みの吹き出しは角の四角い黒箱に、小さな三角のしっぽを付ける。
• 背景には、薄い黄緑の太い円弧リングを部分的に置く。

Components

• 黄緑のピル型 CTA（button-primary）: 黄緑の面に濃い緑の太字を載せ、右に矢印を付ける。問い合わせに使う。
• 黒いピル型ボタン（button-secondary）: 資料請求や一覧へのリンクに使う。黒地に白文字。
• 大型の黄緑ピルバナー（cta-banner）: セクションの合間に置く。上に黒い小ラベル、下に誘導文、右に紙飛行機のアイコンを付ける。
• 悩みの黒吹き出し（worry-bubble）: 白文字で、2 行目の悩みの要点を明るい緑で強調する。2 段 3 列で並べる。
• 緑のステップカード（step-card）: 緑の面の上部に STEP と番号を置き、下に写真と人物イラストを置く。
• 特長ポイントカード（feature-card）: 写真に重ねる白カード。POINT と大きな番号、マーカー付きの見出し、本文を入れる。
• 料金プランカード（plan-card）: 緑（おすすめは黒）のヘッダー、プラン名、大きな価格、説明、薄い注釈枠で構成する。
• お客様の声カード（voice-card）: 緑の面に、白い太字の成果見出しと本文、白いタグを入れる。人物は薄いシルエットで敷く。
• 流れのリスト行（flow-row）: 白丸の番号、太字の項目名、説明文を横に並べ、行間を罫線で区切る。

Do's and Don'ts

Do - 地は必ず明るい緑のグラデーションにし、白パネルとの対比を保つ。 - キーワードは緑のマーカー塗りか拡大で強調する。 - 数字（料金・番号・実績）は大きく太くする。 - CTA は黄緑と黒の 2 種類に限定する。 - 写真は明るいオフィスやビジネスパーソンにする。

Don't - 緑以外の色をブランド色として使わない。 - 明朝体や手書き風の書体を使わない。 - 濃い影や立体的なボタンを使わない。 - 地を真っ白のフラットだけにしない（グラデーションの面を必ず挟む）。 - 本文を中央揃えにした長文を作らない。

Page Structure

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

1. ヘッダー（ナビゲーションと即時の CTA）: 白い角丸のバーを上部に浮かせる。右端に黒と黄緑の 2 つのボタンを置く。
2. ファーストビュー（価値と価格の訴求）: 緑のグラデーション地に、黒ラベル、大きなコピー、実績アイコンを 3 つ並べる。右上には制作物のサムネイルを斜めにタイル状に配置する。下部に検索風の帯を置く。
3. 悩みの提起（課題への共感）: 深緑のグラデーション地に中央見出しを置き、黒い吹き出しを 6 個並べる。
4. 解決策と仕組み（サービスの全体像）: 白パネルにロゴ風の見出しを置く。緑のステップカードを 3 枚並べ、矢印のあとにマーカー付きの要約、その下にミント地の仕組み図を置く。
5. 事例（実績の提示）: 左揃えの見出しと黒い一覧ボタンを置く。写真カードのカルーセルにタグを付ける。
6. 中間 CTA（相談への誘導）: 黄緑の大型ピルバナーを置く。
7. 特長（選ばれる理由を 4 つ示す）: ワイド写真に POINT カードを交互に重ねる。
8. 料金プラン（価格の比較）: 白パネルに 3 列のプランカードを置く。下にイラストと追加提案の CTA を付ける。
9. お客様の声（信頼の補強）: 緑のカードを横スクロールで見せる。
10. ご紹介の流れ（手順の明示）: 左に見出し、右に番号付きのリストを 4 行置く。
11. お問い合わせ（最終 CTA）: 濃い緑の角丸パネルに白カードを 2 枚並べる（資料請求は黒ボタン、問い合わせは黄緑ボタン）。
12. フッター（補足リンク）: 白地に小さなリンクとコピーライトを置く。

Imagery

• 写真は明るいオフィスで働くビジネスパーソンや、打ち合わせの様子。自然光で、彩度は控えめにする。
• 制作物のサムネイルを斜めに並べたコラージュで、制作力を示す。
• フラットな人物イラスト（青・緑・黄の服）を、カードの端に添える。
• お客様の声は、顔写真の代わりに白い半透明のシルエットにする。
• 背景に、薄い黄緑の太い円弧リングを装飾として置く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は 1 カラムにする。悩みの吹き出しは 2 列か 1 列に縦積みする。
• ステップ・料金カードは縦積みにするか、横スクロールにする。
• 特長は、写真の下に白カードを少し重ねて縦に並べる。
• ヘッダーのナビはハンバーガーメニューにし、CTA は下部に追従するバーにする。
• PC のコンテンツ幅は約 880px で中央に寄せる。

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