DESIGN.md — 紺×黄の安全標識風・業務用ラベルLP（Industrial Safety Stripe BtoB Product LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 力強い・インパクト、信頼・誠実、情報量多め・訴求型
• キーワード: 安全標識・工場・倉庫・ビフォーアフター・黄黒ストライプ・太ゴシック
• 地の質感: コンクリートの擦れ感がある写真地と、フラットな単色面の組み合わせ
• 形: 角丸の小さいパネル、ピル型見出しラベル、斜めストライプ帯、下向き矢印
• 温度感: やや寒色寄りの落ち着いた地に、黄とオレンジで熱量を足す

Colors

• 地は白→グレーグリーン→白→紺と交互に切り替える
• 濃紺はブランド面とFAQ・見出しピルに使う
• 黄は安全標識の文脈で、ストライプ・POINTピル・マーカー・FAQのA番号に使う
• オレンジはCTAバナーだけに使う
• 強調語は赤橙文字で部分着色する
• 紺地の上の回答文は黄文字にする
• cta-banner は文字 #F1F1A7 × 背景 #E8580F のコントラスト比が 3.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B8460C、4.56:1）を使う。
• point-pill は文字 #D25500 × 背景 #F2D350 のコントラスト比が 2.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#9C3F00、4.55:1）を使う。
• scene-card は文字 #263F72 × 背景 #8A9E93 のコントラスト比が 3.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-alt-accessible（#A0B0A8、4.55:1）を使う。

Typography

• 本文まで太字でそろえ、細い書体は使わない
• 見出しは中央揃えで2行に分ける
• 大見出しの両側に斜線の飾りを付ける
• Q/A番号は幅の狭い欧文太字を大きく置く
• 強調語は文字色だけ変え、サイズは変えない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較写真は2枚横並び、使用シーンは2×2
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 比較はBEFORE写真・矢印・AFTER写真の3要素を横に並べる
• 検証ブロックは白い点線で区切る
• CTAバナーは斜めストライプ帯の中央に置く
• 見出しピルは中央に置き、下に小さな三角を付ける

Elevation & Depth

• CTAバナーだけ下にドロップシャドウと縁の光沢を付ける
• カード・パネルは影を付けずフラットにする
• 写真に影は付けない

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの矩形。人物イラストは紺の正円に入れる。商品は淡青の正円に入れる
• セクション境界: 直線で切り替える。黄黒または紺の斜めストライプ帯と下向きの白い大矢印を挟む
• POINTは黄色の角丸ピルにする
• 使用シーンのカードは黄色の太枠で囲む
• FAQのQ行は白い長方形にする

Components

• サンプル請求バナー（cta-banner）: 上はオレンジのグラデーションに黄文字の訴求と白い小文字の説明。下は白帯に黒文字とオレンジの丸矢印
• 安全ストライプ帯（stripe-band）: 黄と灰の斜めストライプ全幅帯。CTAや動画を載せる
• 見出しピル（heading-pill）: 紺のピル形に白文字。下に三角の吹き出し尻尾
• POINTピル（point-pill）: 黄の角丸ピル。上に小さく紺の英字、下に赤橙の太字
• 比較写真ユニット（before-after）: 写真の左上にBEFORE/AFTERタグ。間に日数を入れた黄色の矢印
• 使用シーンカード（scene-card）: 黄の太枠に写真、下に白地黒文字のラベル名
• コメントカード（comment-card）: 淡青の角丸カードに紺の太字本文。一部を赤橙で強調
• FAQ（faq-item）: 紺地に白いQ行（紺の大番号）、その下に黄色の大きなA番号と黄文字の回答

Do's and Don'ts

Do - 黄黒ストライプで現場の安全標識らしさを出す - 効果はビフォーアフター写真と経過日数で示す - CTAバナーは同じデザインのまま3回繰り返す - 地の色を交互に変えてセクションを区切る

Don't - パステルや淡い色ばかりにしない - 細い明朝体や手書き体を使わない - オレンジをCTA以外の面に使わない - 写真に角丸や影を付けすぎない

Page Structure

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

1. ファーストビュー（製品の強みを一目で伝える）: 擦れたコンクリートの写真地に、斜めの貼り紙風白ラベルで太字の短い文言を並べる
2. 悩みの提起（現場の課題を見せる）: 白地に黄マーカー付きの紺見出し。劣化した床写真をコラージュ状に並べる
3. 解決の提示（従来品との差を示す）: 白い大矢印の下に紺の角丸パネル。2段の比較を黄文字見出しで並べる
4. CTA（無料サンプル請求）: 黄黒ストライプ帯の中央にオレンジのバナーを置く
5. 実証検証（環境別の耐久性を証明する）: グレーグリーン地に白見出し。比較写真とPOINTピルを点線で区切って3回繰り返す
6. 動画（試験の様子を見せる）: ストライプ帯の上に動画を埋め込み、白地のキャプションを付ける
7. 使用シーン（用途を広げる）: 見出しピルの下に黄枠カードを2×2で並べる
8. セット内容（必要な商品構成を示す）: 白地に淡青の円で商品を3つ置き、＋記号でつなぐ
9. CTA（再度の誘導）: 紺の斜めストライプ帯にオレンジのバナーを置く
10. お客様の声（現場の課題に共感させる）: 作業員イラストの円の下に淡青のカードを3枚並べる
11. よくある質問（不安を解消する）: 紺地に白いQ行と黄色の回答
12. CTA・フッター（最後の誘導）: 白地にバナー。その下に黒帯と白地のリンク群

Imagery

• 実際の工場・倉庫の床を真上から撮った、擦れや汚れのある写真
• 比較写真は同じ構図・同じ距離で撮る
• 人物はヘルメットと安全ベストを着たフラットなイラストにする
• 商品は白背景の切り抜きを淡い円に入れる
• 装飾は斜めストライプと矢印に限る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央約60%幅に要素をまとめ、背景帯だけ全幅にする
• PCではPOINTピルを2つ横に並べる
• PCではコメント欄をカード左・イラスト右の2カラムにする
• PCのFAQはQとAを横長の行で並べ、文字を小さくする
• FVはPCで横長にし、貼り紙をより散らす

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