DESIGN.md — 青グラデと有機曲線のスポーツ系採用 LP（Sporty Blue Blob Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: スポーティ、ポップ・元気、清潔・爽やか、親しみ・手作り感
• キーワード: ブロブ型写真・青グラデーション・波形の区切り・手書きコピー・線画イラスト・笑顔の人物
• 地の質感: フラットな塗りと線形グラデーション。影はカードのみ淡く使う。
• 形: 不定形の有機曲線、波形セクション境界、ピル型ボタン。
• 温度感: 爽やかでやや涼しい青基調に、赤のアクセントで熱量を足す。

Colors

• 地は白、セクション交互に濃紺→水色の横グラデーション帯を波形で挟む。
• ブロブ写真の背後に淡い水色の不定形を重ねる。
• 赤は受付中バッジとキャッチの一部文字だけに限定。
• 欧文見出しは濃紺→水色の文字グラデーション。
• 青帯上のボタンは白地＋濃紺文字に反転。
• フッターは単色の濃紺。

Typography

• 欧文見出しは太いコンデンス体、直下に小さな和文ラベルを添える。
• リード文は太字・中央揃え・行間広め。
• キャッチは手書き体で、キーワードのみ赤・大きめ。
• 日本語見出しの下に短いグラデ下線を置く。
• 本文は12px前後で控えめに。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は写真と文章の左右 2 カラム交互。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクションは欧文見出し→和文ラベル→リード→ボタン→ブロブ写真の順。
• 青帯セクションは左揃え、白地セクションは中央揃え。
• 写真はやや左右に食み出すように配置して動きを出す。
• イラストは見出しや写真の角に重ねる。
• 一覧系は白カードにまとめる。

Elevation & Depth

• 説明会・募集要項カードはごく淡い水色の広がる影。
• 写真・ボタンには影を付けない。
• 奥行きは背景ブロブの重なりで表現する。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 不定形の有機ブロブで切り抜き、背後に淡い水色ブロブを重ねる。記事サムネは角丸12px。
• セクション境界: 大きくうねる波形曲線で白と青グラデ帯を切り替える。
• ボタンは全てピル型。
• 受付中バッジ・記事ボタンは角丸小の矩形。
• カードは角丸20px。
• 円形の矢印アイコンをテキストリンクに添える。

Components

• 濃紺ピルボタン（button-primary）: 左に「>」記号、白太字。白地セクションの詳細リンク。
• 白ピルボタン（button-inverse）: 青帯上で使う白地・濃紺文字のボタン。
• 募集グラデボタン（button-cta-gradient）: 濃紺→水色の横グラデのピル。新卒・中途の応募導線。
• 枠線ピルボタン（button-outline）: 一覧へのリンク。白地に濃紺細枠。
• 受付中バッジ（badge-status）: 赤地白文字の小さな矩形。
• 説明会一覧カード（event-list-card）: 白の角丸カード内に日付・形式・バッジ・タイトルを線区切りで並べ、末尾に円矢印リンク。
• 欧文＋和文見出し（heading-en-ja）: グラデ文字の太欧文見出しと小さな和文ラベルの2段。
• 新着記事カード（news-card）: 角丸サムネ右上にグレーのカテゴリタグ、濃紺タイトル、日付、抜粋、右寄せの濃紺矩形ボタン。
• ブロブ写真（blob-photo）: 不定形切り抜きの人物写真と淡い水色ブロブの重ね。

Do's and Don'ts

Do - 写真は必ず不定形ブロブで切り抜く。 - 白地と青グラデ帯を波形で交互に切り替える。 - 線画のスポーツ用具・人物イラストを余白に散らす。 - 欧文見出し＋和文ラベルの型を全セクションで統一。 - 人物は笑顔で動きのある構図を選ぶ。

Don't - 赤を広い面に使わない。 - 写真を四角いまま大きく並べない（記事サムネを除く）。 - 直線のセクション境界にしない。 - セリフ体や細い明朝を使わない。 - 暗いトーンや重い影を入れない。

Page Structure

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

1. ファーストビュー（職場の楽しさを感情的に伝える）: ブロブ写真の上に白の手書きコピー、下に赤を混ぜた大きな手書きキャッチ、小さなブロブ写真2枚とイラスト。
2. 説明会情報（直近のイベントへの参加を促す）: 白角丸カードに日付・バッジ・タイトルのリスト、末尾に円矢印リンク。
3. 会社紹介（企業の理念とトップの顔を見せる）: 白地中央揃えの欧文見出し・リード・濃紺ボタン、下に代表のブロブ写真。
4. 事業内容（事業の広がりを伝える）: 青グラデ帯、左揃え白文字、白ピルボタン、ブロブ写真。
5. インタビュー（社員の声への導線）: 白地、線画イラスト添え、中央揃え、社員2人のブロブ写真。
6. 働く環境（制度や雰囲気への導線）: 青グラデ帯で事業内容と同じ型を反復。
7. 新着情報（最新の活動を見せる）: 記事カードを縦に3件、最後に枠線ピルの一覧ボタン。
8. 募集要項 CTA（応募へ誘導）: 全幅の集合写真の下に白カードを重ね、グラデボタン2つとFAQリンク。
9. 外部媒体・SNS（就職サイトとSNSへ誘導）: 媒体バナー2つ、グラデ欧文見出し、濃紺の単色SNSアイコン列。
10. フッター（会社情報）: 波形上端の濃紺面に白ロゴとサイト名。

Imagery

• 屋内コートで社員がラケットを持ち笑う、明るく浅い被写界深度の写真。
• ブランドカラーのTシャツなど、色鮮やかな服装の人物。
• 線画（濃紺単色）のラケット・ボール・シャトル。
• 淡い水色と青の塗りによるフラットなスポーツ人物イラスト。
• 社員旅行などイベントの集合写真で一体感を示す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは写真と文章を左右2カラムで交互に配置。
• 説明会情報はPCで開催日時・開催地・状況・名称の表形式。
• 新着情報はPCで3カラムのカード。
• 募集要項はPCで写真左・白カード右に重ねる。
• 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 行書くと起動時に読み込まれる。