DESIGN.md — 生成り地×原色コラージュのエンタメ新卒採用 LP（Pop Collage Entertainment Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、クール・先進的、かわいい、情報量多め・訴求型
• キーワード: 生成り地・幾何学コラージュ・原色カードバナー・太い英字見出し・矢印ピルボタン・ざらついたノイズ質感
• 地の質感: 面にうっすらノイズ粒子をのせたざらつき。グラデーション球やホログラム片で奥行きを出す
• 形: 角丸カード（約14px）、円・半円・三角の幾何学パーツ、ピル型ボタン
• 温度感: 暖かい生成りの地に、冷たい青と温かいピンク・黄を同じ強さで混ぜる

Colors

• 地は生成り #FFFCF3。FV と締めの CTA 帯だけ一段濃いベージュにする
• 文字は黒に近いチャコールを使う。純黒は使わない
• コンテンツカードは、ピンク・青・黄・紺の単色にノイズを足した面で色分けする
• 主 CTA は紺の塗り。次点はピンクの塗り。3番手は白地に線のピルボタン
• 技術系のまとまりは明るい青の大きな角丸パネルで囲み、文字を白にする
• 見出しラベルの前の小さな印は、紺と青の二色の丸を重ねたもの
• button-secondary は文字 #F0F4FF × 背景 #EC3B71 のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DA1551、4.54:1）を使う。

Typography

• 見出しは極太。本文も太字で、全体を重く元気にする
• セクション見出しは、太い大文字の英字と、その下に小さな日本語ラベルを組み合わせる
• リード文は短い行を左揃えで重ね、行間を 2.0 と広く取る
• バナー内の見出しは中央揃えの白文字。1〜2 行に収める
• 一部の語を、白抜き＋黒縁の袋文字にして遊びを出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。人物紹介は横スクロールのカルーセル
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右に約 19px の余白を取って全幅近くに並べる
• カード同士の間は約 10px と詰めて連続感を出す
• リストは上下の細線で区切り、右端に丸い矢印ボタンを置く
• FV はコピーの下にコラージュを大きく広げる
• 背景に、太く淡い曲線の帯を薄く流す

Elevation & Depth

• 影はほぼ使わず、平面で構成する
• 奥行きは、色面の重なりとコラージュパーツの重なりで出す
• Cookie バーにだけ、上方向へ弱い影をつける

Shapes

• 角丸: 小 6px ／ 中 14px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: カードは角丸の長方形。事業紹介は円形に切り抜き、横に幾何学パーツを重ねる
• セクション境界: 直線の切り替えが基本。人物紹介の背景は大きな円弧のグラデーションで区切る
• 矢印アイコンは白いピルの中に入れ、カードの右下に置く
• 番号は、枠付きピルに入った「#01」形式
• パネルやカードは全て角丸。直角の箱は使わない

Components

• 主 CTA ピルボタン（button-primary）: 紺の塗りに白の太字。右端に外部リンクのアイコンを置く
• サブ CTA ピルボタン（button-secondary）: ピンクの塗りに白文字。主 CTA のすぐ下に置く
• 一覧ボタン（button-outline）: 透明な地に細い黒線。中央に文字、右に矢印
• カラーバナーカード（color-banner-card）: 単色＋ノイズの角丸面。白い大見出しと小さな副題を置き、幾何学パーツや図を散らし、右下に白い矢印ピル
• 英字＋和文ラベル見出し（section-heading）: 太い英字の大文字の下に、二色の丸の印と小さな日本語ラベルを並べる
• 矢印リスト行（list-row-arrow）: 上下の細線で区切った行。左に青い丸点か円形の画像、右に枠付きの矢印ピル
• 社員カルーセルカード（people-card）: 縦長の角丸写真に「#番号」のピル。下にタイトル、オレンジの職種バッジ、所属を置く。ドットのページ送り付き
• 職種バッジ（badge-role）: オレンジの角丸ラベルに白の太字
• 吹き出しラベル（speech-label）: 紺または青のピルに下向きの尾をつけ、見出しの上に添える

Do's and Don'ts

Do - 円・半円・三角・ホログラム球・写真の切り抜きを重ねたコラージュで画面を賑やかにする - カードごとに色を変え、ピンク・青・黄・紺を順に並べる - 矢印ピルのアイコンは、全カードで同じ位置（右下）に置く - 面の色には微細なノイズを足して、ざらつきを出す - 英字の大見出しと小さな和文ラベルの組み合わせを、どのセクションでも守る

Don't - 明朝体や細いウェイトを使わない - 地を純白にしない（生成りを保つ） - 強いドロップシャドウや立体的なボタンにしない - カードを直角にしない - 原色を淡いパステルに置き換えない

Page Structure

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

1. ファーストビュー（メッセージと世界観を一度に伝える）: ベージュの地に、3 行の極太コピーを左揃えで置く。その下に大きな幾何学コラージュを広げる
2. リードメッセージ（企業の想いを語る）: 太字の短い行を左揃えで重ね、行間を広く取る。周りに装飾パーツを散らす
3. ブランド動画（雰囲気を映像で見せる）: 全幅の動画。中央に白い再生ボタン、左下に英字コピーと説明文、一時停止ボタンを置く
4. コンテンツ導線カード（会社理解のコンテンツへ誘導する）: 大きなコラージュカード 1 枚と、ピンク・青・黄の単色カードを縦に並べる
5. 事業紹介（事業の柱を見せる）: 英字見出しの下に、円形画像付きの矢印リストを 3 行並べる
6. 仕事図鑑バナー（職種理解へ誘導する）: 青系のコラージュバナー。人物写真を角に配置する
7. プロジェクトストーリー（チームの実例を見せる）: 番号付きの角丸集合写真の下に、チーム名とタイトルを置き、線で区切る
8. 社員紹介（人の魅力を伝える）: 円弧グラデーションの背景に、横スクロールの縦長カードとドットのページ送り、一覧ボタンを置く
9. 新入社員バナー（若手のリアルへ誘導する）: ピンクのコラージュバナー
10. エンジニア採用（技術職へ訴求する）: 明るい青の大きな角丸パネル。紺のバナーと、サムネイル付きの記事リストを白文字で並べる
11. 採用情報（募集要項などへ誘導する）: 紺のカードを 3 枚と、青い丸点付きのリンクリストを置く
12. 動画チャンネル（動画コンテンツへ誘導する）: 水色の地に、NEW バッジ付きの動画サムネイル、紺の大見出し、白いピルリンクを置く
13. 締めの CTA（エントリーを促す）: ベージュの地に FV コピーを再掲し、エントリーなどのリンクリストを置く
14. フッター（サイト内を案内する）: ＋で開閉するアコーディオンのナビと、紺・ピンク・白線のピル CTA を縦に 3 つ並べる

Imagery

• 円・半円・三角・市松・ギザギザ線などの幾何学パーツを、原色とくすみ色で配置する
• 虹色のホログラムやグラデーションの球を、半透明で重ねる
• 人物写真はモノクロ化や円形の切り抜きでコラージュに混ぜる
• 社員写真は明るい室内で、自然な笑顔のポートレートにする
• ゆるい表情のキャラクターや、ハッシュ記号のオブジェを差し色にする
• 面に微細なノイズのグレインをかける
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコピーを左、コラージュを右上に置く
• PC では単色カード 3 枚を横並びにする
• 事業紹介は PC で 3 カラムの円形画像カードにする
• 社員カードは PC で 5 枚ほど並べて見せる
• PC のヘッダー右上には、ピル型の小さなボタンを 3 つとメニューを置く
• フッターは 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 行書くと起動時に読み込まれる。