DESIGN.md — 白地×黒枠×ピンクのポップなエンタメ採用 LP（Pop Comic Frame Entertainment Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、力強い・インパクト、クール・先進的
• キーワード: 黒太枠・オフセット影・ドット装飾・袋文字見出し・写真コラージュ・ピンクアクセント
• 地の質感: フラットな白地に、網点のドット・斜線ストライプ・円を重ねたグラフィック調
• 形: 角丸なしの四角い枠と、下や右にずらした黒い影。装飾には円やカプセル型の斜線を使う
• 温度感: 明るく賑やかで、エンタメらしい高揚感がある

Colors

• 地は白で統一する。色面として使うのは採用情報ブロックの水色だけ。
• 枠線・影・本文は黒にそろえ、強いコントラストを出す。
• ピンクは装飾（ドット・斜線・円）に限って使い、文字には使わない。
• 強調したい語は赤文字にして赤い下線を付ける。
• セクションの欧文見出しは、セクションごとに黄・水色・ピンク・赤の色を変えて黒の袋文字にする。

Typography

• 欧文見出しは前後をダブルクォーテーションで囲み、すぐ下に小さな和文訳を添える。
• 本文はすべて太字で中央揃えにし、短い行で改行する。
• メッセージ文は、段落の間に空行1つ分のすき間を取る。
• 強調語は赤文字＋下線にし、締めのコピーでも同じ語を赤にして繰り返す。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。FV は横スクロールの写真コラージュ
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 70px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出しとメッセージ文はすべて中央揃えにする。
• 採用情報は水色のパネルにまとめ、その中にカードを縦に4枚並べる。
• パネルの左上と右下に、L字の黒線をはみ出させて置く。
• アーカイブはカルーセルにし、下にドット型のページャーを置く。
• 動画は16:9の埋め込みを縦に並べる。

Elevation & Depth

• ぼかし影は使わない。
• カードや写真には、黒いベタのオフセット影を右下に4〜6pxずらして付ける。
• ニュースカードは、下辺だけを太い黒線にして影の代わりにする。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角形に黒の太枠（2〜3px）とオフセット影を付ける
• セクション境界: 区切りは余白だけにし、線や波形は使わない
• 角丸は使わない。
• 装飾はピンクの網点ドット、斜めのカプセル型ストライプ、小さな円・十字にする。
• 矢印ボタンは、カードの右下に付く黒い小さな四角にする。

Components

• 枠付き写真（photo-collage-frame）: 黒い太枠とオフセット影を付けた写真を、互い違いにはみ出させて並べる
• 袋文字セクション見出し（section-title-outline）: 引用符付きの欧文を色付きの袋文字にし、下に和文の小見出しを添える
• ニュースカード（news-card）: 黒枠の白いカード。上に袋文字の日付、下にタイトルを置き、下辺を太い黒線にする
• 採用リンクカード（link-card）: 黒枠の白いカードで、欧文タイトルと和文を中央に置き、右下に黒い矢印ボックスを付ける
• 矢印ボックス（button-primary）: 黒い四角に白い細矢印。カードの右下角に固定する
• 水色パネル（recruit-panel）: 黒線で囲んだ水色のブロック。外側にL字のコーナー線を添える
• 赤下線強調（highlight-underline）: 強調語を赤文字にし、細い赤の下線を付ける
• アーカイブカルーセル（archive-carousel）: 黒枠の写真に年号の袋文字と白いラベルを重ね、下にドットページャーを置く

Do's and Don'ts

Do - 写真には必ず黒枠とオフセット影を付ける。 - ピンクのドットとストライプは、FVまわりに集中させて賑やかにする。 - 欧文見出しは、セクションごとに色を変えた袋文字にする。 - 本文は太字・中央揃えにし、短く改行する。 - カードは白地・黒枠・角丸なしでそろえる。

Don't - 角丸やぼかし影を使わない。 - ピンクを広い面や本文の文字に使わない。 - 細い明朝体で上品にまとめない。 - グラデーションの背景を使わない。 - 本文を左揃えの長文にしない。

Page Structure

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

1. ファーストビュー（エンタメ企業らしい世界観を一目で伝える）: 枠付き写真を上下2段に並べ、その間に極太の欧文ロゴとサブコピーを置く。周囲にピンクのドットと斜線を散らす
2. メッセージ（志望者の気持ちを動かす）: 太字の短い行を中央揃えで並べる。強調語は赤＋下線にし、最後に大きなコピーで締める
3. ニュース（最新のお知らせを示す）: 黄色の袋文字見出しの下に、黒枠のニュースカードを縦に並べる
4. 採用情報ナビ（募集要項・セミナー・フロー・FAQへ誘導する）: 水色パネルの中に、矢印ボックス付きのカードを4枚置く
5. アーカイブ（過去の採用コンテンツを見せる）: 写真カルーセルにし、年号とラベルを写真に重ねる
6. 動画（社員インタビューなどの動画を見せる）: 赤の袋文字見出しの下に、黒枠付きの動画埋め込みを縦に2本並べる

Imagery

• 写真はアーティスト・作品のビジュアルや、社員の集合写真のように色の強いものを使う。
• 写真は四角く切り抜き、黒枠と影を付けて、コラージュ風に少しずつずらして配置する。
• 装飾はピンクの網点の半円、斜めのカプセル型ストライプ、小さな円・十字にする。
• 小さなマスコットのイラストを、アクセントとして端に添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではFVの写真を上下2段に4枚ずつ並べ、ロゴを中央に置く。
• PCでは採用カード4枚を横一列に並べる。
• PCのニュースは横長の1行カードにし、日付とタイトルを左右に分ける。
• PCのアーカイブは中央を大きく見せ、左右の写真を少しのぞかせるカルーセルにし、矢印ボタンを付ける。
• PCでは動画を横に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 行書くと起動時に読み込まれる。