--- version: alpha name: Warm Beige Pop Illustration Recruit LP description: 生成りベージュの地に、赤のアクセント、ミントと黄色の差し色を使った採用 LP。人物の切り抜き写真、円形や角丸の写真枠、手描き風の人物イラスト、円弧に沿った欧文の装飾文字で、親しみと誠実さを両立させている。セクションの境目は大きな円弧で切り替える。 colors: primary: '#EE0010' background: '#EEE7D5' surface: '#FFFFFF' cta: '#292929' on-cta: '#FAFCFA' secondary: '#01D0C6' accent-1: '#FDEA2A' text: '#050302' dark-section: '#6B747E' on-dark: '#FFFFFF' background-alt: '#F3F3F3' tint-1: '#F6F4EB' line: '#CABBB0' secondary-accessible: '#01847E' typography: display: fontFamily: Archivo Black fontSize: 40px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.1em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.1em accent: fontFamily: Archivo Black fontSize: 12px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.12em body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 500 lineHeight: 2.3 letterSpacing: 0.08em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.03em rounded: sm: 8px md: 16px lg: 40px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' 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: 48px button-entry: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 145px button-requirements: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 125px section-heading: textColor: '{colors.text}' typography: '{typography.display}' height: 110px pill-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 300px news-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.md}' height: 140px event-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 120px interview-caption: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 44px job-row: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 130px --- # DESIGN.md — 生成り×赤×ミントのポップな採用サイト LP（Warm Beige Pop Illustration Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: ポップ・元気、親しみ・手作り感、信頼・誠実、やさしい・柔らかい - **キーワード**: 生成りベージュ・赤のワンポイント・ミントの縁取り・人物イラスト・円弧の境界・太い欧文見出し - **地の質感**: ベージュ地にうっすら曲線の地模様。写真は自然光の明るい屋外・オフィス - **形**: 大きな円弧の境界、円形写真、縦長ピル型カード、角丸写真 - **温度感**: 暖かく明るい。赤と黄色で元気さ、ダークグレーで締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#EE0010` | ブランド赤（見出しラベル・矢印アイコン・エントリー） | 3% | 画素の実測 | | `background` | `#EEE7D5` | 生成りベージュの地 | 30% | 画素の実測 | | `surface` | `#FFFFFF` | 白いカード・職種セクションの面 | 24% | 画素の主要色に補正 | | `cta` | `#292929` | ダークのピル型ボタン | 2% | 画素の実測 | | `on-cta` | `#FAFCFA` | ボタン上の白文字 | 0% | 画素の実測 | | `secondary` | `#01D0C6` | ミント（募集要項ボタン・カードの下縁） | 4% | 画素の実測 | | `accent-1` | `#FDEA2A` | 黄色（イベントバッジ・見出しサブ） | 1% | 画素の実測 | | `text` | `#050302` | 見出し・本文の黒 | 3% | 画素の実測 | | `dark-section` | `#6B747E` | インタビュー背景の暗いグレー | 10% | 画素の実測 | | `on-dark` | `#FFFFFF` | 暗い面の白い見出し | 0% | 画素の主要色に補正 | | `background-alt` | `#F3F3F3` | フッター関連事業の薄グレー面 | 4% | 画素の実測 | | `tint-1` | `#F6F4EB` | アイコン円の淡いベージュ | 1% | 画素の実測 | | `line` | `#CABBB0` | フッター区切り線 | 0% | 画素の主要色に補正 | | `secondary-accessible` | `#01847E` | AA を満たす補正値（計算） | | 計算 | - 地は生成りベージュ、情報のかたまりは白の大きな角丸面に載せる - 赤は英字ラベル・丸矢印アイコン・エントリーボタンだけに使い、面積を小さく保つ - ミントは募集要項ボタンとカード下縁のアクセントに限定 - 黄色はイベントバッジと暗い面のサブ見出しに使う - インタビューは暗いグレーの写真背景に白文字で、ページの中盤を引き締める - ボタンはダーク地に白文字、右端に赤丸の矢印を置く - `button-requirements` は文字 `#FFFFFF` × 背景 `#01D0C6` のコントラスト比が 1.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#01847E`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの英字大見出し | 欧文サンセリフ | Archivo Black | 900 | 40px | 1.1 | 0.02em | | `headline-lg` | メッセージの和文見出し | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.7 | 0.1em | | `headline-md` | 和文サブ見出し（赤や黄色） | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.5 | 0.08em | | `headline-sm` | カード名・職種名 | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.6 | 0.1em | | `accent` | 小さな英字ラベル（MESSAGE 等） | 欧文サンセリフ | Archivo Black | 800 | 12px | 1.3 | 0.12em | | `body-md` | 中央揃えの本文 | ゴシック | Zen Kaku Gothic New | 500 | 14px | 2.3 | 0.08em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.05em | | `note` | ニュース日付・コピーライト | ゴシック | Noto Sans JP | 500 | 11px | 1.6 | 0.03em | - 見出しは『英字の大見出し → 赤の短い横線 → 和文の小見出し』の 3 段で中央揃えにする - 本文は中央揃えで、行間 2.2 以上・字間を少し広めにとる - ファーストビューのコピーは白い短冊に縦書きで、1 語だけ赤にする - 白抜きのアウトライン欧文を円弧や横帯に流して装飾にする - 和文は角ゴシックの太字にし、丸ゴシックは使わない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。制度カードは 2 列、職種リストは写真と名前の横並び - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - セクション間は 70〜100px の広い余白 - 写真 2 枚はずらして重ね、間にイラストを散らす - 職種リストは写真 45%、名前、右端の赤矢印を 1 行に並べる - CTA ボタンは幅 65% の中央配置 - フッターは英字カテゴリと和文リンクの 2 列 ## Elevation & Depth - 影はほぼ使わずフラットにする - カードは白地にミントの下縁ラインで立体感を出す - バナーにはごく薄い影か縁取りだけ ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 人物は円形や楕円で切り抜く。現場写真は角丸 16px。FV は人物の集合切り抜きを風景に重ねる - **セクション境界**: 大きな凸型の円弧で地色を切り替える。白面は下端の角を大きく丸める - 制度カードは上下が半円の縦長ピル型 - ボタンは完全なピル型 - バナーは角丸 24px 前後 - イベントバッジは黄色のギザギザ円 ## Components - **ダークのピル型ボタン**（`button-primary`）: 中央に白文字、右端に赤丸の白矢印 - **大きなエントリーボタン**（`button-entry`）: 赤の角丸面。黄色の英字ラベルと白の太字和文、右下に白丸矢印 - **募集要項ボタン**（`button-requirements`）: ミントの角丸面。黄色の英字ラベルと白い和文 - **英和 3 段見出し**（`section-heading`）: 太い英字、赤い短い横線、赤い和文の小見出し - **縦長ピル型の制度カード**（`pill-card`）: 白地。淡い円の中にアイコン、太字のタイトル、赤丸矢印。下縁はミント - **お知らせボックス**（`news-box`）: 白い角丸の箱。左に赤い縦線、日付・見出し・赤矢印を 2 件と一覧リンク - **イベントバッジ**（`event-badge`）: 黄色のギザギザ円を斜めに置き、黒文字と赤の CLICK 表記 - **インタビューのキャッチ帯**（`interview-caption`）: 円形の人物写真の下に、白い角丸の帯を 2 行に分けて置く - **職種リストの行**（`job-row`）: 角丸の写真、職種名、赤丸矢印の横並び ## Do's and Don'ts **Do** - 地は生成りベージュにし、白の大きな面と交互に使う - 人物イラストを各セクションの角に散らして動きを出す - 矢印はすべて赤丸に白い山形でそろえる - 写真は笑顔の社員を明るい自然光で見せる - 円弧や円形を多用して柔らかい印象にする **Don't** - 赤を広い面に使わない（エントリーボタンだけは例外） - 角張った四角い写真や直線のセクション境界にしない - 濃い影やグラデーションのボタンにしない - 本文を左揃えの詰まった段落にしない - 暗い面を何度も使わない（インタビューの 1 か所だけ） ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（社員の集合と理念で第一印象をつくる）: 空と道路の写真に社員の集合切り抜きを重ね、縦書きコピーを白い短冊で並べる。下に白抜きの大きな欧文 2. **お知らせ・イベント**（最新の採用イベントへ誘導する）: 左に白いお知らせボックス、右に黄色のギザギザ円バッジ 3. **メッセージ**（仕事の意義を伝える）: 円弧に沿う欧文の装飾、3 段見出し、中央揃えの本文、ダークのボタン、ずらして重ねた写真 2 枚 4. **先輩社員インタビュー**（社員の人柄を見せる）: 円弧で切り替わる暗い写真背景。白い英字と黄色の和文、円形写真のスライダー、左右に黒丸の矢印、白いキャッチ帯 5. **働く環境**（キャリア・教育・福利厚生などを案内する）: 縦長ピル型の白カードを 2×2 で並べ、アイコンと赤矢印を置く 6. **特設コンテンツ**（データ紹介や診断コンテンツへ誘導する）: 緑と黄色のポップなイラストバナーを角丸で縦に並べる 7. **職種紹介**（職種の一覧を見せる）: 円弧の白い面に 3 段見出しとリード文、写真付きの職種行を並べ、最後にダークのボタン 8. **SNS 誘導**（SNS のフォローを促す）: グリッド地にピンクの曲線を入れたバナー。白い帯にグラデーション文字 9. **エントリー CTA**（応募へ誘導する）: 社員写真のコラージュを背景に白い呼びかけ文。ミントと赤の大きな角丸ボタンを 2 つ置く 10. **フッター**（サイト内の案内と関連事業を載せる）: 白地に英字カテゴリ（赤）と和文リンク。薄グレーの面に関連事業のバナーと認定ロゴ ## Imagery - 社員を制服姿で明るく笑わせ、ガッツポーズなどの動きのある集合写真にする - 運転指導や講義など、現場の自然な様子を自然光で撮る - フラットで少しラフな人物イラスト（黄・赤・ミント・紺）を余白に散らす - ひよこ・本・ノートPC・車などの小さなイラストで遊びを出す - アイコンは細い線に淡い彩色の手描き風にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央にコンテンツを置き、写真やイラストを左右に広く散らす - PC の制度カードは 4 列で横に並べる - PC の特設バナーは 2 列にする - PC の職種は楕円写真を 3 列＋2 列のグリッドにする - PC のエントリー CTA は 2 つのボタンを横に並べる - PC はヘッダー右上に募集要項（ミント）とエントリー（赤）のピル型ボタンを常に表示する ## 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-50768e2b`（元 LP の URL から採番） - **元 LP**: https://www.tnec.jp/recruit/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。