DESIGN.md — 鮮やか青×黄のポップ線画BtoB SaaS LP（Bold Blue Pop Illustration SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: ポップ・元気、信頼・誠実、清潔・爽やか、情報量多め・訴求型
• キーワード: ロイヤルブルー・黄色マーカー・線画イラスト・白カード・UIスクショ・ゴースト英字見出し
• 地の質感: フラットな単色面。薄い影のカードを重ねる。FVだけ背景に大きな英字を淡く敷く
• 形: 角丸16px前後のカード、角丸の白ボタン、円形の矢印アイコン、黒枠の吹き出し
• 温度感: 爽やかで明るい。青で冷静さを出し、黄色と赤で温かみと勢いを足す

Colors

• 地の色は白と淡いグレーを交互に敷き、白カードを浮かせる
• 青の全幅帯はFVとCTA帯だけに使い、ページのリズムを作る
• 青い地の上に置くCTAは白いボタンに青文字と青丸の矢印
• 白い地の上に置く最終CTAは青いボタンに白文字
• 強調語は赤文字＋下半分の黄色マーカー
• サブスクなどお得な訴求は黄色の面で区切る
• 料金のラベルは青地に白文字の小さな帯

Typography

• 見出しは太字以上で中央揃えにし、2行に改行する
• セクション見出しの上に青の小さな英字ラベルを置き、背景に巨大な淡いグレーの英字を敷く
• 料金の数字は36px前後の極太にし、単位は小さくする
• 本文は左揃えで13px前後
• 強調語は赤文字＋黄色マーカーで1見出しに1か所まで
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。料金比較表だけ2列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右に約14pxの余白を取って中央に置く
• カードの中は見出し→本文＋右に小さなイラスト→スクショの順
• カードの下に右寄せの「〜を見る」テキストリンクを置く
• 青いCTA帯は約170pxの高さで、見出しと横長ボタンを入れる

Elevation & Depth

• 白カードはごく薄い影（0 4px 20px rgba(0,30,80,0.06)）
• ボタンは下側に濃いめの影を付けて立体感を出す
• 影は全体に控えめにし、面の色の差で階層を作る

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 18px。ボタンは角丸の長方形。
• 写真の切り抜き: UIスクショは角丸なしか小さい角丸の長方形。人物写真はカード上部に角丸で収める
• セクション境界: 基本は直線で切り替える。一部に下向きの三角の切り欠き
• ボタンは角丸10px前後の横長にし、右端に円形の矢印アイコンを置く
• 見出しの下に太い黒線と下向きの三角を置く
• 吹き出しは黒の太枠で角丸
• 料金カードの上辺は青か黄色の太い帯

Components

• 主CTA白ボタン（button-primary）: 青い地の上に置く白いボタン。青い太字と青丸の矢印。左端にイラストの人物がはみ出す
• サブボタン（button-secondary）: 主CTAより細い白ボタン。墨色の文字と黒丸の矢印
• 黄色の吹き出しバッジ（badge-yellow）: CTAの上に置く黄色の吹き出しで、お得情報を伝える。強調語は赤
• 英字ゴースト見出し（heading-ghost）: 背景に巨大な淡い英字、その上に青の英字ラベルと黒の見出し
• 機能カード（feature-card）: 白い角丸カード。マーカー付きの見出し、本文と線画イラスト、UIスクショ
• 悩みの吹き出し（speech-bubble）: 黒枠の角丸の吹き出しに悩みを書き、横に線画の人物を左右交互に置く
• 料金カード（price-card）: 上辺が青の帯。青いラベル付きで料金と納期を並べ、仕様表と3ステップの流れを入れる
• 比較表（compare-table）: 2列の比較表。おすすめ列は黄色の見出しと淡い黄色のセル。角に黒い斜めのリボン
• 青CTA帯（cta-band）: 全幅の青い帯。白い2行の見出しと主CTA白ボタン

Do's and Don'ts

Do - 青・白・黄の3色を軸にし、赤は強調語だけに使う - どの機能にも実際の画面に近いUIスクショを添える - 線画イラストの人物で各訴求に表情を付ける - セクションの区切りごとに青のCTA帯をはさむ - 数字は極太で大きく見せる

Don't - グラデーションや写真の背景を多用しない - ピル型のボタンや細い書体を使わない - マーカーの強調を1見出しで何か所も使わない - 暗い配色や重い影にしない - イラストのテイストを混在させない

Page Structure

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

1. ファーストビュー（価値提案と登録の導線）: 青地に淡い英字。白い極太の3行コピー、モニターの画面と吹き出しのイラスト、黄色のバッジ、白CTAを2つ
2. ロゴ帯（実績で信頼を示す）: 白地に企業ロゴを横に流す
3. サービス概要（何のサービスかを説明する）: グレー地に中央の見出しと短い本文。キーワードは黄色マーカー
4. 特長（機能1）（1つ目の機能の訴求）: ゴースト英字見出し、青の大見出し、白い機能カードを2枚、右寄せのリンク
5. 特長（機能2）（2つ目の機能の訴求）: 同じ型の機能カードを2枚と図解
6. お得プラン・悩みの提起（サブスクの価値と課題の解決）: 黄色の帯に月額を大きく。悩みの吹き出しを3つ、限定特典をイラストとスクショで
7. CTA（登録の促し）: 白地の上に青い横長ボタン
8. 補足機能（掲載先の説明）: グレー地にスクショと本文
9. CTA帯（登録の促し）: 青帯に白見出しと白ボタン
10. 料金プラン（価格の明示）: 料金カードを2枚と黄色の比較表、注釈
11. お客様の声（社会的証明）: 人物写真のカードをカルーセルで。写真の上に肩書きと名前、枠線のボタン
12. 導入企業（実績数とロゴ）: 青の大きな社数、白いカードにロゴを3列のグリッドで
13. 最終CTA（登録の促し）: 青帯に白ボタン

Imagery

• 人物は黒の太い線画で、黄色・青・肌色の限られた塗りにする。ポーズは大げさにする
• キラキラの星や汗の記号を添えて動きを出す
• UIスクショは実際の管理画面や記事画面に近いワイヤー調
• 人物写真は暗いグレーの背景で笑顔のビジネスポートレート
• CTAボタンの左端には、PCを操作する人物のイラストを常に置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは本文幅を約900pxに中央寄せする
• PCの機能カードは2列で横に並べる
• PCのFVはコピーとCTAが左、モニターのイラストが右の2カラム
• 悩みの吹き出しと限定特典はPCで3列
• PCのお客様の声はカルーセルをやめて3列×2段のグリッドにする
• PCの料金カードは2枚を横並び、比較表は全幅

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