DESIGN.md — 紫×ターコイズの漫画風ポップ採用 LP（Manga Pop Magenta Teal Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、力強い・インパクト、クール・先進的
• キーワード: 漫画風・吹き出し見出し・黒帯テロップ・色面切替・線画イラスト・立体英字
• 地の質感: ドット・方眼・市松の薄いパターンと、褪色させたモノクロ漫画写真を背景に敷く
• 形: 大角丸の重ねカード、ピル型ボタン、ギザギザ吹き出し、楕円形の切り抜き、波形の境界
• 温度感: 高彩度で明るく、エネルギッシュ。黒紫で全体を締める

Colors

• セクションごとに紫・ターコイズ・青・白の地を交互に切り替える
• 本文は必ず黒紫の帯に白文字で載せる
• 英字の大見出しは地色と補色の関係にする（ターコイズ地なら紫、白地ならターコイズか紫）
• ボタンは白地に黒紫の文字を置き、下へずらした紫かターコイズの影を付ける
• 最終 CTA だけは黒紫の面にして反転させる
• 写真は彩度を落とした紫系モノトーンで背景に敷く
• card-member は文字 #FEFEFF × 背景 #1EBCBB のコントラスト比が 2.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#158382、4.53:1）を使う。

Typography

• 英字の大見出しの上に、和文の吹き出しラベルを中央で重ねる
• 本文は 1 行ずつ黒帯で包み、行の間に地を見せる
• 本文は中央揃えで短く改行する
• ボタンは小さい和文と大きい英字の 2 段にする
• PC では縦書きの帯見出しを使ってよい
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、社員カードは縦に並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションの境界は全幅の色面で切り替える
• カードの左右には 6% ほどの余白を残す
• 見出しはセクション上部の中央に置き、カードの上端に少し食い込ませる
• ボタンは幅 75% 前後で中央に置く
• 社員カードは上半分をイラスト、下半分を色面にする

Elevation & Depth

• ぼかしの影は使わない
• ボタンは右下へ 6px ずらした単色の影を付ける
• カードは枠線付きの板を 2〜3 枚ずらして重ね、紙の束のように見せる
• 英字見出しは単色の影をずらして立体文字にする

Shapes

• 角丸: 小 0px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 大角丸の四角、横長の楕円、直角の枠付き四角
• セクション境界: 基本は直線。座談会は大きな円形の色面、フッターは波形
• 吹き出しラベルは楕円かギザギザの爆発形にし、黒紫の枠を付ける
• テロップ帯とタグは角丸なしの矩形にする
• カードの片側の角だけを大きく丸める
• 背景に大きな頭文字の透かしを入れる

Components

• もっと読むボタン（button-readmore）: 白のピル型ボタン。黒紫の枠と、紫かターコイズのずらし影を付ける。文字は和文小と英字大の 2 段
• 反転 CTA（button-primary）: 黒紫のピル型ボタン。白い英字に紫のずらし影を付ける
• 英字＋吹き出し見出し（heading-burst）: 立体の英字大見出しの上に、白い楕円かギザギザの吹き出しに入れた和文ラベルを重ねる
• 黒帯テロップ本文（telop-text）: 1 行ごとに黒紫の帯を敷き、白文字を載せる
• 重ね紙カード（card-stack）: 薄い紫モノトーンの写真を敷いたカード。グレーの枠を重ねてずらし、片側の角を大きく丸める
• 社員カード（card-member）: 黒枠の四角いカード。上は線画の人物、下はターコイズの面に名前と白丸の矢印を置く
• 入社年タグ（tag-year）: 黒紫の矩形に白文字。カードの境目の左端に置く
• 縦書き帯コピー（vertical-band）: 紫の縦帯に白文字を縦書きし、人物の横に並べる

Do's and Don'ts

Do - 色面はベタ塗りの高彩度にし、セクションごとに切り替える - 本文はすべて黒帯のテロップにする - 人物は太めの黒線とフラットな塗りのイラストで描く - 英字見出しと和文の吹き出しは必ずセットで使う - 背景にドット・方眼・市松の薄いパターンを敷く

Don't - グラデーションやぼかしの影を使わない - 本文を地の上に直接置かない - 実写の人物写真を主役にしない - パステル寄りの淡い配色にしない - 明朝体を使わない

Page Structure

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

1. ファーストビュー（扱う作品の世界観を一目で伝える）: 散らばったコミックの写真を全面に敷く。中央に白い帯のキャッチと、採用年度を入れた枠付きラベルを置く
2. メッセージ（仕事への覚悟を語る）: 紫の地に英字見出しと楕円の吹き出しを置く。黒帯テロップの短文を中央揃えで並べ、背景に大きな頭文字の透かしを入れる
3. 作品ギャラリー（手がけた作品を見せる）: 淡グレーの地に、書影を少し傾けて横に並べる
4. 会社紹介（会社の目的を伝える）: ターコイズの地に重ね紙カードを置く。中にテロップ本文と READ MORE ボタンを入れる
5. 仕事紹介（業務の流れへ誘導する）: 同じターコイズの地で、右寄せの黒帯見出しを付けた写真カードを置く
6. 社員インタビュー（先輩社員を紹介する）: 市松パターンの地に、線画の人物カードを縦に 3 枚並べる
7. 座談会（ベテラン社員と若手社員の対談へ誘導する）: 青の地に紫とターコイズの大きな円の色面を置く。中に楕円のイラストとボタンを入れる
8. 代表メッセージ（トップの言葉を伝える）: 方眼の地に、人物イラストと紫の縦書き帯コピーを置き、黒紫の反転 CTA を付ける
9. フッター（ブランドで締める）: ターコイズの面から黒紫へ波形で切り替え、白抜きのロゴを置く

Imagery

• 人物は黒の主線にフラットな 2〜3 色の塗りを使うシンプルな線画にする
• 人物イラストの背景には、トーンや集中線などの漫画的な処理を淡く入れる
• 写真はモノクロ〜紫寄りに褪色させ、背景の質感として使う
• 装飾にはドット・ストライプ・幾何学の小片を半透明で散らす
• 書影は少し傾け、影を付けて並べる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では FV を角丸の枠に収め、背景に巨大な英字の透かしを入れる
• PC のメッセージは左に紫の帯、右に書影を置く 2 分割にする
• PC の社員カードは横 3 列に並べる
• PC の座談会は 2 つの円を横に並べる
• 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 行書くと起動時に読み込まれる。