DESIGN.md — 紺×虹色パステルの製造業採用 LP（Iridescent Pastel Corporate Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: クール・先進的、清潔・爽やか、上品・高級、信頼・誠実
• キーワード: オーロラグラデーション・欧文セリフの透かし見出し・六角形コラージュ・幾何学装飾・余白多め・写真カード
• 地の質感: 白地に水色・ラベンダー・淡ピンクのグラデーションを大きな斜めの面で重ねた、すりガラスのような質感
• 形: 四角い写真カードが基本。ファーストビューは六角形、装飾は円の輪郭線・斜線入りの円・ドット
• 温度感: やや寒色寄り。ピンク系を混ぜてやわらげている

Colors

• 濃紺は、ヘッダーとファーストビューの写真コラージュ周りだけに使う
• 本文エリアは白地にする。水色・ラベンダー・ピンクの斜めグラデーション面を重ね、セクションの背景に敷く
• 欧文の大見出しは、セクションごとにグレー・ラベンダー・水色と色を変える
• 英字の小ラベルは、濃い青の帯に白抜き文字で入れる
• 黄色・ミント・ピンクは、リングや斜線の小さな装飾だけに使う
• ボタンの塗りを強い色にしない。写真カード自体を導線にする

Typography

• メッセージ本文は明朝体で中央揃えにする。1 行は短く、段落の間をたっぷり空ける
• 欧文の大見出しは大文字主体のセリフ体にする。写真カードの上端に半分ほど重ね、透かしのように見せる
• カードの日本語見出しはゴシックの太字にし、写真の左下に置く
• 社員紹介のコピーは白帯の上に明朝で載せ、二重引用符で語を強調する
• 日付は太めのゴシックで、見出しの上に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。About のカードだけ 2 列、Information は 3 列の小カード
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 12px（375px 幅換算）
• 写真カードは画面幅の約 75〜90% にし、左右どちらかへずらして配置する
• カードの背後に、斜めにカットしたグラデーション面を少しずらして敷く
• 欧文見出しは右寄せ・中央などセクションごとに位置を変え、リズムを出す
• お知らせは日付＋タイトルを縦に積み、細い罫線で区切る

Elevation & Depth

• 影は使わずフラットにする
• 奥行きは、写真とグラデーション面のずれた重ねで出す
• 欧文見出しを写真の上に重ねて、レイヤー感を作る

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸のない長方形。ファーストビューは六角形の切り抜きを組み合わせたコラージュ
• セクション境界: 斜めの大きなグラデーション面で区切る。直線の境界は見せない
• カードと写真は角丸 0 にする
• 装飾は円の輪郭線・斜線入りの円・ドット格子に限る
• 背景の面は、角を斜めに落とした多角形にする

Components

• 濃紺ヘッダー（header-bar）: ロゴ、サイト切替のテキストリンク 2 つ、ハンバーガーメニューを並べる
• 六角形コラージュのファーストビュー（hero-hex-collage）: 現場写真を六角形で切り抜いて散らし、明朝の白抜きキャッチと欧文サブコピーを重ねる
• 欧文透かし見出し（watermark-heading）: 淡色の大きなセリフ体の欧文。写真カードの上端に重ねる
• 写真リンクカード（photo-link-card）: 写真全面のリンクカード。左下に小見出しと太字の日本語見出しを置く
• 英字ラベル帯（label-tag）: 濃い青の帯に白の英字ラベルを入れ、その下に黒の日本語見出しを置く
• お知らせリスト（news-list）: 左端の青い短いダッシュ、日付、タイトルの順に並べ、細い罫線で区切る
• 社員紹介スライダー（persons-slider）: 大きな写真に白帯の明朝コピーを重ね、黒い矢印ボタンとサムネイル列を添える
• 幾何学装飾（geo-deco）: 黄色やミントの円の輪郭線、ピンクの斜線入りの円、ドット格子を、カードの角に重ねる
• 情報タイル（info-tile）: 正方形に近い写真の下に太字ゴシックのラベルと水色の短い下線を置き、3 列で並べる

Do's and Don'ts

Do - 地の色は白と、パステルの虹色グラデーションを基本にする - 欧文のセリフ大見出しを写真に重ね、セクションの顔にする - 写真カードとグラデーション面をずらして重ね、奥行きを作る - メッセージは明朝・中央揃えにし、行間を広く取って余白で読ませる - 線画イラストは、水色からピンクへのグラデーションの線で描く

Don't - 濃紺を広い面に使い、本文エリアを暗くしない - 角丸カードやピル型の派手な CTA ボタンを置かない - 影やドロップシャドウで立体感を出さない - 原色の赤やオレンジを強調色に使わない - 見出しをすべて同じ位置・同じ色に揃えない

Page Structure

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

1. ヘッダー（ブランドの提示とナビゲーション）: 濃紺の帯に白のロゴ、リンク、ハンバーガーメニュー
2. ファーストビュー（企業の未来感と、働く人を印象づける）: 青い多角形の地に六角形の写真を散らし、明朝の白抜きキャッチを載せる
3. メッセージ（企業の想いを語る）: グラデーション地に、白の欧文透かしと中央揃えの明朝長文。最後にグラデーション線画のイラストとキャッチを置く
4. お知らせ（最新情報を伝える）: ダッシュ、日付、タイトルのリストを罫線で区切る
5. 会社を知る（数字と選ばれる理由へ誘導する）: グレーの欧文見出しと写真カード 2 枚。背後にグラデーション面を敷く
6. 仕事紹介（職種の理解へ誘導する）: ラベンダーの欧文見出しの下に横長の写真カードを置き、黄色リングで装飾する
7. 社員紹介（人柄で共感させる）: 水色の欧文見出し、写真、白帯コピーに、スライダーと斜線入りの円を添える
8. 働き方（拠点・キャリア・福利厚生を案内する）: 写真カードを縦に 3 枚。英字ラベル帯と日本語見出し、ミントのリング装飾
9. 募集情報（募集要項・FAQ への導線）: ラベンダーの欧文見出しと、3 列の情報タイル

Imagery

• 写真は社員・工場・オフィスの明るい実写にする。寒色寄りに補正する
• ファーストビューは、ロボット・施設・人物を六角形で切り抜いたコラージュにする
• 抽象写真（数字のデジタル画像、アイコン合成）も、青系のトーンで使う
• 線画イラストは人物・都市・風車・電池などを細い線で描き、水色から紫のグラデーションで塗る
• 装飾は円の輪郭線・斜線入りの円・ドット格子のパステル色にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は、キャッチを大きくしたファーストビューを全幅で見せる
• PC のお知らせは、日付とタイトルを 1 行で横並びにする
• 働き方のカードは、SP の縦 3 枚を PC では横 3 列にする
• 社員紹介は PC で、左にコピー、右に写真の 2 カラムにする
• 欧文見出しは PC で約 1.5 倍にし、カードへの重なりを保つ

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