DESIGN.md — 紺×水色の図解型 法人向けサービス LP（Navy and Sky Blue Corporate SaaS Illustrated LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型
• キーワード: 濃紺×水色・黄色マーカー・フラットイラスト・不定形ブロブ・2連ピルCTA・図解
• 地の質感: フラットな単色面。影はほぼなく、淡い水色地と白カードで区切る
• 形: ピル型ボタン、大きめ角丸の白カード、有機的なブロブ形、ギザ丸の番号バッジ
• 温度感: やや寒色寄りで清潔。黄色で少しだけ温かみを足す

Colors

• 地は白と淡い水色を交互に敷き、セクションを切り替える
• 見出しの強調語は水色の文字にする。黒文字との2色で組む
• 強調フレーズの下に黄色の半透明マーカーを敷く
• 主 CTA は濃紺の塗り＋白文字、サブは白地＋濃紺の枠線
• グラフは濃紺・灰紺・水色の3段階でつくり、大きな数値は黄色
• フッターだけ墨紺の暗い面にする

Typography

• 見出しは中央揃えで 2〜3 行に改行する
• 見出し内の強調語は水色に、数字は大きく欧文太字にする
• 本文は小さめで、行間をゆったり取る
• 大きな数字に小さな単位（％・円・社）を添える
• 装飾の斜線や集中線で短い見出しを挟む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、CTA は 2 ボタンを横並び
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションごとに白と淡い水色の地を交互に敷く
• Before と After は縦に積み、下向きの点線矢印でつなぐ
• After は白い角丸カードに入れて目立たせる
• 数セクションごとに 2 連 CTA の帯を挟む
• ロゴ列は横スクロール風に端まで並べる

Elevation & Depth

• 基本は影なしのフラットな面にする
• 白カードに薄い影を付けて水色の地から浮かせる
• 料金ボックスは濃紺の板を右下にずらして重ね、立体感を出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真は切り抜きのモノクロ人物。イラストは水色ブロブの上に配置し、アイコンは円形に入れる
• セクション境界: 直線で背景色を切り替える
• ボタンとタグはピル型にする
• 番号バッジはギザ丸（スカラップ）の濃紺にする
• 吹き出しは濃紺の枠線＋下向きの三角
• ラベル帯は角丸なしの黄色の長方形

Components

• 資料請求ボタン（button-primary）: 濃紺のピル。上段に小さく水色の所要時間、下段に白い太字
• 無料トライアルボタン（button-secondary）: 白地に濃紺 2px の枠のピル。主ボタンの右に並べる
• コスト訴求 CTA 帯（cta-band）: 集中線で挟んだ短い一文と大きな数字の下に、2 連ボタンを並べる帯
• 対象者ラベル帯（label-yellow）: 黄色の長方形に黒い太字で役職・立場を書く
• 対象タグ（tag-pill）: 淡黄と水色の小ピルタグ。どの立場向けの特長かを示す
• ポイント番号バッジ（badge-number）: 濃紺のギザ丸に小さなラベルと白い2桁数字
• Before 課題帯（before-bar）: 欧文の Before 見出しの下に、濃紺の全幅帯で白文字の課題を 2 行
• アンケート吹き出し（speech-card）: 白地＋濃紺の枠の角丸吹き出し。黄マーカー付きの結果文をグラフの上に置く
• 導入ステップカード（step-card）: 白い横長カードに水色の番号、線画アイコン、見出し。カードの間に灰色の下向き三角
• チェックリスト（check-list）: 水色の丸チェックアイコン付きの短い箇条書き

Do's and Don'ts

Do - 強調語は水色、強調フレーズは黄マーカーと使い分ける - イラストは必ず水色ブロブの上に置く - 2 連 CTA の帯を 3〜4 回繰り返す - 数値の実績は大きな欧文数字とドーナツグラフで見せる - 白と淡い水色の地を交互に敷いてリズムを作る

Don't - 赤やオレンジなど暖色の強い CTA を使わない - 立体的・写実的なイラストを混ぜない - 濃い影やグラデーションのボタンにしない - 明朝体や手書き書体を使わない - 本文を中央揃えのまま長く続けない

Page Structure

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

1. ファーストビュー（課題の転換を宣言し、実績で信頼させる）: 極太の大キャッチ＋黄マーカー、モノクロ人物写真、ゴールドの実績バッジ、水色のサービス説明帯、2 連 CTA
2. 導入企業ロゴ（社会的証明）: 白地にロゴを横一列に並べる
3. サービス概要（提供価値を 3 つに要約する）: 淡い水色地にビル街のシルエット。濃紺の吹き出し帯の下に、白い円の中へアイコンと短い見出しを 3 つ
4. 立場別メリット（経営・管理・利用者ごとの利点）: イラスト→黄ラベル帯→水色強調の見出し→チェックリストを、区切り線で 3 回繰り返す
5. Before/After（導入前後の変化を図解する）: 濃紺の課題帯とイラスト、点線矢印、白カードの After。これを 3 セット
6. CTA（コスト不要を訴えて行動を促す）: 集中線で挟んだ大きな 0 円と 2 連ボタン
7. 4 つのポイント（機能ごとの詳細）: ギザ丸の番号、対象タグ、見出し、短い説明、水色ブロブ上の大イラスト
8. 満足度データ（アンケート結果で効果を証明する）: 淡い水色地に吹き出しカードと濃紺系のドーナツグラフ、出典の注釈
9. 導入実績（企業数とロゴで信頼を補強する）: 斜線で挟んだ見出しとロゴ列
10. 導入ステップ（開始までの手軽さを示す）: 白い横長カード 3 枚を下向き三角でつなぐ
11. 料金体系（料金の仕組みを単純に見せる）: 影をずらした枠ボックス 2 つを大きな×でつなぎ、下に三角を置く
12. 最終 CTA・フッター（問い合わせに誘導する）: 淡い水色の CTA 帯の下に、墨紺のフッターでリンクと所在地

Imagery

• FV はスーツ人物の切り抜きモノクロ写真で、渋い大人の印象を出す
• イラストは濃紺・水色・黄・グレーだけのフラットな人物と端末
• イラストの背後に淡い水色の不定形ブロブを敷く
• 画面 UI のキャプチャを斜めに置き、赤い点線矢印と拡大ルーペで要点を示す
• アイコンは水色の線画にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV でキャッチを左、写真を右の 2 カラムにする
• PC はヘッダー右上に小型の 2 連 CTA を常設する
• 立場別メリットはテキストとイラストを左右交互に並べる
• Before/After は左右に並べ、横向きの点線矢印でつなぐ
• PC はグラフを 2 つ横並びにし、ロゴは 5 列のグリッドにする

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