DESIGN.md — ティール×白の清潔なクラウドカメラ LP（Teal Clean Cloud Security Camera LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 清潔・爽やか、信頼・誠実、情報量多め・訴求型
• キーワード: ティール・白地・細枠カード・帯見出し・オレンジCTA・料金表
• 地の質感: グラデーションをほぼ使わないフラットな面。カードにだけ薄い影や細い線を付ける。
• 形: 角丸は小さめで矩形が基本。ボタンはピル型、保存期間タイルは角丸の正方形。
• 温度感: 少し冷たく清潔な印象。肌色の写真とオレンジでやや温かみを足す。

Colors

• 地は白が基本。お客様の声は薄いティール、オプション紹介は薄いグレーにして区切る。
• 見出し帯・ポイント番号・価格数字は primary のティール 1 色でそろえる。
• オレンジは主 CTA だけに使う。
• 強調数字は primary を大きく使い、単位は黒の小さい文字にする。
• FAQ の重要な文には黄色マーカーを引く。
• 料金の合計は薄いティールの面に乗せ、黒の太い数字で見せる。
• button-primary は文字 #FFFFFF × 背景 #FB7A23 のコントラスト比が 2.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C65204、4.56:1）を使う。
• period-tile は文字 #139BB1 × 背景 #FEFEFE のコントラスト比が 3.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#108193、4.54:1）を使う。

Typography

• 見出しは太字ゴシックで中央揃え。primary か黒にする。
• 特長番号は小さい英字ラベルの下に大きな数字を置き、その右に見出しを並べる。
• 価格は数字を特大の太字にし、円と税込は小さく添える。
• 本文は小さめで行間を広く取り、左揃えにする。
• 明朝や手書きの書体は使わない。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。製品カードとロゴは 2〜6 列のグリッドにする
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算）
• カードは画面端から 8px ほど内側に置き、細い枠か薄い影を付ける
• ブロック見出しは上部の全幅ティール帯で示す
• 特長は番号、見出し、本文、大きな画像の順に縦に積む
• 料金は「初期料金」「＋」「月額料金」「総額」の順に縦につなぐ
• CTA 帯は全幅のティール面に置く

Elevation & Depth

• 機能カードと保存期間タイルにはぼかしの大きい薄い影を付ける
• お客様の声のカードは影を付けない白い面にする
• ボタンは影なしのフラットにする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 14px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの矩形。製品は切り抜きで白地に置く。スタッフはアイコン調イラストにする
• セクション境界: 直線で地色を切り替える。料金のつなぎは下向き三角の矢印にする
• ボックスは角丸を小さくした矩形と細枠で作る
• おすすめ表示は円形バッジにする
• 価格プランの札は下に三角が付いた吹き出し型にする

Components

• 資料請求ボタン（button-primary）: オレンジで横長の角丸ボタン。右端に白い丸の矢印アイコンを付ける
• CTA帯（cta-band）: 全幅ティール面に白い短いコピーとオレンジボタンを置く
• 詳細ボタン（button-secondary）: ティールのピル型ボタン。右に丸い矢印を付ける
• 帯見出しボックス（band-heading-box）: 上部にティール帯の見出しを置き、細枠で囲む
• 特長番号（feature-number）: 小さな英字ラベルと大きなティール数字。右に太字の見出しを置く
• 保存期間タイル（period-tile）: 白い角丸正方形に影を付け、ティール数字を置く。おすすめは円形バッジで示す
• 業種別の声カード（voice-card）: 上にイラスト人物とティールの業種名、下に白カードの本文
• 仕様アイコン表（spec-icon-grid）: 細いティール枠の中に線画アイコンと小ラベルを 4 列で並べる
• FAQ（faq-item）: ティール帯に白字の Q 番号と質問。枠内にオレンジの A と黄色マーカーの回答を置く
• 料金合計ボックス（price-total-box）: 薄いティール面の左上にティールのタブ見出し。計算式と大きな合計額を載せる

Do's and Don'ts

Do - CTA はオレンジ 1 色にし、ページ内に 4 回ほど繰り返す - 数値の効果は棒グラフと大きなティール数字で見せる - 機能の説明には実際の管理画面や撮影映像の画像を添える - 料金は計算式で合計まで見せて透明性を出す - FAQ の重要文には黄色マーカーを引く

Don't - ティール以外のブランド色を増やさない - オレンジを見出しや装飾に使わない - 角丸を大きくしすぎない - 暗い背景の大きなセクションを作らない - 装飾的な書体を使わない

Page Structure

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

1. ファーストビュー（製品と利用シーンを一目で伝える）: ロゴ、ティール帯の短いコピー、大見出し、PC とスマホと製品の合成画像、受賞バッジ、円形の利用シーン写真を並べる
2. CTA（早い段階で問い合わせへ誘導する）: 全幅ティール帯にオレンジボタンを置く
3. 特長（3 つの機能価値を示す）: 番号付き見出し、本文、大きな写真や UI 画像を置き、効果を棒グラフで示す
4. 従来品との比較（クラウド型の利点を伝える）: 帯見出しボックスの中に図解と写真を入れる
5. 選ばれる理由（品質と保存期間を訴求する）: No.1 バッジ付きの帯見出し、Point 番号、保存期間タイルを置く
6. お客様の声（業種ごとの使用感を見せる）: 薄いティールの地に、イラスト人物付きの白カードを縦に並べる
7. 導入実績（信頼性を示す）: シェア No.1 のリボン図と、企業ロゴを 6 列のグリッドで並べる
8. 製品ラインナップ（機種を比較させる）: 2〜3 列の製品カードに、ラベル、価格、仕様アイコン表、詳細ボタンを入れる
9. オプション機能（AI 機能を紹介する）: グレーの地に製品の詳細と 3 列の機能写真を置く
10. 料金（費用感を明確にする）: 初期料金と月額料金を大きな帯見出しで示し、＋記号でつなぐ
11. 料金例（具体的な導入費用を示す）: 用途別カードから三角矢印でつなぎ、総額ボックスに合計を示す
12. 導入事例（企業の事例を見せる）: 写真とくすみティールのカードを横スライダーで並べる
13. よくある質問（不安を解消する）: ティール帯の Q と黄色マーカー付きの回答を縦に並べる
14. 会社概要（信頼性を補強する）: 薄いティールの地に罫線区切りの表と認証マークを置く

Imagery

• 明るい店舗やオフィスで、人物がカメラや PC を自然に使う写真
• 白い製品を白地に切り抜いて置く
• ノート PC とスマホに管理画面を表示したモックアップ
• 魚眼の監視映像風の画像で、実際の画質を見せる
• 業種別の人物は単色の線画イラストにし、制服で業種を表す
• 仕様は細線のアイコンで示す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央 760px ほどの幅に収め、左右は白地にする
• 特長は PC で文章と画像を左右 2 カラムにする
• お客様の声は PC で 2 列のグリッドにする
• PC の製品カードは 3 列にする
• 料金の初期と月額は PC で横に並べ、中央に＋を置く
• 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 行書くと起動時に読み込まれる。