DESIGN.md — 青×黄のフラットイラスト製造業採用 LP（Blue Flat Illustration Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: クール・先進的、清潔・爽やか、ポップ・元気、信頼・誠実
• キーワード: フラットイラスト・青と黄・番号付き目次・曲線背景・余白多め・ピル型ボタン
• 地の質感: グラデーションを少し入れたフラットベクター。写真はほぼ使わず、ノイズのない滑らかな面で組む
• 形: 大きなうねりの水色曲線、円形カード、ピル型ボタン、角丸の職種カード
• 温度感: やや涼しげ。青系がメインで、黄色を差し色にして明るさと楽しさを出す

Colors

• FVと動画エリアはロイヤルブルーで塗りつぶし、ニュース帯は深い青に切り替える
• 本編は白地を基本にし、淡い水色の大きな曲線を左右からはみ出すように置く
• 黄色は主CTA・矢印の丸ボタン・イラストの差し色だけに使う
• セクション番号は青の細字で、見出しは黒に近い濃いグレーで書く
• イラストは青のグラデーション＋黄＋肌色＋濃紺に限り、ほかの色相は入れない
• サブCTAは深い青の地に白文字にして、黄の主CTAと並べて差をつける

Typography

• 番号は細い欧文で大きくし、右下に小さな英字ラベルを添える
• 見出しは太いゴシックを2〜3行に改行し、字間を広めにとる
• 本文は小さめにして、短い行を何行か重ねる
• カテゴリーボタンは小さな英字の上に日本語を置く2段組みにする
• CTAは小さな日本語の上に大きな英字を置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はテキストとイラストを左右に交互配置
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 120px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは番号・見出し・短い説明文・黄の丸矢印ボタンで1セットにする
• セクションの間には細い下向き矢印を置き、順に読み進める流れを示す
• 大カテゴリーの切り替わりに枠線のピル型ラベルを中央に置く
• 職種カードは3列のグリッドにし、段ごとに少しずらしてリズムを出す
• 余白は広めにとり、空いた所に雲や乗り物の小イラストを散らす

Elevation & Depth

• 影はほぼ使わずフラットにする
• 立体感はイラスト内のグラデーションだけで出す
• カードやボタンには影をつけず、色面と線で区切る

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: イラストは切り抜きで背景に溶け込ませる。職種カードは角丸の正方形、ストーリーは正円で切り抜く
• セクション境界: 直線の区切りは使わない。淡い水色の大きな波状曲線で背景をつなぐ
• CTAとカテゴリーラベルはピル型にする
• 矢印ボタンは黄色の小さな正円にする
• ストーリーカードは濃い青の正円にする

Components

• エントリーボタン（button-primary）: 黄色のピル型の大ボタン。小さな日本語の上に大きな英字を置く
• サブ採用ボタン（button-secondary）: 深い青のピル型。白文字で、主CTAの下に置く
• カテゴリー区切りラベル（category-label）: 白地に黒の細い枠線を引いたピル型。英字と日本語の2段で、下に矢印を添える
• 番号付き見出し（section-number）: 細い欧文の大きな番号の横に英字ラベル、その下に太字の見出しを置く
• 黄色の丸矢印ボタン（arrow-circle）: 直径約28pxの黄色の円の中に細い矢印を入れる。各セクションへの導線にする
• 職種カード（job-card）: 角丸の正方形にイラストを入れ、上辺に青い職種名タブ、右下に白丸の矢印を置く
• ストーリー円カード（story-circle）: 濃い青の正円の中に、小さな英字の番号と白い引用風の短文を入れ、下端に黄の丸矢印を置く
• 新着情報リスト（news-list）: 深い青の帯の上に、日付・白い太字タイトル・黄色リンクを並べ、細い区切り線で分ける
• 告知バー（top-bar）: 最上部の細い黄色の帯。青い小さな文字で告知を入れる

Do's and Don'ts

Do - イラストは青のグラデーション＋黄＋濃紺で統一する - 番号付きのセクションを左右交互に並べて、目次のように見せる - セクションの間に細い矢印と小さな装飾イラストを置く - 背景の曲線は画面端からはみ出すほど大きく描く - 黄色は行動を促す所にだけ使う

Don't - 実写写真を大きく並べない（使うのは動画サムネ程度） - 赤や緑など、別の色相の強調色を足さない - カードに強いドロップシャドウをつけない - セクションを直線や帯で硬く区切らない - 本文を長文にせず、2〜5行の短文にとどめる - 見出しを細い明朝にしない

Page Structure

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

1. 告知バー（イベント情報への誘導）: 黄色の細い帯に、青の小さな文字で1行入れる
2. ファーストビュー（企業の世界観とキャッチを伝える）: 青地に工場とマスコットのイラスト。白い手書き風のキャッチを斜めに重ね、下に黄と白のピル型ボタンを2つ並べる
3. コンセプトムービー（動画で雰囲気を伝える）: 青地の中央に16:9の動画を置く
4. 新着情報（最新のイベント告知）: 深い青の帯に2件のニュースを並べ、右下に一覧へのリンクを置く
5. 導入文（ページの読み方を案内する）: 白地の中央に1行の文と下向き矢印を置く
6. 会社紹介（01〜02）（事業と製品の用途を伝える）: カテゴリーラベルの下に番号見出しと大きなイラストを左右交互に置く
7. メッセージ（03）（人事からのメッセージ）: 左にテキスト、右に人物グループのイラスト
8. 職種紹介（04）（専攻ごとに職種を探してもらう）: 番号見出しとイラストの下に、9職種の角丸カードを3×3で並べる
9. プロジェクトストーリー（05）（社員の挑戦を紹介する）: イラストの下に、濃い青の円形カードを3つ横に並べる
10. 働き方（06〜08）（数字・人材育成・福利厚生を伝える）: カテゴリーラベルの後に、番号セクションを3つ左右交互に並べる
11. 募集要項・FAQ（09）（応募条件と疑問の解消）: 左にイラスト、右にテキストと黄の丸矢印
12. 最終CTA（エントリーへの誘導）: 白地の中央に黄色の大きなピル型ボタンを置き、その下に深い青のピル型ボタンを置く

Imagery

• 人物・工場・ビルなどを描くフラットなベクターイラスト。顔は目鼻を省略したシンプルな形にする
• 青の濃淡グラデーションを主にして、黄を部分的に入れる
• 雲・車・飛行機・自転車・ドローンなどの小イラストを余白に散らし、移動の楽しさを出す
• 一部に大きな数字やグラフをイラストとして組み込む
• 背景は淡い水色の有機的な曲線にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP ではテキスト→イラストの順に縦に積み、左右交互の配置はやめる
• 職種カードは SP では2列にする
• ストーリー円カードは SP では縦並び、または横スクロールにする
• FV のキャッチは SP では画面幅の90%程度まで大きくし、ボタンは縦に並べる
• 最終CTAは SP では画面幅の85%の大きなピル型にする

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