DESIGN.md — 青赤緑紫のキャラが躍るエンタメ採用 LP（Pop Character Entertainment Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感
• キーワード: 4原色・黒い太線・キャラクター・淡い水色の地・散らし装飾・欧文の大見出し
• 地の質感: フラットなベタ塗りと太めの黒線。グラデーションや影は使わない
• 形: 黒枠付きの角丸カード・角丸ボタン、星形・ギザ円・菱形・花形の小さな装飾
• 温度感: 明るく元気。白と水色の地で清潔感も残す

Colors

• 地は白と淡い水色を交互にし、セクションの区切りは黒線1本で示す
• 青・赤・紫・緑の4色は同じ強さで並べ、職種カードの色分けに使う
• 主CTAは必ずブランドの青で塗り、白文字にする
• 見出しのキーワードを1語ずつ4色で塗り分ける
• フッターだけ墨色にして、キャラを並べて締める
• 強調色はベタ塗りだけにし、グラデーションや半透明は使わない
• cta-banner は文字 #FFFFFF × 背景 #0295DA のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#027DB7、4.55:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #0196D9 のコントラスト比が 3.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#017DB5、4.56:1）を使う。
• badge-balloon は文字 #FFFFFF × 背景 #EC2E2E のコントラスト比が 4.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#EA1919、4.51:1）を使う。

Typography

• 欧文の大見出しの下に、和文の小さな見出しを添える
• 本文は太めにして中央揃え、短い段落に分ける
• FVのキャッチは1語ずつ色を変えて強調する
• 画面の左端に欧文のスローガンを縦書きで流す
• 英字のラベルは小さく、職種名の上に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は職種カード 2 列、インタビュー 3 列
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードとボタンは左右に約7%の余白をとって中央に置く
• セクションの境界は端から端まで黒線1本で区切る
• 職種カードは縦に並べ、間を約24px空ける
• インタビューはサムネイル左・テキスト右の横並びリストにする
• 装飾の図形はコンテンツの周りに不規則に散らす

Elevation & Depth

• ドロップシャドウは使わない
• 立体感は黒い1.5〜2pxの枠線で出す
• カードの四隅に小さな色ドットを打ち、ピンで留めた雰囲気にする

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 角丸8pxの長方形。黒枠を付けて隅に小さな丸アイコンを重ねる
• セクション境界: 直線の黒ライン
• カード・帯CTAは角丸12〜16pxで黒枠付き
• ボタンは右端に白丸のアイコンを入れたピル型
• 装飾は星形・ギザ円・菱形・四つ葉形を単色で塗る
• 吹き出し型のバッジは下に三角のしっぽを付ける

Components

• 説明会の帯CTA（cta-banner）: FV直下に置く青い角丸の帯。黒枠付きで、右下に下向き矢印の白丸を入れる
• 申込ピルボタン（button-primary）: 青のピル型。右端に外部リンクアイコン入りの白丸を置く
• もっと見るボタン（button-dark）: 墨色のピル型で欧文ラベル。右に白丸アイコンを付ける
• 受付中の吹き出しバッジ（badge-balloon）: 赤地・白文字・黒枠の吹き出し。カードの上辺に重ねる
• 告知カード（info-card）: 白地に黒枠の角丸カード。四隅に4色のドットを打つ
• 職種カード（position-card）: 色ごとに塗り分けた角丸カード。英字ラベル・職種名・一言を置き、右下に線画キャラと矢印の白丸を添える
• インタビューリスト項目（interview-item）: 左に黒枠角丸の写真、右に太字タイトルと青いハッシュタグ
• ENTRYの大型ボタン（entry-block）: 大きな欧文ENTRYを入れた青い角丸ブロック。周りに装飾図形を散らす
• 縦書きスローガン（vertical-slogan）: 画面左端に欧文のスローガンを縦に繰り返し流す細い帯

Do's and Don'ts

Do - 4色を均等に使い、どれか1色だけに偏らせない - カード・ボタン・写真には必ず黒い枠線を付ける - セクションごとに星・菱形などの小さな装飾を3〜6個散らす - 見出しは欧文の大見出しと和文の小見出しをセットで置く - キャラクターをカードの端からはみ出させて動きを出す

Don't - グラデーションや影で立体感を出さない - くすんだ色や暗い写真を主役にしない - 明朝体や細いウェイトの書体を使わない - 角のない直角カードを使わない - 装飾で本文の読みやすさを邪魔しない

Page Structure

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

1. ファーストビュー（ブランドの世界観と、エンタメへの想いを伝える）: 水色の地に色分けした大きなキャッチを置き、下に3色パネルとキャラのイラストを並べる
2. 帯CTA（説明会への申込に誘導する）: 青い角丸の帯に、黒枠・手指のイラスト・下矢印を付ける
3. メッセージ（会社の理念と求める人物像を語る）: 白地に2行の太い見出しと中央揃えの短い段落。周りに淡い線画カードと装飾を散らす
4. 説明会の案内（イベントの詳細を伝えて申込を促す）: 黒枠の白カードの上に赤い吹き出しバッジ。斜線で挟んだ小見出し・本文・ピル型ボタン・注釈を並べる
5. 募集職種（職種ごとの応募先に誘導する）: 水色の地に欧文の大見出しを置き、4色の職種カードを並べる
6. 社員インタビュー（働く人のリアルな姿を見せる）: 白地に欧文の見出しと線画イラスト。写真とタイトルのリスト、最後に墨色のボタン
7. オフィス写真（職場の雰囲気を見せる）: 横長の写真を黒線で区切って並べ、キャラクターを重ねる
8. エントリーCTA（最終的な応募に誘導する）: 青い大型の角丸ブロックに欧文ENTRYを置き、周りに4色の図形を散らす
9. フッター（ナビゲーションと関連リンクをまとめる）: 墨色の地に白いロゴ・リンク・コピーライト。下端にキャラ4体を並べる

Imagery

• 太い黒線で輪郭をとり、単色ベタで塗った、手足のある文字形キャラクターを描く
• マイク・カメラ・ギター・カチンコなど、エンタメの小道具をキャラに持たせる
• 背景のパネルには、淡い色の地に同系色の細い線で部屋や機材を描く
• 社員の写真は明るいオフィスで笑顔の人物を撮り、黒枠の角丸で切り抜く
• 装飾は星形・ギザ円・菱形・四つ葉形・小さな丸を4色で散らす
• 見出しのそばに、白地・黒線の手書き風の小さなイラストを添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではFVを左にイラスト・右にキャッチの2分割にする
• PCでは帯CTAを小さくしてFVの右下に重ねる
• 職種カードはPCで2列、インタビューは3列のカードにする
• メッセージの本文はPCで行を長くし、中央揃えを保つ
• 左端の縦書きスローガンはPCでも残す
• 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 行書くと起動時に読み込まれる。