DESIGN.md — 空から宇宙へ進む絵本風の採用 LP（Hand-drawn Picture Book Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 親しみ・手作り感、ポップ・元気、かわいい
• キーワード: 手描き主線・絵本の旅・ゆるキャラ・セクションで色替え・太い欧文見出し
• 地の質感: ベタ塗りの地に小さな点や短い線を散らした、紙に描いたような質感。
• 形: 黒い手描き線で縁取った不定形の窓枠（家・波・多角形・アーチ・星形）と、丘のようにうねる境界。
• 温度感: 暖色の地と青空の寒色が交互に来る、明るく温かい印象。

Colors

• セクションごとに地の色を1色ベタで切り替え、空→海→丘→地面→宇宙→月と物語順に並べる。
• 欧文見出しは明るい地では黄色に黒縁、濃色地では白に黒縁。
• ボタンは常に白地＋黒の手描き枠＋黒文字で、地色に依存させない。
• 窓枠は濃い青か黄色の太い縁で囲み、中は淡い水色。
• 濃紺地には白丸の星と黄色の月をちりばめる。
• グラデーションは使わずベタ塗りのみ。

Typography

• 欧文見出しは丸みのある極太書体にし、黒い縁取りを付ける。
• 和文は太めのゴシックで字間を広めにとる。
• 本文は短い行で改行し、段落ごとに1行あけて詩のように並べる。
• 見出しは欧文＋和文サブコピーの2段で中央揃え。
• 本文の文字サイズは小さめにして、絵を主役にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム中央揃え。職種紹介のみ 2 列グリッド
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 各ブロックは欧文見出し→和文サブ→イラスト窓→白ボタンの順。
• セクションの間にキャラクターのイラストを挟んで間を埋める。
• 冒頭メッセージは左揃えの短い行の連続。
• ボタンは幅約65%の中央寄せ。
• 背景はセクション単位の全幅ベタ塗り。

Elevation & Depth

• 影は使わず、黒い手描き主線で立体感を出す。
• キャラクターの足元に地色を暗くした楕円の影だけを置く。
• カードやボタンはフラットにし、縁取り線で区切る。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 40px。ボタンは角丸の長方形。
• 写真の切り抜き: 家形・波形・多角形・アーチ・ギザ縁など手描きの不定形の窓で切り抜く。人物写真は切り抜いて雲から顔を出す構図にする。
• セクション境界: 手描き線の水平線、丘のように盛り上がる曲線、うねる地平線。
• 線は少し揺れる手描きにする。
• ボタンは角丸10px前後の長方形で、黒枠を付ける。
• 窓枠は太い色付きの縁＋外側の黒線の二重にする。
• 直線的な幾何学の枠は避ける。

Components

• 白い手描き枠ボタン（button-primary）: 白地に黒い枠と黒文字の角丸長方形で、各セクションの下に置く。
• 黒縁取りの欧文見出し（heading-display）: 極太の欧文に黒縁を付け、下に和文の一言を添える。
• 不定形イラスト窓（illust-window）: 濃い青の太い縁で囲んだ家・波・八角形の窓。中にキャラクターの情景を描く。
• お知らせ枠（news-list）: 水色の太枠に白い面。日付・見出し・矢印を区切り線で並べる。
• 雲から顔を出す人物（cloud-avatar）: 切り抜いた人物写真の下半身を白い雲で隠し、下に欧文の職種名とカナを添える。
• アーチ型カード（arch-card）: 上辺が半円の水色カードを白い太枠で縁取り、濃紺地に浮かべる。中に見出し・説明・ボタン2つを置く。
• 星形バースト（burst-badge）: ギザギザの星形の黄色い面に、見出し・一言・ボタンをまとめる。
• 切手風の写真枠（photo-frame）: 角がえぐれた青い枠の中に写真を収める。

Do's and Don'ts

Do - セクションごとに地の色を変え、上から下へ旅をしている流れをつくる。 - すべての線を黒の手描きにし、太さを少しばらつかせる。 - セクションの隙間にキャラクターを置いて遊びを入れる。 - ボタンは全セクションで同じ白い枠付きの形にそろえる。 - 欧文見出しと和文サブコピーをセットで中央に置く。

Don't - グラデーション・ドロップシャドウ・光沢を使わない。 - 整った幾何学のカードや細い線の枠を使わない。 - 写真を四角いまま大きく並べない。 - 原色の赤やビビッドなCTAボタンを使わない。 - 本文を長い段落で詰めて書かない。

Page Structure

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

1. ファーストビュー（世界観を一瞬で伝える）: 水色の空にキャラクターが飛ぶ。手描きの水平線で海とつなぐ。
2. メッセージ（企業の思いを詩のように語る）: 青い海の地に白文字の大きなコピーと、短い行の本文。鳥のキャラクターを散らす。
3. 動画（動画で雰囲気を伝える）: 緑の丘の上に、黄色の太枠で囲んだ動画サムネイルを置く。
4. お知らせ（最新情報を載せる）: ピンク地に水色の枠のリスト。
5. 挑戦・働き方・イベント（コンテンツへの入口を並べる）: 欧文見出し＋不定形のイラスト窓＋白ボタンを3回くり返す。
6. 職種紹介（職種ごとの記事へ案内する）: 茶色の地面の地に、雲から顔を出す人物を2列で並べる。
7. エントリー案内（選考の情報へ誘導する）: 濃紺の宇宙に浮かぶアーチ型カードにボタン2つ。
8. Q&A（本音の質問集へ案内する）: 黄色の星形バーストの中に見出しとボタン。
9. トップメッセージ（経営者の言葉を見せる）: 白い欧文見出しと、切手風の枠に入れた写真とボタン。
10. 採用担当メッセージ（親しみで締めくくる）: 和文の見出しと、黄色い月面に座るキャラクターとボタン。
11. フッター（ページ上部へ戻る）: 黄色と青の境界線上にページ上部へ戻るリンクと縦線。

Imagery

• 黒の主線で描くゆるい表情のオリジナルキャラクター（鳥・卵・生き物・食べ物）。
• 塗りはパステルのベタ塗りで、陰影は付けない。
• 地の上に小さな点やかすれ線を散らして紙の質感を出す。
• 人物写真は明るい笑顔の切り抜きにし、イラストの雲と組み合わせる。
• 宇宙パートには白丸の星・黄色の三日月・しま模様の惑星を描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも中央の細いカラムを保ち、左右は地の色とイラストで埋める。
• PC では挑戦と働き方の2ブロックを横に並べる。
• 職種紹介は PC でも 2 列のまま中央に寄せる。
• 見出しとボタンは PC で相対的に小さく見えるため、サイズを大きく上げすぎない。
• 地の色の切り替わりと境界の曲線は 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 行書くと起動時に読み込まれる。