DESIGN.md — 水色×黄色のポップなイラスト転職支援 LP（Pop Cyan Illustrated Career Signup LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、親しみ・手作り感、清潔・爽やか、情報量多め・訴求型
• キーワード: 水色ベース・黄色マーカー・濃紺の線画・若者イラスト・吹き出しの口コミ・登録フォーム
• 地の質感: フラットな面にドット・斜線・紙吹雪のような図形を散らす。方眼の薄いグレー地も使う
• 形: 濃紺の細い枠線で囲む角丸カードと吹き出し、ピル型ラベル、片側を開けた半円カプセル形の見出し
• 温度感: 明るく軽快で前向き。若い未経験層向けのカジュアルさ

Colors

• ファーストビューと締めCTAは水色地、本文セクションは白、カード群は薄グレー方眼地で切り替える
• 強調語は濃紺の太字に黄色マーカーを重ねる
• 枠線・番号バッジ・見出し文字は濃紺1色に統一
• 黄色は強調・価格帯・CTAに限定し、面積を広げすぎない
• 口コミの吹き出しは淡いクリーム地で、白地と区別する

Typography

• 見出しは太いゴシックで濃紺、FVは白い帯の上にシアン文字を載せる
• FVの見出しは白い斜め帯を段違いに重ねる
• 強調語のみ太字＋黄色マーカー、文中で部分強調する
• 本文は14px前後・行間広めで読みやすく
• 数字は一回り大きく太字で見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。悩みカードは 3 列、SNS登録ボタンは 2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• セクション見出しは左寄せのカプセル形でイラストを右に重ねる
• 理由は番号バッジ＋2行テキストを中央揃えで縦に並べる
• 求人カードは横スクロールのカルーセルで次のカードを端に見せる
• 口コミは顔アイコンと吹き出しを左右交互に配置
• フォームは白カードに収め、ステップ表示→入力→CTAの順

Elevation & Depth

• 基本はフラットで影なし
• 奥行きは濃紺の枠線で表現する
• CTAボタンは下側にうっすら濃い縁を付け立体的に見せる

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸の矩形、人物アイコンは濃紺枠の円形
• セクション境界: 直線で色を切り替える。見出しは半円の線で囲む
• カード・吹き出しは濃紺2px枠の角丸
• 番号バッジ・タグはピル型
• ステップ表示は矢羽根形を連結
• CTAボタンは角丸8px程度の横長

Components

• カプセル形見出し（heading-capsule）: 左側を黄色の半円線、右上を濃紺線で囲む見出し。横にキャラを配置
• 番号バッジ（badge-number）: 濃紺のピル型に白文字で順番を示す
• 黄色マーカー（marker-highlight）: 強調語の下半分〜全体に黄色を敷く
• おすすめ対象カード（card-worry）: 白地・濃紺枠の角丸カードに短い悩みとイラスト。3列で並べる
• 求人カード（card-job）: 写真・職種名・ピル型タグ・黄色の年収帯で構成。カルーセル
• 口コミ吹き出し（speech-review）: クリーム地・濃紺枠の吹き出しと円形の顔アイコン
• 登録ステップ（step-arrow）: 矢羽根形3つ。現在地のみ黄色、他はグレー
• 登録CTAボタン（button-primary）: 黄色グラデ、濃い縁取り。上に小さい同意文、下に大きいボタン文字
• SNS登録ボタン（button-social）: 白地グレー枠、左にロゴ、中央にサービス名。2列

Do's and Don'ts

Do - 濃紺の線画イラストの若者を各セクションに配置する - 強調語は必ず黄色マーカーで示す - 枠線は濃紺で太さを統一する - FVと締めCTAは水色地に図形を散らして賑やかにする - 数字やメリットは短い2行で言い切る

Don't - 写真主体の重厚なデザインにしない - 黒や暗い地のセクションを入れない - マーカー色を複数色に増やさない - 影やグラデーションを多用しない - 長文の段落を並べない

Page Structure

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

1. ヘッダー（ブランドの提示）: 黄色の細い帯に濃紺のロゴ
2. ファーストビュー（ターゲットと価値の提示）: 水色地に白帯の段違い見出し、中央にPCを持つキャラ、周りに職種アイコン
3. こんな人におすすめ（共感と自分事化）: 斜線で挟んだ小見出しと3列の枠線カード
4. おすすめの理由（選ぶ理由を示す）: カプセル見出し＋番号バッジ3つ、マーカー強調の2行テキスト
5. 求人ピックアップ（具体的な求人の提示）: 方眼グレー地に横スクロールの求人カード、矢印ボタン
6. 利用者の声（安心感）: 円形アイコンとクリーム吹き出しを左右交互に3件
7. 締めのCTA（登録を後押し）: 水色地に傾けた大見出しと、ジャンプする若者たちの群像イラスト
8. 会員登録フォーム（コンバージョン）: 白カードにマーカー見出し、矢羽根ステップ、入力欄、黄色CTA、SNS登録2×2

Imagery

• 濃紺の線画に水色・黄色・ピンク等のフラット塗りの若者イラスト
• キャラは跳ねる・手を挙げるなど動きのあるポーズ
• スマホ・モニター・家などのアイコン的な小イラスト
• ドット・斜線・三角や四角の紙吹雪を背景に散らす
• 求人写真は明るいオフィスで働く人物、角丸で切り抜く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に最大幅約750pxで配置し、左右は背景色を延長する
• FVのイラストと見出しは横並びにしてもよい
• 求人カードはPCで3枚並べて見せる
• 口コミは2列配置も可
• フォームは幅480px程度に収める

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