DESIGN.md — 白黒漫画コマ割りの製造業採用 LP（Monochrome Manga Panel Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 力強い・インパクト、レトロ、親しみ・手作り感
• キーワード: 漫画コマ割り・モノクロ網点・太い黒枠・吹き出し・赤の差し色・ハッチング見出し
• 地の質感: 網点スクリーントーン、ペン画の線、斜線ハッチングを使う。紙のような生成り地。
• 形: 角丸のない長方形のコマに黒の太枠をつけ、オフセットした黒い影を落とす。吹き出しは縦長の楕円。黒丸の矢印ボタンを置く。
• 温度感: 白黒中心だがやや暖かい生成りの地。熱量のある少年漫画の空気感。

Colors

• 地は生成りの一色で通す。コマの中だけを白にする。
• 線・文字・丸ボタンは墨黒で統一する。
• 赤は ENTRY と TOPICS ラベルにだけ使う。
• 写真やイラストは白黒の網点に変換し、主題の部品だけを朱・黄・ミント・薄紫で部分的に彩色する。
• セクション番号と区切り線は淡い水色で控えめに入れる。

Typography

• 見出しは極太ゴシックにして、中に斜線ハッチングかかすれ質感を入れる。
• 本文はすべて太字寄りのゴシックで、漫画の写植のような印象にする。
• 吹き出しの文字は縦書きにし、末尾に小さな▶をつける。
• セクションのラベルは「欧文細字＋手書き風の数字」の組み合わせで右寄せにする。
• ENTRY は赤の極太欧文を大きく置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。コマは左右にずらして段違いに配置する。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• コマは画面幅の 70〜75% にし、左寄せと右寄せを交互に置く。
• 社員紹介は横スライダー。左右に隣のカードを少しはみ出させる。
• メインのイラストは全幅で裁ち落とす。
• セクション冒頭には細い水色線、右端の番号ラベル、見出しの順に置く。

Elevation & Depth

• ぼかした影は使わない。
• コマやボタンには右下へ 4px ずらした黒のベタ影をつける。
• コマ同士を少し重ねて奥行きを出す。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 黒の太枠で囲んだ長方形のコマにする。イラストの機械や人物は枠からはみ出させる。
• セクション境界: 直線の区切りは使わない。細い水色の横線と小さな▼を置き、余白で区切る。
• 枠線は 2〜3px の墨黒にする。
• 丸を使うのは矢印ボタンと吹き出しだけ。
• 斜めの境界や波形の境界は使わない。

Components

• コマ型リンクカード（manga-panel-card）: 黒の太枠とベタ影をつけた長方形。左に網点の絵、右に見出しと黒丸の矢印を置く。
• 黒丸矢印ボタン（arrow-circle）: 直径 30px の黒丸に白の▶を入れる。カードの右下に配置する。
• 縦長吹き出しリンク（speech-bubble）: 白地に黒線の縦楕円。中に縦書きの見出しと▶を入れ、コマに重ねる。
• ハッチング見出し（hatched-heading）: 極太文字の中に斜線を入れたグレーの見出し。角に十字のトンボ飾りを置く。
• 社員紹介スライドカード（staff-card）: 黒枠の写真の下端に白い名前ラベルを重ねる。その下にひとことと、入社年＋罫線＋矢印を並べる。
• スライダー送り（slider-pager）: ベタ影つきの四角い ◀▶ ボタンで「現在/総数」の表示を挟む。
• お知らせボックス（topics-box）: 上部に灰帯がある黒枠の箱。赤の欧文ラベル、日付と件名、濃グレーの一覧ボタンを入れる。
• エントリーブロック（entry-block）: 黒の太枠で囲む。上段に赤の大きな欧文と黒丸の矢印、下段を 2 分割したサブリンクにする。

Do's and Don'ts

Do - 写真は白黒のペン画風・網点風に加工してから使う。 - コマは段違いに配置し、吹き出しを重ねて漫画のページのように見せる。 - 枠と影は墨黒のベタだけで作る。 - 赤は ENTRY などの重要な行動に限って使う。 - セクションには番号ラベルをつけ、連載の章のように並べる。

Don't - フルカラーの写真をそのまま大きく載せない。 - 角丸カードやぼかした影を使わない。 - 赤を見出しや装飾に多用しない。 - グラデーションの背景やパステル調の地色を使わない。 - 細い明朝で上品にまとめない。

Page Structure

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

1. ファーストビュー（人物群像のイラストと大きなコピーで印象を残す）: 生成り地に白黒漫画の社員集合絵を置き、中央に極太コピーと欧文サブを重ねる。左端に縦書きの SCROLL を入れる。
2. お知らせ（最新情報を伝える）: 黒帯の上に、黒枠のボックスを少しかぶせて配置する。中身は赤ラベル、日付と件名、濃グレーのボタン。
3. 社員紹介（働く人の顔とひとことで親近感を出す）: 網点背景の写真カードを横スライダーで見せ、四角いページャーをつける。
4. 仕事紹介（業界と職種をわかりやすく伝える）: 全幅の機械イラストを置き、部品だけに色をつける。集中線の上に縦書きの問いかけを入れ、下に段違いのコマカードを 2 枚並べる。
5. 会社紹介（会社・環境・数字への導線をつくる）: 社屋のペン画にコマを重ね、吹き出しをリンクにする。端に「!?」のキャラクターを添えた小さなコマを置く。
6. エントリー CTA（応募と説明会へ誘導する）: 水色の欧文ラベルの下に、赤 ENTRY の黒枠ブロックと 2 分割のサブリンクを置く。

Imagery

• 人物・機械・建物は、写真をトレースした白黒のペン画風にして、網点トーンで陰影をつける。
• 主役の部品だけを朱・黄・ミント・薄紫でベタ塗りし、目を引くようにする。
• 集中線、網点のグラデーション、十字のトンボを装飾に使う。
• 社員の写真はバストアップにし、網点や水玉の背景に切り抜いて黒枠に収める。
• デフォルメした小さなキャラクターの「!?」コマで遊び心を足す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダー右上に赤枠の ENTRY ボタンを常に表示する。
• PC の社員紹介はカードを 5 枚並べて見せ、ページャーは見出しの右に置く。
• PC のお知らせは横長 1 行のバーにする。
• PC の会社紹介は、左に大きな社屋の絵、右にコマと吹き出しを縦に重ねる 2 カラム構成にする。
• PC のエントリーは横並びにする（左に ENTRY、右にサブリンク 2 段）。

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