DESIGN.md — ネオン斜めグラデのアニメ調新卒採用 LP（Neon Gradient Anime Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、力強い・インパクト、クール・先進的
• キーワード: 斜めカット・ネオングラデーション・アニメイラスト・コンデンス欧文・黒×原色・平行四辺形
• 地の質感: フラットな面にビビッドな線形グラデーションを重ねる。ノイズや陰影はほぼなし
• 形: セクション境界は斜めの直線。ボタンは平行四辺形、写真・カードは角丸なしの矩形
• 温度感: 高彩度で熱量の高い、若者向けのエネルギッシュな温度感

Colors

• 地は白・黒・濃灰の3色を交互に使い、間を原色グラデーションの斜め帯でつなぐ
• グラデはマゼンタ→オレンジ、シアン→ブルー→紫、紫→赤など2〜3色の線形で作る
• 英字大見出しは文字自体にグラデーションを掛け、セクションごとに色相を変える
• 主ボタンは紫→マゼンタ→赤のグラデ平行四辺形に白文字
• ラベル・タグは紫やマゼンタのベタ面に白文字で、写真上に重ねる
• 中間色やくすみ色は使わず、高彩度のまま統一する
• button-pill-link は文字 #FFFFFF × 背景 #D93B85 のコントラスト比が 4.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D73280、4.51:1）を使う。

Typography

• 見出しは『日本語小見出し＋英字コンデンス大見出し』の2段組
• 英字見出しはすべて大文字・縦長コンデンス書体
• メッセージ本文は中央揃えで短い改行を重ね、詩的に見せる
• ニュース・リスト系は左揃え
• 人物名は写真右端に縦書き英字で重ねる
• 本文は太めのゴシックで字間をやや広げる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、人物・アーカイブは 2 列グリッド
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 64px、基本単位 8px、カード内 0px（375px 幅換算）
• セクション上下は斜めカットで重なり合わせ、水平な区切りを作らない
• グリッドの写真は隙間を最小（2〜4px）で敷き詰める
• 見出しは中央か左に寄せ、セクションごとに揃えを変えて動きを出す
• 一覧を見るボタンはグリッド直下に中央配置
• ニュースは日付バッジ＋本文の横並びを白線で区切る

Elevation & Depth

• 影はほぼ使わずフラットに作る
• 奥行きは斜め帯の重なりと色面の前後関係で表現
• アーカイブカードは黒の太枠で漫画コマ風に縁取る

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの矩形。人物は正方形に近いバストアップ
• セクション境界: 斜めの直線カット（三角形の色帯を重ねる）
• 主ボタンは左右が斜めに切れた平行四辺形
• 会社情報のリンクだけはピル型グラデボタン
• タグ・日付バッジは角丸なしの小矩形
• 斜め角度は5〜15度程度で統一感を持たせる

Components

• 平行四辺形グラデボタン（button-primary）: 紫→マゼンタ→赤の斜め切りボタン。一覧へ・診断へ誘導
• 黒の平行四辺形エントリーボタン（button-entry）: ヘッダーとフッターに置く黒地白英字の斜めボタン2連
• ピル型グラデリンク（button-pill-link）: マゼンタ→オレンジのピル。会社情報への2列リンク
• 二段見出し（section-heading）: 日本語小見出しの下にグラデ文字の英字コンデンス大見出し
• 人物写真カード（person-card）: バストアップ写真に縦書き英字名と職種タグを重ねる
• 職種・番号タグ（tag-label）: 写真左下に置く紫/マゼンタ/赤のベタ面ラベル
• ニュース行（news-item）: 白い日付バッジと白文字本文を横並び、白線区切り
• 集中線フレームカード（manga-frame-card）: 黒太枠と集中線で囲んだ漫画コマ風サムネイル
• スライダードット（carousel-dots）: 赤の現在ドットと薄灰ドット

Do's and Don'ts

Do - セクション境界は必ず斜めにカットし、グラデ帯を重ねる - 英字見出しは大きく縦長にし、グラデ文字にする - 写真・イラストの上にベタ色タグを直接重ねる - 白・黒・濃灰の地を交互に並べてリズムを作る - ボタンは平行四辺形を基本にする

Don't - パステル・くすみ色を使わない - 角丸カードや柔らかい影を多用しない - 水平な区切り線だけでセクションを分けない - 明朝体や手書き書体を使わない - 見出しを日本語だけにしない

Page Structure

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

1. ヘッダー（ロゴと応募導線）: 左にロゴ、右に黒の平行四辺形ボタン2つとハンバーガー
2. ファーストビュー（世界観とキャッチの提示）: 複数キャラのイラストを斜めの帯でコラージュし、右下に白抜き極太キャッチ、下端は斜めのグラデ帯
3. メッセージ（採用の想いを伝える）: 白地に二段見出し、短い行の中央揃え本文
4. お知らせ（選考情報の告知）: シアン→紫のグラデ地を斜め配置し、日付バッジ付きリスト
5. 社員紹介（働く人の顔を見せる）: 2列×4段の人物写真グリッド、縦書き英字名と職種タグ、ドットと一覧ボタン
6. 職種紹介（仕事の種類を示す）: 黒地にイラスト横長バナーを縦積み、左下にタイトルラベル
7. 職種診断（診断コンテンツへ誘導）: マゼンタ→オレンジのグラデ帯に白の大英字と青紫ボタン
8. アーカイブ（関連サイトへの回遊）: 白地に漫画集中線フレームの2列カード、番号タグ付き
9. 会社情報（企業概要への導線）: 濃灰地にミント系グラデ英字見出し、ピル型グラデリンク2×2
10. フッター（応募導線とサイトマップ）: オレンジ→マゼンタのグラデ地、黒い斜めボタン2連、白いトップへ戻る、スラッシュ区切りリンク、SNS アイコン

Imagery

• アニメ・漫画調の人物イラストを、ネオン色の背景と斜めの速度線で描く
• イラストは原色の背景と光のエフェクトで賑やかにする
• 社員写真はオフィスの暗めの背景で、笑顔のバストアップを正面から撮る
• サムネイルは黒太枠と集中線で漫画のコマ風に装飾
• 装飾は三角形・斜め帯のグラデのみで、細かい柄は入れない
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約60%の中央寄せにし、左右に斜め帯を広げる
• PC の FV はイラストを横長コラージュにしてキャッチを右下に置く
• 社員紹介は PC で4列×2段にし、左右に丸い矢印ボタンを出す
• 職種紹介は PC で2×2グリッドにする
• アーカイブ・会社情報リンクの列数は 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 行書くと起動時に読み込まれる。