# 採用LPモック（/recruit）

corporate-site の `/recruit` に実装した採用LPのモック。ブランチ `feature/recruit-page-mock`
（ベース: `feature/agents-pages-mock` = PR #2478。DS基盤・メンバー写真を再利用するため）。

- 実装: `corporate-site/src/app/recruit/`（コピーの正本は `_lib/recruitContent.ts`、リンクは `_lib/links.ts` に集約）
- `agents/` 配下と `packages/design-system` 本体は**不変更**（import のみ。PR #2478 との衝突回避）
- モックのため全ページ noindex。切り替えは `corporate-site/src/lib/seo/siteVisibility.ts` の `SITE_NOINDEX` 1箇所（robots メタ・robots.txt・sitemap.xml が派生する）
- 情報設計（R9）: ページの問いは「なぜ、いまリメディでヘッドハンターをやるのか」。答えは①両側から意思決定に関わる仕事の魅力 ②属人的な業界を仕組みで変える会社 ③未経験から成果を出している人と数字、の3段。各セクションは「そのセクションで伝えること」を1文で言えるように保つ（ユーザー指示: 伝えられた内容をそのまま書かない・粒度を揃える・グレー補足はなくても伝わるように）
- ヒーロー背景: [whatamesh](https://github.com/jordienr/whatamesh)（MIT）の Gradient クラスを `_lib/vendor/whatamesh-gradient.ts` にベンダリング（npm 依存は追加しない）。色は `HeroMeshGradient.tsx` の CSS 変数
- セクション順（R7・2026-09-04）: ヒーロー → ヘッドハンターの仕事（CA/RA・両面型/分業型・年収の仕組み・5つの専門性）→ リメディの特徴（領域特化×複数領域／テクノロジー／ナレッジ共有の文化）→ 社員インタビュー（出身企業の帯＋7名）→ リメディの文化（写真は仮枠）→ 中間CTA → 理念・MVV → 代表メッセージ → データで見る → キャリアパス（年収実績の例を大きく）→ 報酬制度 → 働く環境 → 求める人物像 → 経営メンバー → 会社紹介 → 募集職種 → 選考プロセス/FAQ → 最終CTA。旧「自社プロダクトの強み」節は特徴に統合（`ANCHOR.edge` は `#features` へ）
- エンジニア採用ページ（R19・2026-09-07）: LayerX/MyVision を参考に「この事業のここが面白い」（4本柱）→「メンバーの声」（プロダクトを使うヘッドハンター4名の verbatim 引用）→「メンバー紹介」（金臣・隣・田口・亀谷・正覚。公式 members ページ準拠、写真も同ページから取得）を「何をつくるのか」の直後に追加
- エンジニア採用ページ改訂（MyVision engineering-careers 参考・2026-09-09）: ヒーロー直下にカジュアル面談への即時導線帯 `CasualInterviewBand` を追加（選考要素なし・履歴書不要を明記）。「何をつくるのか」に画面プレースホルダ3枠（求人検索 XROSS／面談メモの構造化／履歴書メーカー）を追加。開発チーム6名（金臣・隣・田口・亀谷・正覚・大野正俊）の記事へは「メンバー紹介」の各行から「インタビュー」リンクで導線（2026-09-09の構造リファクタで独立セクションを廃止）。「メンバー紹介」から写真ギャラリーを分離し「開発チームの雰囲気」として独立セクション化（6枚: 定例／機能レビュー／動作確認／オフィス／全社会議／業務委託との定例）。新設「開発文化」（3本柱: ヘッドハンターの隣でつくる／小さく出して毎週直す／AIを前提に設計する）。技術スタック・働く環境・選考プロセスの3節は意図的に非掲載
  - 開発チームインタビュー6本（`content/articles/engineers/*.mdx`）は取材前の下書き（frontmatter `reviewStatus: draft`）。公開プロフィールと `engineersContent.ts` に既に記載済みの事実（経歴・プロダクト・開発文化・仕事内容）のみから質問形式に再構成したもので、本人の発言そのものではない。**公開前に必ず本人確認が必要**（各ファイルの frontmatter `reviewStatus` / `note` に記載）。業務委託の5名（Miki Matsumoto・伊達・北島・田村・西本）は取材素材がないためインタビューは作成せず、メンバー紹介への掲載のみ
  - 追加した写真プレースホルダ枠: 「何をつくるのか」の画面3枠（枠のみ・キャプションで用途を示す）、「開発チームの雰囲気」の写真6枚（従来4枚から増量）
- エンジニア採用ページ改訂（2026-09-09。2026-09-10 に `/recruit/engineers` 本体へ昇格）: レビューを受けて別ルートで検証していた案。差し替えたのはヒーロー・「何をつくるのか」・開発現場の3ブロックで、「仕事内容」から下（募集職種・FAQ・最終CTA）は旧構成のまま
  - ヒーロー（`EngineersHero`）: 左にコピーと主CTA「カジュアル面談を予約する」、右に求人検索 XROSS の画面を上部だけ切り取って配置。ヒーローに主CTAを置いたため `CasualInterviewBand` は不使用
  - 「何をつくるのか」（`ProductShowcase`）: 画面3枚の横並びをやめ、主役事例（XROSS の「使う人／判断すること／いま改善していること」）1枚＋小事例2枚＋機能紹介動画枠に再構成
  - 「誰と、どうつくるか」（`DevSceneSection`・`MemberRows`）: 事業の魅力／CTOから／メンバー紹介／開発チームの雰囲気／開発文化の5節を1章に統合。メンバーは行レイアウトで「いま担当していること」を追加し、写真のないメンバーには空枠を出さない
  - 要本人確認のドラフト文言（`engineersContent.ts` の TODO コメント）: CTO のプルクォート、メンバーの「いま担当していること」、ヒーローの3つの事実（働き方・技術スタック）
  - 2026-09-10 フィードバック反映
    - 章の順を「ヒーロー → 何をつくるのか → 仕事内容 → 働き方と開発環境 → 誰と、どうつくるか → 選考の流れ → 募集職種 → よくある質問 → 最終CTA」に変更（メンバー紹介より先に仕事内容が来る）
    - 「働き方と開発環境」を新設（`ENGINEERS_WORKSTYLE`・罫線の行で 項目 → 内容）。働き方・技術スタックは「仕事内容」のリードから移設し、使えるAI・新しいツール・AIの利用予算・上限とセキュリティを追加（出典: 金臣CTO回答（2026-09）。文言は Gemini レビュー前）
    - 「選考の流れ」を新設。手順は総合採用ページの `PROCESS` をそのまま import（文言を複製しない）
    - ヘッダーに `secondaryLink`（総合採用ページへの導線）を追加。ページ内アンカーと見分けがつくよう縦罫で区切り、下線と矢印を添える。ナビは章順に並べ替え、「働き方」はラップトップ幅で収まらないため出していない
    - 募集職種を `PositionsList` の `variant="compact"`（職種名・1行概要・年収。値の無い桁は出さない）に変更。1行概要は ATS スナップショットに項目が無いため未設定（`JobPosting.summary`）
    - スマホ下部CTAバーの非表示判定を「ヒーロー または 最下部CTA帯が一部でも見えている間」に変更（`MobileCtaBar` の `hideWhileInViewIds`。判定は比率ではなく threshold 0）
    - ページ内アンカーの着地位置を `ds:scroll-mt-[80px]` に変更（ヘッダー実高 約74px。/recruit 側の recruit variant も同じ値）
    - 総合採用ページ（/recruit）のヒーロー直下に「知りたいことから選ぶ」（カルチャー／事業内容／募集職種の3リンク）を追加
  - このラウンドで未着手・素材待ち（担当・期日）
    - メンバー各人の普段の写真（今週中）
    - インタビュー（金臣・隣・正俊・宮脇・正覚・田口・亀谷。今週中）
    - 対談の録音と写真
    - エンジニア向け採用資料
    - プロダクト構想の開示範囲
    - キャリアパス（章として未作成。事実が固まるまで書かない）
    - チームの活動指針（同上）
    - 金臣CTOの開発体験談と、それに対するメンバーの反応
    - 福利厚生
    - 「エージェントが強く、エンジニアの裁量が弱いのでは」という懸念への回答
    - ビジョンの説明
- ページ構成: `/recruit`（総合）・`/recruit/engineers`（エンジニア採用）・`/recruit/interviews/[slug]`（インタビュー記事14本: ceo ＋ 社員7本 yoshida / ogata / maegawa / sakano / wang / hiraoka / takada ＋ 開発チーム6本 kanaomi / tonari / taguchi / kameya / masame / ohno-masatoshi。正本は `content/articles/recruit/*.mdx`・`content/articles/engineers/*.mdx`）
- 共有物: `html/` に **index.html（目次）＋31 ページ** の自己完結HTML（file:// で開ける・ページ間リンクはローカルファイルへ書き換え済み。**まず index.html を開く**。フォントとYouTube埋め込みはオンライン時のみ表示）
- コピー全文: `copy-recruit.md`

## 再生成手順

```bash
# 事前に一度だけ: api-client の生成チェーン（fresh worktree の場合）
pnpm --filter @remedy-hr/express run prisma:generate
pnpm --filter @remedy-hr/express run generate:openapi
pnpm --filter @remedy-hr/api-client run orval

# ビルド → 本番サーバ → エクスポート
cd corporate-site && NEXT_PUBLIC_SITE_URL=http://localhost:9003 npx next build
NEXT_PUBLIC_SITE_URL=http://localhost:9003 npx next start -p 9003 &
node docs/recruit-page-mock/export-static-html.mjs 9003
```

エクスポータは最後に **ページ内アンカー検査** を実行し、行き先の id が無い
`href="#x"` / `href="page.html#x"` を列挙して非0終了する（0件で正常）。

## エクスポータが静的HTMLだけに行うこと

Next の JS は全て落とすため、素のHTMLで壊れる挙動をエクスポータ側で補う。
アプリ（`next dev` / 本番）側の挙動は一切変えない。

| 補うもの | 実体 | 依存する目印 |
| --- | --- | --- |
| フォームの送信抑止 | `corporate-site/src/lib/mock-form-runtime.ts`（`initMockForms`） | `<form>` があるページに自動注入 |
| 送信ボタン上の注記「共有用モックのため、送信は行われません。」 | エクスポータの文字列挿入（**エクスポート限定**。アプリには出さない） | `[data-ds-form-actions]` か `button[type="submit"]` |
| モバイルメニュー（ハンバーガー）・下部CTAバーの表示制御 | `corporate-site/src/lib/site-header-runtime.ts`（`initSiteHeader` / `initMobileCtaBar`） | `[data-site-menu-toggle]` / `[data-site-menu]` / `[data-hide-while-in-view]` |
| 横スクロール列（ScrollRow）の前へ/次へ・進捗バー | `corporate-site/src/lib/scroll-row-runtime.ts`（`initScrollRows`） | `[data-scroll-row]` |
| 大きな数字の数え上げ（/agents 系の支援事例の年収、/recruit の数値帯・アイコン付き数値） | `corporate-site/src/lib/count-up-runtime.ts`（`initCountUps`） | `[data-count-up]` / `data-count-up-self` |
| 相談フォームの段階入力（4ステップ） | `corporate-site/src/lib/consult-wizard-runtime.ts`（`initConsultWizards`） | `[data-consult-wizard]` / `[data-consult-step]` |
| 離脱防止ダイアログ（1セッション1回） | `corporate-site/src/lib/exit-intent-runtime.ts`（`initExitIntent`） | `[data-exit-intent]` |
| 右下の相談CTA（ラップトップ以上） | `corporate-site/src/lib/floating-cta-runtime.ts`（`initFloatingCta`） | `[data-floating-cta]` / `data-floating-cta-after` / `data-floating-cta-hide` / `data-floating-cta-hide-selector` |
| デスクトップのグループメニュー | `<details>` フォールバックへの置換（DS Popover は閉じている間 DOM に中身が無いため） | `[data-site-nav-group]`（SiteHeader が出す JSON） |
| canonical / og:url / og:image / JSON-LD の URL | `PUBLIC_MOCK_ORIGIN` へ差し替え（`noindex,nofollow` は据え置き） | `http://localhost:<port>` |
| 資料の同梱 | `README.md` / `copy-recruit.md` / `agents-v2-materials.md` / `cto-questions.md` を `html/` へコピーし index から張る | `PACKAGE_DOCS` |

注意: フォームはモックのため、ランタイムが `method="post"` `action="#"` を与えたうえで
submit を止める（何も送信されない・保存もしない）。フォームは各ページ最下部の1つだけで
（ヒーローには置かない）、全項目が必須。

相談フォーム（`ConsultForm`）は4ステップの段階入力にしている。ご希望 → 現在のお仕事 →
ご経歴 → ご連絡先の順で、答えやすい設問から始めて連絡先を最後に置く。項目と `name` は
これまでどおり13項目・全項目必須で変えていない。段階表示は
`consult-wizard-runtime`（アプリ側は `ConsultWizardRuntime`）の上乗せ。
「次へ」を押す前にそのステップの入力だけを `checkValidity()` で確かめ、ブラウザ既定の
吹き出し（`reportValidity()`）は使わずに、未入力の欄へ `aria-invalid` を付けて
そのステップの下に「未入力の項目があります。」を出す（入力し直すとその場で消える）。
JS が無い環境（と埋め込みに失敗したとき）は4ステップが縦に並んだ1枚の長いフォームになり、
送信ボタンも最初から見えるので、そのまま上から入力できる。

現在地を示すものはカードの頭の**横向きの進行表示1つだけ**にしている（`[data-consult-stepper]`）。
4つの丸（済み: 金地に白のチェック／現在: 金の輪に黒の番号・太字のステップ名／これから:
淡い輪に淡い番号）を横に並べ、丸の下にステップ名（ご希望／現在のお仕事／ご経歴／ご連絡先）、
丸のあいだを2pxの線でつなぐ（現在地の左までは金、その先は淡い面）。スマホでは丸と線は
4つとも出し、ステップ名は現在のステップのぶんだけ出す。状態は `li` の
`data-consult-stepper-item` ＋ `data-state="done|current|upcoming"` にまとめ、ランタイムは
この属性だけを書き換える。以前の「1 / 4　ご希望」「残り 3問」の数え・4分割の目盛り・
左カラムの縦の進行リストは、進行の見せ方が3つに割れて読みにくいため廃止した。
設問は1列で上から「ステップ名（明朝・text-2xl）→ なぜ聞くのか → 入力欄（tablet 以上は2列）」と
並べ、その下に「戻る」（下線のみ）と黒い「次へ」を置く。進行表示は段階表示のときだけ出す。
最後のステップでは、送信ボタンの上にチェック印つきの3件（無理な勧誘はいたしません／
ご相談内容は外部に出ません／費用は無料です）を置く。送信後（アプリのみ）は
「ありがとうございます。」の完了パネルに差し替える（静的HTMLでは従来どおり
「モックのため送信されません。」の注記が出る）。ページ内の `#consult` リンクを踏むと、
スクロールのあと現在のステップの先頭の入力へ入力位置が移る。

CTAの反復（章末CTA `ChapterCta`）と離脱防止ダイアログ（`ExitIntentDialog` /
`exit-intent-runtime`）は、2026-09-12 のディレクター判断で採用した。それまでの
「主CTAはヒーロー・フォーム・最終CTA帯の3か所だけ」という方針はこの判断で置き換わる。
節度は保つ（月間ランキングのバッジや期限を煽る文言は使わない）。

- 章末CTA: 領域ページ（/agents/ma・/agents/consulting）は5か所（選ばれる理由・担当
  ヘッドハンター・企業と仕事の選び方・支援事例・さらに知りたい方へ）。/agents は
  存在する章に合わせて5か所。淡い面（`fill-faint`）の帯1枚に、章ごとに変えた明朝の一行と
  その下の小さな一行（次に何が起きるか）、「無料で相談する」「LINEで相談する」を並べる。
  担当ヘッドハンターと支援事例の章では、一行の左に担当者の丸写真（48px）を添える。
  /recruit は2か所（働く環境 #culture の末尾・選考プロセス #process の末尾）、/recruit/engineers は
  1か所（#process の末尾）で、主CTAはカジュアル面談の予約（`RECRUIT_CASUAL_CTA`）。
- 右下の相談CTA: ラップトップ以上で、ヒーローが画面の上へ流れきってから出し、相談フォーム
  （`#consult-form`）が画面に入っている間は引っ込める。ゴールドの「無料で相談する」と
  吹き出し記号だけのLINEボタンの小さな帯（`FloatingCta` / `floating-cta-runtime`）。
  /recruit・/recruit/engineers ではカジュアル面談の予約ボタンだけを出し（LINEボタンなし）、
  最下部の帯（`#consult`）か章末CTA（`[data-chapter-cta]`。`hideWhileInViewSelector` で指定）が
  画面に入っている間も引っ込める。
  スマホ幅は従来どおり `MobileCtaBar` が受け持つ。agents 系ではボタンの上に「無料・4問・約60秒」を置く。
  /recruit 系は `microcopy` を渡さないので一行は出さず、ヒーローと最下部の帯
  （`hideWhileInViewIds={["hero","consult"]}`）が見えている間は隠れる
- 離脱防止ダイアログ: マウスが使える画面幅（ラップトップ以上）で、読み始めてから8秒以上
  経ち、ポインタが画面上端から外へ抜け、相談フォームが画面に入っていないときに1回だけ出す。
  同じセッションでは二度目を出さない（`sessionStorage`）。スマホでは出さない。
  背景クリック・Esc・「閉じる」で閉じ、JS が無い環境では最後まで出てこない

数え上げ（`count-up-runtime`）は、最終的な表示（3桁区切り）を最初から DOM に置いたうえで、
0 から約900msかけて数え上げる。数え始めの合図は既定では `.site-reveal` の祖先が30%見えたとき
（agents の支援事例）。`data-count-up-self` を付けた数字（/recruit の `StatFigure countUp`・
`IconStatGrid`）は、数字自身が画面に入りきったとき（threshold 1、rootMargin 下 -10%）に数え始める。
縦に長い章の下の方の数字が画面外で数え終わらないようにするため。
`prefers-reduced-motion: reduce` のときは動かさない。JS が無い環境では最終値がそのまま残る。

## データの出所と仮置きフラグ

**正本は「リメディ採用資料 2026年8月版（v30）」**（2026-09-04 に全面反映）。数値・制度・役員・代表メッセージは資料の記載に準拠し、集計時点を注記する。

| 区分 | 内容 |
|---|---|
| 確定（会社紹介資料 2026年8月版） | 設立2019年3月／従業員数50名（2026年7月）／ヘッドハンター31名・領域特化6チーム／平均年収2,708万円（2024年12月期・1年超在籍者平均）／一人当たり売上高11,953万円／月平均残業約35時間／未経験入社87%／難関大出身81%／出身大学構成／既婚率48%／平均年齢30.4歳／インセンティブ率26〜42%／契約企業700社以上／M&A仲介支援累計500名超／キャリアステップ3段階の年収／報酬制度6項目／働く環境6項目／求める人物像／選考4ステップ／FAQ／役員6名の経歴／代表メッセージ本文／上場目標2027年 |
| 確定（求人票・ATS） | 入社時600万円〜（未経験歓迎求人）／エンジニア職の技術スタック・年収／募集職種15件のスナップショット（2026-08-06取得） |
| 確定（Notion「採用プロジェクト管理 / 入社インタビュー」2026年8月取材） | 社員インタビュー7本（吉田・緒方・前川・王・坂野＝本人確認済み／平岡・髙田＝本人確認前。ページ上の但し書きは出さない方針のため、確認状況は各 MDX の `reviewStatus` で管理）。写真は公式サイト members ページから取得 |
| 確定（公式サイト members ページ） | 役員6名・インタビュー7名の顔写真（`corporate-site/public/images/members/*.webp`） |
| 要本人確認 | 代表インタビュー（資料の代表メッセージ・役員紹介を質問形式に再構成）／社員インタビュー本文のうち Value 語を言い換えた文（各 `content/articles/recruit/*.mdx` の frontmatter `note` に前後を記録） |
| 意図的に非掲載 | Value 7語（資料では Appendix。インタビュー本文の言及も言い換え） |
| 掲載（2026-09-04 判断） | 「日本No.1（当社調べ）」表記: データ節の M&A 支援累計と山田取締役の経歴に、資料どおり「当社調べ」を添えて掲載 |

求人スナップショットの取得に使う **ATS API キーはリポジトリ・本ドキュメント・生成HTMLのどこにも保存しない**
（取得はローカルで実行し、結果のみ `recruitContent.ts` に清書して反映する）。

## 編集規範（レビュー確定事項の要約）

- 他社の固有名を挙げた比較はしない。「一般的な進め方」との仕組みの対比は可（2026-09-08 決定、/agents「ご相談から入社まで」で使用）

- Value（7語）はサイト非掲載。Value 語を本文にも出さない
- 「日本No.1（当社調べ）」は資料の表記どおり注記付きで掲載する（2026-09-04 判断）。イメージ調査系バッジは不使用
- 英語のセクションラベル（RECRUIT / STORY 等）は不使用。名前の英字併記（OHNO Hiroya）は可
- 見出しは平易な日本語（キャリアパス・データで見るリメディ・社員インタビュー・リメディの強み・メッセージ等。「成長の道筋」等の詩的見出しは使わない）
- 代表メッセージに肖像写真は使わない（テキスト署名のみ。深掘りは代表インタビュー記事へ）— MyVision型（LP上のMESSAGEは無肖像・CEO深掘りは記事側）
- 大きな数値は黒（fg-strong）。金は罫・マーカー・primary CTA のみ（金文字は可読性が低いため数値に使わない）
- 代表の言葉は Philosophy に浮かせず、メッセージセクション冒頭のプルクォート＝代表メッセージとして一本化。**背景は light（黒背景は重いため廃止・2026-08-07指示）**。導線は本人監修の面談サイト（remedy-search.com/career-consultation-hiroya-ohno）へ
- 未確定データは「算出中」表示ではなく**仮の数値・仮のテキストで完成形を見せる**（※仮フラグは必ず添える）
- 社員インタビューは Notion の取材フォーマット（9章: 人物紹介／転職のきっかけ／入社の決め手／入社後のリアル／現在の仕事／成長実感／カルチャー／今後の展望／メッセージ）を章見出しとして写し、質問（──）＋話し言葉の回答で構成する。本人の言い回しは変えず、誤字・表記ゆれ・Value 語のみ直す
- 課題提起は dis 回避5原則（主語は構造／比較構文禁止／一人称で引き受ける／課題:解決=1:2／機構の記述）
- 「業界最高水準」は志向表現＋投資の列挙で書く（出力の断定をしない）
- serif（明朝）に `ds:font-bold` を併用しない。フォントは DS トークンのみ（recruit ローカルの font-family 直書き禁止）
- 金色（fg-primary）は「罫・マーカー」「primary CTA」に限定（数値には使わない）
- 数値注記は「※時点/期間→対象範囲→算出条件」順・体言止め・モバイルでも常時表示。**「会社紹介資料（○年○月版）に準拠」のような出典表記は可視テキストに出さない**（出典は本 README と定数ファイルのコメントで管理）
- 盛らない: 資料の内容をそのまま転記しない。各節は「興味を持った人に本質を伝える」分量に絞り、節間の重複（文化⇔特徴、年収⇔ヒーロー等）を避ける

## 未確定・要対応（公開前）

- 採用総合ページ「文化」の先頭写真（`public/images/recruit/team-lunch.webp`）は社内ランチの実写真。元画像が 512×288 の低解像度のため、公開前に高解像度版へ差し替える。写っている社員の掲載可否は要確認
- 2026-09-09 エンジニア採用ページ改訂: 「ごちゃごちゃしている／画面が多い」というフィードバックを受け、プロダクト画面はヒーローの1枚（検索欄と求人2件だけの静かな場面、ゴールドは相性スコアのみ）に絞り、「何をつくるのか」は文章＋「面談 → メモ → 構造化 → 検索・提案 → 結果」の一行＋動画枠に、開発現場章は主役写真1枚＋文化2行＋CTO＋メンバー行（経歴なし）に削減。開発職向けページであることを示すため、ヘッダーのロゴ横に「プロダクト開発」、h1 上に「エンジニア・プロダクトマネージャー採用」、CTA 直下に職種名（ソフトウェアエンジニア／プロダクトマネージャー／コーポレートエンジニア。PM は ATS に求人票がないため掲載可否を要確認）を追加。働き方3項目は「仕事内容」のリードへ移動
- /agents/ma・/agents/consulting の主役ブロックに置いていた写真2枚（`public/images/agents/ma-owner-meeting.webp`＝アドバイザーと経営者の面談、`consulting-mock-interview.webp`＝高層階ガラス会議室での模擬面接）は ChatGPT 生成のモック用仮置き。**2026-09-10 のレビューで両方とも掲載をやめた**（M&Aは写真がインタビューの取材写真だと誤読されるため、コンサルは「支援内容の例」の図に置き換えたため）。ファイルは残してあるが、現在どのページからも参照していない。実写が用意できたら掲載場所から決め直す
- 2026-09-09 agents 追記: 全文を Gemini に通し、指摘のうち「本命1社」「トップ実績」「業界屈指の実績」「お付き合いします」「宿題」など根拠不明・口語の表現を言い換えた（No.1 表記は保留）。下部フォームは FAQ 直後に唐突に置かず、罫線＋「ご相談はこちらから」の導入文と2カラムにした。スクロール連動の動き（`src/app/site-motion.css`、`RevealOnScroll`、`SplitText`）は strike.co.jp/recruitment の実装（jQuery の js-fadeIn／1文字ずつの js-anime-split／順次フェードの js-order-fade／罫線が伸びる js-line-anime）を CSS＋IntersectionObserver で置き換えたもので、prefers-reduced-motion と JS 無効時は最初から表示する。/recruit 側は `recruit-reveal` → `site-reveal` の改名のみで挙動は同じ
- 三菱電機デジタルのブランドサイト（mitsubishielectric.co.jp/medigital/brand/）から取り入れた点: ヒーロー背景の入り（当初は上端中央から円形に開く clip-path のマスクを写したが、安く見えるため 1.6s の静かなフェード＋わずかな拡大戻しに変更。クラス名 `site-hero-mask` は据え置き）、主役ブロックの左右からの入り（`site-enter-left/right`）、減速の強いイージング cubic-bezier(.16,1,.3,1)。同サイトは AEM＋Swiper で、動きは CSS keyframes（brandTopMaskAnimation 等）と is-animation クラス付与で実装されている。金色の帯・曲線の装飾、英語の Scroll 表示、カテゴリタイル、People の吹き出し見出しは採用せず（ゴールドの線は不採用の決定済み、英語ラベル不使用の規範、吹き出し文言は本人確認が必要なため）
- M&A・コンサルの写真2枚は chatgpt.com/images（Images 2.5）で生成し直したもの
- 2026-09-10 空き枠の画像: /agents・/agents/ma・/agents/consulting の対応領域・選ばれる理由（計11枚 `public/images/agents/domain-*.webp`, `reason-*.webp`, `ma-reason-*.webp`, `consulting-reason-*.webp`）と /recruit 募集職種の帯写真（`public/images/recruit/team-banner.webp`）は chatgpt.com/images（Images 2.5）で生成したモック用の仮置き。一部に人物の顔が写る構図があり、公開前に実写へ差し替える。「選考対策で受け取れるもの」の書類サムネイル4枚（`doc-*.webp`）と会社紹介資料の表紙（`company-deck-cover.webp`）は HTML から書き出したモック画像。/agents トップの流れ5ステップには細線アイコン（`src/components/site/StepIcon.tsx`）、領域ページの流れは他社との違いで3段階に再構成し、各段階で使うプロダクト画面（`ProductScreens` の xrossHero / resumeMaker / prepKit）を埋め込んでいる
- 書き出しの軽量化: `EXPORT_IMAGES=files node docs/recruit-page-mock/export-static-html.mjs 9003` で、画像と CSS を `html/assets/` の共有ファイルにして参照する（19MB → 約8MB）。公開サービスが遅いときに大きな送信が「Service Unavailable」で弾かれるため、公開用はこのモードで書き出す。zip 共有も html フォルダごと渡せば同じに開ける。既定（環境変数なし）は従来どおり1ファイル完結の data URI 埋め込み
- 以下の8枚は ChatGPT（GPT画像モデル）で生成したモック用の仮置き画像（4:3・顔が写らない構図で生成）。公開前に必ず実写へ差し替える。`public/images/culture/all-hands.webp`（全社ミーティング）・`team-dinner.webp`（食事の会）、`public/images/engineers/dev-standup.webp`・`feature-review.webp`・`release-check.webp`・`office.webp`・`company-meeting.webp`・`remote-sync.webp`（エンジニア採用「開発チームの雰囲気」）。コード側には `// 生成画像` コメントを付けてある
- エンジニア採用「何をつくるのか」の画面3枚は画像ではなく、デザインシステムのクラスで組んだ静的コンポーネント（`src/app/recruit/_components/ProductScreens.tsx`）を `MediaFrame` の中に埋め込んでいる。ルートの文字サイズを `cqw` で決めているため枠の幅に追従して拡縮し、3列表示でも文字が読める。表示中の候補者・求人・数値はすべて架空。実画面のスクリーンショットを使う場合は `engineersContent.ts` の `screens` を `mock` から `src`/`alt` に切り替える
- /agents/ma・/agents/consulting のヒーローは lab の明るい案を採用（M&A＝L3 白地に琥珀の一点、コンサル＝L2 銀鼠〜薄墨の藍）。黒文字・フォームは罫線で縁取り
- [ ] /agents/ma/media の記事9本は公式メディア remedy-tokyo.co.jp/media の該当記事が元（各 MDX の frontmatter `sourceUrl` 参照）。社長インタビュー3本は原文3段落の抜粋＋元ページへの外部リンク（`external`）で本文は持たない。ノウハウ6本は元記事を Gemini で自然な日本語に書き直した本文（2,000〜2,800字、数値・固有名詞は元記事のまま）。公開前に元記事の掲載日・数値の時点を確認し、`date` を実日付に差し替える
- [ ] 総合ページ「募集職種」上の全面写真帯（`POSITIONS.photo.src`）と、インタビューカードの「一問一答を見る」導線（`PEOPLE[].qaHref`、現状は記事内 #qa へのプレースホルダ。一問一答コンテンツ自体が未作成）
- [ ] エンジニアページ「CTOから」は金臣CTO本人未確認のドラフト（`ENGINEERS_CTO_MESSAGE`）。公開前に本人の言葉へ差し替える
- [ ] エンジニアページ「メンバー紹介」に業務委託5名（Miki Matsumoto／伊達／北島／田村／西本、いずれもNotion「開発関係者」で役割＝エンジニア・雇用形態＝業務委託）と大野正俊（デザイナー、Notion自己紹介レビュー準拠）を掲載。氏名・所属社名の掲載可否を本人確認すること。写真は未取得（空枠）
- [ ] エンジニアページ「何をつくるのか」3本柱のビジュアル（01 機能紹介動画URL／02 スコアリング図解／03 分析活用事例）。`engineersContent.ts` の `ENGINEERS_PRODUCT.pillars[].visual.src` に入れるだけで表示。02「構築中」03「これから」の事実関係（スコアリング進捗・コンサル事例の有無）も要確認
- [ ] エンジニアページ「メンバー紹介」の普段の写真4枚（`ENGINEERS_MEMBERS.gallery[].src`）と紹介記事URL（`members[].articleHref`）
- [ ] エンジニアページ「仕事内容」の箇条書き（具体機能名）は既存機能・リポジトリ構成から起こした案。CTO・PdM に確認
- [ ] 文化セクションの写真4枚（オフィス／全社ミーティング／チームの日常／サウナ・ゴルフ・食事の会）の実写差し替え（現在は「写真準備中」の仮枠。`featuresContent.ts` の `CULTURE.photos[].src` に入れるだけで表示）
- [ ] 「ヘッドハンターの仕事」の CA/RA 業務・KPI・年収試算は資料スライド「エージェントの仕事」「成果主義の魅力」準拠（当社調べの目安）。数値の最終確認

- [ ] 社員インタビューの本人確認（平岡・髙田）と、Value 語を言い換えた文の本人確認（坂野・髙田ほか、各 MDX の frontmatter `note` 参照）。平岡「入社して変わったこと」は追加取材後に追記
- [ ] 代表インタビューの質問形式再構成部分の本人確認
- [ ] 公式サイトから取得した顔写真の採用ページ転用可否の確認（役員4名・インタビュー7名）
- [ ] 会社紹介スライドの埋め込み（現在はプレースホルダ。資料 v30 の共有方法を決める）
- [ ] 会社紹介動画の確定（現在はYouTubeチャンネルのアップロード動画プレイリストを仮埋め込み）
- [ ] note 公式URL の確定（現状プレースホルダ）
- [ ] 第3部門ラベル「コーポレート・メディア」の正式承認（ブリーフ原案は「ミドル・バックオフィス」）
- [ ] ATS 側カジュアル面談求人の公開タイトル整合（現 manage_title が「更新中」）
- [ ] 資料の次版（v31〜）が出た際の数値差し替え（`recruitContent.ts` の注記時点を更新）
- [ ] 公開時: `src/lib/seo/siteVisibility.ts` の `SITE_NOINDEX` を false にする・corporate-site のホスティング/CI 配線（deploy ビルドマトリクス外のまま）
- [ ] /agents/ma・/agents/consulting「ご相談から入社まで」の目安（約60分／1週間以内／各面接前に1回以上／1〜2か月／平均2〜3か月）と絞り込み件数（数百件・数十件）はモック仮置き（HPモック v8 由来）。実態に合わせて差し替える
- [ ] /agents/ma 実績の帯「累計500名超／うちプライム上場M&A仲介会社へ300名超」は v0 モック由来。数字と時点（2026年8月想定）を確認
- [x] /agents/ma 山田「組織500名超・個人100名超」は公式メンバーページの経歴文で確認済み（2026-09-08）
- [ ] /agents/ma「相談すると、何が起きるか」の目安は 01 の「1営業日以内」のみ表示。他の目安（約60分／1週間以内／1〜2か月／平均2〜3か月）は実数確定まで非表示
- [ ] /agents/ma「日本No.1」の調査主体・調査期間・比較対象・調査方法の確定（現状 SourceNote は「当社集計、2020年〜2026年8月」の仮置き）
- [ ] /agents/ma 年収データの出典（各社有価証券報告書）の時点確定
- [ ] /agents/ma FAQ（MA_FAQ）8問のドラフトはレビュー時点の仮文面。未経験比率、ベース給与レンジ（600万〜1,200万円程度）、在籍企業への不連絡の運用実態、初回面談の所要時間（約60分）、他社エージェントとの併用可否の運用実態を事実確認のうえ差し替える
- ヒーロー背景は SVG の層状ラジアルグラデーション（`corporate-site/src/components/HeroGradient.tsx`、justinjay.wang「Methods for random gradients」の SVG 方式）。シードで固定した5〜7個のぼかし楕円＋薄い粒子。パレットは recruit（白×淡いピンク×シャンパン）／ma（藍を主役に真鍮は影だけ）／consulting（青緑の濃淡）。ダーク2種は lab の F 案（amp 260・ビネット付き）を採用。その上に whatamesh の動くメッシュ（`corporate-site/src/components/HeroMeshGradient.tsx`、同じ4色）を重ねる。WebGL 非対応・静的HTMLの初回描画では SVG だけが見える
- /agents/consulting の担当ヘッドハンターに高橋諒・小川勇介を追加（顔写真は公式サイト members ページから取得、`public/images/members/takahashi.webp` `ogawa.webp`。採用ページ同様、転用可否は要確認）。企業インタビュー4本と記事6本は公式メディア（remedy-tokyo.co.jp/media）の該当記事へ外部リンク（`CONSULTING_INTERVIEWS` / `CONSULTING_ARTICLES`）。読了目安は概算
- ヒーローはラップトップ以上で高さの下限を取り（agents: clamp(560px,64vh,820px)、recruit: clamp(600px,68vh,860px)）内容を上下中央に置く。ダーク背景の象徴的なエフェクトは検討中。React Bits（MIT）の Threads／Silk を WebGL2 に移植した `HeroEffect`（`corporate-site/src/components/hero-effect-runtime.ts`）を `/agents/ma/lab` で比較できる。静的HTMLにも同ランタイムを注入
- [ ] /agents/ma の写真・ロゴ枠、ご支援実績3件と「3年連続」の数字は仮。実データに差し替える
- [ ] /agents/consulting の写真・ロゴ枠と仮数値（支援実績300名超／未経験比率82%／年収差＋180万円／書類選考通過率83%／ご支援実績3件）は仮。実データに差し替える
- 2026-09-10 agents デザインレビュー反映（当時の検証ルート `/agents/ma/v2`・`/agents/consulting/v2`。現在は `/agents/ma`・`/agents/consulting` 本体）: ①各章を「章名 → 明朝の一行 → 短い説明 → 素材」の4要素に統一し、「選ばれる理由」の主役ブロックが持っていた見出し・本文を削除 ②M&Aの主役素材を企業インタビュー（YouTube サムネイル＋社名・タイトル・分かること1行＋動画／記事リンク）に、コンサルの主役素材を「支援内容の例」の3段階の図（確認する点 → フィードバック → 次の面接までに直す点）に変更 ③「企業・仕事の選び方」を比較の観点の解説から「面談で確認する項目」のチェックリストへ変更し、市況の数字は下の「参考」1行に集約（コンサルの年収帯は出典が示せないため非掲載） ④求人カード（領域ページのみ・`JobCards` の `variant="breakdown"`）を固定給・成果報酬（料率）・想定年収＋前提の一行に組み替え、スマホの初期表示2件に未経験歓迎の求人が入るよう並べ替え ⑤担当者章の一行を実際に載せている3名の経歴に合わせて修正 ⑥`text-2xs` / `fg-secondary` のうち条件を伝える文字を `text-xs` / `fg-default` に引き上げ ⑦スマホ固定CTAバーの非表示判定を相談フォーム本体（`#consult-form`）に変更。YouTube サムネイル表示のため `corporate-site/next.config.js` に `images.remotePatterns`（`i.ytimg.com`）を追加
- 2026-09-10 /recruit/engineers: CTOのプルクォートがスマホで写真の横に入りはみ出していたため、tablet 未満は写真を上に積み、`break-keep` はラップトップ以上に限定。募集職種の「何をつくるのか、仕事内容の詳細はエンジニア採用ページをご覧ください。」は総合ページ（/recruit）の文言のままで、エンジニア採用ページ側では出さない（自分自身への案内になるため）
- 2026-09-10 v2 ルートの昇格: 別ルートで検証していた3ページを本体へ昇格し、`/…/v2` を廃止した。ソース・出力・識別子から `v2` / `V2` の表記をなくしてある

  | 昇格前 | 昇格後 |
  | --- | --- |
  | `/recruit/engineers/v2` | `/recruit/engineers`（旧ページは置き換え。title は「エンジニア採用」、canonical は据え置き） |
  | `/agents/ma/v2` | `/agents/ma`（同上） |
  | `/agents/consulting/v2` | `/agents/consulting`（同上） |
  | `_components/DomainLandingPageV2.tsx` | `_components/DomainLandingPage.tsx`（旧 `DomainLandingPage` は `/agents` 専用の `AgentsOverviewPage.tsx` に改名） |
  | `_lib/maV2Content.ts` / `consultingV2Content.ts` | `_lib/maPageContent.ts` / `consultingPageContent.ts`（`MA_PAGE` / `CONSULTING_PAGE`） |
  | `_lib/engineersV2Content.ts` | `_lib/engineersContent.ts` に統合（`ENGINEERS_WORKSTYLE` ほか） |
  | 型 `DomainPageContentV2` / `DomainPageContent` | `DomainPageContent` / `AgentsOverviewContent`（`ReasonsV2`→`Reasons`、`CaseStoryV2`→`DetailedCaseStory`、`EventItemV2`→`OptionalHrefEventItem`） |
  | `_components/EngineersHeroV2.tsx` | `_components/EngineersHero.tsx` |
  | `JobCards` の `variant="v1"｜"v2"` | `variant="default"｜"breakdown"` |
  | `HeroGradient` の `maV2` パレット | `ma`（旧 `ma` パレットは削除） |

  削除したファイル: `corporate-site/src/app/{recruit/engineers,agents/ma,agents/consulting}/v2/page.tsx`、
  `src/app/recruit/_lib/engineersV2Content.ts`、旧レイアウト専用だった
  `src/app/recruit/_components/{CasualInterviewBand,CtoMessage,MemberCards,MemberGallery,ProductFlow}.tsx`、
  `docs/recruit-page-mock/html/{recruit-engineers-v2,agents-ma-v2,agents-consulting-v2}.html`。
  `_lib/maContent.ts`・`consultingContent.ts` からは組み立て済みの `MA_PAGE` / `CONSULTING_PAGE`（旧テンプレート用）を削除した。
  素材の定数（`MA_MARKET_STATS`・`MA_REASONS`・`MA_WHY_MATCH`・`MA_LOGOS`・`MA_WHITEPAPERS`・`CONSULTING_MARKET_STATS`・
  `CONSULTING_WHY_MATCH`・`CONSULTING_SUPPORT_TOOLS`・`CONSULTING_LOGOS` など）は、現行ページから参照されなくなったが
  実データとして残してある（再掲載の判断待ち）。
  エクスポータからは v2 の3エントリと `PER_FILE_LINK_REWRITES` / `rewriteV2SelfLinks` を削除した

## agents 系ページとの整合（zip 同梱・2026-08-07）

共有 zip には `/agents`・`/agents/ma`・`/agents/consulting`・`/agents/members` の4ページも同梱し、
相互リンクをローカルファイルへ書き換えている（recruit フッター「転職支援サービス」→ agents.html、
agents フッター「採用情報」→ recruit.html ※後者は zip 内限定の書き換えで、agents ソースは不変更）。

**このブランチで実施済みの agents 側変更（明示指示による例外・#2478 と競合時は要調整）:**

- [x] 2026-09-07: agents 4ページに採用ページと同じ編集規範を適用（リード黒字化・数字の黒化・ヒーロー見出しの折返し制御・/ma のヒーロー数字を白帯へ・「同業他社との違い」比較表の削除・仮表示/仮掲載/準備中の注記削除・セミナー日程を4週先送り・山田取締役の経歴統一・フッター採用情報→/recruit）。**#2478 側の同一指摘は本ブランチで解消済みのため、#2478 はこの PR に統合して閉じる想定**
- [x] /agents/consulting ヒーローに /ma と同様の相談フォームを埋め込み（primaryCta 廃止・CTA をページ内 #consult 化・MobileCtaBar の自動非表示が有効に）— consulting/page.tsx を変更
- [x] 2026-09-12: 領域ページのヒーローを全面写真に作り替え（`DomainHero`）。ベージュの面＋小さな写真枠＋浮いたカードをやめ、写真・見出し・実績・CTAを1枚の面にまとめた。`HeroSection` からは領域ページ専用だった `proof`・相談カードの写真を削除
- [x] 2026-09-12: ヒーローからフォームを撤去（上はボタンだけにする）。フォームは各ページ下部の `#consult` 1つだけ・全項目必須に統一し、ヒーローの短い版（`variant="compact"` と「経歴などの項目も入力する（7項目）」の `details`）は残りが任意に見えるため廃止。/agents にも下部フォーム章「ご相談はこちらから」を追加

**agents 側セッションへの整合指摘（PR #2478 側で適用を推奨）:**

- [ ] フッター「採用情報」の href="#" を `/recruit` に差し替え（links.ts の FOOTER_NAV）
- [ ] 山田取締役の経歴文言の統一（recruit 側は「500名規模の組織構築支援および個人100名超の支援実績」へ言い換え済み。本人確認のうえどちらかに揃える）
- [ ] 数値の金色表示（StatsBand・FeatureCards の stat）→ 黒（fg-strong）への変更検討（recruit 側は可読性指摘により黒へ統一済み）
- [ ] StatsBand の注記がモバイル非表示（ds:hidden ds:tablet:block）→ 常時表示への変更検討（recruit 側は常時表示）

## agents ma/consulting 運用ガイド（2026-09-09・構造リファクタ後）

`/agents/ma` と `/agents/consulting` はほぼ同一構成のため、ページ本体を
`corporate-site/src/app/agents/_components/DomainLandingPage.tsx` に共通化した。
両ページの `page.tsx` は metadata と `<DomainLandingPage content={...} />` の呼び出しのみを持つ。

- **コピー・数値を直す**: `page.tsx` は触らず、`_lib/maContent.ts` の `MA_PAGE`（/ma）または
  `_lib/consultingContent.ts` の `CONSULTING_PAGE`（/consulting）と、その元になっている定数を編集する。
  `MA_PAGE` / `CONSULTING_PAGE` は `DomainPageContent`（`_lib/types.ts`）型。
- **仮数値の目印**: 未確定の給与・実績件数などは値の直前に `// 仮` コメントを付す
  （ページ上には「仮」「※」等の可視表記は出さない）。
- **セクション構成を直す**: `DomainLandingPage.tsx` を編集する。見出し文言・帯（`data-ds-tone`）の
  白黒リズムは両ページ共通のため、片方だけの都合で変えない。
- **任意セクション**: `jobs`（厳選求人）と `videos`（動画・インタビュー）は現状 /ma のみが持つ
  オプショナルフィールド。値を渡さなければ `DomainLandingPage` はそのセクションを描画しない。
  `dataBand`（市況と年収）・`whyMatch`（求人の選び方）・`events`（セミナー・イベント）・
  `knowledge`（転職ノウハウ）も同様にオプショナル。`faq`（よくある質問）を渡すと
  「求人の選び方」の直後・「ご支援実績」の直前に `Faq` セクションが挿入される。
- **新しい領域ページを増やす場合**: `consulting/page.tsx` を丸ごとコピーし、新しい
  `_lib/<domain>Content.ts` に `<DOMAIN>_PAGE: DomainPageContent` を定義する。あわせて
  `src/components/HeroGradient.tsx` に新しい `heroPalette`（グラデーション配色）を追加し、
  `docs/recruit-page-mock/export-static-html.mjs` に静的書き出し対象のエントリを追加する。
- **`/agents`（トップページ）も同じテンプレート**: `_lib/agentsContent.ts` の
  `AGENTS_PAGE: DomainPageContent` を使う。`dataBand`・`whyMatch`・`events`・`knowledge` は持たず、
  代わりにロゴ帯の直後に `domains`（対応領域カード、M&A・コンサルティングの2件）を持つ。
  `members` は `ALL_MEMBERS`（`_lib/sharedContent.ts`）先頭5名の抜粋で、`membersMoreHref` で
  「ヘッドハンター一覧を見る」を担当ヘッドハンターセクション下に表示する。

## agents ma/consulting のレイアウト（2026-09-09 検証 → 2026-09-10 昇格・現行）

`/agents/ma`・`/agents/consulting` の現行レイアウト。当初は `/…/v2` の別ルートで検証していたが、
2026-09-10 に本体へ昇格して旧レイアウトを置き換えた（v2 ルートは削除）。本体は
`corporate-site/src/app/agents/_components/DomainLandingPage.tsx`、コンテンツは
`_lib/maPageContent.ts`・`_lib/consultingPageContent.ts`（型は `_lib/types.ts` の `DomainPageContent`）。
事実は `maContent.ts`・`consultingContent.ts` から import しており、ここで新しい事実は作っていない。
`/agents`（トップ）だけは旧テンプレート `AgentsOverviewPage`（型 `AgentsOverviewContent`）を使い続ける。

**章の順（両ページ共通・面の色は交互ではなく話題のまとまりで替える）**

| # | 章 | 面 | 旧レイアウトのどこから来たか |
| --- | --- | --- | --- |
| 1 | ヒーロー | 全面写真（黒 tone） | 専用の `DomainHero`。面いっぱいの写真（`hero-ma.webp` / `hero-consulting.webp`）に暗色グラデーションを重ね、左に「実績の一行 → 明朝の見出し → リード → 罫線で区切った実績3件（M&Aは300名超／4本／8社、コンサルは82%／8社）→ ゴールドの主CTA（中に「約60秒・4問」の札）＋白い輪郭のLINEボタン → 但し書き → 求人検索 XROSS」を縦一列で積む。右カラムの相談カードと3:4の写真枠は廃止。フォームは置かず、主CTAで章7の `#consult` へ送る |
| 2 | 実績帯 | 白 | `LogoStatsBand`。数字はヒーローで出し切るため企業名だけにし、ヒーロー直下に「ご支援実績のある主な企業」＋縦罫で区切った社名1行（モバイルは2列）として置く |
| 3 | 選ばれる理由 | 白 | 旧レイアウトの理由4つ →「主役1つ（説明5：素材7）＋補足3つ」。番号と同寸の写真枠は廃止 |
| 4 | 担当ヘッドハンター | 白 | 旧レイアウトの担当エージェント。2〜3名に絞り、「相談できるテーマ」→ 根拠となる経験の順に |
| 5 | 企業・仕事の選び方 | ライト | 旧レイアウトの `dataBand`（市況と年収）＋ `whyMatch`（求人の選び方）＋ `jobs`（厳選求人）を1章に統合。「本命1社＋比較数社」の大きな数値強調は廃止し、比較の観点を罫線の行で並べる |
| 6 | 支援事例 | 白 | `CaseStories` の `variant="detail"`。転職前 → 転職先 → 重視した条件 → 支援した内容 → 結果。匿名の丸写真枠は廃止 |
| 7 | ご相談の進め方 | ライト | 旧レイアウトの `FlowSteps`（手順のみ）＋ FAQ ＋ 相談フォーム（`#consult`）を1つの面に。ページ内CTAの行き先はここ1か所 |
| 8 | さらに知りたい方へ | 白 | 旧レイアウトの `videos`・`knowledge`・`events` を圧縮。動画と記事の両方があるインタビューは1行にまとめる |

末尾は既存の `CtaBand` → フッター。ゴールドの主CTAはヒーロー（ラップトップ以上は最小22em・高さ68px、モバイルは全幅）・
章7のフォーム・最終CTA帯だけに置き、章のあいだはテキストリンクで受ける。

**共有コンポーネントに足したオプショナル prop（`/agents` トップの表示は不変）**

`Section`（`density`）、
`ConsultForm`（`heading` / `idPrefix` / `labelsHidden` / `defaultIndustry`）、
`LogoStatsBand`（`namesAsText` / `showStats`。企業名だけの帯は縦罫区切りの1行にする）、
`CaseStories`（`variant="detail"` ＋ `focus` / `support`、`moreHref` を任意化）、
`FlowSteps`（`variant="bare"`、`tools` を任意化）、`JobCards`（`filterChips` を任意化）、
`EventCards`（`columns`、`href` を任意化）、`HeroGradient`（`ma` パレットは 2026-09-10 に旧 `maV2`＝一段明るい版へ統合し、旧 `ma` は削除）。

**仮置き・生成したもの（公開前に差し替え）**

- 実績帯の企業名一覧（M&A 8社・ファーム 8社）: 掲載可否は未確認（`// 仮: 掲載可否要確認`）
- 担当ヘッドハンターの「相談できるテーマ」: 各人の経歴から導いた表現（`// TODO(要本人確認)`）
- 支援事例の「重視した条件」「支援した内容」: 各1〜2文の仮文面（`// 仮: 公開可否要確認`）
- /agents/ma のヒーロー見出し「支援実績No.1」: 判断は保留（`// TODO(要確認)`。比較対象・範囲・時点の確定が必要）
- /agents/consulting の模擬面接写真 `public/images/agents/consulting-mock-interview.webp`: 生成画像。実写への差し替えが必要
- セミナー・イベントと資料ダウンロードは詳細ページの受け皿が無いため、「詳細を見る」ボタン・資料ブロックを出していない

必要な実素材・確認事項の一覧は `docs/recruit-page-mock/agents-v2-materials.md`。

## サイト共通レイヤーと記事コンテンツ（2026-09-09・構造リファクタ後）

`/recruit` 系と `/agents` 系で二重に持っていたコンポーネント・記事データを1本にまとめた。

### 共通コンポーネント: `corporate-site/src/components/site/`

ルート（`_components/`）配下には、そのページ固有の組み方だけを残す。両系統で使うものはここに置く。

| ファイル | 役割 | 系統差の吸収 |
| --- | --- | --- |
| `Section.tsx` | セクション枠（最大幅・左右余白・見出し・明朝の一行・リード） | `tone`・`density="default" \| "spacious"`・`reveal`・`ruleGrow` で章の体裁を切り替える（両系統共通）。/recruit 系は spacious と white/light の交互で組み、`clauseWrap` でリードを句読点の直後でだけ折り返す。`statement` は配列で改行位置を固定できる |
| `SiteHeader.tsx` / `SiteFooter.tsx` | sticky ヘッダー / フッター | `logoHref`・`nav`・`ctaPrimary`・`ctaSecondary` で切り替え。主CTAが外部URL（`http` 始まり）のときだけ新規タブ |
| `CtaBand.tsx` | 相談CTA帯 | `variant` で見出しをゴシック（agents）／明朝（recruit）に |
| `MobileCtaBar.tsx` | スマホ幅の下部固定CTA | ラベル・`microcopy` はページ側が props で渡す。`hideWhileInViewIds` の要素（ヒーロー・最下部の帯など）が画面内の間は隠れる。主CTAが `#consult` のページでは相談フォームが画面内の間だけ自動で隠れる |
| `Faq.tsx` | よくある質問（FAQPage JSON-LD 込み） | `variant="accordion"`（DS Accordion）／`"details"`（JSを落とす自己完結HTML用のネイティブ details） |
| `ArticleLayout.tsx` | 記事本文 | `article.kind` で取材記事とノウハウ／抜粋記事の見せ方を切り替え |
| `MediaFrame.tsx` | 写真・動画・素材待ちの角丸枠 | `aspect`・`src`・`rounded`・`bordered`・`surface`・`placeholder` |
| `StatFigure.tsx` | 大きな数字1つ | `variant="band" \| "inline" \| "serif" \| "stacked"`・`countUp`（数字だけの値を画面に入ったとき数え上げる） |
| `PersonCard.tsx` | 人物1名の紹介 | `variant="compact"（丸写真の行）\| "profile"（縦長写真の行）\| "portrait"（正方形写真の縦組み）` |
| `NumberedHairlineRows.tsx` | 金の連番＋罫線の行（サービス内容・仕事内容・報酬制度・働く環境・選考プロセス） | `columns` 1/2/4・`bullets`・`titleAs` |
| `ComparisonRows.tsx` | 「項目→内容」の罫線リスト（面談で確かめる項目／働き方・開発環境の条件／開発文化） | `heading`・`note`・`phraseWrap` |
| `LogoStatsBand.tsx` | ヒーロー直下の実績帯 | `namesAsText`・`showStats` |
| `InterviewCarousel.tsx` | 企業インタビュー動画の横並び | — |
| `ChapterCta.tsx` | 章末の反復CTA | `line`・`note`・`primary`・`secondary`・`person`・`surface`（淡灰の章では `"white"`） |
| `FloatingCta.tsx` | ラップトップ以上で右下に出すCTA | `primary`・`line`・`afterId`・`hideWhileInViewId`・`hideWhileInViewSelector`（章末CTAと重ねない） |
| `AssuranceLead.tsx` / `ClauseText.tsx` | CTA直下の但し書き / 句読点折返し（`CLAUSE_WRAP_CLASS`）と文節折返し（`PHRASE_WRAP_CLASS`） | — |

### 記事: MDX（`corporate-site/content/articles/`）

社員・開発チーム・代表インタビュー（`/recruit/interviews/[slug]`）と M&A転職ノウハウ
（`/agents/ma/media/[slug]`）は、同じ frontmatter・同じレイアウトで扱う1つの目録。
**記事の正本は MDX ファイル**で、TypeScript 側は読み取り・型付けだけを担う。

```
corporate-site/
├── content/articles/          ← 記事の正本（編集するのはここだけ）
│   ├── recruit/               代表1本＋社員インタビュー7本
│   ├── engineers/             開発チームインタビュー6本
│   └── ma/                    M&A転職ノウハウ9本（企業インタビュー3本は元記事の抜粋）
└── src/content/articles/
    ├── types.ts               Article / ArticlePerson（frontmatter の型）
    ├── index.ts               MDX を読んで ARTICLES・findArticle・articlesBy・relatedArticles を組む
    ├── ArticleBody.tsx        MDX 本文を記事タイポグラフィで描画（サーバー側でコンパイル）
    └── formatArticleDate.ts   「2026-09-09」→「2026年9月9日」
```

- **記事を1本足す**: `content/articles/<domain>/<slug>.mdx` を1ファイル置くだけ。ファイル名が
  そのままURLのスラッグになり、`index.ts` がビルド時に拾う。一覧（社員インタビューのカード・
  M&A記事一覧・関連記事）は `articlesBy()` から派生するのでコードの編集は不要。
- **frontmatter が壊れているとビルドが落ちる**（`index.ts` の手書きバリデータがファイル名つきで
  エラーを出す）。`slug` とファイル名、`domain` とディレクトリ名は一致していなければならない。

#### frontmatter のフィールド

| キー | 必須 | 意味 |
| --- | --- | --- |
| `slug` | ● | URL のスラッグ。ファイル名と一致させる |
| `kind` | ● | `interview`（取材記事）／`knowhow`（自社の書き下ろし）／`excerpt`（公式メディア記事の抜粋。本文は `external.url` へ送る）。`ArticleLayout` はこれで見せ方を決める |
| `domain` | ● | `recruit` / `engineers` / `ma`。ディレクトリ名と一致。ルートの `generateStaticParams` はこれで振り分ける（`/recruit/interviews/[slug]` は recruit と engineers、`/agents/ma/media/[slug]` は ma） |
| `category` | ● | 表示カテゴリ（「社員インタビュー」「年収・報酬」等）。関連記事の優先順にも使う |
| `title` / `excerpt` | ● | 見出しと一覧カード用の抜粋。`excerpt` は meta description・RSS・OG にも回る |
| `order` | ● | 領域内の表示順（小さいほど先。10刻みなので間に差し込める） |
| `reviewStatus` | ● | `draft`（本人確認前・元記事の時点未確認）／`confirmed`。**ページには出さない**公開前チェックの目印 |
| `note` |  | 取材元・言い換え・要確認事項の申し送り。**ページには出さない** |
| `draft` |  | `true` の間は本番ビルド（`NEXT_PUBLIC_APP_ENV=production`）の一覧・静的生成・sitemap・RSS から外れる。ローカルでは通常どおり描画されるので書きかけを確認できる |
| `lead` |  | タイトル直下の一行リード |
| `date` / `updatedAt` |  | 公開日・更新日。`2026-09-09` と ISO で書くと `2026年9月9日` に整形される。まだ実日付が確定していない「2026年」のような粗い表記はそのまま出る |
| `readTime` |  | 読了目安（「5分」） |
| `person` |  | 話し手（`name` / `role` / `nameEn` / `photo` / `background` / `quote`）。`quote` は記事冒頭に大きく出る |
| `company` |  | 取材先の会社名 |
| `sourceUrl` |  | 元記事のURL。ページには出さない出典参照 |
| `external` |  | 抜粋記事の誘導先（`url` / `label`） |
| `youtubeId` |  | 記事末尾に埋め込む YouTube 動画ID |
| `cta` |  | 記事末尾の導線。`label` と、`ref`（`casualInterview` / `ceoConsultation` = `_lib/links.ts` の定数を引く）か `href`（絶対URL） |

#### 本文の書き方（Markdown）

| 記法 | interview | knowhow・excerpt |
| --- | --- | --- |
| `## 見出し` | 章見出し（Notion の取材フォーマット9章） | 章見出し |
| `### ── 質問文` | 質問見出し | （使わない） |
| 段落 | 話し言葉の回答 | 本文 |
| `- 項目` | 箇条書き | 箇条書き（丸ポチ） |
| `> 引用\n>\n> 発言者名` | 引用（最終行が発言者名） | 同左 |

MDX はビルド時にサーバー側でコンパイルするため、記事本文にクライアントJSは含まれない
（`export-static-html.mjs` の自己完結HTMLがそのまま成立する）。`<` `{` は MDX の予約文字なので
本文に生で書かない。

### 公開まわりの生成物

| URL | 生成元 | 備考 |
| --- | --- | --- |
| `/sitemap.xml` | `src/app/sitemap.ts` ＋ `src/lib/seo/siteRoutes.ts` | 記事以外の公開ページ一覧（`STATIC_ROUTES`）＋ `ARTICLES`。検証用の `/agents/ma/lab`・`/test` は載せない |
| `/robots.txt` | `src/app/robots.ts` | |
| `/feed.xml` | `src/app/feed.xml/route.ts` | 記事の RSS 2.0（タイトル・抜粋・カテゴリ・日付・リンク） |
| `/og/[slug]` | `src/app/og/[slug]/route.tsx` | `next/og` の `ImageResponse`。明朝のタイトル＋カテゴリ＋金の罫＋`REMEDY`。記事は `generateMetadata` の `openGraph.images` から、記事以外は `layout.tsx` の既定OG（`/og/default`）から参照する |
| 構造化データ | `src/components/site/ArticleJsonLd.tsx` / `BreadcrumbJsonLd.tsx` | 記事ページに `Article`（author＝話し手・datePublished・dateModified）とパンくずの `BreadcrumbList` |

**公開に切り替えるとき**: `corporate-site/src/lib/seo/siteVisibility.ts` の `SITE_NOINDEX` を
`false` にする。**これ1箇所**で全ページの `robots` メタ・`robots.txt`・`sitemap.xml` が
公開向けに切り替わる（`SITE_NOINDEX` が true の間、sitemap は空・robots.txt は全 Disallow）。
検証用の `/agents/ma/lab` は解除後も個別に noindex のまま。

## 相互導線・UTM 規約（note / YouTube 連携）

- 出る導線: 社員インタビューカード→サイト内記事（将来 note 深リンクへ切替可）、強み・会社紹介→YouTube。動画はチャンネルプレイリストの iframe 埋め込み（自己完結HTMLではオンライン時のみ表示）
- 入る導線: note 記事末尾・YouTube 概要欄からは `/recruit#people` 等のアンカー着地に統一
- UTM 規約（例）: `?utm_source=note&utm_medium=article&utm_campaign=recruit`
- ハブ化移行トリガー（目安）: 人物ストーリー5本超→ `/recruit/people` 独立／チーム別コンテンツ開始→ `/recruit/teams/`／求人20件超or部門4以上→ `/recruit/positions` 独立＋フィルタ。セクション `id` は将来のスラッグと一致させてある（`#people` → `/recruit/people` 等）