DESIGN.md — 青×白のフラットイラスト無料ウェブツールLP（Bright Blue Flat Illustration Web Tool LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 清潔・爽やか、信頼・誠実、シンプル・ミニマル、ポップ・元気
• キーワード: ロイヤルブルー・白カード＋ソフトシャドウ・線画フラットイラスト・薄い英字ラベル・繰り返しCTA
• 地の質感: フラットでノイズのない白地。カードにやわらかい影をつけて浮かせる
• 形: 小〜中の角丸長方形。ボタンは角丸8px程度でピルにはしない
• 温度感: やや寒色寄りの爽やかさ。赤のアクセントで温かみを足す

Colors

• 地はほぼ白。ファーストビューだけ淡い水色、最後の締めCTAだけ青ベタにする
• 見出しは黒文字の一部の語だけを青にして強調する
• 英字のサブコピーは赤で太く入れ、青と対比させる
• バッジは水色、タグはグレーにして青CTAと競合させない
• 青ベタの上ではボタンを白地＋青文字に反転させる
• イラストは紺・赤・薄青の3色に限定する
• page は文字 #939393 × 背景 #FFFFFF のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#767676、4.54:1）を使う。
• badge-circle は文字 #F5FBFE × 背景 #44B6E3 のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#187CA3、4.52:1）を使う。

Typography

• 字間を0.08〜0.12emと広めにとり、ゆったり見せる
• 本文の行間は2.0前後
• セクション見出しの上に、薄い青の太い英字ラベルを小さく重ねる
• 見出しは2語に分け、後ろの語だけ青にする
• 注釈は※で始め、リンクは青＋下線にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。記事一覧だけ2カラム、使い方ステップは横スクロール
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約30pxでそろえる
• 各セクションは「英字ラベル＋見出し→イラスト→カード→CTA」の順に並べる
• カード同士の間隔は約16〜24px
• CTAは本文幅いっぱいに広げ、高さ45px前後にする
• 見出しは左寄せ。イラストは中央に置く

Elevation & Depth

• カードは白面＋1px薄グレー枠＋右下方向のやわらかい影（0 4px 12px rgba(0,0,0,.12)）
• CTAボタンには影をつけないフラットにする
• ヘッダーは白地に薄い下影をつける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 記事サムネイルは角丸なしの横長長方形。人物イラストは切り抜いて配置する
• セクション境界: 直線で区切り、背景色を切り替えるだけ
• カードとボタンは角丸8px
• タグとステップ吹き出しはピル型
• 無料バッジはカード左下に置き、右上だけ角を丸める
• FVのバッジは正円

Components

• 主CTAボタン（button-primary）: 青地に白の太字。本文幅いっぱいで各セクション末尾に繰り返す
• 反転CTA（button-inverse）: 青い面の上に置く白地＋青文字のボタン
• もっと見るボタン（button-outline）: 白地に青の細枠と青文字
• 英字ラベル付き見出し（heading-en-label）: 薄青の太い英字を見出しの左上に重ね、日本語見出しの一部の語を青にする
• 理由カード（card-reason）: 青の強調語＋小さい日本語＋赤の英字サブコピー、線画イラスト、太字の本文
• 機能カード（card-feature-badge）: 左に線画アイコン、右に見出しと説明。左下に水色の無料・有料バッジ
• お客様の声カード（card-voice）: 太字の本文の下に、年齢・属性のグレーのピル型タグを並べる
• FAQアコーディオン（faq-item）: 左に青の吹き出しアイコン、右端に青の＋。影付きの白カード
• ステップカード（step-card）: 青のSTEP番号、青地に白文字の見出しラベル、説明文。横に並べてスクロールさせる
• 丸バッジ（badge-circle）: FVのモックアップ横に置く水色の正円。白文字で注目を集める短い訴求を入れる

Do's and Don'ts

Do - CTAは同じ青・同じ形で各セクション末尾に繰り返す - 見出しには必ず薄青の英字ラベルを添える - セクションごとに線画人物イラストを1点ずつ入れる - カードは白面＋薄い枠＋やわらかい影で統一する - 端末のモックアップ画像でツールの画面を見せる

Don't - グラデーションや光沢のあるボタンは使わない - 青以外の色をCTAに使わない - リアルな写真を記事サムネイル以外の装飾に使わない - 見出し全体を青にしない（強調語だけにする） - 字間を詰めて窮屈にしない

Page Structure

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

1. ヘッダー（ブランドを示す）: 白地の中央にロゴ。薄い下影
2. ファーストビュー（サービスの価値と無料であることを伝える）: 水色の地に小見出し、青の大見出し、説明文、PCとスマホのモックアップ、丸バッジ。青のボックス内に要約文と白ボタン
3. 選ばれる理由（3つの強みを示す）: 英字ラベル付きの見出し＋人物イラスト。強みのカードを3枚縦に並べ、最後にCTA
4. できること（機能を一覧で見せる）: アイコン＋見出し＋説明の横長カード4枚。無料・有料バッジ付き
5. 特典・ポイント（使うと得する仕組みを伝える）: 提携先のロゴを横に並べたスライダーと説明文、注釈、CTA
6. セキュリティ（安心感を与える）: 薄青のPCと鍵のイラスト、見出し、本文、プライバシーポリシーへの注釈リンク
7. 使い方（手順の簡単さを示す）: ピル型の吹き出しで手順数を示し、STEPカードを横スクロールで並べる
8. お客様の声（社会的証明）: 人物イラストの下に、声のカード6枚と属性タグ
9. よくある質問（不安を解消する）: アイコン付きのアコーディオンを8項目
10. ノウハウ記事（関連コンテンツへ誘導する）: 写真サムネイル＋太字タイトルの2カラムグリッドと、枠線のもっと見るボタン
11. 締めのCTA（最後のひと押し）: 青ベタの地に白文字の見出しと本文、人物イラスト、白の反転ボタン

Imagery

• 人物は紺・赤・白の太い線画フラットイラストで、手足を大きく誇張した動きのあるポーズにする
• アイコンは黒か紺の単線で描いた書類・クラウド・店舗などのピクトにする
• 端末のモックアップには白基調のフォームUIを表示する
• セキュリティなどの概念は、薄青と青のアイソメ風イラストで表す
• 記事サムネイルは明るく自然光のストック写真を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは本文幅を約85%にし、理由カード・機能カード・ステップを3カラムで並べる
• PCではお客様の声を3カラム、記事を4カラムにする
• PCのFVは左にテキスト、右にモックアップの2カラム。ヘッダー右に赤系の小さなCTAを置く
• PCではセクションのイラストを見出しの左右に置き、英字ラベルを右寄せにするなど左右を交互に配置する
• CTAボタンはPCでは幅240px程度に縮めて中央に置く

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