DESIGN.md — 白黒×水色の漫画コマ割り新卒採用LP（Manga Panel Monochrome Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 親しみ・手作り感、ポップ・元気、シンプル・ミニマル
• キーワード: 漫画・コマ割り・線画・スクリーントーン・モノクロ+水色・群像
• 地の質感: 白黒の線画にドットのスクリーントーンや集中線を重ねた、印刷漫画のような質感。
• 形: 黒の細線で囲った長方形のコマが基本。写真は角を少し丸めた枠に入れる。
• 温度感: グレーが主体のクールな配色。そこに手描きの表情と吹き出しで人の温かみを足す。

Colors

• 基本は白・グレー・黒の無彩色。セクションごとに地のグレーの濃さを変えて区切る。
• 差し色はイラスト内の水色だけにする。UIパーツには水色を使わない。
• 赤はメインキャッチの文字だけに使う。
• ラベルは黒地に白文字の帯にする。
• SPでは画面の左右端を黒い縁で囲み、漫画の枠のように見せる。

Typography

• セクション見出しは、太い大文字の英字と小さな和文サブを中央か左に揃えて置く。
• 本文は小さめのサイズで行間を広く取り、短い行で改行して詩のように見せる。
• ラベルと人物名には手書き風の書体を使い、漫画らしさを出す。
• メインキャッチだけを赤の太字にし、縦書きで配置する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。人物と作品紹介は横スクロールのカルーセルにする。
• 本文ブロックの幅: 画面幅の約 54%
• 余白: セクション間 60px、基本単位 8px、カード内 0px（375px 幅換算）
• セクションの境目は全幅の黒い細線で区切る。
• カードは写真＋黒帯ラベル＋2行の説明で構成し、中央揃えで縦に積む。
• 見出しの周りに手描きの擬音記号や吹き出しキャラを置く。
• カルーセルの下にドットのページャーと枠線ボタンを置く。

Elevation & Depth

• 影は使わない。奥行きは黒い線と地のグレーの濃淡で出す。
• 人物の切り抜き写真をコマ枠からはみ出させて立体感を出す。

Shapes

• 角丸: 小 0px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は黒い細枠＋小さい角丸の横長枠に入れる。人物は切り抜き、背景には集中線やトーン。
• セクション境界: 全幅の黒い細い直線
• ラベルは角丸なしの黒帯にする。
• ボタンは白地に黒い1px枠、角丸は約8px。
• メッセージは白い長方形のコマに黒枠を付けて入れる。

Components

• 英字＋和文見出し（section-heading）: 太い欧文の大見出しの下に和文サブを添え、周囲に手描きの記号を置く。
• 黒帯ラベル（label-band）: 写真カードの下に置く、手書き風の白文字ラベル。
• 写真コマカード（photo-card）: 黒枠＋角丸の写真に、トーンや集中線の背景を合わせる。
• 枠線ボタン（button-outline）: 一覧表示用の白地黒枠ボタン。
• 手描き吹き出しキャラ（speech-bubble）: セクションの角に置く線画キャラと縦書きの吹き出し。
• メッセージコマ（message-panel）: イラストの上に重ねる白い黒枠ボックス。中に左揃えのリード文を入れる。
• ドットページャー（carousel-dots）: 黒丸を並べ、現在位置は白抜きの丸にする。
• 漫画本型バナー（qa-banner）: 見開きの漫画風イラストに吹き出しで導線を入れ、下に本棚のイラストを並べる。

Do's and Don'ts

Do - イラストは黒の線画＋水色1色＋ドットトーンだけで描く。 - セクションは黒い細線とグレーの濃淡で区切り、コマ割りのように見せる。 - 見出しの周りに擬音記号（!!・キラキラ・集中線）を手描きで添える。 - 写真には集中線やトーンの背景を合わせ、漫画の世界に馴染ませる。

Don't - グラデーションや強い影を使わない。 - 水色と赤以外の彩度の高い色を足さない。 - ボタンを塗りつぶしのカラーボタンにしない。 - 角丸を大きくしてやわらかくしすぎない。

Page Structure

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

1. ファーストビュー（世界観を伝え、メインキャッチを見せる）: 社員の群像を漫画で全面に描き、中央に縦書きの赤いキャッチを白枠で置く。
2. メッセージ（応募者への呼びかけ）: イラストの上に白いコマを重ね、短い行のリード文を並べ、最後に大きめの一文で締める。
3. 社員紹介（個人のストーリーへの導線）: 切り抜き人物＋集中線の背景のカルーセル。名前・ふりがな・黒帯の職種ラベル・一覧ボタンを付ける。
4. チーム紹介（チームの雰囲気を伝える）: 淡いグレー地に集合写真カード＋黒帯ラベル＋2行の説明を縦に積む。
5. 座談会（世代や属性ごとの対談への導線）: 中間グレー地に写真カードを3つ並べ、吹き出しキャラを添える。
6. 仕事紹介（実績を見せる）: 黒枠の作品写真を横スクロールで並べ、ドットのページャーを付ける。
7. Q&A導線（よくある質問への誘導）: 見開きの漫画本イラストの中の吹き出しに導線を入れ、下に本棚のイラストを並べる。
8. フッターキャッチ（メッセージの余韻を残す）: 白地に赤いキャッチを横書きで1行置く。

Imagery

• 人物を太めの黒い主線で描き、服や髪の一部だけを水色で塗った群像漫画にする。
• 背景にドットのスクリーントーン、集中線、キラキラ記号を使う。
• 社員写真は白背景の切り抜きで、ポーズのある明るい表情のもの。
• 縦書きの手描き吹き出しを持つキャラを、各セクションの端に置く。
• 本棚や漫画本など、物語や読み物を連想させるモチーフを使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは、FVのイラストとメッセージを1枚の大きなコマにまとめ、背景には薄い漫画柄を敷く。
• PCでは、チームは2列、座談会は3列の横並びにする。
• PCでは、社員紹介は写真の右にプロフィール文と詳細リンクを置く横型カードにする。
• SPの左右の黒縁は、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 行書くと起動時に読み込まれる。