DESIGN.md — 紺黒×蛍光イエローのAI開発BtoB LP（Neon Yellow on Midnight Tech BtoB LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: クール・先進的、力強い・インパクト、シンプル・ミニマル、信頼・誠実
• キーワード: 蛍光イエロー・ミッドナイトネイビー・線画アイコン・タイムライン・角のない四角・ハイコントラスト
• 地の質感: フラットな単色の面だけで構成する。質感を出すのはFVの光の筋の写真のみ
• 形: 角丸なしの長方形と正円アイコン枠、黄色の太い縦線と矢印
• 温度感: クールで硬質。黄色だけが熱量を持つ

Colors

• セクションごとに白→濃紺→薄グレー→黒→白→黄→濃紺と地の色を切り替える
• 強調色は蛍光イエローの1色だけ。暗い地では文字・線・アイコンに、明るい地では帯やマーカーに使う
• 黄色の面に載せる文字は必ず濃紺にする
• 明るい地のキーワードは、下半分に黄色マーカーを引いて強調する
• 対比は『グレー＝従来』『黄色＝解決後』の色分けで表す
• グラデーションは使わない。FV写真以外はすべてフラットな単色にする

Typography

• 見出しは左揃えの太字にし、その上に小さな太字ラベルを置く
• 英字の大見出しは字間を詰め、極太にする
• 比較カードでは、結論の行だけを太字にする
• 期間などの数値は、暗い地の上に黄色の太字で置く
• 本文は小さめにして行間を広めに取る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、PC は工程を横並び、比較は 2 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 70px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右の余白は約14pxで揃える
• セクションの上下余白は60〜80pxと広めに取る
• 工程は中央の縦ライン上に円アイコン、左に工程名、右に波括弧で期間を置く
• 比較は、見出しバー→カード2枚→下向き矢印→見出しバー→カード2枚の順に縦へ積む
• 対話例は左右にアイコン、中央に吹き出しを交互に並べる

Elevation & Depth

• 影は使わずフラットにする
• 層の違いは地の色とカードの色の差だけで表す
• カードの左端に太い縦線（グレーまたは黄色）を引いて区別する

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: アイコンは白い正円の中に線画で置き、写真は四角く裁ち落とす
• セクション境界: 直線で地の色を切り替える
• ボタン・カード・バーはすべて角丸0にする
• 工程アイコンだけを正円にする
• 矢印は黄色または濃紺の太い下向き三角にする
• 吹き出しは四角に小さな三角のしっぽを付ける

Components

• 相談ボタン（button-primary）: 幅いっぱいの黄色い四角ボタン。左にアイコンを付け、文字は太字
• 小見出しラベル（section-label）: 見出しの上に置く小さな太字の一行
• 工程タイムライン（process-timeline）: 黄色の太い縦線上に白い円の線画アイコンを並べ、最後は矢印で終える。右の波括弧に黄色で期間を添える
• 比較見出しバー（compare-header）: アイコン付きで中央揃えの帯。従来側はグレー、解決後は黄色
• 比較カード（compare-card）: 左端に太い縦線を引いた白カード。3行の文章で、最後の行を太字かマーカーにする
• 黄色マーカー（marker-highlight）: キーワードの下半分に引く黄色の帯
• 対話吹き出し（chat-bubble）: ユーザー側は白、AI側は黄色の四角い吹き出しを交互に並べる
• FAQアコーディオン（faq-item）: 左にQ、右に＋を置き、下に細い区切り線を引く
• Contactブロック（contact-block）: 黄色い面いっぱいに字間を詰めた極太の英字を置き、右上に斜め矢印、下に短い説明文

Do's and Don'ts

Do - 黄色は1色だけに限定し、要所にだけ使う - 地の色を交互に変えて、セクションの区切りをはっきりさせる - アイコンは細い線で単色の線画に統一する - 工程やプロセスは線と矢印でつなぎ、流れを図にして見せる - 角丸なしでシャープに揃える

Don't - 角丸やピル型のボタンを使わない - 黄色以外の彩度の高い色を足さない - ドロップシャドウやグラデーションを使わない - 写真を多用しない（FV以外は図解とアイコンで見せる） - 黄色の上に白文字を置かない

Page Structure

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

1. ファーストビュー（サービスの価値を一言で伝える）: 光の筋が走る暗い写真の上に黄色の小ラベルと白い太字の大見出しを置き、黄色の小さな正方形をアクセントにする
2. 課題の提起（スピードが重要な理由を示す）: 白地に線画アイコン→短文→黒の三角矢印→アイコン→短文を縦に並べる
3. ソリューション（独自手法と工程の速さを示す）: 濃紺地に大きな黄色線画アイコンを置き、黄色の縦ラインのタイムラインと期間の括弧、注釈を続ける
4. 導入効果の比較（従来と導入後を対比する）: 薄グレー地にグレーのバーとカードを置き、矢印を挟んで黄色のバーとカード、マーカー強調を続ける
5. 事例・デモ（実際の動作を見せる）: 黒地に人物アイコンとAIアイコンを置き、その間に吹き出しの対話を並べる
6. 開発の流れ（MVPまでの工程を示す）: 黄色の帯の見出しの下に円アイコンと大きな工程名を縦につなぎ、動画を埋め込む
7. よくある質問（不安を解消する）: 白地に区切り線のアコーディオンを置く
8. お問い合わせ（相談へ誘導する）: 黄色の全面に極太の英字見出し、斜め矢印、説明文を置く
9. フッター（関連リンクと固定CTAを置く）: 濃紺地に黄色のロゴ、SNSアイコン、リンク、黄色の相談ボタンを並べる

Imagery

• FVは青紫やマゼンタの光の筋が中心へ向かう高速感のある写真にし、暗く落とす
• アイコンは細い線で単色の線画にする。暗い地では白か黄色、白い円の中ではグレーにする
• 人物は顔のない単色シルエットにする
• AIは横顔の頭部に歯車と回路を描いた黄色の線画で表す
• 画面キャプチャは四角く裁ち落として配置する
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではタイムラインを横向きに並べ、期間の括弧を上に置く
• PCでは比較を左右2カラムにし、間に黄色の右向き矢印を挟む
• PCでは工程リストと動画を左右に並べる
• PCではコンテンツ幅を約1000pxに絞って中央に寄せる
• PCのFVは高さを抑え、見出しを中央揃えにする

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