DESIGN.md — 黄色×ピンクのポップな転職相談 LP（Pop Yellow Illustrated Career Consultation LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、親しみ・手作り感、シンプル・ミニマル
• キーワード: ビビッドイエロー・ピンク強調・線画イラスト・ドット柄・大きな角R・白カード
• 地の質感: フラットな単色面にハーフトーンのドット柄をうっすら重ねる。影はほぼ使わない
• 形: セクションの上角を大きくRで丸めた面、角丸の白カード、ピル型ボタン、円形のフロートボタン
• 温度感: 明るく暖かい。元気で気軽に相談できる雰囲気

Colors

• 黄色と白の面をセクションごとに交互に切り替える
• 強調したい語だけピンク文字にし、残りは濃いグレー
• 主CTAはピンクのピル型に細い黒枠を付ける
• LINE導線だけは緑で区別する
• 黒はTOPボタン・フッター・カード角のL字線に限定
• 黄色地の上には白カード、白地の上には黄色イラストやマーカーを置く
• button-primary は文字 #FFFFFF × 背景 #FC427D のコントラスト比が 3.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#EB044D、4.51:1）を使う。
• button-line は文字 #FFFFFF × 背景 #01BA03 のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#018A02、4.53:1）を使う。
• badge-status は文字 #FFFFFF × 背景 #FC427D のコントラスト比が 3.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#EB044D、4.51:1）を使う。
• logo-card は文字 #F23E7C × 背景 #FEFEFE のコントラスト比が 3.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E60F59、4.55:1）を使う。

Typography

• 全体を太めのゴシックで統一し、字間は0.1em前後広めにとる
• 見出しは中央揃えで2〜3行に短く改行
• FV見出しは助詞だけ小さくして名詞を大きく見せる
• 強調語はピンク、または黄色マーカー下線で示す
• 傍点（ドット）で語を強調する手法も使う
• 番号は背景色より少し明るい色の大きな数字で透かして置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はカード 2〜3 列に並べる
• 本文ブロックの幅: 画面幅の約 85%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは中央寄せで左右に約7%の余白
• カード→イラスト→カードの縦の流れを繰り返す
• セクションの終わりにピル型CTAを中央配置
• イラスト下には白い楕円の床影を置く
• 右下にTOPボタンとLINE登録ボタンを固定

Elevation & Depth

• 基本はフラットで影なし
• 実績カードは右下に黒のずれ影（オフセット線）を付ける
• フロートボタンはごく薄い影のみ

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 80px。ボタンはピル型。
• 写真の切り抜き: FV写真は左下を大きな円弧で切り抜く。イラストは切り抜きの線画
• セクション境界: 黄色セクションの左上・右下を大きなRで丸めて白地に重ねる
• 白カードの左上と右下に黒いL字線をずらして添える
• 吹き出しカードは下中央に三角の尾を付ける
• 悩みカードの横に丸い思考吹き出しの泡を置く
• バッジはピンクの丸型で黒い細枠

Components

• ピンクのピル型CTA（button-primary）: ピンクの面に黒の細枠、白太字と右向き矢印
• LINE相談ボタン（button-line）: 緑のピル型。FVに置く
• L字線付き白カード（card-bracket）: 白の角丸カードの対角にずれた黒L字線を添える
• 吹き出し見出し（speech-heading）: 下に三角の尾が付いた白カード型の見出し
• 丸型ステータスバッジ（badge-status）: カード右上に重ねるピンクの丸バッジ
• チェックリスト（check-list）: ピンクのチェックと太字テキスト、黄色マーカーと傍点で強調
• TOPボタン（fab-top）: 黒の円に白の山形矢印とTOPの文字
• 実績ロゴカード（logo-card）: 白の大カード。上端に黄色の押しピン、点線の見出し下線、黒のずれ影

Do's and Don'ts

Do - 黄色と白の面を大きなRで交互に重ねる - 強調はピンク文字と黄色マーカーの2種類にとどめる - 人物はモノクロの線画に黄色を一色だけ差す - カードの文言は2行程度に短くする - 背景の隅に淡い黄色のドット柄を散らす

Don't - 黄色・ピンク以外の派手な色を増やさない - 写真を多用しない。FV以外は線画中心にする - 細い明朝体を使わない - 濃い影やグラデーションでカードを立体にしない - 黄色地に黄色の文字を置かない

Page Structure

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

1. ヘッダー（サービス識別と導線）: 最上部に黄色の細帯。白地にロゴとアイコンボタンを並べる
2. ファーストビュー（サービスの価値を一言で伝える）: 笑顔の人物写真を円弧で切り抜き、左下に極太の見出しとLINEボタン
3. 相談方法の紹介（相談の手段を番号付きで示す）: 黄色地に吹き出し見出し。透かし番号＋線画＋L字カードを縦に並べる
4. 利点の提示（手軽さを伝える）: 白地に日本地図の線画、チェックリスト2行とピンクCTA
5. 悩みの提起（共感して相談を促す）: 黄色地に白カード3枚、それぞれ悩む人物の線画と思考の泡を添える
6. サービス紹介・実績（信頼性を示す）: グレーの写真帯に白見出し、重ねた白カードに企業ロゴを縦に並べる
7. 最終CTA（サービスへ送客）: 黄色地に横長のピンクのピル型ボタン、隅に立体文字の線画
8. フッター（コピーライト表示）: 黒帯に白の小さな文字を中央揃え

Imagery

• 人物はスーツ姿のモノクロ線画で、ネクタイや服など一部だけ黄色に塗る
• イラストの足元に白い楕円の床影を置く
• FVだけはオフィスで笑う人物の明るい写真にする
• ハーフトーンのドット柄を淡い黄色やピンクで円形に散らす
• 背景写真はグレーの半透明を重ね、上に白文字を載せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではFVの見出しを左、円弧の写真を右に配置
• 相談方法のカードはPCで2列に並べる
• 悩みカードはPCで3列に横並び
• 実績ロゴは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 行書くと起動時に読み込まれる。