DESIGN.md — 紺×蛍光イエローの線画イラスト求人LP（Navy Yellow Line-Illustration Freelance Job LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、清潔・爽やか、親しみ・手作り感、シンプル・ミニマル
• キーワード: 濃紺の額縁・蛍光イエローマーカー・線画イラスト・白カード・英字ラベル・安心感
• 地の質感: グラデーションや影はほぼ使わないフラットな面。紺の均一な線で描いたイラストに黄の差し色を入れる
• 形: 角丸の大きい白カード、紺のピル型ラベル、ピル型の黄色ボタン、V 字の矢印シェブロン
• 温度感: 紺が主役のややクールな配色。黄色と肌色イラストで親しみを足している

Colors

• 外枠は全面を紺にし、中央の生成り白カラムを額縁のように浮かせる
• 見出しは紺の太字にして、要点の語だけ蛍光イエローのマーカーを下半分に引く
• CTA 帯はカラムを紺に切り替え、黄色の見出し・白の本文・黄色ボタンでまとめる
• 黄色は CTA・マーカー・アイコンの差し色だけに使い、面積を小さく保つ
• ABOUT の要約文は紺の帯に黄色文字を載せた反転テキストにする
• フッターはさらに一段濃い紺にして締める

Typography

• 見出しはすべて紺の太字で中央揃えにする
• 数字（秒・分・金額）は周りより一回り大きくして目立たせる
• 英字ラベルは紺の角丸ボックスに白抜きで、日本語見出しの上に置く
• 本文は左揃えで行間を 1.8 前後と広めにとる
• マーカーは文字の下半分に引く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。紺の外枠の内側に幅約 90% のカラムを置き、その中にさらにカードを並べる
• 本文ブロックの幅: 画面幅の約 78%
• 余白: セクション間 64px、基本単位 8px、カード内 28px（375px 幅換算）
• 外枠カラムは画面の左右に約 18px の紺を残す
• カードは縦に積み、間隔は約 28px
• セクションの区切りや手順の間に紺の V 字シェブロンを入れる
• 見出しの直下にリード文を 1〜2 行入れる
• CTA 帯は外枠と同じ紺地で、カラムの白を一度途切れさせる

Elevation & Depth

• 影はほぼ使わず、生成り地の上の白カードで階層を出す
• 案件カードは影ではなく紺の太い枠線（約 3px）で目立たせる
• ボタンにも影を付けないフラットな表現にする

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真はカラム幅いっぱいの長方形で、紺のオーバーレイをかける。イラストは背景なしの切り抜き
• セクション境界: 直線で色を切り替える。カラム上端だけ大きな角丸にする
• 白カードは角丸約 16px
• STEP 番号と英字ラベルは紺のピル型か小さい角丸
• Q アイコンは紺の正円
• 案件カードは角丸約 16px の紺枠

Components

• 黄色ピル CTA（button-primary）: 幅約 75% の黄色いピル型ボタン。文字は紺で中央に置き、右端に › 矢印を付ける
• 英字セクションラベル（section-label）: 紺の小さい角丸ボックスに白い英字を入れ、見出しの上に置く
• マーカー見出し（marker-heading）: 紺の太字見出しの下半分に蛍光イエローの帯を敷く
• 悩み・特長カード（worry-card）: 白の角丸カード。上に線画アイコン、中央にマーカー見出し、下に本文を置く
• 案件カード（job-card）: 紺の太枠の白カード。紺の太字タイトルの下に、灰色チップ付きの報酬・地域・職種の行を並べる
• ステップカード（step-card）: 紺のピルに STEP 番号を入れ、その下に線画アイコン、見出し、説明を中央揃えで置く。カードの間に V 字矢印を入れる
• 紺帯の反転テキスト（inverse-banner-text）: 1 行ずつ紺の帯に黄色い太字を載せて積み上げる要約コピー
• FAQ 項目（faq-item）: 紺の丸い Q アイコンと紺の太字の質問、その下に本文の回答を置く。項目の間は薄い灰色の線で区切る
• 紺地 CTA 帯（cta-band）: 紺地に黄色の 2 行見出し、白の説明文、黄色のピルボタンを置く

Do's and Don'ts

Do - 紺・生成り白・黄の 3 色を軸にする - 強調したい語は蛍光マーカーでだけ目立たせる - イラストとアイコンは紺の均一な線で描き、黄色を差し色にする - カードはたっぷりの余白をとって中央揃えにする - CTA は紺地の帯の中に黄色いピル型で置く

Don't - 赤やグラデーションの派手なボタンを使わない - カードに濃い影や立体的な装飾を付けない - 写真を多用しない。主役は線画にする - 黄色を広い面の背景に使わない - 見出しを細字や明朝にしない

Page Structure

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

1. ファーストビュー（サービスの対象と手軽さを伝える）: 紺のピル型リード、極太の紺見出し、指アイコンと白文字の英字帯を置く。その下に人物の線画を 3 人並べ、数字入りのマーカー文を 3 行重ねる
2. 悩みの提起（利用者の不安に共感する）: V 字矢印のあとに 2 行の問いかけ見出しと頭を抱える人物の線画を置き、マーカー見出し付きの白カードを 3 枚並べる
3. 解決・特長（不安を一つずつ打ち消す）: 喜ぶ人物の線画のあと、アイコン付きの白カードを 3 枚並べ、それぞれ悩みに対応させる
4. サービス紹介（サービスの定義と姿勢を伝える）: 白地に英字ラベルと引用符付きの見出しを置く。紺帯に黄色文字の要約を 4 行重ね、その下に本文段落を 3 つ置く
5. 事例・案件例（具体的な条件で信頼を得る）: 紺のオーバーレイをかけた作業写真を置き、紺枠の案件カードを 3 枚縦に並べる
6. CTA（無料相談へ誘導する）: 紺地の帯に黄色見出し、白い説明文、黄色のピルボタンを置く
7. 利用の流れ（手順の少なさで安心させる）: STEP ピル付きのカードを 4 枚、V 字矢印でつないで並べる
8. 特典・制度（継続して利用するメリットを示す）: 黄色アイコンと見出しを横に並べた白カードを並べ、金額は黄色マーカーで大きく見せる
9. よくある質問（不安を最後に解消する）: Q の丸アイコンと太字の質問、回答を線で区切って 5 問並べる
10. CTA・フッター（最後のひと押しと会社情報を示す）: 同じ紺の CTA 帯のあと、濃紺のフッターに白抜きロゴと中央揃えのリンクを置く

Imagery

• 人物は紺の均一な線で描くフラットな線画にし、肌はクリーム色、髪はオレンジなどで部分的に塗る
• 感情（悩み・喜び）が伝わる上半身のポーズにし、キラキラなどの記号を添える
• アイコンは紺の太い線で描き、一部を黄色で塗る（時計・封筒・書類・握手など）
• 写真は PC 作業の手元を使い、紺の半透明オーバーレイでトーンをそろえる
• PC の余白には、紺地に溶け込むアイソメトリックのデバイスイラストを置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でもメインカラムは幅約 430px に固定し、両側は紺の背景を広く見せる
• PC の左側にはロゴ、特長を白カード 3 つ、黄色の CTA を固定サイドバーとして置く
• PC の右側には縦書きのキャッチとアイソメトリックのイラストを置く
• PC では見出しを 1 行にまとめ、イラストは小さめにする
• フッターは 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 行書くと起動時に読み込まれる。