--- version: alpha name: Fluid Blue Manufacturing Recruit LP description: コーポレートブルーと白・淡い水色を基調にしたメーカーの採用サイト。波形のセクション境界、カプセル形に切り抜いた写真、大きな有機的な円形の背景面で「流れ・つながり」を表現している。誠実さと先進性をあわせ持つトンマナ。 colors: primary: '#006FC0' background: '#FFFFFF' background-alt: '#EFF7FA' tint-1: '#EDFAFF' tint-2: '#D0EBF7' accent-1: '#1FAFE1' secondary: '#0D5DA2' text: '#1E2A38' text-muted: '#4A5560' on-primary: '#FFFFFF' cta: '#016DBC' on-cta: '#FFFFFF' line: '#0F66AE' dark-section: '#234066' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 44px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 19px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.06em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 2.2 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.03em accent: fontFamily: Josefin Sans fontSize: 16px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.05em label-button: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.1em rounded: sm: 12px md: 32px lg: 80px full: 999px spacing: unit: 8px card: 32px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' header-pill: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 40px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 38px button-on-blue: backgroundColor: '{colors.on-primary}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 34px arrow-pill: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' rounded: '{rounded.full}' height: 24px section-heading: textColor: '{colors.secondary}' typography: '{typography.headline-lg}' height: 60px blob-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 260px interview-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 400px number-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 48px entry-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 180px marquee-entry: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.accent}' height: 50px --- # DESIGN.md — 青×白の波と丸窓のメーカー採用 LP（Fluid Blue Manufacturing Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 清潔・爽やか、信頼・誠実、クール・先進的、やさしい・柔らかい - **キーワード**: コーポレートブルー・波形の境界・カプセル形の写真・淡い水色の円形面・流れとつながり・余白の多い構成 - **地の質感**: フラットな単色面に、淡いグラデーションと半透明の写真背景を重ねる。影はほとんど使わない - **形**: 上下が半円になったカプセル形、大きな角丸の不定形ブロブ、ゆるいS字の波線 - **温度感**: クールな青が中心。人物写真と白い余白で親しみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#006FC0` | コーポレートブルー（濃い青のセクション・ボタン） | 14% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 36% | 画素の実測 | | `background-alt` | `#EFF7FA` | 淡いグレーブルーのセクション地 | 12% | 画素の実測 | | `tint-1` | `#EDFAFF` | 円形ブロブ・カードの水色面 | 8% | 画素の実測 | | `tint-2` | `#D0EBF7` | 波形の水色帯 | 4% | 画素の実測 | | `accent-1` | `#1FAFE1` | 英字見出し・ニュースの明るいシアン | 0% | 画素の実測 | | `secondary` | `#0D5DA2` | セクション見出しの青文字 | 1% | 画素の実測 | | `text` | `#1E2A38` | 見出し・本文の濃紺寄りの黒 | 3% | 推定 | | `text-muted` | `#4A5560` | 注釈・所属などの灰色文字 | 1% | 推定 | | `on-primary` | `#FFFFFF` | 青地の上の白文字 | 2% | 画素の主要色に補正 | | `cta` | `#016DBC` | 矢印ボタン・応募カード内の青いピル | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | 青ピル上の白矢印 | 0% | 画素の主要色に補正 | | `line` | `#0F66AE` | アウトラインボタンの青枠線 | 0% | 画素の実測 | | `dark-section` | `#234066` | 写真上に重ねる濃紺 | 4% | 画素の主要色に補正 | - 地は白・淡いグレーブルー・水色を順に切り替えて、セクションの区切りを色でゆるく示す - 濃い青の全面セクションは、メッセージと応募導線の2か所だけに絞る - 青地では白文字と白いボタン（青矢印）を使い、白地では青い枠線ボタンを使う - 明るいシアンは英字ラベルと小さな装飾に限って使う - 赤やオレンジなどの暖色は UI に使わない。写真の中だけにとどめる - 写真の上に半透明の白・水色グラデーションを重ねて背景になじませる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの斜体ロゴ風コピー | 装飾・ディスプレイ | Zen Kaku Gothic New | 900 | 44px | 1.1 | 0.0em | | `headline-lg` | セクションの見出し（青文字） | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.4 | 0.05em | | `headline-md` | メッセージ見出し（2行） | ゴシック | Zen Kaku Gothic New | 700 | 19px | 1.7 | 0.06em | | `headline-sm` | カード見出し・インタビューの一言 | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.6 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 12px | 2.2 | 0.1em | | `note` | 所属・入社年・日付 | ゴシック | Noto Sans JP | 400 | 10px | 1.7 | 0.03em | | `accent` | 英字サブラベル・ENTRY 帯・応募カードの英字 | 欧文サンセリフ | Josefin Sans | 500 | 16px | 1.3 | 0.05em | | `label-button` | ボタンのラベル | ゴシック | Zen Kaku Gothic New | 700 | 13px | 1.0 | 0.1em | - セクション見出しは日本語を青で大きく書き、下に引用符アイコン付きの英字ラベルを小さく添える - 本文は行間を約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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-56695ffb`（元 LP の URL から採番） - **元 LP**: https://recruit.toyox.co.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。