DESIGN.md — 蛍光グリーン×濃紺の工場床材BtoB LP（Industrial Green & Deep Navy BtoB Coating LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、クール・先進的、情報量多め・訴求型、清潔・爽やか
• キーワード: 工場・技術系BtoB・ビフォーアフター・蛍光グリーン・濃紺・マーカー強調
• 地の質感: フラットな単色の面と線。写真は明るくて光沢がある。
• 形: 角はほぼ四角。円形の写真切り抜き、V字のセクション下端、矢羽根形のステップを使う。
• 温度感: クールで清潔。黄色のアクセントで親しみを足す。

Colors

• 地は白が基本。FAQだけを淡いグレーで分ける。
• 訴求バナーは「緑の帯＋濃紺の面」の順に重ね、ページ内で繰り返す。
• CTAボタンは濃紺の地に白文字。最後のCTAだけ緑の枠を付ける。
• 強調したい語は緑の文字か、黄色のマーカーで示す。
• Beforeのラベルは濃紺、Afterのラベルは緑で対比させる。
• 黄色はバッジ・マーカー・イラストの背景円だけに使う。
• section-label は文字 #FFFFFF × 背景 #01CA33 のコントラスト比が 2.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#018822、4.62:1）を使う。

Typography

• 全体を太めの角ゴシック1書体で統一する。
• 見出しは太字にし、キーワードだけを緑か黄色マーカーで強調する。
• CTAの前の誘導文は左右に斜線を置いて挟む。
• 本文は短い文で改行し、1行15〜20字に収める。
• FAQの「質問」「回答」は小さな四角ラベルで示す。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。事例の比較写真だけ 2 カラム。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• Before/After写真は左右に同じサイズで並べ、下にラベル帯を付ける。
• メリットは「項目ラベル＋説明」の2列の表にする。
• 悩みは円形の写真とテキスト円を交互に並べる。
• 緑と濃紺の訴求バナーを、ページの前半と中盤で繰り返す。
• 導入の流れは矢羽根形のステップを横に並べる（SPは2段か縦並び）。

Elevation & Depth

• 影はほぼ使わず、平面で構成する。
• 濃紺バナーの下にV字の多層帯を付け、奥行きを出す。
• 写真ギャラリーの上に白いカードを重ねる。

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 事例写真は四角。悩み写真と人物は正円に切り抜く。
• セクション境界: 濃紺バナーの下端をV字に下げ、多層の紫グレーで区切る。
• ボタンは角丸4px程度の長方形。
• 吹き出しは細い黒枠の四角で、下に三角の尾を付ける。
• ステップは右向きの矢羽根形。
• 見出しの帯は角丸なしの緑の長方形。

Components

• 主CTAボタン（button-primary）: 濃紺の長方形ボタン。白文字の右に「>」を付ける。
• 訴求バナー（promo-banner）: 緑の帯に一文と黄色の「おすすめ」バッジを置き、続く濃紺の面に図解とV字の下端を付ける。
• 黄色バッジ（badge-yellow）: 黄色の四角に太字2行のおすすめ表記。
• 斜線つき誘導見出し（cta-lead）: 緑の文字の両脇に斜線を置き、要所を黄色マーカーで強調する。
• 緑の帯見出し（section-label）: 緑の横長の帯に白の太字見出し。
• 事例カード（case-card）: 黄色の円に人物イラストを置き、吹き出し見出し、Before/Afterの写真、短い要約、本文の順に並べる。
• メリット表（merit-table）: 左に緑の項目セル、右にグレーの説明セルを並べた表。
• FAQ項目（faq-item）: 白の質問バーに小さな黒ラベル、回答の前に緑ラベル。答えの要点は黄色マーカーで示す。
• 導入ステップ（step-arrow）: 濃紺の矢羽根形に白文字で、5つのステップを示す。

Do's and Don'ts

Do - 緑と濃紺の2色を主役にし、黄色は点で使う。 - 効果は必ずBefore/Afterの写真で示す。 - 線画のビジネスマンイラストを、CTAや見出しの脇に添える。 - 強調は黄色マーカーと緑の文字に限定する。 - CTAは誘導見出しとボタンをセットにして、複数回置く。

Don't - グラデーションや強い影を使わない。 - ピル型の丸ボタンにしない。 - 緑・濃紺・黄以外の派手な色を足さない。 - 柔らかい丸ゴシックや明朝体を使わない。 - 長い本文を区切らずに並べない。

Page Structure

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

1. ファーストビュー（対象と価値を一言で伝える）: 青みのある建築の線画写真に、白抜きの太字コピーとロゴを重ねる。
2. 訴求バナー（キャンペーンを告知する）: 緑の帯と黄色バッジ、濃紺の面に図解を置き、下端はV字にする。
3. 導入文とCTA（テスト施工へ誘導する）: 中央揃えの2行の文、斜線つき誘導見出し、濃紺ボタンを並べる。
4. 悩みの提起（失敗の原因を示す）: グレーの角枠の中に、円形の写真と緑のテキスト円を3×2で並べる。
5. 解決策と特長（技術のメリットを示す）: 緑の鉤括弧見出し、短文、イラスト、項目表を並べる。
6. 中間CTA（申し込みを促す）: 誘導見出し、ボタン、困り顔の人物イラストを置く。
7. 施工写真と再訴求バナー（実物を見せて体験を促す）: 全幅の施工写真の下に、緑と濃紺のバナーを繰り返す。
8. 申込案内（テスト施工の内容を説明する）: 左に見出しと本文、右に緑枠の濃紺CTAボックス、下にグレーの注記を置く。
9. コンセプト見出し（新しい常識を宣言する）: 上下を緑の太線で挟み、緑の大見出しを置く。
10. 導入事例（実績で信頼させる）: 緑の帯見出しの下に、事例カードを3件縦に並べる。
11. よくある質問（不安を解消する）: グレーの地に、白の質問バーとマーカーで強調した回答を並べる。
12. 導入の流れ（手順を示す）: 写真ギャラリーの帯に白カードを重ね、矢羽根のステップを5つ並べる。
13. 最終CTA・フッター（問い合わせへ誘導する）: 緑の大見出しとイラスト、緑枠の濃紺ボタンを置き、最後に緑のフッター帯。

Imagery

• 工場の床を広角で撮る。Afterは光沢と照明の映り込みを強調する。
• Before/Afterは同じ画角で撮り、汚れと光沢の差を見せる。
• 人物は黒の線画にシンプルな着色で、スーツや作業着のビジネスマン。
• 人物アイコンは黄色の円の中に配置する。
• FVは建築図面風の青い線画を合成し、先進感を出す。
• 床材の層構造を斜め上から見た立体図解で示す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央寄せで、コンテンツ幅は約800px相当。
• SPの悩みグリッドは2列×3段にする。
• 申込案内の2カラムは、SPでは縦に積み、CTAボックスを下に置く。
• 導入ステップはSPで縦並びか2段にし、矢印を下向きにする。
• Before/After写真はSPでも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 行書くと起動時に読み込まれる。