--- version: alpha name: Warm Ivory Editorial Recruitment LP description: 生成りの地に、チャコールの欧文大見出しと鮮やかなオレンジのピル型ボタンを合わせた採用サイトです。大判の人物写真を角丸なしで敷き詰め、余白と細い罫線でセクションを区切ります。雑誌のような端正な構成です。 colors: background: '#FFFCF7' primary: '#F26521' cta: '#F26521' on-cta: '#FFFFFC' text: '#373735' text-body: '#384349' line: '#CEC7C2' surface: '#FEFBF6' dark-section: '#384349' background-alt: '#F7F6F1' on-dark: '#FFFFFC' accent-1: '#F98248' cta-accessible: '#CC4B0C' primary-accessible: '#CC4B0C' typography: display: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-lg: fontFamily: Inter fontSize: 26px fontWeight: 600 lineHeight: 1.1 letterSpacing: -0.01em headline-md: fontFamily: Inter fontSize: 21px fontWeight: 600 lineHeight: 1.2 headline-sm: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 2.1 letterSpacing: 0.03em note: fontFamily: Inter fontSize: 9px fontWeight: 500 lineHeight: 1.3 accent: fontFamily: IBM Plex Mono fontSize: 9px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em label-button: fontFamily: Inter fontSize: 13px fontWeight: 600 lineHeight: 1.0 rounded: sm: 0px md: 4px lg: 999px full: 999px spacing: unit: 8px card: 16px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 38px header-entry: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 22px heading-bilingual: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 50px photo-title-card: textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 260px tag-pill: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 36px interview-label: textColor: '{colors.primary}' typography: '{typography.accent}' height: 14px news-row: textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 40px --- # DESIGN.md — 生成り地×オレンジの写真主体の採用 LP（Warm Ivory Editorial Recruitment LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: シンプル・ミニマル、信頼・誠実、上品・高級 - **キーワード**: 生成り地・欧文大見出し・大判人物写真・オレンジのピルボタン・細罫線・エディトリアル - **地の質感**: フラットな生成りの地。影や質感の装飾はない - **形**: 写真は角丸なしの長方形。ボタンだけを完全なピル型にする - **温度感**: やや暖かい。生成りとオレンジが温かさを、チャコールが落ち着きを出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FFFCF7` | ページ全体の生成り地 | 45% | 画素の実測 | | `primary` | `#F26521` | ブランドオレンジ・ロゴ・強調語 | 3% | 画素の実測 | | `cta` | `#F26521` | View More などのピルボタン | 2% | 画素の実測 | | `on-cta` | `#FFFFFC` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `text` | `#373735` | 欧文大見出しのチャコール | 1% | 画素の実測 | | `text-body` | `#384349` | 本文 | 2% | 画素の主要色に補正 | | `line` | `#CEC7C2` | セクション区切りの細い罫線 | 0% | 画素の主要色に補正 | | `surface` | `#FEFBF6` | 白いピル型タグ | 0% | 画素の実測 | | `dark-section` | `#384349` | ブランド映像の暗いオーバーレイ | 6% | 画素の主要色に補正 | | `background-alt` | `#F7F6F1` | PC の SNS 誘導帯の淡いグレー地 | 2% | 画素の実測 | | `on-dark` | `#FFFFFC` | 写真上の白見出し | 0% | 画素の主要色に補正 | | `accent-1` | `#F98248` | フッターの明るいオレンジ面 | 3% | 画素の実測 | | `cta-accessible` | `#CC4B0C` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#CC4B0C` | AA を満たす補正値（計算） | | 計算 | - 地は生成り一色に統一し、セクション間は色を変えずに細い罫線で区切る - オレンジはボタン・ロゴ・本文中の強調語・小ラベルだけに使う - 見出しと本文はチャコールにし、純黒は使わない - 写真の上に置く文字は白にし、写真の上部か下部に寄せる - フッターなどの大きな面だけを明るいオレンジ地にする - `button-primary` は文字 `#FFFFFC` × 背景 `#F26521` のコントラスト比が 3.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#CC4B0C`、4.58:1）を使う。 - `header-entry` は文字 `#FFFFFC` × 背景 `#F26521` のコントラスト比が 3.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#CC4B0C`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャッチ（写真の上・白文字） | ゴシック | Noto Sans JP | 700 | 28px | 1.5 | 0.02em | | `headline-lg` | セクションの欧文大見出し | 欧文サンセリフ | Inter | 600 | 26px | 1.1 | -0.01em | | `headline-md` | サブ項目の欧文見出し | 欧文サンセリフ | Inter | 600 | 21px | 1.2 | 0.0em | | `headline-sm` | 欧文見出しの下に添える和文の小見出し | ゴシック | Noto Sans JP | 700 | 11px | 1.5 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 12px | 2.1 | 0.03em | | `note` | 写真下の欧文キャプション | 欧文サンセリフ | Inter | 500 | 9px | 1.3 | 0.0em | | `accent` | インタビュー下の等幅ラベル | 欧文サンセリフ | IBM Plex Mono | 500 | 9px | 1.4 | 0.05em | | `label-button` | ピルボタンの文字 | 欧文サンセリフ | Inter | 600 | 13px | 1.0 | 0.0em | - 見出しは「大きな欧文＋その下に小さな和文」の 2 段で組む - 欧文見出しは字間をやや詰め、太めのグロテスク系にする - 本文は小さめにし、行間を 2 前後と広く取る - 本文中で強調する語はオレンジの文字色にする - 写真下のキャプションは欧文の小さな文字で複数行に並べる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は 2 カラム（左に見出し、右に本文）と写真 2 枚並び - **本文ブロックの幅**: 画面幅の約 91% - **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算） - 左右の余白は約 18px で揃え、写真もその幅に収める - 見出しは左揃えで統一する - 見出しと本文のブロックは罫線で区切る - ボタンは左寄せで幅は約 150px - 写真ブロックの間は 50〜60px 空ける ## Elevation & Depth - 基本は影なしのフラット - 白いピル型タグだけにごく薄い影を付ける - PC の SNS 誘導帯にある写真カードは、オレンジの板を傾けて重ねた表現にする ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: 角丸なしの長方形。人物写真は縦長、ブランド映像は正方形に近い比率 - **セクション境界**: 全幅または本文幅の 1px 細罫線 - 写真に角丸を付けない - ボタンとタグは完全なピル型にする - 罫線は 1px の淡いグレーにする ## Components - **オレンジのピルボタン**（`button-primary`）: 欧文の短いラベルを入れ、左寄せで配置する - **ヘッダーのエントリーボタン**（`header-entry`）: 小さな角丸の矩形ボタン。右にハンバーガーメニューを置く - **欧文＋和文の 2 段見出し**（`heading-bilingual`）: 大きな欧文の下に小さな太字の和文を添える - **写真上に見出しを載せたカード**（`photo-title-card`）: 全幅の写真の左上に白い欧文見出しを載せ、写真の下に欧文キャプションを置く - **白いピル型タグ**（`tag-pill`）: 白地に小さな欧文とオレンジのきらめきアイコンを入れる - **等幅のインタビューラベル**（`interview-label`）: 写真の下に置く。先頭の語をオレンジ、残りをチャコールにする - **お知らせ行（PC）**（`news-row`）: オレンジのカテゴリ帯・日付・下線付きタイトルを横一列に並べ、罫線で区切る ## Do's and Don'ts **Do** - 写真は大きく使い、角丸を付けない - 地は生成りにし、区切りは罫線で表す - 見出しは欧文と和文を組み合わせる - オレンジは要点だけに絞って使う - 余白を広く取る **Don't** - グラデーションや強い影を使わない - オレンジを背景に多用しない - 見出しを中央揃えにしない - 装飾的なイラストやアイコンを乱用しない - 純白や純黒の地を広く使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ブランド表示とエントリーへの導線）: 左にロゴ、右にオレンジのボタンとハンバーガーメニューを置く 2. **ファーストビュー**（働く人の印象を伝える）: 欧文のサイトタイトルの下に縦長の人物写真を置き、白い和文キャッチを重ねる 3. **会社紹介**（理念と仕事の価値を伝える）: 罫線の下に 2 段見出しを置き、強調語をオレンジにした本文とピルボタンを続ける 4. **ブランド映像**（空間の雰囲気を伝える）: 暗めの写真の中央に白いロゴを載せる 5. **メッセージ・職種紹介**（各ページへ誘導する）: 写真の上に見出しを載せたカードを縦に並べ、下に欧文キャプションを置く 6. **働く環境・育成・FAQ**（制度の概要を示す）: 罫線で区切った 2 段見出し＋短文＋ピルボタンのブロックを繰り返す 7. **社員インタビュー**（働く人の姿を見せる）: 縦長の人物写真の左上にイニシャルと職種を載せ、下に等幅ラベルを置く 8. **SNS 誘導**（公式アカウントへの誘導）: 淡いグレーの帯に大きな欧文の問いかけを置き、傾けた写真カードを添える 9. **採用情報のお知らせ**（最新情報を伝える）: オレンジのラベル・日付・タイトルを罫線リストで並べる 10. **エントリー**（応募への誘導）: 写真の上にオレンジと白の矩形ボタンを格子状に並べる 11. **フッター**（サイト内のナビゲーション）: 明るいオレンジ地に白文字のリンク群を並べる ## Imagery - 実在の社員を自然光の明るい空間で撮る - 人物は制服姿の全身から半身で、穏やかな笑顔にする - 背景にはショールームや家具などの住空間を浅い被写界深度で入れる - 色調は暖かく、やや低彩度に仕上げる - ブランド映像は暗めに落として、白いロゴを重ねる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は会社紹介を左右 2 分割にし、縦の罫線で区切る - PC では写真カードを 2 枚横に並べる - PC の環境セクションは左に見出し、右に罫線リストを置く - PC のファーストビューは横長写真にし、キャッチを左に重ねる - PC のヘッダーにはエントリーボタンを 2 つ並べる ## 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-74793b12`（元 LP の URL から採番） - **元 LP**: https://www.las-recruit.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。