DESIGN.md — 黄×チャコールの線画イラスト採用支援 LP（Yellow and Charcoal Line-Illustration BtoB Service LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: ポップ・元気、信頼・誠実、情報量多め・訴求型、親しみ・手作り感
• キーワード: 山吹色・チャコール・線画イラスト・太枠カード・繰り返し CTA・クリーム地
• 地の質感: フラットな塗り。FV の背景だけ薄いグレーの斜めストライプとドットを敷く
• 形: 太い黒枠の角丸カード、ピル型 CTA、見出し下の黄色マーカー帯
• 温度感: 明るく暖かい。黄色の元気さをチャコールで締める

Colors

• 背景は薄グレーとクリームを交互に使い、セクションを切り分ける
• 黄は CTA・ステップ帯・FAQ 帯・見出しマーカーに限定して使う
• チャコールは太枠、資料請求ボタン、カテゴリ帯、フッターに使う
• 黄地に置く文字は白でなくチャコールにする
• 水色は下位プランの区別にだけ使う
• クロージング帯は全面黄色にし、黒と白のボタンを並べる

Typography

• 見出しは太字ゴシックを中央揃えにし、下半分に黄色マーカー帯を敷く
• 数値は見出し中で文字サイズを 2 倍にして目立たせる
• 本文は小さめの 11px 前後、行間は広めにとる
• 英字の見出しラベルは大文字にして左右に線を引く
• CTA の上にはマイクロコピーを小さい太字で入れる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。サービス一覧は 2 列、事例と記事は横スクロールの 3 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• CTA ペアを各セクションの後に必ず挟む
• カードは左右 16〜30px 程度の余白をとって中央に置く
• ステップは全幅の黄色帯を縦に並べ、間に下向き三角を置く
• FAQ は黄色帯に Q 番号とプラスアイコンを並べた行にする
• 記事カードは画像を上、日付、タイトルの順に詰める

Elevation & Depth

• 影はほぼ使わず、太枠と色面で階層を表す
• CTA ボタンだけ白フチと薄い影で浮かせる
• カードは白面＋3px のチャコール枠

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 事例写真は角丸なしの矩形。サービスのアイコンは黄色の円の上にイラストを重ねる
• セクション境界: 直線で背景色だけを切り替える
• 特徴カードは上辺中央に番号をのせ、そこだけ枠線を切る
• 課題カードの下に逆三角の吹き出しを付け、解決策の黄色カードへつなぐ
• 料金カードは上部を色帯にした角丸 16px
• セクション見出しのマーカーは角丸なしの帯

Components

• 相談 CTA（button-primary）: 黄のピル型ボタン。白フチを付け、右端に＞を置く。上にチャコールの吹き出しラベルを重ねる
• 資料請求 CTA（button-secondary）: チャコールのピル型ボタン。左に資料のサムネを置き、上に黄色の吹き出しラベルを重ねる
• マーカー見出し（heading-marker）: 中央揃えの太字見出し。下半分に黄色の帯を敷く
• 番号付き特長カード（numbered-card）: 白面にチャコールの太枠を付けたカード。上辺に番号、中央にイラスト、下に数値入りの見出しと説明を置く
• 課題→解決カード（problem-solution）: 白い課題カードから逆三角でつなぎ、黄地に黒枠の解決カードを続ける
• ステップ帯（step-bar）: 全幅の黄色帯に STEP 番号・タイトル・補足を中央揃えで入れ、帯の間に下向き三角を置く
• 料金カード（price-card）: 色帯のヘッダーに、白地で月額ラベル・大きな数字・プラス記号の初期費用を並べる
• FAQ 行（faq-row）: 黄色帯の左に太字の Q 番号、右にプラスアイコンを置く
• カテゴリ帯（category-bar）: チャコールの細い帯の中央に白文字のカテゴリ名を置く
• サービス小カード（service-card）: 白カードの左にイラスト、右に名称と黄色の詳細ボタン・白枠のサブボタンを置く

Do's and Don'ts

Do - CTA は黄と黒の 2 つを一組にして、セクションごとに繰り返す - イラストは黒の線画に黄を 1 色だけ差す - 実績の数値は大きな欧文数字で強調する - カードの枠はチャコールの 3px 前後で太めにする - 背景は薄グレーとクリームを交互に切り替える

Don't - 黄とチャコール以外の強い色をメインに加えない - グラデーションや写真の背景で見出しを飾らない - 黄地に白い細字をのせない - カードの枠を細くしたり影で代用したりしない - イラストを多色のフルカラーにしない

Page Structure

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

1. ファーストビュー（サービス名と価値、実績を即座に伝える）: ストライプ柄の地に黄色の大きなサービス名、黄枠のイラストカード、CTA ペアを置く
2. 導入企業ロゴ（信頼を示す）: 白地にロゴを 2 段の横スクロールで並べる
3. ページ内ナビ（セクションへのジャンプ）: チャコール帯に白文字のリンクを横に並べる
4. サービスの特徴（業務範囲と強みを示す）: クリーム地に工程別のアイコンカードを横スクロールで並べ、その下に番号付きの強みカードを 3 枚置く
5. CTA（資料請求と相談へ誘導）: 薄グレー地に黒と黄のピル型ボタンを縦に並べる
6. 悩みの提起と解決（課題に共感させ、解決策を示す）: 白い課題カードから吹き出しでつなぎ、黄色の解決カードを置く
7. 導入までの流れ（導入の手軽さを示す）: 黄色のステップ帯を 5 段、三角でつないで縦に並べる
8. 料金（価格を明示する）: 水色と黄色のプランカードを並べ、下にチェックマーク付きの注記を置く
9. 導入事例（実績で裏付ける）: 写真カードを横に並べ、下に黄色の一覧ボタンを置く
10. お役立ち情報・ウェビナー・資料（コンテンツで見込み客を集める）: バナー画像のカードを 3 列で並べ、一覧ボタンを付ける
11. よくある質問（不安を解消する）: 黄色のアコーディオン行を 6 つ並べる
12. 提供サービス一覧（関連サービスへ送客する）: 淡い黄の地にカテゴリ帯と 2 列の小カードを置く
13. クロージング CTA（最後のひと押し）: 全面黄色の地に大きなコピー、黒と白のピル型ボタン、線画イラストを置く
14. パートナー・フッター（信頼の補強とサイト内の案内）: 線で挟んだ英字ラベルの下にロゴを並べ、チャコールのフッターにリンクを列挙する

Imagery

• 黒の手描き風線画で人物とオフィス小物を描き、PC やグラフの面だけ黄色で塗る
• 黄色の網点やドットで陰影を付ける
• サービスのイラストは黄色の円の背景と組み合わせる
• 業務アイコンは黒の線画ピクトにする
• 事例は自然光の集合写真を使い、下部に白い社名ラベルを重ねる
• 記事バナーは黄色を基調にした太字タイポで作る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は最大幅 1000px 程度で中央寄せにする
• FV の実績カードは PC で 3 枚を横に並べる
• 特長・課題・事例・記事は PC で 3 列のグリッドにする（SP は縦積みか横スクロール）
• ステップ帯は PC で左に番号、中央にタイトル、右に補足を並べる横 1 行にする
• CTA ペアは PC で横並びにする
• 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 行書くと起動時に読み込まれる。