DESIGN.md — 紺×淡青グラデの採用支援BtoB LP（Soft Blue Gradient Recruitment Branding LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、やさしい・柔らかい、清潔・爽やか、情報量多め・訴求型
• キーワード: 淡青グラデーション・濃紺の太字見出し・フラット人物イラスト・吹き出し・帯マーカー見出し・金茶のアクセント
• 地の質感: 白から淡青、淡青からクリームへ流れるなめらかなグラデーション。ノイズや紙の質感は入れない
• 形: 大きめ角丸のカード、丸い吹き出し、ピル型ラベル、円形の背景ブロブ、下向き三角のセクション境界
• 温度感: 青を基調にしたやや涼しめの色。ベージュと金茶で温かみを足す

Colors

• 地は白、淡青グラデ、ベージュの3種類を、セクションごとに切り替える
• 見出しと本文は濃紺系で統一し、純粋な黒は使わない
• 濃紺のベタ面は、強みの導入帯とCTA帯だけに使う
• 金茶は、サブ見出し・流れの矢印・CTAボタンなどアクセントに限って使う
• 吹き出しは淡青とクリームを交互に配置する
• 強調用の帯マーカーは、青から橙へのグラデーションも可
• marker-heading は文字 #FDFFFF × 背景 #5C7FC3 のコントラスト比が 3.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#4F75BE、4.53:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #BD7E03 のコントラスト比が 3.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#A16C03、4.5:1）を使う。

Typography

• 見出しは極太のゴシックにし、中央揃えにする
• 見出しの上には小さめのリード文を置く
• 強みの番号は、細めの大きな欧文数字を淡い色で表示する
• 本文は行間を広めに取り、短めの行で改行する
• 小見出しは1行ずつ帯マーカーの上に白文字で置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、PC は 2 カラム（テキストとイラスト）
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションの見出しは中央揃え、本文ブロックは左揃え
• 吹き出しは左右にずらして千鳥状に並べる
• カードの間には下向き三角を挟み、流れを示す
• イラストの背後には大きな円のブロブを敷く

Elevation & Depth

• カードには淡青のやわらかい影を付ける
• ベージュのボックスには、下側だけに薄い青の影を付ける
• 吹き出しは影なしのフラット

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の矩形、人物アイコンは円形に切り抜く
• セクション境界: 濃紺帯の下辺を、下向き三角に切る
• ステップのラベルはピル型にする
• スライダーの矢印は円形の線ボタンにする
• メインのカードはグラデーション枠付きの大きな角丸
• 帯マーカーは角丸なしの矩形

Components

• 悩みの吹き出し（speech-bubble）: しっぽ付きの丸い吹き出しに、太字の短文を中央揃えで入れる。淡青とクリームを交互に使う
• ステップのスライダーカード（step-card）: 上辺にピル型のステップラベルを重ね、グラデーション枠で囲む。中にイラスト、ドット、説明文を入れる
• ステップラベル（step-label）: 濃紺のピル型に白文字
• 帯マーカー見出し（marker-heading）: 1行ごとに青い矩形を敷き、その上に白文字を載せる
• 流れのボックス（flow-box）: ベージュの箱の中に、金色の細い枠の白カードを縦に並べる。カードの間には金茶の三角を置く
• 濃紺帯の見出し（dark-band-heading）: 斜線で挟んだリード文、白い大見出し、グラデーション帯の強調語を縦に重ね、下辺は三角に切る
• 問い合わせCTA（button-primary）: 金茶のピル型ボタン。右端に丸い矢印アイコンを付ける
• Q&A アコーディオン（faq-item）: 白い角丸の行に、青いQ、質問文、右端の＋アイコンを並べる

Do's and Don'ts

Do - 見出しは濃紺の極太ゴシックで、統一感を保つ - 背景は淡いグラデーションでセクションの印象を変える - イラストの人物は青・金・緑の配色でそろえる - 強みは番号と帯マーカー見出しで、段階的に見せる

Don't - 原色の赤や黒ベタは使わない - 写真を多用しない（基本はイラストで構成する） - 濃紺のベタ面を多くのセクションに広げない - 角ばったカードやきつい影を使わない

Page Structure

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

1. ファーストビュー（提供価値を2つの柱で示す）: 2つの円がつながった形の中に、2つの価値を「×」で対比させる。その下に人物イラスト、大見出し、リード文を置く
2. 悩みの提起（担当者の課題に共感する）: 吹き出し5つを千鳥状に並べ、頭を抱える人物イラストを添える
3. 成功のステップ（進め方を5段階で示す）: ベージュ地にスライダーカードを置く。PCでは左に目次リストを並べる
4. 強みの導入（強みのパートへ切り替える）: 濃紺帯にグラデーション帯の強調語を置き、下辺を三角に切る
5. 強み1（企業価値を創出できる力を伝える）: 淡い番号と大見出しのあと、帯マーカー見出し、本文、イラストを並べ、流れのボックスを続ける
6. 担当者メッセージ（人の顔を見せて信頼感を出す）: 英字を透かし模様にしたグラデーション地に、円形の人物アイコンと帯マーカー見出しを置く
7. 強み2（求職者理解の深さを示す）: クリーム系のグラデーション地に、金茶の帯マーカー、写真、引用カードを置く
8. サービス紹介（提供メニューを一覧で見せる）: 矢印型の工程バーを置き、白い円形カードにアイコンを入れて3列で並べる
9. 取引実績（社会的な証明を示す）: 白い角丸の枠に入れたロゴを横に流して並べる
10. CTA（無料相談へ誘導する）: 濃紺地に半透明の円を重ね、白い見出しと金茶のピル型ボタンを置く
11. よくある質問（不安を解消する）: 白いアコーディオンを縦に並べる
12. フッター（会社情報を載せる）: チャコールの地に白いロゴと住所を置く

Imagery

• グラデーション陰影付きのフラットな人物イラストを使う。スーツやオフィスの場面を描く
• 人物の髪は濃紺、服は黄・緑・白の配色にする
• アイコンは青のグラデーションを使った立体的なフラット調
• イラストの背後に淡青とクリームの大きな円を重ねる
• 写真を使う場合は明るい屋外の建物などにし、角丸で切り抜く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではファーストビューの両脇に人物イラストを散らす
• PCでは吹き出しを中央のイラストの周囲に円状に配置する
• PCの強み説明は、テキストとイラストを左右交互の2カラムにする
• PCのステップ紹介は、左に目次リスト、右にカードを置く
• PCのサービス一覧は3列の円形カードにする
• SPのナビゲーションは濃紺の角丸ハンバーガー、PCは白いピル型のナビバーにする

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