DESIGN.md — 青×黄のフラットイラスト採用支援 LP（Blue Corporate Recruiting Branding Service LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、クール・先進的、清潔・爽やか、情報量多め・訴求型
• キーワード: 鮮やかな青・白カード・黄色の CTA 帯・鉤括弧の見出し装飾・フラットイラスト・紺の文字
• 地の質感: フラットな単色面。影はごく薄く、グラデーションは使わない
• 形: 角丸 16px 前後のカード、角丸なしの横長 CTA 帯、カギ括弧状の L 字線
• 温度感: クールな青が基調。黄色で温かみを少し足す

Colors

• 地色は鮮青→白→淡青→中間青→淡青→鮮青→黄→白→淡青の順に切り替え、セクションの区切りにする
• 鮮青の地には必ず白カードを載せ、文字は白カードの上で読ませる
• 黄色は CTA ボタンと CTA 帯、イラストのアクセントだけに使う
• 見出しは紺、本文は黒、強調語だけ青にする
• 淡青は悩みカードの背景とステップカードの面に使う
• フッターだけ濃いグレーにして締める
• badge-label は文字 #FDFDFC × 背景 #458CF4 のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#156EF1、4.55:1）を使う。

Typography

• 見出しはゴシック太字、感情に訴えたい一文だけ明朝にする
• 強調したい語だけ一回り大きくして青にし、助詞は小さく黒のまま残す
• 本文は行間を 2.0 前後と広めにとる
• FV のサービス名は明朝の斜体で白抜きにする
• 数字は大きな明朝の金色で実績を見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は悩み・効果を 3 カラム、特徴をカードとイラストの左右交互で並べる
• 本文ブロックの幅: 画面幅の約 89%
• 余白: セクション間 80px、基本単位 8px、カード内 28px（375px 幅換算）
• カードは左右 20px の余白を取って画面幅いっぱいに置く
• 特徴カードにはイラストを上に重ね、番号を左上か右上の角から飛び出させる
• 事例は社名リンク→見出し→実施内容ラベル→本文→画像→サムネイル列の順
• 比較表は SP で横スクロールにし、操作ヒントを重ねて見せる
• フォームは淡青地の上に置き、ラベルと入力欄を縦に積む

Elevation & Depth

• 白カードにはごく薄い影（0 2px 8px rgba(0,40,100,0.08)）
• 青地上のカードは影なしで、色の差だけで浮かせる
• スクロールヒントは半透明の紺パネル

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 18px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしまたは小さい角丸の長方形。人物は白背景の上半身写真
• セクション境界: 基本は直線で切り替え、解決提示の後だけ下向き三角の切り欠きを入れる
• CTA は角丸なしの横長長方形で、右端に下向きシェブロンを置く
• 見出しは左上と右下の L 字線（カギ括弧）で囲む
• ステップ同士は × や下矢印でつなぐ
• FV の要素は白い円形の線囲みバッジを 3 つ並べる

Components

• 資料請求ボタン（button-primary）: 黄色の横長ボタン。上段に小さい明朝のリード、下段に太字の行動文言、右端に下向きシェブロンを置く
• CTA 帯（cta-band）: 画面幅いっぱいの黄色帯。明朝 2 段で行動を呼びかけ、下にシェブロンを置く
• カギ括弧の見出し（heading-bracket）: 見出しの左上と右下に細い L 字線を置いて囲む。青地では白線を使う
• 悩みカード（card-worry）: 白の角丸カード。カギ括弧つきの小見出しの下に 2 行の説明を置き、末尾を青太字で強調する
• 番号つき特徴カード（card-feature）: 青地の上に白カードを置く。角に淡青の大きな明朝斜体の数字を重ね、見出しは青と黒の 2 色にする
• 実施内容ラベル（badge-label）: 青い四角に白文字のラベル。右側に青文字で内容を 2 行で書く
• ステップカード（card-step）: 淡青の角丸面。左上に番号、中央に紺の見出し、紺・青・黄の線画アイコン、下に拡大アイコンを置く
• 円形サービスバッジ（badge-circle）: 白い円の線囲みに白文字。3 つを横に並べ、線でつなぐ
• 比較表（table-compare）: 自社の列を青ヘッダーと淡青の列で目立たせる。行見出しは灰青地に縦書き、評価は ○△× で示す

