DESIGN.md — ベージュ地×多色ブロブのポップな採用サイト（Pastel Blob Pop Tech Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、クール・先進的、やさしい・柔らかい
• キーワード: ブロブ図形・傾いた写真コラージュ・巨大欧文の透かし・カテゴリ別の色分け・ピル型カード・アイソメトリックイラスト
• 地の質感: フラットな単色面とやわらかいグラデーションのブロブ。影はほぼ使わない
• 形: 不定形のブロブ、正円のドット、大きな角丸のピル型カード、少し傾けた台形気味の写真枠
• 温度感: 暖かいベージュ地に寒色と暖色のアクセントが混ざる、明るく中間的な温度

Colors

• 地はベージュで統一し、セクションの区切りはブロブの色で表す。
• カテゴリごとにアクセント色を 1 つ決め、ブロブ・英字ラベル・矢印ボタンを同色にそろえる。
• ブロブ上の見出しと本文は白文字にする。
• 濃紺はロゴ・フッターボタン・採用情報の見出しなど信頼を示す要素だけに使う。
• 青のグラデーションはヘッダーと SNS 帯の横長の帯に限る。
• 巨大な欧文の透かしは白か、ブロブ色を少し薄くした色にする。
• pill-link-card は文字 #FB8384 × 背景 #FFFFFF のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#ED080A、4.53:1）を使う。
• capsule-icon-card は文字 #4AD2BE × 背景 #FFFFFF のコントラスト比が 1.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#218375、4.6:1）を使う。
• circle-link は文字 #FAB37B × 背景 #FFFFFF のコントラスト比が 1.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#BE5807、4.58:1）を使う。

Typography

• 本文も太字寄り（700）にし、字間を広めにとる。
• 大見出しはキーワードの漢字だけを一段大きくして、文字サイズに強弱をつける。
• 英字ラベルは極太サンセリフにし、下に日本語の小ラベルを添える。
• 見出しの背後には同じ意味の英単語を半透明で大きく重ねる。
• ブロブ内のテキストは中央揃えにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード群だけ 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• ブロブを画面端からはみ出させて配置し、余白にリズムをつける。
• 写真は 2〜3 枚を重ねたり、少しずつ傾けたりしてコラージュにする。
• セクション間に巨大な欧文の横帯を挟んでテンポを作る。
• 誘導カードは横幅いっぱいのピル型か、2 列の縦長カプセル型にする。
• フッターはサイトマップを 2 列にし、区切り線付きのカテゴリでまとめる。

Elevation & Depth

• 影はほぼ使わず、色面を重ねて奥行きを出す。
• 写真の枠には白い細フチをつけ、地から浮かせる。
• 白いカードは写真背景やベージュ地の上に直接置き、コントラストで目立たせる。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 60px。ボタンはピル型。
• 写真の切り抜き: 角丸の四角形を少し傾けたり、台形気味に歪めたりして白フチをつける
• セクション境界: 直線ではなく、ブロブの曲線や大きな S 字カーブの帯でつなぐ
• ボタン・カードはすべてピル型かカプセル型にする。
• 矢印は正円のアイコンボタンに入れる。
• 画面のあちこちに小さな正円ドットを散らす。
• ブロブは不定形の有機曲線にし、角を作らない。

Components

• ブロブ見出しブロック（blob-section-header）: カテゴリ色のブロブの上に、白の大見出し・半透明の英字透かし・白の本文を中央に置く
• 横長ピル型リンクカード（pill-link-card）: 白いピル型の中に、カテゴリ色の英字ラベルと日本語サブラベルを置き、右端に丸い矢印をつける
• 縦長カプセルカード（capsule-icon-card）: 2 列並びの白いカプセル。上にアイソメ風イラスト、中央に英字ラベル、下に丸い矢印
• 丸い矢印ボタン（circle-arrow）: カテゴリ色の正円に白い右矢印を入れる
• 白い正円リンク（circle-link）: 白い大きな円に英字ラベル・日本語ラベル・矢印を縦に並べ、スライダーの各ページに使う
• 番号付きドットページャー（dot-pagination）: オレンジの小円に番号を入れて並べる。現在のページだけ大きくする
• 濃紺ピル型ボタン（button-primary）: フッターのエントリー・採用トップへの導線。中央揃えで縦に積む
• フッターサイトマップ（footer-sitemap）: 日本語カテゴリ名に小さなグレーの英字を添え、区切り線の下にリンクを 2 列で並べる

