DESIGN.md — 紺×白と泡模様の清潔感ある新卒採用 LP（Clean Bubble Corporate Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、信頼・誠実、シンプル・ミニマル
• キーワード: 紺と白・透明な泡・大判写真・細線ボタン・コロン型見出し・ポータル導線
• 地の質感: 白い平らな面に、半透明でガラスのような泡のイラストを重ねる。背景写真はぼかして使う。
• 形: 角は四角が基本。写真カードだけ小さく角を丸める。円形は泡・矢印ボタン・価値観バッジに限る。
• 温度感: やや寒色寄り。誠実で落ち着いた印象。

Colors

• 地の色は白を基本にし、紺の帯とライトグレーの帯を交互に挟んでリズムを作る
• 紺はブランド見出し・線・ボタン文字・紺帯セクションだけに使う
• 暖色の強調色は使わない。強調は紺と白の反転で行う
• 写真の上のボタンは白地に紺文字にして読みやすくする
• 泡は水色の縁取りと白いハイライトの半透明で描き、色面としては使わない

Typography

• セクション見出しは細めのゴシックを大きく使い、左に縦に並べた2つの点（コロン）を付ける
• FVのコピーだけは太字の白抜きにし、字間を広めに取る
• ボタンのラベルは小さめの太字にして、余白で見せる
• 英字は太めのサンセリフで、バッジやアクセントに限って使う
• 本文は少なく、リンク名などの短い言葉が中心になる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真グリッドだけ 5 列に横並び
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 64px、基本単位 8px、カード内 0px（375px 幅換算）
• コンテンツは左右に約9%の余白を取った中央寄せにする
• 背景写真のセクションは全幅で、中央に白い箱を重ねて見出しとボタンを置く
• リンクリストは幅を約65%に絞り、項目ごとに紺の下線を引く
• 紺の帯セクションは全幅にし、カルーセルを端近くまで広げる
• セクションの高さはゆったり取り、1画面に1テーマを置く

Elevation & Depth

• 基本は影を付けないフラットな作り
• 円形の矢印ボタンにはごく薄い影を付ける
• 価値観バッジは影と内側の陰影で、浮き出たような立体感を出す
• 泡はハイライトと透明感で奥行きを見せる

Shapes

• 角丸: 小 0px ／ 中 6px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物写真は角を少し丸めた長方形で、淡いグレー地に切り抜く。背景写真は全幅の長方形でぼかす
• セクション境界: 直線で区切り、背景色や写真の切り替えで境界を作る
• ボタンは角丸なしの長方形に、1pxの紺枠を付ける
• 矢印だけのボタンは白い円形にする
• 価値観は3つの円形バッジにし、細い曲線でつなぐ
• 泡の円は大小を混ぜ、画面の端からはみ出させる

Components

• 細枠の詳細ボタン（button-outline）: 白地に1pxの紺枠。中央に紺字のラベルを置き、右端に「>」を付ける。幅は約60%
• FVの外部リンクボタン（button-ghost-fv）: 写真の上に置く半透明の暗い地と白い細枠のボタン。2列で並べる
• コロン付き見出し（heading-colon）: 縦に並べた2つの点と、細めの大きな見出しを組み合わせる。白地では紺、紺地では白にする
• 人物メッセージカード（card-person）: 淡いグレー地の角丸写真。下に太字の名前と、右側に円形の矢印ボタンを置く
• 下線リンクリスト（link-list）: 項目名の右に「>」または外部リンクのアイコンを付け、項目ごとに紺の1px下線を引く
• 写真上の白い箱（overlay-box）: ぼかした全幅写真の中央に白い四角を重ね、見出しと細枠ボタンを入れる
• 社員ストーリーのカルーセル（story-carousel）: 紺地の上に写真・日付・タイトルを置く。左右に白い円形の矢印を付ける
• 価値観の円形バッジ（value-badge）: 立体的な白い円に紺の内枠を付け、英字2語を入れる。3つを曲線でつなぐ
• 動画バナー（video-banner）: 黒地の左に再生アイコン付きのサムネイル、右に白字の2行タイトルを置く
• ページトップへ戻る帯（pagetop-bar）: 全幅の紺の帯で、中央に白い上向き矢印を置く

Do's and Don'ts

Do - 白・紺・ライトグレーの3つの地を交互に使う - 泡のイラストは白地のセクションだけに散らす - ボタンは細い紺枠の四角に統一する - 写真は明るく自然な表情の人物か、清潔な職場を使う - 見出しには必ずコロン型の装飾を付ける

Don't - 赤やオレンジなど暖色の目立つCTAを入れない - ボタンをピル型や太いグラデーションにしない - 1つのセクションに長い本文を詰め込まない - 泡を濃い色の面で塗らない - 強い影や装飾の多い枠を使わない

Page Structure

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

1. ファーストビュー（企業の姿勢を示し、エントリーへ誘導する）: 暗い色調の人物写真を全面に敷く。英字アクセントと白抜きの2行コピーを置き、下部に外部リンクボタンを並べる。上部にはロゴ・メニュー・枠線のエントリーボタンを置く
2. コンセプト動画（動画でブランドの世界観を伝える）: 泡を散らした白地に、黒い横長の動画バナーを置く
3. 会社を知る（トップのメッセージと社員の声への入口）: コロン見出しの下に人物カードを縦に2枚並べ、続けて5人の顔写真を横に並べる
4. 会社情報リンク（数字・制度・環境など下層ページへの導線）: 泡を背景にした下線リンクリストを5項目並べる
5. 仕事を知る（職種紹介ページへ誘導する）: ぼかした職場写真の上に白い箱を重ね、見出しと細枠ボタンを入れる
6. 社員ストーリー（社員の体験談記事を紹介する）: 紺の全幅帯に、白い見出しと写真付きの記事カルーセルを置く
7. 求める人物像（価値観を3つのキーワードで示す）: グレー地に立体的な円形バッジを3つ置いて曲線でつなぎ、下に見出しと細枠ボタンを置く
8. 採用情報（インターンや募集要項へ誘導する）: スーツのクローズアップ写真を背景に、白いコロン見出しと白い細枠ボタンを2つ縦に並べる
9. フッター（ページトップへ戻る）: 紺の帯の中央に上向き矢印を置く

Imagery

• 人物写真は明るいグレー地のスタジオ撮影で、スーツ姿の笑顔を胸から上で撮る
• 社員写真は白衣やオフィスカジュアルで、職場を背景に自然な笑顔を撮る
• 背景写真は白い研究施設やオフィスを強くぼかし、寒色に寄せる
• 泡はガラスのような透明な球にし、水色の縁と白いハイライトを付ける
• FVはドラマチックな照明の人物写真で、緑から赤紫へのグラデーションのような色かぶりにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC のFVは横長の写真にする。コピーは中央、動画バナーと外部リンクは下端に横一列で並べる
• PC の人物カードは2列、リンクリストも2列にする
• PC の社員ストーリーは4枚並べのカルーセルにし、ドットのページ送りを付ける
• PC の求める人物像は、バッジを左、見出しとボタンを右に置く
• 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 行書くと起動時に読み込まれる。