DESIGN.md — 青×白の波と丸窓のメーカー採用 LP（Fluid Blue Manufacturing Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、信頼・誠実、クール・先進的、やさしい・柔らかい
• キーワード: コーポレートブルー・波形の境界・カプセル形の写真・淡い水色の円形面・流れとつながり・余白の多い構成
• 地の質感: フラットな単色面に、淡いグラデーションと半透明の写真背景を重ねる。影はほとんど使わない
• 形: 上下が半円になったカプセル形、大きな角丸の不定形ブロブ、ゆるいS字の波線
• 温度感: クールな青が中心。人物写真と白い余白で親しみを足す

Colors

• 地は白・淡いグレーブルー・水色を順に切り替えて、セクションの区切りを色でゆるく示す
• 濃い青の全面セクションは、メッセージと応募導線の2か所だけに絞る
• 青地では白文字と白いボタン（青矢印）を使い、白地では青い枠線ボタンを使う
• 明るいシアンは英字ラベルと小さな装飾に限って使う
• 赤やオレンジなどの暖色は UI に使わない。写真の中だけにとどめる
• 写真の上に半透明の白・水色グラデーションを重ねて背景になじませる

Typography

• セクション見出しは日本語を青で大きく書き、下に引用符アイコン付きの英字ラベルを小さく添える
• 本文は行間を約2.2、字間を0.1em前後と広めに取る
• サブセクション名は縦書きにして、英字を小さく並べる
• 英字には幾何学的なサンセリフを使い、ENTRY を横に流れる大きな帯として繰り返す
• メッセージ文は改行位置をそろえ、短い文を積み重ねて読ませる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。インタビューは横スクロールのカルーセル
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 32px（375px 幅換算）
• 左右の余白は約16px。本文は左寄せにする
• 写真は左右に互い違いに配置し、セクションの境界からはみ出させる
• 水色の大きな円形ブロブの中に、短い説明とボタンを入れる
• ブロブは左寄せと右寄せを交互に並べ、ジグザグの流れを作る
• 応募カードは縦に3枚積み、カード同士の間隔は約16px

Elevation & Depth

• 影は基本的に使わない。色面の違いだけで階層を表す
• ヘッダーは白いピル形バーにして、ごく薄い影で写真から浮かせる
• 写真の上には半透明の白グラデーションを重ね、奥行きを出す

Shapes

• 角丸: 小 12px ／ 中 32px ／ 大 80px。ボタンはピル型。
• 写真の切り抜き: 上下が半円の縦長カプセル形、または角の一部だけ大きく丸めた形
• セクション境界: ゆるいS字の波形カーブ
• ボタンはすべてピル形にする
• 写真は四角のまま置かない。必ずカプセル形か大きな角丸で切り抜く
• 背景には直径300px超の有機的な円や不定形の面を置く
• セクション境界は直線を避け、波形にする
• 番号バッジは円形にする

Components

• ピル形ヘッダー（header-pill）: 白いピル形のバー。左にロゴ、右に青い円形のメニューボタンを置く
• アウトライン矢印ボタン（button-outline）: 白地に青枠・青文字。右端に青いピルと白矢印を入れる
• 青地用の白ボタン（button-on-blue）: 白い塗り（または白枠）に青文字。右に青いピル矢印を置く
• 青ピル矢印（arrow-pill）: カードの右下や左下に置く小さな青いピル。中に白い右矢印を入れる
• 和英2段の見出し（section-heading）: 青い大見出しの下に、水色の引用符と英字ラベルを並べる
• 円形ブロブカード（blob-card）: 水色の大きな楕円の中に、小見出し・説明2行・ボタンを入れる
• 社員インタビューカード（interview-card）: 淡いグレーのカプセルに人物写真を入れ、下端に白いピル形の部署ラベルを重ねる。その下に一言と所属を置く
• 番号バッジ（number-badge）: 青い円の中に「#01」形式の白い番号を入れ、写真の角に重ねる
• 応募区分カード（entry-card）: 青地の上に置く白い大角丸カード。和文見出し・青の英字・矢印ピルを入れる
• ENTRY 流れ帯（marquee-entry）: 青地の上で、白の大きな英字 ENTRY を横に繰り返して流す

Do's and Don'ts

Do - セクション境界は波形にし、写真は境界をまたいで配置する - 写真はカプセル形に切り抜き、左右に互い違いに置く - 見出しは日本語と英字ラベルの2段構成にする - ボタンにはすべて青ピル矢印を付け、表現を統一する - 淡い水色の円形の面で、情報をやわらかくグループ化する

Don't - 四角い写真や、角の立ったカードを使わない - 暖色や彩度の高いアクセント色を UI に使わない - 濃い影や立体的なボタンにしない - 本文を詰めて組まない。行間は広めに保つ - 青い全面セクションを多用しない

Page Structure

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

1. ファーストビュー（仕事の誇りを一言で伝える）: 作業中の人物写真を全面に敷き、白い斜体の大コピーと曲線の帯を重ねる。左下に認定バッジ、下端は波形にする
2. お知らせ（最新の話題を見せる）: シアンの英字ラベル、日付と1行タイトル、左右の矢印
3. メッセージ（企業の姿勢と想いを語る）: 2行の大見出しと、短文を積み重ねた本文。アウトラインボタンを置き、背景に淡い世界地図とカプセル写真
4. 事業の意義（製品が社会で果たす役割を説明する）: 風景写真から濃い青へグラデーションでつなぐ。白文字の本文、白ボタン、製品のカプセル写真2枚
5. 会社を知る（沿革や職種のページへ誘導する）: 和英2段の見出しと、水色ブロブカード2枚をジグザグに配置
6. 社員インタビュー（働く人の顔を見せる）: 縦書きのサブ見出しとカプセル人物カードを横スクロールで並べる
7. クロストーク（部署を越えた協働を伝える）: 大角丸の集合写真に番号バッジを重ね、白カードに参加者の所属を×でつないで並べる
8. 働く環境を知る（教育制度と福利厚生を紹介する）: 水色ブロブカード2枚とカプセル写真。波形の水色帯の上に置く
9. 応募の呼びかけ（応募を後押しする）: 濃い青の全面に、白文字の中央揃えメッセージと白枠ボタン。白い応募カード3枚と ENTRY の流れ帯を続ける
10. フッター（会社情報とサイトマップを載せる）: 白地に、ロゴ・住所・認定ロゴ・2列のリンク一覧。リンクの頭に青いダッシュを付ける

Imagery

• 作業服を着た社員が自然光の工場や研究室で働く姿を、浅い被写界深度で撮る
• 人物ポートレートは無地の淡いグレー背景で、腰から上を正面から撮る
• 製品は白背景の物撮りにし、質感がわかるように寄って撮る
• 地域の風景は、遠景の山並みを青みの強い色調で撮る
• 全体を青寄り・明るめに色補正し、白いもやのグラデーションで背景になじませる
• 背景装飾には淡い世界地図、波線、大きな水色の円を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では、ヘッダーにピル形のグローバルナビと ENTRY ボタンを横に並べる
• PC では、ブロブカードを2つ横並びにし、大きな白い不定形の面の中に入れる
• PC では、インタビューカードを3枚以上横に並べる
• PC では、応募カード3枚を横1列に並べる
• PC では、写真をコンテンツ幅の左右端にはみ出させて配置する
• PC のフッターは、会社情報とサイトマップを4列で並べる

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