DESIGN.md — 黄×赤×水色のポップコミック新卒採用 LP（Pop Comic Multicolor Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、力強い・インパクト、レトロ、情報量多め・訴求型
• キーワード: 原色ポップ・太い黒フチ・市松模様・うねる波帯・キャラクターイラスト・コミック吹き出し
• 地の質感: ベタ塗りのフラットな面に方眼や市松のパターンを重ねる。グラデーションは使わない
• 形: 上が半円のアーチ型カード、ギザギザ円や雲形の吹き出し、角丸の大きいパネル、ピル型の黒いボタン
• 温度感: 暖色寄りの高彩度。黄と赤が主役で、水色・緑・紫を差し色にして賑やかにする

Colors

• セクションごとに地の色を黄・赤・紫と切り替え、境目には水色・緑・白・赤の波帯を重ねる
• 面や文字には必ず 3〜4px の黒フチを付けて、色同士をはっきり分ける
• ボタンは黒地に白文字のピル型で統一し、多色の中で目立たせる
• 白いカードや白い吹き出しの中に本文を置き、読みやすさを確保する
• 締切バッジだけは赤地に黒文字の小さなラベルにする
• 中間色やグラデーションは使わず、ベタ塗りの原色だけで構成する

Typography

• 見出しは極太のディスプレイ書体にし、白文字に黒フチと黒い影を付ける
• 英字の大見出しの下には、薄いグレーの小さなカナを添える
• 背景には巨大な文字を半透明でループ配置し、装飾として使う
• 縦の帯には英字コピーを繰り返し流し、マーキーのように見せる
• 本文は中央揃えで、太めのゴシックをゆったりした行間で組む
• 見出しの中の強調語は色を変える（水色・黄・緑）
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは 2 列のグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 18px（375px 幅換算）
• 職種カード・情報カードは SP でも 2 列に並べる
• メッセージは方眼地の白パネルに入れ、四辺を黄の太枠で囲む
• アンケートは吹き出しを左右交互に重ね、コラージュ風に並べる
• ボタンは中央に配置し、幅は画面の約 40%
• キャラクターのイラストを枠からはみ出させて、躍動感を出す

Elevation & Depth

• 影はぼかさない。黒のベタ影を右下に 4〜6px ずらす
• カードや吹き出しは黒フチ＋ベタ影で浮かせる
• ドロップシャドウのような柔らかい影は使わない

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 上が半円のアーチ型に切り抜き、中を市松模様の地にする
• セクション境界: 多色の太いうねり波帯、市松模様の帯、上だけ角丸のパネル
• 吹き出しはギザギザの円形・雲形・角丸の四角を混ぜて使う
• 輪郭線は 3〜4px の黒で統一する
• セクションの上端は大きな角丸（32px 程度）にする
• 情報カードは白地の角丸 16px に、右下へ黒い矢印のピルを置く

Components

• 黒ピルボタン（button-primary）: 黒地に白い英字ラベルと右矢印。中央に置く
• エントリーボタン（button-entry）: 黒地に白フチの大きなピル。上に赤い締切バッジを重ねる
• 締切バッジ（badge-deadline）: 赤地に黒文字の小さなラベル。ボタン上端にかぶせる
• アーチ型職種カード（card-arch）: 色違いの太枠に市松地の人物イラスト。下部に黒フチの太い見出しを置く
• アンケート吹き出し（speech-bubble）: 紫・水色・赤・緑の吹き出しに問いを書き、白い小箱に回答を入れる
• 情報カード（card-info）: 白地に黒フチ。見出し、アイコンのイラスト、説明文、右下の矢印ピルの順に並べる
• フチ付き英字見出し（heading-outline）: 白または赤の極太英字に黒フチと黒い影。下に小さなカナを添える
• 英字ループ帯（marquee-band）: 縦横の細い帯に、英字コピーを黒地や水色地で繰り返し流す
• 固定ヘッダー（header-bar）: 黒地。左にロゴ、右にエントリー・マイページ・ハンバーガーメニューを縦線で区切って並べる

Do's and Don'ts

Do - 原色はベタ塗りにし、すべての面に黒の太い輪郭線を付ける - セクションの境目は波帯や市松模様で賑やかに区切る - 目と手足の付いた小物キャラクターを各所に散らす - 数字は極太の大きな文字で見せ、横に小さく単位を添える - 黒ピルボタンでページ全体のボタンを統一する

Don't - グラデーションや写真のリアルな質感を使わない - 細い線や淡いパステル調だけの配色にしない - ぼかした影や半透明のガラス表現を使わない - 本文を色付きの柄の上に直接置かない（白い箱に入れる） - 明朝体のような上品な書体を使わない

Page Structure

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

1. ヘッダー（エントリー導線を常に見せる）: 黒の帯にロゴ、締切付きのエントリー、マイページ、メニューを並べる
2. ファーストビュー（世界観とキャッチを一目で伝える）: 多色の波紋が同心円状に広がる中央に白い雲形を置き、極太のキャッチを入れる。周りを人物とキャラクターで囲み、下端を市松の帯にする
3. メッセージ（採用への思いを伝える）: 黄の太枠で囲んだ方眼地の白パネルに、中央揃えの短文を 6 行。左右の縦帯に英字を流す
4. 職種紹介（職種の幅を見せ、インタビューへ誘導する）: 赤地に、4 色のアーチ型カードを 2×2 で並べ、下に黒ピルボタンを置く
5. 装飾の帯（セクション間に変化をつける）: 巨大なキャッチ文字を背景に流し、キャラクターを上に乗せる
6. 新入社員アンケート（社員のリアルな声を数字と言葉で伝える）: 黄の方眼パネルに、色と形の違う吹き出しを重ね、数字・円グラフ・回答の抜粋を見せる
7. インフォメーション（会社概要・募集要項などへ誘導する）: 波紋の背景に、白い情報カードを 2×2 で並べ、それぞれにアイコンのイラストを入れる
8. 関連リンク（外部メディアや過去の特設サイトへ誘導する）: 紫地に、黒フチのバナーを並べる。下に大きな英字を透かして置く
9. フッター（サイト内の導線と最終 CTA）: 黄地の角丸パネル。ロゴ、Instagram の赤ピル、2 列のリンク、エントリー・マイページの黒ピル、規約リンクを並べる

Imagery

• 人物は太い黒の主線とフラットなベタ塗りで描く、90 年代コミック調のイラストにする
• 人物の背景は、パステルの市松模様をアーチ型の中に敷く
• マイク・スピーカー・ゲーム機などの小物に、目と手足を付けたキャラクターにする
• アイコンは、ビル・カバン・カレンダーなどを多色のフラットイラストで描く
• 星・音符・きらめきの小さな装飾を余白に散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では職種カードを 4 列に並べる
• PC ではアンケートの吹き出しを 3 列のコラージュに広げる
• PC では情報カードを 4 列に並べる
• PC ではフッターのリンクを横並びにし、ボタンを右端に縦に積む
• FV は 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 行書くと起動時に読み込まれる。