DESIGN.md — 白×薄灰に緑グラデの製造業向けクラウド LP（Green Gradient Manufacturing SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、クール・先進的、清潔・爽やか、シンプル・ミニマル
• キーワード: 緑グラデーション・淡いグレー面・英字ラベル・ピル型ボタン・工場の写真・フラットなアイコン
• 地の質感: フラットで影は控えめ。写真の上には暗いオーバーレイをかけ、カードは白地に細い線か淡い灰色の面で作る。
• 形: 角丸 8px 前後のカード、ピル型ボタン、斜めの緑の帯、セクション上端だけ角丸にした灰色パネル
• 温度感: やや寒色寄りのニュートラル。緑で前向きさを足す

Colors

• 地色は白と #F0F4F5 を交互に使い、セクションの区切りを作る
• 緑の単色は英字ラベル・強調語・ボタンの枠と文字にだけ使う
• 主 CTA と機能パネルは、青緑から黄緑への左→右グラデーションで塗る
• 資料請求と最下部 CTA だけを濃紺の面にして、視線を止める
• 本文はグレー寄りの黒にし、純黒は使わない
• 写真の上には暗いオーバーレイを敷いて白い文字を乗せる
• button-primary は文字 #FFFFFF × 背景 #1CB47B のコントラスト比が 2.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#15865B、4.57:1）を使う。
• button-outline は文字 #3DAE7B × 背景 #FEFFFE のコントラスト比が 2.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2E845E、4.58:1）を使う。

Typography

• 見出しは「スラッシュ＋英字ラベル（緑・細字）」と「太字の和文見出し」の 2 段にする
• 数字を強調するときは緑で大きくし、周りの文字より 1.5 倍ほどにする
• 本文は行間 1.9 前後で、短い行ごとに改行する
• 強調語は太字の緑にし、背景色は付けない
• 見出しは左揃え。中央揃えは理由の見出しと CTA ブロックだけにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。機能タイルだけ 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 18px で統一する
• 各セクションの末尾に、全幅のアウトラインボタンを 1 つ置く
• 灰色のセクションは上端を角丸にしたパネルにし、白いカードを並べる
• 課題の一覧は、アイコン＋2 行テキスト＋右端の矢印カプセルを縦に積む
• 導入の流れは、左に番号の丸と縦線のタイムライン、右に白いカードを置く

Elevation & Depth

• 基本は影なし。白いカードは 1px の淡い枠線で区切る
• ファーストビュー直下の告知カードだけ、ごく弱い影を付ける
• ページトップへ戻るボタンは白い円に薄い影を付ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 角丸 8px の長方形。2 枚の写真をずらして重ねる構図も使う
• セクション境界: 直線。灰色のセクションは上端を角丸 16px にしたパネル
• ボタンはすべてピル型にする
• 矢印アイコンは、小さなピル型の枠の中に入れる
• 番号は塗りつぶした円。色は緑のグラデーションで段階的に変える
• ファーストビューに斜めの緑の帯を入れる

Components

• グラデーション CTA（button-primary）: 青緑から黄緑へのグラデーションのピル型ボタン。上に小さな補足、下に太字の本文の 2 段で、右端に白い矢印かダウンロードのアイコンを置く
• 緑枠のサブボタン（button-outline）: 白地に緑の 1px 枠のピル型ボタン。全幅で、緑の文字を中央に、矢印を右端に置く
• 英字ラベル付きの見出し（section-label）: 緑の細字で「/ 英字」を書き、その下に太字の和文見出しを置く
• 理由カード（reason-card）: 灰色の面に、左上のフラットなイラストと右側の太字見出し、下に本文を置いたカード
• 機能グリッドパネル（feature-grid）: グラデーションのパネルの中に、淡い緑のタイルを 2 列×4 段で並べる。各タイルは緑の丸アイコン＋機能名
• 資料請求バナー（download-banner）: 濃紺の面に箇条書き、大見出し、資料の表紙を重ねたモックを置き、下端をグラデーションの帯ボタンにする
• 課題リンクのカード（list-link-card）: 白いカードに枠線。左に緑のアイコン、中央に太字 2 行、右に矢印のカプセルを置く
• 導入ステップ（step-timeline）: 左に緑の番号丸と縦線、右に白いカード（緑の見出し＋説明）を並べる
• FAQ アコーディオン（faq-item）: 枠線付きの白いカード。左に灰色の Q、右に＋のカプセルを置く

