DESIGN.md — 黄×紺の調査レポート型SaaS LP（Bold Yellow Navy Survey Report SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 力強い・インパクト、ポップ・元気、情報量多め・訴求型、クール・先進的
• キーワード: 黄×紺の2色・調査レポート・線画の人物イラスト・Q.カード・太ゴシック・社会課題の提起
• 地の質感: グラデーションも影もないフラットな単色面。紙のポスターや雑誌の誌面に近い印象。
• 形: 角はほぼ四角か小さな角丸。細い枠線のカードと四角い帯の見出しで組む。
• 温度感: 黄色が明るく元気さを出し、紺色が知的で落ち着いた印象にまとめる。

Colors

• 地は黄と紺の2色だけを交互に使い、セクションの境目をはっきり見せる。
• 黄地では文字を紺に、紺地では見出しと本文を黄にする。
• 白は使わず、Q.カードの面は薄グレーにする。
• 強調する数値や1位の項目は黄の面、ほかの項目は紺〜グレーの段階色で表す。
• FAQの質問行だけはオレンジ寄りの黄で差をつける。
• CTAは紺の面に白文字の四角いボタンにする。

Typography

• 見出しは字間を広めにとった極太ゴシックにする。
• 数字とQ.は縦長のコンデンス書体で大きく見せる。
• 本文は字間を少し広げ、行間も1.8以上にとる。
• まとめのメッセージは中央揃えで短く改行する。
• FVのキャッチは2〜3行の問いかけにし、疑問符で終える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。グラフと選択肢の組、製品の画像と説明の組は縦に積む
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• Q.カードは上下に縦積みし、カード同士は16pxあける。
• カードの上部はQ.と設問、下部はグラフなどの回答エリアにして2段で組む。
• 声カードは横に流れるカルーセルとして並べる。
• 製品紹介は画像、ロゴ、短い説明、ボタンの順に並べる。
• FAQはQとAの2行1組の表にし、左に番号の列を置く。

Elevation & Depth

• 影は付けず、フラットな面と細い線だけで階層を表す。
• カードは地の色とのコントラストで浮かせる。
• 製品写真だけはデバイスの実写らしい自然な影を許容する。

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は背景のない線画で切り抜く。製品はデバイスのモックアップで見せる。
• セクション境界: 黄から紺へは、凸凹した街並み風の階段状シルエットで切り替える。それ以外は直線で区切る。
• ボタンとラベル帯は四角か角丸2〜4pxにする。
• 円形はドーナツグラフ、ページ送りのドット、矢印ボタンにだけ使う。
• FAQの表は1pxの紺線で囲む。

Components

• 悩みカルーセルカード（hero-carousel-card）: 細い紺枠のカードに、悩みの一言と人物の線画を並べる。左右に丸い矢印、下にドットを置く。
• 紺の帯ラベル（label-band）: 紺の帯に黄文字の短いラベルを入れ、2段に重ねて置く。
• Q.アンケートカード（q-card）: 薄グレーのカード。左に大きな紺のQ.、続けて設問、右端に丸い開閉ボタンを置く。開くと下にグラフが出る。
• ドーナツグラフ（donut-chart）: 紺の濃淡で塗り分けたリング。中央の黄色い円に大きな%と人物の顔を入れる。
• 順位の棒グラフ（rank-bar）: 1位は黄、2位以下は紺から灰の段階色の矩形にし、高さで差を見せる。順位の数字は大きくする。
• 声カード（voice-card）: 紺地に細い黄の枠線を引き、黄文字で声と属性を短く書く。
• 詳しく見るボタン（button-primary）: 紺の四角いボタン。白文字で中央に置き、外部リンクのアイコンを添える。
• FAQ表（faq-table）: 質問行はオレンジ黄、回答行は黄にする。左列にQ-1とA-1の番号を置き、紺線で囲む。
• 調査概要ボックス（survey-box）: 紺地に細い線の角丸枠を置き、調査の項目を2列の注釈文字で並べる。

Do's and Don'ts

Do - 黄と紺の2色を主役にし、セクションごとに地の色を入れ替える。 - データはグラフ、大きな数字、人物の顔で直感的に見せる。 - 人物イラストは紺1色の線画と塗りでそろえる。 - 設問はQ.カード形式で繰り返し、読むリズムを作る。 - 見出しの字間は広めにとる。

Don't - グラデーションやドロップシャドウを使わない。 - 黄と紺以外の目立つ色をむやみに増やさない。 - 写真の人物で置き換えない。 - ボタンをピル型にしない。 - 紺地の本文を白一色にしない（黄系でそろえる）。

Page Structure

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

1. ファーストビュー（問いかけで課題を自分ごとにさせる）: 黄地に極太の紺コピーを置き、紺の帯ラベルを2本重ねる。右上に問い合わせボタンを置く。
2. 悩みの提起（現場のあるある場面に共感させる）: 枠線カードのカルーセルで、一言の悩みと人物の顔を見せる。
3. 課題の背景解説（社会的な背景と調査の根拠を示す）: 凸凹の境界から紺地に切り替え、黄の見出しと本文、調査概要の枠を置く。
4. 調査結果（データで課題を裏付ける）: Q.カードを縦に並べ、ドーナツグラフ、世代別比較、人数比のイラスト、順位の棒グラフで見せる。
5. 現場の声（生の悩みでリアリティを出す）: 黄の枠線カードを紺地に横長に並べる。
6. 追加の設問（読者に自問させる）: 開閉できるQ.カードを5つほど縦に積む。
7. まとめメッセージ（解決の方向性を示す）: 紺地に大きな黄の2行見出しを置き、本文を中央揃えにする。
8. ソリューション提示（自社サービスにつなげる）: 黄地に見出しを置き、人物の線画が横一列に並ぶイラストを入れる。
9. サービス紹介（製品ごとに詳細へ誘導する）: 紺の帯見出しの下に、デバイス画像、ロゴ、説明、紺のボタンを製品ごとに並べ、受賞バッジを添える。
10. よくある質問（用語や会社の疑問を解消する）: Q/A番号付きの2段の表で見せる。
11. フッター（会社情報と認証を示す）: 白地にロゴ、リンク、認証マークを置き、下にCookieバナーを出す。

Imagery

• 人物は太めの紺の線と塗りだけのフラットなイラストにし、無表情か困り顔で描く。
• 多様な年代・性別の顔を胸から上だけで描き、横一列に並べてもよい。
• グラフ内に人物の顔を差し込み、データに感情をのせる。
• 製品はノートPCとスマホのモックアップに画面を入れて見せる。
• 装飾は最小限にし、アイコンは細い線の丸ボタン程度にとどめる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは内容幅を約1000pxで中央に寄せる。SPは画面幅の92%にする。
• FVは、PCではコピーと説明文を左右に並べ、SPでは縦に積む。
• Q.カードの回答エリアは、PCでは選択肢とグラフを左右に置き、SPでは上下に積む。
• 製品紹介は、PCでは画像を左・説明を右に置き、SPでは画像を上に置く。
• SPでは声カードを1枚ずつスワイプで送る。
• FVの大コピーは、PCで約80px、SPで44px前後にする。

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