DESIGN.md — 青×黄の信頼感あるクラウド業務SaaS LP（Corporate Blue Cloud ERP SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、クール・先進的、情報量多め・訴求型、清潔・爽やか
• キーワード: コバルトブルー・黄色CTA・管理画面モック・実績数値・ロゴ一覧・カードグリッド
• 地の質感: フラットな単色面に、うっすら幾何学パターンを重ねる。影はごく弱い
• 形: 角丸は小〜中。CTA はピル型。見出しの上に青と黄の小さな丸を2つ並べる
• 温度感: クールで明るく、黄色で親しみを足す

Colors

• 地は白と淡い青灰（#F2F5FC）を交互に敷き、セクションを区切る
• コバルトブルーは FV・繰り返す CTA 帯・ボタンに絞り、面として大きく使う
• 主CTAは必ず黄色の地に黒文字。サブ CTA は白地に青文字か、紺地に白文字
• 強調語やチェックアイコンは明るい青。赤系はニュースのラベルだけに使う
• 青地の上では白を基本にし、アクセントに黄色を使う

Typography

• 見出しはミディアム程度の太さで、中央揃えにする
• 見出しの上に、青と黄の小さな丸を2つ添える
• 課題見出しには「01.」のような細い青の番号を付ける
• 強調語は青文字か、太字に下線を引く
• 実績数値は大きく太く表示し、単位は小さくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（ロゴ・機能タイルは 3〜4 列、事例は 1〜2 列）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションごとに中央の見出しと、カード群をセットで置く
• 2〜3セクションごとに、3分割の CTA 帯を挟む
• 課題は 2×2 のカード（PC）、SP では縦に積む
• 各セクションの右下に「詳しく見る」の小さなリンクボタンを置く
• 導入企業ロゴは 2 段の横並びで、余白をあけて敷き詰める

Elevation & Depth

• カードは影なしで、細い枠線か淡い地色で区切る
• FVの PC・スマホモックだけに柔らかい影を付ける
• CTA 帯は角丸の青パネルで、影は付けない

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 事例・セミナーの写真は角丸小の横長長方形（16:9 前後）で切り抜く
• セクション境界: 直線で切り替える。背景色の変化だけで区切る
• CTA ボタンはすべてピル型
• 業種タグは角丸小で、枠線付きの矩形にする
• 実績バッジは月桂樹の装飾で囲む

Components

• 黄色の主CTA（button-primary）: 無料相談やデモ申込み用のピル型ボタン
• 白抜きのサブCTA（button-secondary）: 青地の上に置く白地・青文字のピル型ボタン（資料DL・ツアー）
• 一覧へのボタン（button-more）: 紺地に白文字の小さめのピル型ボタン
• 3分割CTA帯（cta-band）: 角丸の青パネル。各列に小さな説明文とボタンを1つずつ置く
• 2つの丸付き見出し（heading-dots）: 見出しの上に、青と黄の小さな丸を並べる
• 課題カード（problem-card）: 番号・見出し・イラスト・POINTラベル・チェックリストで構成する
• 導入事例カード（case-card）: 人物写真の上に業種タグ。下に要約文と社名を置く
• FAQ行（faq-row）: Qアイコン・質問文・右矢印の1行。下線で区切る
• 実績バッジ（stat-badge）: 月桂樹で囲んだ大きな数値と短いラベル
• 業種タグ（industry-tag）: 枠線付きの矩形で、右に矢印を付ける。グリッド状に並べる

Do's and Don'ts

Do - CTA 帯を繰り返し挟み、いつでも申込みできるようにする - 管理画面のモックで、製品の具体性を見せる - 実績数値と企業ロゴを FV の直後に出し、信頼を示す - 白と淡い青灰の地を交互に使い、セクションのリズムを作る - アイコンは青一色の線画でそろえる

Don't - 黄色を主CTA以外に多用しない - グラデーションや強い影を多用しない - 装飾的な明朝体や手書き書体を使わない - 青以外の色をブランド色として使わない - カードの角丸を大きくしすぎない

Page Structure

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

1. ファーストビュー（サービスの定義と主要価値を伝える）: 青地の左にリード文・大きな欧文の製品名・チェック3点・CTA 2つ。右に PC とスマホのモックを置く
2. サービス概要と業種一覧（対象業種を示す）: 見出しと説明文を左右に並べ、下に業種タグのグリッドを置く
3. 実績と導入企業ロゴ（信頼を示す）: 月桂樹付きの数値バッジを3つ並べ、その下にロゴを2段で並べる
4. 機能紹介（機能の幅広さを示す）: 左に見出し、右にアイコンタイルを4×3で並べる
5. CTA帯（申込みを促す）: 青の角丸パネルを3分割し、各列にボタンを置く
6. 解決できる課題（悩みと解決を結びつける）: 番号付きの課題カードを2×2で並べ、イラストとチェックリストを添える
7. 導入事例（具体的な成果を示す）: 吹き出し風の実績バッジの下に、人物写真カードを3列×2段で並べ、業種タブを添える
8. よくある質問（不安を解消する）: Qアイコン付きの行を下線で区切って並べる
9. 資料バナー（コンテンツへ誘導する）: 青と白の横長バナーを2つ並べる
10. セミナー・ブログ（継続接点を作る）: 淡い青灰の地に、サムネイル付きカードを3列で並べ、紺のボタンを置く
11. ニュース（最新情報を伝える）: 色ラベル・日付・タイトルの1行リストにする
12. クロージングCTA（デモ申込みへ導く）: 濃紺の地にモック画像と大見出し、黄色ボタンを置き、下に3つの誘導を並べる
13. フッター（サイト内を回遊させる）: 白地に多列のリンク一覧を置く

Imagery

• 業務システムの管理画面を、ノートPCとスマホのモックで見せる
• 事例は、スーツ姿の人物を明るいオフィスで撮った写真にし、社名ロゴを添える
• イラストは青・黄・グレーのフラットなビジネスイラストにする
• 機能アイコンは青と黄の線画をタイルに入れる
• 背景に薄い幾何学の矩形パターンを重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約960pxに収めて中央に置く。SP は1カラムにする
• FV の2カラムは、SP ではテキストを上・モックを下に積む
• CTA帯の3分割は、SP では縦に積む
• 事例とセミナーのカードは PC で3列、SP では1列か横スクロールにする
• ロゴ一覧は SP で3列に折り返す

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