Do's and Don'ts

Do - 緑はグラデーションと単色の 2 通りだけで使い、ほかの色は足さない - 白と淡いグレーのセクションを交互に置き、リズムを作る - セクションごとに、末尾へアウトラインボタンを置いて詳細ページへ送る - アイコンは緑の単色か、白抜きの丸の中に入れたフラットなものに揃える - 写真は工場や働く人の明るい実写を使い、角丸で切り抜く

Don't - 赤やオレンジなどの暖色を、強調やセール表現に使わない - 強いドロップシャドウや立体的なボタンにしない - 見出しに明朝や手書きの書体を使わない - 濃紺の面を CTA と資料請求以外で多用しない - 本文を緑で長く書かない

Page Structure

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

1. ファーストビュー（価値の宣言と資料ダウンロードへの誘導）: 工場の人物写真に暗いオーバーレイと斜めの緑の帯を重ね、白い大見出しを置く。下部にグラデーションの CTA と、お知らせの帯を置く
2. 外部評価のバナー（第三者評価で信頼を得る）: 黒いカードに白いロゴ風の文字と黄緑の文言を載せ、下に白い帯の『詳細』リンクを付ける
3. コンセプト（製品の思想を伝える）: 英字ラベル・見出し・下線付きの緑の見出しを置き、続けて長めの本文と、ずらして重ねた 2 枚の写真を並べる
4. 選ばれる理由（主要な強みを 3 つ提示する）: 数字を緑で大きくした中央揃えの見出しを置き、灰色のカードを 3 枚縦に積む
5. 機能紹介（網羅性を示す）: グラデーションのパネルに、機能タイルを 2 列で 8 個並べる。その下に強調語入りの中央揃えの文と、アウトラインボタンを置く
6. 資料請求（リードを獲得する）: 濃紺のバナーに資料のモックとグラデーションの帯ボタンを入れる
7. 解決できる課題（自分ごと化させる）: 灰色のパネルに、業界別と業務別のリンクカードを縦に並べる
8. 連携サービス（拡張性を伝える）: 白地に短い説明文とアウトラインボタンを置く
9. 導入の流れ（導入の不安を払う）: 灰色のパネルに、番号のタイムラインで 6 ステップを並べる
10. コラム（お役立ち情報への導線）: 枠線カードに日付・タイトル・サムネイル・タグを入れる
11. サポートコンテンツ（導入後の支援を見せる）: 暗くした写真のカードに白い見出しと矢印のカプセルを載せる
12. よくある質問（疑問を解消する）: Q と＋のアコーディオンを 3 件置き、一覧へのボタンを付ける
13. 最終 CTA（相談と資料請求で成約につなげる）: 濃紺の面にキャッチを再掲し、白枠のボタンとグラデーションのボタンを縦に 2 つ置く
14. フッター（サイト内の回遊）: 灰色の地にロゴと 2 列のリンク一覧、コピーライトを置く

Imagery

• 製造現場で働く人を、明るく自然光寄りに撮った実写写真
• ヘルメットや作業着の人物が笑顔で会話するシーン
• 設備が並ぶ工場を俯瞰で写した広角写真
• 白地に緑と灰色のフラットなイラスト（PC 画面・人物・アイコン群）
• 資料の表紙を斜めに重ねたモックアップ
• 手元の PC 作業やペンを持つ手の写真に、暗いオーバーレイをかける
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 60% の中央寄せにし、左右に広い余白を取る
• PC のファーストビューは、写真を全幅にしてキャッチを右側に置く
• 理由カードは PC で 3 列、機能タイルは 4 列×2 段にする
• 課題の一覧は PC で 4 列のグリッドカードにする
• PC では見出しを左、説明文を右に置く 2 カラムの見出し配置にする
• 最終 CTA は PC でテキストを左、ボタン 2 つを右に置く

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