DESIGN.md — シアン×白の業務システム紹介 LP（Clean Cyan Business Software LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 清潔・爽やか、信頼・誠実、情報量多め・訴求型、シンプル・ミニマル
• キーワード: シアン・淡いブルーグレー・線画イラスト・吹き出し・色分けカード・黄色マーカー
• 地の質感: フラットな単色面。影は使わず、ごく淡い背景色の切り替えで区切る
• 形: 角丸 8〜24px のカード。セクション上端は大きな角丸で区切る
• 温度感: クールで明るい。オレンジと黄色で少しだけ温かみを足す

Colors

• 地は白と #F2F5FA を交互に使ってセクションを分ける
• シアンの全面は悩み提起とフォームの 2 か所に絞る
• オレンジは主 CTA とキーワードの強調文字だけに使う
• 黄色は文字下のマーカーと番号バッジにだけ使う
• 解決策は青・ピンク・緑の 3 色で色分けし、淡い同系色の面を合わせる
• 見出しの下にシアンの短い横線を置く
• button-primary は文字 #FFFFFF × 背景 #F29902 のコントラスト比が 2.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#A66901、4.52:1）を使う。
• header-contact は文字 #FFFFFF × 背景 #13C9E1 のコントラスト比が 2.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0C8291、4.55:1）を使う。
• sub-problem-pill は文字 #4E84C4 × 背景 #FFFFFF のコントラスト比が 3.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#3F78BC、4.54:1）を使う。
• form-field は文字 #919191 × 背景 #FFFFFF のコントラスト比が 3.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#767676、4.54:1）を使う。

Typography

• 見出しは中央揃えで 2 行に分け、要点の語をオレンジにする
• 見出しの上に字間を広く取った細い英字ラベルを置く
• 本文は 12px 前後で行間を広く取る
• 要点の語には黄色の下半分マーカーを引く
• 価格の数字は大きな欧文の太字にし、単位は小さくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。理由・課題・フローは 3 列の小カード
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは英字ラベル・見出し・短い横線・リード文の順に並べる
• 解決策カードは左上のタブ見出しと右下の人物イラストで組む
• 機能一覧は左にシアンのラベル、右に淡い地のテキストを置く 2 列表
• フローは 3 列×2 段のカードを三角矢印でつなぐ

Elevation & Depth

• 影はほぼ使わず、淡い背景色の差で浮かせる
• FAQ・価格カードは白い面を淡いグレー地に置く
• 吹き出しは細い枠線だけで描く

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 人物は線画イラストを切り抜きで置く。画面キャプチャは角丸の枠に入れる
• セクション境界: セクションの上端を大きな角丸にしたり、下向き三角で区切る
• CTA・送信ボタン・サブ見出しの帯はピル型
• カードは角丸 8〜12px
• 解決カードは右上と左下を大きく丸める

Components

• 主CTAボタン（button-primary）: オレンジのピル型ボタン。中央に白い太字を置く
• ヘッダー問い合わせボタン（header-contact）: 右上のシアンの正方形。アイコンと短い文字を入れる
• セクション見出し（section-heading）: 英字ラベル・太字の見出し・シアンの短い横線を中央に縦に並べる
• 悩みカード（problem-card）: シアン地に白いカードを 3 枚並べる。色付きのケース帯とイラストを入れる
• 解決策カード（solution-card）: 色のタブ見出しに番号を付け、淡い同系色の面に見出し・図解・人物を置く
• 小さな悩みのピル（sub-problem-pill）: 白いピル型の枠にアイコンと色文字の悩みを入れ、下に回答文を置く
• 吹き出し（speech-bubble）: 人物のまわりに白い角丸の吹き出しを並べ、黄色マーカーで要点を示す
• 番号バッジ（number-badge）: カード右上の黄色い四角に番号を入れる
• FAQアコーディオン（faq-item）: 白いバーの左にシアンのQ、右に下向き矢印を置く
• フォーム入力欄（form-field）: シアン地に白い入力欄を置く。ラベル横に青い必須バッジ、送信は青いピル型

Do's and Don'ts

Do - シアンと白を基調にし、淡いブルーグレーで面を区切る - 解決策は 3 色で色分けし、色のタブ見出しに番号を付ける - 人物は線画とドット柄のフラットなイラストで描く - 要点は黄色マーカーとオレンジ文字で強調する - 見出しには英字ラベルと短い横線を必ず付ける

Don't - 濃い影やグラデーションを多用しない - オレンジを CTA と強調語以外に広げない - 写真の人物を使わない。イラストで統一する - シアンの全面を何度も続けない - 明朝体や手書き体を混ぜない

Page Structure

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

1. ファーストビュー（製品名と主な利点を伝える）: 明るいぼかし写真の上に大見出し、チェック付きの利点 3 行、オレンジの CTA、画面キャプチャと円形バッジを置く
2. 補助金バナー（導入しやすさを伝える）: シアンの枠線の横長カードにロゴと 2 行の説明を入れる
3. 悩みの提起（業務の課題に共感させる）: シアン地に白い箱のキーワードを並べ、3 枚のケースカードを置く。下向き三角で次へつなぐ
4. 製品概要（何ができるかを示す）: 中央の人物のまわりに吹き出し 6 つを置き、機能一覧を 2 列表で示す
5. 画面紹介スライダー（操作の簡単さを見せる）: 上端を丸めたシアン地に画面キャプチャのカルーセルと説明文を入れる
6. 解決策（課題ごとの解決を示す）: 色分けした解決カード 3 枚と、それぞれの小さな悩みのピルと回答を並べる
7. 選ばれる理由（安心材料を示す）: 淡い地に、線アイコンと黄色番号のカード 3 枚を置く
8. システム情報（構成と動作環境を伝える）: 構成図カードと 2 列の表を置く
9. 価格（費用の目安を示す）: シアン帯の見出しの下に白いカード 3 枚を＋でつなぐ
10. 導入の流れ（手順を示す）: 6 ステップの番号カードを矢印でつなぐ
11. よくある質問（不安を解消する）: 淡い地に白いアコーディオンを縦に並べる
12. 問い合わせフォーム（相談を受け付ける）: 吹き出し付きの人物イラストの後、シアン全面に白い入力欄と青い送信ボタンを置く
13. フッター（会社情報とリンクを載せる）: 白地にロゴ・スローガン・2 列のリンクとコピーライトを置く

Imagery

• 人物は黒い線画で描き、スーツにドット柄、ネクタイだけ青で塗る
• 人物の色は解決策の色に合わせて髪や小物を青・ピンク・緑にする
• 業務ソフトの画面キャプチャをノート PC の枠に入れて見せる
• アイコンはシアン一色の線画で描く
• 図解は白い角丸の箱に帳票アイコンと矢印で流れを描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は本文幅を約 80% に収め、FV は左に文字・右に画面キャプチャを置く 2 カラムにする
• PC の解決カードは文字・図解・人物を横一列に並べ、小さな悩みは 2 列にする
• PC のフローは 6 枚を横一列にする
• 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 行書くと起動時に読み込まれる。