DESIGN.md — 黄×青の手描き漫画風 採用 LP（Pop Comic Handdrawn Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、親しみ・手作り感、かわいい
• キーワード: 手描き線画・吹き出し・星と放射線・原色の黄・クリーム地・漫画風見出し
• 地の質感: ベタ塗りの平面に、黒の手描き線とラフな輪郭を重ねる。グラデーションや影は使わない
• 形: いびつな楕円、雲形の吹き出し、手描きの枠線、リボン型の見出し帯
• 温度感: 暖かく陽気。黄色が主役で、青で締める

Colors

• ページ全体は白地にする。主要コンテンツは細い線で囲んだクリーム色の枠に収める。
• ファーストビューはクリーム地に黄色の星と街並みを散らし、明るさを最大にする。
• メッセージセクションだけを青のベタ帯にして、白い吹き出しを載せてリズムを切り替える。
• 見出しは黄・青・赤茶を語ごとに使い分け、ポップに見せる。
• 本文の要点は黄色マーカーで塗る。太字や色文字は使わない。
• 朱色はエントリーボタンにだけ使う。
• button-entry は文字 #FFFFFF × 背景 #FC3402 のコントラスト比が 3.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E02E02、4.6:1）を使う。

Typography

• 見出しは手描きの太い書体にする。カタカナを崩したり、語ごとに色を変えたりしてよい。
• 番号は丸囲み数字にし、見出しの上に小さく載せる。
• 本文は字間を広めに取り、行間は1.9前後にして読みやすくする。
• キャッチは縦書きにし、一部の語を吹き出しの中に入れて強調する。
• 英字は弧状に配置したり、見出しの下に小さく添えたりして装飾として使う。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。特長の4項目は1列に縦積みし、各項目を区切り線で分ける
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 全体を細い枠線で囲んだクリーム色のボードの中に収める。
• メッセージ帯だけは枠いっぱいまで青を敷く。
• カードは写真、本文、右寄せの「見てみる」矢印の順に並べる。
• 項目同士は細い横線か十字の区切り線で分ける。
• 最後の応募ブロックは、ピンで留めた紙のような枠にする。

Elevation & Depth

• 影は使わず、すべてフラットにする。
• 立体感はボタン右下のずらしベタ（濃い色の板）だけで出す。
• 重なりは、写真の上にイラスト人物をはみ出させて表現する。

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 40px。ボタンは角丸の長方形。
• 写真の切り抜き: 手描きの黒い線で縁取った、いびつな楕円・円に切り抜く
• セクション境界: 吹き出しの雲形と、街並みのシルエットでセクションを切り替える
• 写真は四角のまま置かない。必ずいびつな楕円にする。
• メッセージ本文は、尾の付いた雲形の白い吹き出しに入れる。
• 見出しの帯は、両端が折れたリボン形の手描き枠にする。
• ボタンはやや角ばった長方形にし、手描き線で縁取る。

Components

• エントリーボタン（button-entry）: 朱色の長方形に白い手描き文字と星を入れる。黒線で縁取り、右下に濃い色の影板を付ける
• 雲形吹き出し（speech-bubble）: 青い帯の上に置く白い雲形の吹き出し。中央に見出しと本文を入れ、周囲に丸写真を配置する
• リボン見出し（ribbon-heading）: 白いリボン形の手描き枠に、赤茶と黄の手描き文字を入れる。下に小さな英字を添える
• 特長カード（feature-card）: 丸数字付きの見出し、楕円写真とイラスト、短い説明文、右下の矢印リンクを順に並べる
• 見てみるリンク（link-arrow）: 小さな文字の右に、青い太矢印を付ける
• 黄色マーカー（marker-text）: 本文中の強調箇所の背景を黄色で塗る
• 応募ブロック（pinned-board）: 四隅に画鋲の丸を描いた白い紙の枠。旗アイコン付きの見出しと集合写真を入れる
• 丸数字（number-badge）: 見出しの上に置く小さな「その＋丸数字」

Do's and Don'ts

Do - 黄色の星・放射線・線画の人物を余白に散らし、賑やかさを保つ。 - 写真はいびつな楕円に切り抜き、イラストの人物を手前にはみ出させる。 - 見出しは語ごとに黄・青・赤茶で塗り分ける。 - 本文の要点は黄色マーカーで示す。 - 線はすべて濃いグレーの手描き風にそろえる。

Don't - グラデーションやドロップシャドウを使わない。 - 写真を角丸の四角でそのまま並べない。 - 朱色をボタン以外に広く使わない。 - 細い明朝体やクールな欧文で見出しを組まない。 - 黒やネイビーの濃い背景のセクションを作らない。

Page Structure

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

1. ヘッダー（ロゴとエントリー導線を常に見せる）: 白地の左にロゴ、右に朱色のエントリーボタンとハンバーガーメニューを置く
2. ファーストビュー（会社の世界観を一目で伝える）: クリーム地に放射線・旗・縦書きの大キャッチを置く。周りに星と線画の人物を描き、下端は黄色の街並みにする
3. 採用メッセージ（仕事の価値観を語る）: 青い帯に白い雲形の吹き出しを載せ、マーカー付きの本文を入れる。周囲に社員の丸写真を配置する
4. 会社まるわかり（特長4項目）（会社・人・制度・働き方への入口をつくる）: リボン見出しの下に、丸数字付きのカードを4つ置く。各カードは楕円写真、説明文、矢印リンクで構成する
5. 応募案内（募集要項へ誘導する）: 画鋲で留めた紙風の枠に、旗アイコン付きの見出しと社員の集合写真を入れる
6. フッターCTA・ナビ（エントリーと各ページへの回遊を促す）: 中央に朱色のエントリーボタンを置き、その下に手描き書体のナビリンクを並べる
7. フッター（会社情報を示す）: 区切り線の下にロゴ・住所・電話番号、枠線付きの小ボタン、コピーライトを置く

Imagery

• 黒の手描き線に黄色だけでベタ塗りした、漫画風の人物イラストを使う（ガッツポーズ・乾杯・走る姿など）。
• 星・放射線・旗・吹き出しなど、昭和の漫画やポスター風の記号を散らす。
• 社員写真は明るいオフィスで自然光で撮り、笑顔の少人数か全身の集合にする。
• 集合写真は白背景で切り抜き、全身を横一列に並べる。
• 街並みのシルエットは黄色一色のベタで描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 参照画像のうち一方は、特長4項目を2×2のグリッドで並べ、十字の区切り線で分けている。
• もう一方は、特長4項目を1カラムで縦積みし、横線で区切っている。
• 幅の広い画面では、ボード枠を中央に固定幅で置き、左右は白地にする。
• メッセージ帯は、狭い画面では吹き出しを縦長にし、写真を上下に回す。
• キャッチの縦書きは、どの幅でも維持する。

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