DESIGN.md — 黄色×水色の線画イラスト キャリア相談 LP（Bright Yellow Pop Illustration Career Service LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: ポップ・元気、親しみ・手作り感、清潔・爽やか
• キーワード: レモンイエロー・線画イラスト・黒枠吹き出し・破線アンダーライン・パステル水色・フラット
• 地の質感: グラデーションも影もほぼないフラットな面。黒い線画と点描のドット模様で手描き感を出す
• 形: 太い黒線（2〜3px）で囲った角丸カードと吹き出し。斜めや波形の面でセクションを区切る
• 温度感: 明るく暖かく前向き。ビジネス寄りだがカジュアルで話しかけやすい

Colors

• 地の色は黄→白→グレー→白→水色→白→黄の順に切り替え、セクションごとに色面ではっきり分ける
• 黄色はブランドと CTA の色。CTA は地の黄より少し濃い純黄を使い、白地の上に置く
• 見出しの強調語は黄文字＋黒フチ、または青文字で目立たせる
• カードは白か淡い水色の面に黒の太枠。影は付けない
• ティール・ピンク・青は表やラベルなど小さい面に限る
• 文字はすべて黒〜濃いグレー。純黒は使わない

Typography

• 見出しはすべて太字で、両側に細い丸括弧の装飾を付ける
• リード文は 1 行ごとに黒の破線の下線を引く
• 本文は行間を広く（2.0 以上）とって読みやすくする
• 強調ワードは黄色文字＋黒フチ、または青文字で示す
• セクション見出しは中央揃え、本文は左揃え
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。理由アイコンだけ 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約 22px で統一
• 悩みカードは縦に積み、左にイラスト・右に短文
• CTA 帯はセクションの間の白地に毎回同じ形で置く
• 事例カードは 前→手順→後 の縦の流れ

Elevation & Depth

• 影はほぼ使わず、黒の太枠で面を立たせる
• CTA と小ラベルにだけ、黒のずらし影（右下 2〜3px）を付ける
• 写真は角丸のみで影なし

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸の長方形。人物アイコンは黒枠の円で切り抜く
• セクション境界: 斜めの直線や緩い波形で色面を切り替える
• カード・吹き出しは 2〜3px の黒線で囲む
• 吹き出しは輪郭線の一部を途切れさせ、しっぽを付ける
• 手順ラベル・面談前ラベルはピル型
• 主 CTA は角丸なしの長方形帯

Components

• 問い合わせ帯 CTA（button-cta-band）: 幅いっぱいの純黄の長方形に太字文字と右矢印。左上に黒い小タブ『簡単◯ステップ』を重ねる
• サブボタン（button-secondary）: 白地に黒枠、右に丸囲み矢印アイコン、黒のずらし影
• 吹き出し見出し（speech-heading）: 途切れた黒線の大きな吹き出しの中に、黄文字＋黒フチの強調語と小さな問いかけを入れる
• 実績バッジ（trust-badge）: パステルの四角に黒のずらし影と吹き出しのしっぽ。数字は大きく色を付ける。3 つ横に並べる
• 悩みカード（worry-card）: 水色地に黒枠の角丸カード。左に線画イラスト、右に短い悩み
• 事例カード（case-card）: 白地に黒枠。上に円形アイコンと属性、黒のピル型ラベル、悩み、ティールの手順ラベル、チェックマーク、クリーム色の結果ボックス
• 比較表（comparison-table）: 見出し列は青地に白文字、自社列はピンク地。黒の細罫線
• 理由アイコン（reason-icon）: 黄地に白い大きな円、中に黒線＋黄の線画アイコン。下に太字のラベル
• 声スライダー（voice-slider）: 途切れ線の黒枠吹き出しカードを横に送る。左右に黒丸の矢印、下にドット

Do's and Don'ts

Do - 黄・白・水色の色面をセクションごとにはっきり切り替える - 線画イラストを各セクションに必ず入れる - カードと吹き出しは黒の太枠で統一する - CTA 帯は同じ形で 3 回以上繰り返す - 見出しは括弧装飾、リードは破線下線で型をそろえる

Don't - グラデーションやぼかした影を使わない - 暗い色や彩度の低い地色をセクション全体に使わない - CTA をピル型や別の色に変えない - 写真ばかりにせず、線画を減らさない - 細い明朝体を使わない

Page Structure

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

1. ファーストビュー（サービス価値と無料相談の訴求）: 黄地に円形の吹き出しバッジ、人物の丸写真、特大ロゴ文字、青文字のサブコピーに下線、実績バッジ 3 つ、線画の人物群。下端は波形で切る
2. お知らせ（受付状況の告知）: 白地の中央に小さな文字で 2 行
3. 悩みの提起（共感を得る）: 黄色のリボン見出しの下に水色の悩みカードを 5 枚縦に並べる。最後に電球アイコンと解決の一文
4. サービス紹介（サービスの説明）: 薄グレー地を斜めに切り替える。吹き出し見出し、線画、破線下線のリード、ドット模様と角丸写真、長い本文
5. 他との比較（違いを示す）: 括弧見出しと青×ピンクの比較表、その下に白いサブボタン
6. CTA（問い合わせ誘導）: 白地に黄の帯ボタンと黒タブ
7. 専門家の説明（相談相手を紹介して信頼を得る）: 水色地を斜めに切る。吹き出し見出し、破線リード、本文の右下に線画
8. 利用事例（利用前と利用後の変化を見せる）: 白い黒枠カードを縦に 2 枚。前→手順→結果の流れ
9. 選ばれる理由（特長を並べる）: 黄地に白い円アイコンを 2 カラムで 7 つ
10. お客様の声（利用者の声で後押しする）: 黄地の上に大きな欧文見出しと和文の小見出し、吹き出しカードのスライダー
11. CTA・フッター（最後のひと押し）: 白地に黄の帯 CTA、淡いグレー地にロゴとコピーライト

Imagery

• 黒の線画に青・ティール・赤・黄を少しだけ塗ったフラットな人物イラスト
• 人物は動きのあるポーズ（走る・指さす・星を掲げる）でビジネスシーンを描く
• 写真は明るい室内で笑顔の相談シーン。角丸で切り抜く
• 黒の点描ドットや▶▷の三角記号を余白に添える
• アイコンは黒線に黄の差し色を入れた線画
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 70% 幅に内容を収め、色面は全幅に広げる
• PC の FV はロゴを中央、人物の線画を左右に分けて置く
• PC の悩みカードは 5 枚を横 1 列に並べる
• PC の写真と本文は左右 2 カラムにする
• PC の事例は 2 カラム、理由アイコンは 4 カラム
• PC の声スライダーは 4〜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 行書くと起動時に読み込まれる。