--- version: alpha name: Bold Navy & Cyan Slash Recruit LP description: 濃紺とシアンブルーを軸に、斜めのスラッシュ装飾と細長い欧文見出しで力強さを出した整備・物流系の採用LP。白とライトグレーの面を交互に置き、数字のインフォグラフィックや番号付きフローで情報を整理している。 colors: primary: '#192988' secondary: '#0195DF' background: '#FFFFFF' background-alt: '#EDEEF0' text: '#222222' accent-1: '#192876' dark-section: '#222222' cta: '#192876' on-cta: '#EEFDFF' surface: '#FEFFFE' line: '#EDEEF0' on-dark: '#F6FEFF' typography: display: fontFamily: Oswald fontSize: 36px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.03em accent: fontFamily: Oswald fontSize: 48px fontWeight: 700 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.02em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' sticky-entry: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 56px section-heading: textColor: '{colors.text}' typography: '{typography.display}' height: 70px job-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 380px stat-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.accent}' height: 130px benefit-item: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 110px flow-step: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 90px button-requirement: backgroundColor: '{colors.primary}' typography: '{typography.label-button}' height: 42px entry-banner: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 115px --- # DESIGN.md — 紺×シアンの斜めカットが効いた現場系採用LP（Bold Navy & Cyan Slash Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 力強い・インパクト、信頼・誠実、クール・先進的、情報量多め・訴求型 - **キーワード**: 斜めスラッシュ・濃紺・シアングラデ・コンデンス欧文見出し・現場写真・インフォグラフィック - **地の質感**: フラットな単色面と青のグラデーション。影はほぼなく、写真の質感で現場感を出す - **形**: 角丸なしの四角。カードの右下やボタン右端を斜めにカットし、平行四辺形の帯を装飾に使う - **温度感**: クールで硬派。写真の人物の笑顔で親しみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#192988` | 濃紺。数字・ボタン・フッター | 9% | 画素の実測 | | `secondary` | `#0195DF` | シアンブルー。FV帯・斜め装飾 | 4% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 34% | 画素の実測 | | `background-alt` | `#EDEEF0` | ライトグレーの帯セクション・カード地 | 18% | 画素の実測 | | `text` | `#222222` | 見出し・本文の黒 | 4% | 推定 | | `accent-1` | `#192876` | 本文中の強調文字の紺 | 1% | 画素の主要色に補正 | | `dark-section` | `#222222` | エントリーバナーの黒 | 2% | 画素の実測 | | `cta` | `#192876` | 追従CTAのグラデ起点紺 | 2% | 画素の主要色に補正 | | `on-cta` | `#EEFDFF` | CTA上の白文字 | 1% | 画素の実測 | | `surface` | `#FEFFFE` | グレー地上の白カード | 8% | 画素の実測 | | `line` | `#EDEEF0` | 福利厚生リストの区切り線 | 1% | 画素の主要色に補正 | | `on-dark` | `#F6FEFF` | フッター・黒面上の白文字 | 1% | 画素の実測 | - 白とライトグレーのセクションを交互に置く - 数字・番号・ボタンは濃紺で統一 - 斜め装飾と棒グラフは紺→シアンのグラデーション - 本文中のキーワードだけ紺の文字色にする - 締めのエントリーバナーは黒地に白文字 - フッターは濃紺ベタ ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの英字大見出し | 欧文サンセリフ | Oswald | 700 | 36px | 1.1 | 0.02em | | `headline-lg` | リード見出し（紺） | ゴシック | Noto Sans JP | 700 | 20px | 1.6 | 0.04em | | `headline-md` | 職種名・カード見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.04em | | `headline-sm` | 英見出し上の和文ラベル | ゴシック | Noto Sans JP | 700 | 11px | 1.4 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 11px | 1.9 | 0.03em | | `accent` | インフォグラフィックの大きな数字・番号 | 欧文サンセリフ | Oswald | 700 | 48px | 1.0 | 0.0em | | `label-button` | ボタン・リンク文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.08em | | `note` | 注釈・単位 | ゴシック | Noto Sans JP | 500 | 9px | 1.5 | 0.02em | - 英字見出しは細長いコンデンス体で大きく黒 - 英字見出しの上に紺の二本斜線＋小さな和文ラベル - 数字は極太コンデンス体で、単位は小さく添える - 本文は中太ゴシックで行間広め - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム（インフォグラフィックの一部は 2 カラム） - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 左右余白は約16px - カード同士の間隔は約12〜20px - 英字見出しの背面に薄い巨大英字を透かす - 写真は横長でカード上部に全幅で置く - セクションの区切りに斜めの帯を入れる - 画面下部に追従のエントリーボタンを置く ## Elevation & Depth - 影はほぼ使わずフラット - 白カードはグレー地との色差で浮かせる - 追従CTAだけ画面最前面に固定 ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの横長長方形。FVは斜めの切れ目で写真を分割 - **セクション境界**: 直線。境界に平行四辺形の青い帯を重ねる - カードやボタンは右下を斜めにカット - 丸は矢印アイコンの円だけに使う - 装飾は平行四辺形を2本並べる ## Components - **追従エントリーボタン**（`sticky-entry`）: 画面下に固定する紺→シアンのグラデ帯。封筒アイコンと英字小見出し＋和文 - **英字セクション見出し**（`section-heading`）: 紺の二本斜線＋和文ラベルの下に大きなコンデンス英字 - **職種カード**（`job-card`）: 上に写真、下がグレー地。紺の英字番号、見出し、本文、丸矢印付きリンク。右下を斜めカット - **数字カード**（`stat-card`）: グレー地上の白カード。見出し中央、大きな紺数字、アイコンや棒グラフを添える - **福利厚生リスト**（`benefit-item`）: 白地に線で区切った行。シアンの斜線アイコン付き見出しと本文。強調語は紺 - **フローステップ**（`flow-step`）: グレー帯の左に紺の正方形アイコン、紺の番号と見出し、下に説明文 - **募集要項ボタン**（`button-requirement`）: 紺ベタで右端が斜めカット。白文字と白丸の矢印 - **エントリーバナー**（`entry-banner`）: 黒地に英字小見出しと大きな白文字、右に白丸矢印。下に白い電話番号ボックス ## Do's and Don'ts **Do** - 見出しは必ずコンデンス英字＋和文ラベルの2段にする - 斜めのカットと平行四辺形を繰り返し使う - 数字は大きく、単位は小さくする - 白とグレーのセクションを交互にする - 現場で働く人物写真を多めに使う **Don't** - 角丸やピル型ボタンを使わない - 暖色やパステルを入れない - 明朝体や手書き体を使わない - ソフトな影やぼかしを多用しない - 見出しを細いウェイトにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（採用ページであることと現場の雰囲気を伝える）: シアン帯に和文ラベルと巨大英字。下に斜めで区切った3枚の現場人物写真 2. **リード・動画**（会社の事業と求める人物像を伝える）: 紺の太字リード見出し3行と本文。下に募集動画のサムネイルと注釈 3. **募集職種**（職種ごとの仕事内容を紹介）: 写真付きグレーカードを縦に3枚。番号・見出し・本文・詳細リンク 4. **数字で見る会社**（規模や働き方を数字で見せる）: グレー地に白カードを並べ、大きな紺数字や棒グラフ・人型アイコンで表現 5. **待遇・福利厚生**（働きやすさを具体的に示す）: 集合写真の下に線区切りのリスト。斜線アイコン付き見出しと強調語入り本文 6. **写真ギャラリー帯**（現場の空気感を補足）: 横長の写真を3枚つなげた全幅帯 7. **選考フロー**（応募から内定までの流れを示す）: 紺の正方形アイコンと番号付きのグレー帯を5つ縦に並べる 8. **募集要項・エントリー**（職種別要項と応募へ導く）: グレー地に紺の斜めカットボタン3本、黒のエントリーバナー、電話ボックス 9. **フッター**（会社情報と拠点を掲載）: 濃紺ベタに白文字で拠点住所を中央揃え ## Imagery - 作業着姿の社員が働く現場写真。整備場やトラック運転席など - 明るく自然光寄り、青みがかった色調で統一 - 人物は笑顔のアップや集合写真で親しみを出す - 人型アイコンや線画アイコンは紺〜シアンのシンプルな形 - 背景に薄いグレーの巨大英字を透かす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは本文幅約80%で中央寄せ - 職種カードはPCで3カラム横並び - インフォグラフィックはPCで2カラムグリッド - 福利厚生リストはPCで2カラム - 募集要項ボタンはPCで3つ横並び - PCはヘッダーにグローバルナビ、追従CTAは右下の小さなボックス ## 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-b3e6065c`（元 LP の URL から採番） - **元 LP**: https://carringsupport-lg.com/recruit/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。