Do's and Don'ts

Do - セクションごとにブロブの色を変えて、カテゴリを色で覚えさせる。 - 写真は傾けて重ね、白フチをつけて躍動感を出す。 - 英字ラベルと日本語ラベルは必ずペアで見せる。 - 小さな正円ドットや淡い光の点を散らして、にぎやかさを足す。 - ボタンはピル型と丸い矢印でそろえる。

Don't - 直線の帯や四角いボックスでセクションを区切らない。 - ドロップシャドウや立体的なボタンを使わない。 - 1 セクションにアクセント色を 2 色以上混ぜない。 - 写真をまっすぐな長方形のまま並べない。 - 濃紺を広い面に使って重い印象にしない。 - 細い明朝体を使わない。

Page Structure

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

1. ヘッダー（ロゴ表示とメニューへの導線）: 青のグラデーション帯に白ロゴとサイト名を置き、右端にハンバーガーメニュー
2. ファーストビュー（可能性を感じさせる世界観の提示）: ベージュ地に巨大な欧文・漢字の白い透かし、ブロブ、オレンジの曲線帯を敷き、社員写真を傾けてコラージュする
3. メッセージ（企業の使命と技術力を語る）: 強弱をつけた大見出しと、行間の広い太字本文。下に技術写真 2 枚を重ねて置く
4. 巨大欧文の帯（セクション間の区切りとリズム）: 青からターコイズへのグラデーションで描いた巨大欧文を、画面からはみ出させて横に流す
5. 企業を知る（事業・強み・拠点などへの誘導）: オレンジのブロブに白見出しを置き、アイソメ風イラストを添える。白い円形リンクのスライダーと番号ドットで送る
6. 仕事紹介（職種と社員インタビューへの誘導）: コーラルのブロブ見出しの下に横長ピル型カードを 2 つ。その下に社員写真を傾けて横に並べる
7. 働く環境（キャリア・ダイバーシティ・福利厚生の紹介）: ターコイズのブロブ見出しの下、社屋写真の背景にイラスト付きの縦長カプセルカードを 2×2 で置く
8. 採用情報（募集要項への誘導）: ラベンダーの小さなブロブを見出しにし、社員写真 2 枚と白い巨大欧文の帯、濃紺の英字リンクを並べる
9. SNS 帯（SNS への誘導）: 青のグラデーション帯に白い SNS アイコンを 3 つ並べる
10. フッター（サイトマップと主要導線）: 白地にロゴ、区切り線付きのカテゴリリンク、濃紺のピル型ボタン 3 つ、外部リンク、グレー地のコピーライト

Imagery

• 社員が自然に笑ったり作業したりしている姿を、明るいオフィスで撮った写真にする。
• 写真は角丸で白フチをつけ、5〜10 度傾けて重ねる。
• 電子基板・ロボットアーム・風車・人物などのアイソメトリックなフラットイラストを添える。
• 自然エネルギーや先端設備の写真で、技術の印象を補う。
• ブロブにはオレンジ→ピーチ、ターコイズ→ミントなどの淡いグラデーションをかける。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はメッセージを左テキスト・右写真の 2 カラムにする。
• PC ではブロブ見出しとピル型カードを左右に並べる。
• PC の縦長カプセルカードは 4 列横並びにする。
• PC のヘッダーはグローバルナビと小さなピル型ボタンを横に並べる。
• PC のフッターサイトマップは 4 列、ボタンは横並びにする。
• 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 行書くと起動時に読み込まれる。