DESIGN.md — 方眼紙×紫黄ポップの採用ドラマ LP（Retro Pop Grid Recruitment Drama LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、レトロ、クール・先進的、信頼・誠実
• キーワード: 方眼紙・レトロ OS ウィンドウ・幾何学タイル・惑星オブジェクト・ドラマ仕立て・濃紺の企業色
• 地の質感: 白地に薄いグレーの方眼グリッド。写真には黒い細線の枠と、ずらした色ベタの影を付ける。
• 形: 四角を基本に、円・四分円・三角の幾何学パネルを組む。ウィンドウ上部に3つのドットを付ける。
• 温度感: 前半はビビッドで賑やか、後半は淡いブルーグレーで落ち着いたクールな印象。

Colors

• 地は白と方眼グリッドにする。セクション見出しの帯だけ淡いブルーグレーを敷く。
• 紫・黄・ミントは装飾タイルと写真のずらし影に限って使う。本文の色には使わない。
• 企業の濃紺はヘッダー、フッター、見出しラベル、リンクアイコンに集中させる。
• 前半のドラマパートはビビッド、後半の採用パートは濃紺と淡色にして、トーンを切り替える。
• 手書き風の大見出しはマゼンタかミントで書き、白フチを付ける。

Typography

• 英字見出しは大文字にし、字間を広げる。左右に小さなアイコンを添える。
• 日本語本文は字間を広めにとり、短い行で改行を多くする。後半は中央揃えにする。
• キャッチ見出しは斜体のディスプレイ書体で書き、白フチと影を付ける。
• 「あらすじ」などの短いラベルは、1文字ずつ色違いの四角マスに入れる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC も中央の細い 1 カラム（約 340px 幅）にし、左右は装飾背景にする。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• コンテンツ列の左右に細い縦の罫線を引き、方眼地の列として見せる。
• セクションの頭に、全幅で淡色の英字見出し帯を置く。
• 写真は列からはみ出させて斜めに重ね、リズムを作る。
• 惑星などのオブジェクトは列の端にまたがるように浮かべる。

Elevation & Depth

• 影はぼかさない。紫や黄のベタを右下へ 8〜12px ずらして敷く。
• ウィンドウ枠は 1px の黒線のみにする。
• 惑星オブジェクトだけは立体的なリアル表現でよい。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角に切り抜き、上部に 3 ドット付きのタイトルバーを付けたウィンドウ枠に入れる。動画は縦長 9:16 にする。
• セクション境界: 直線の罫線と、淡色の見出し帯で区切る。
• カードの角は直角を基本にする。角の一部を折り返しや斜めのカットにしてもよい。
• 背景には円・四分円・三角を組み合わせた幾何学タイルを使う。
• 外部リンクカードだけは大きめの角丸にする。

Components

• ウィンドウ風写真枠（window-frame）: 黒い細線の枠の上部に、3 ドット付きのタイトルバーを付ける。写真を入れ、色ベタのずらし影を付ける。
• 英字見出し帯（section-band）: 全幅の淡色の帯の中央に、大文字の英字見出しと左右の小アイコンを置く。
• 紺ベタ反転ラベル（label-inverse）: 見出しの文字を行ごとに紺ベタで敷き、白抜きにする。
• 色マス文字ラベル（char-tiles）: 1 文字ずつ黄・ミント・紫のマスに入れ、階段状に並べる。
• 縦長動画カルーセル（drama-carousel）: 9:16 のウィンドウ枠を 3 枚並べ、下にドットのページネーションを付ける。
• 注意書きボックス（notice-box）: 細い黒枠の中に注釈を書き、右上に黄色い「!」アイコンを付ける。
• 外部リンクカード（link-card）: グラデーション地の上に白い角丸カードを置き、太字ラベルと紺の丸い外部リンクアイコンを入れる。
• 濃紺フッター（footer-navy）: 濃紺のベタに白いロゴとポリシー類のリンクを中央揃えで置く。

Do's and Don'ts

Do - 方眼紙の地とウィンドウ枠でレトロ OS 風の世界観を統一する。 - 写真には色ベタのずらし影を付けて、ポップさを出す。 - ポップな色は装飾に使い、本文は濃色で読みやすく保つ。 - 後半の採用情報は濃紺と淡色に切り替えて信頼感を出す。 - 惑星などの立体オブジェクトを列の端に散らし、浮遊感を出す。

Don't - ぼかしの大きいドロップシャドウを使わない。 - ボタンをピル型や派手なグラデーションにしない。 - ポップな色を本文や長い文章の地色に使わない。 - コンテンツ列を広げすぎない。中央の細い列の構成を守る。 - 採用パートにまでポップな装飾を詰め込まない。

Page Structure

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

1. ヘッダー（運営企業の明示と告知）: 白地の左にロゴを置き、中央の濃紺帯に告知を流す。右にメニューアイコンを置く。
2. ファーストビュー（作品の世界観を一目で伝える）: 流れる文字のテロップと幾何学タイルを背景にする。ロゴ風タイトルを置き、ウィンドウ枠の写真を複数重ねる。
3. ショートドラマ（動画コンテンツへ誘導する）: 英字見出し帯と話数ラベルの下に、縦長動画のカルーセルと注意書きボックスを置く。
4. イントロダクション（あらすじと舞台設定を伝える）: 角を折ったカードにラベルと人物の切り抜きを入れ、本文を添える。周りに惑星を浮かべる。
5. キャッチ＋場面写真（ワクワク感を高める）: 斜体の手書き風見出しと、ずらし影付きの写真を左右交互に配置する。
6. 登場人物（キャラクターを紹介する）: サムネイルを横に並べて切り替え、色付きの名前見出し・人物写真・説明文を見せる。
7. スペシャルコンテンツ（社員ドキュメンタリーへ誘導する）: 紺ベタのラベル、中央揃えの本文、ウィンドウ枠の縦長動画を淡色トーンで並べる。
8. 採用メッセージ（応募を呼びかける）: 淡色のカードに紺ベタ反転の見出し、仕事風景の写真、短い本文を入れる。
9. 採用リンク・フッター（採用サイトへ送客する）: グラデーション地に白い角丸のリンクカードを置き、その下に濃紺のフッターを置く。

Imagery

• カラフルな衣装の人物を、ネオンやビビッドなカフェ空間で撮る。
• 1990〜2000年代風のポップでレトロなスタイリングにし、表情を大きく見せる。
• 人物を切り抜いて、ポーズの写真を重ねる。
• 仕事のシーンは寒色系で落ち着いたドキュメンタリートーンにする。
• 装飾には、立体的な惑星、星型のオブジェ、飛行機や宇宙のアイコンを使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約 340px の列を固定し、左右を幾何学タイルとテロップの装飾背景で埋める。
• SP では列を画面の 88〜100% に広げ、装飾タイルはファーストビューだけに残す。
• 動画カルーセルは SP では 1 枚表示のスワイプにする。
• 惑星オブジェクトは SP では小さくし、本文に重ならない位置に置く。

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 行書くと起動時に読み込まれる。