Do's and Don'ts

Do - 青地には必ず白カードを重ねてコントラストを確保する - 見出しはカギ括弧の装飾で統一する - 強調語は青太字にして、文中で 1〜2 か所に絞る - イラストは紺のスーツ人物と黄色の差し色のフラットタッチでそろえる - CTA はページの冒頭・中盤・末尾の 3 か所に黄色で置く

Don't - 黄色を見出しや本文の装飾に多用しない - グラデーションや強い影を使わない - 写真の上に直接本文を載せない - ボタンをピル型にしない - 赤やオレンジなど別系統の強い色を加えない

Page Structure

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

1. ファーストビュー（サービス概要と実績を一目で伝える）: 青地に白のキャッチと明朝斜体のロゴ見出しを置き、円形バッジ 3 つ、金の月桂樹つき実績数字、人物が道を見上げるイラストを配置する
2. CTA（最初の資料請求の導線）: 白地に黄色の横長ボタンを置く
3. 取引企業（信頼性を示す）: 紺の見出しの下に、ロゴを横一列にスライド表示する
4. 悩みの提起（企業と担当者の悩みに共感する）: 淡青地にアイコンつきの小見出しを置き、白い悩みカードを 3 枚ずつ 2 グループ並べる
5. 解決の提示（サービスで解決できると宣言する）: 下線つきの大きな明朝見出しを置き、その下で下向き三角に切り欠いて中間青のセクションへつなぐ
6. サービス説明（ブランディングの考え方を説明する）: 中間青地に中央揃えの本文を置き、一般的な方法と自社の方法を比べる図を 2 枚並べる
7. 効果（導入メリットを列挙する）: 白の横長カードを 6 枚並べ、左にカギ括弧つきの見出し、右に線画アイコンを置く
8. 実績（事例で説得する）: 淡青地に事例を 3 件並べる。各事例は 2 色の見出し、実施内容ラベル、本文、制作物の画像とサムネイル列で構成する
9. 特長（4 つの強みを示す）: 青地に雲のイラストを散らし、番号つきの白カードとイラストを交互に置く
10. メソッド・担当者紹介（人と手順で信頼を伝える）: 大きな白カードの中にコンサルタントの写真・肩書き・青い名前・経歴を並べ、続けて 5 ステップのフローを置く
11. CTA 帯（中盤の資料請求の導線）: 全幅の黄色帯に明朝で 2 段のコピーを置き、下にシェブロンを添える
12. 他社比較（優位性を示す）: 白地に中央揃えのリード文を置き、自社の列を強調した比較表を横スクロールで見せる
13. 資料請求・フォーム（コンバージョン）: 淡青地に青い資料紹介カードと黄色ボタンを置き、その下に入力フォームを続ける
14. フッター（会社情報）: 濃いグレー地に白文字で、リンクカードを 3 つ並べる

Imagery

• 紺のスーツ人物を主役にしたフラットなベクターイラスト。差し色は黄色・肌色・サーモンにする
• 青地には白い雲と小さな星を散らして空のような奥行きを出す
• アイコンは紺の線画に青と黄の塗りを部分的に入れる
• 人物写真は白いスタジオ背景で撮った上半身にし、柔らかい影を入れる
• 制作事例は端末やカンプ画像を淡いグレー面に載せ、下にサムネイルを並べる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC の FV はテキストとバッジ・CTA を左、イラストを右に置く 2 カラムにする
• PC では悩みカードと効果カードを 3 カラムのグリッドにする
• PC の特徴は白カードとイラストを左右交互に配置する
• PC の担当者紹介は 3 人を横並びにする
• PC のステップは 2 枚＋3 枚の横並びにし、比較表はスクロールなしで全列を表示する
• PC の本文幅は 800px 前後に抑え、中央に寄せる

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