diff --git a/backend/app/routers/resumes.py b/backend/app/routers/resumes.py
index 8f8e4180..b305b56f 100644
--- a/backend/app/routers/resumes.py
+++ b/backend/app/routers/resumes.py
@@ -9,11 +9,19 @@
 from ..db import get_db
 from ..models import Resume, User
 from ..repositories import ResumeRepository
-from ..schemas import ResumeCreate, ResumeResponse, ResumeUpdate
+from ..schemas import (
+    ResumeCreate,
+    ResumePreviewResponse,
+    ResumeResponse,
+    ResumeUpdate,
+)
 from ..services.markdown.generators.resume_generator import (
     build_resume_markdown,
 )
-from ..services.pdf.generators.resume_generator import build_resume_pdf
+from ..services.pdf.generators.resume_generator import (
+    build_resume_pdf,
+    build_resume_preview,
+)
 from .download_utils import stream_markdown, stream_pdf
 
 router = APIRouter(prefix="/api/resumes", tags=["resumes"])
@@ -60,6 +68,21 @@ def create_resume(
         ) from exc
 
 
+@router.post("/preview", response_model=ResumePreviewResponse)
+def preview_resume(
+    payload: ResumeCreate,
+    current_user: User = Depends(get_current_user),
+) -> ResumePreviewResponse:
+    """保存せずに、職務経歴書を PDF と同じレイアウトに整形した HTML と画面用 CSS を返す。
+
+    左右 diff プレビュー（左=保存済み / 右=編集中）の描画に使う。HTML 内の各値ノードには
+    form パス（``data-fp``）が付与され、FE が変更箇所のハイライト・スクロール先特定に使う。
+    DB は更新しない。WeasyPrint を通さず HTML 文字列生成のみのため軽量。
+    """
+    html, css = build_resume_preview(payload.model_dump())
+    return ResumePreviewResponse(html=html, css=css)
+
+
 @router.get("/latest", response_model=ResumeResponse)
 def get_latest_resume(
     db: Session = Depends(get_db),
diff --git a/backend/app/schemas/__init__.py b/backend/app/schemas/__init__.py
index dc6b33e1..c207a940 100644
--- a/backend/app/schemas/__init__.py
+++ b/backend/app/schemas/__init__.py
@@ -29,6 +29,7 @@
     Project,
     ProjectTeam,
     ResumeCreate,
+    ResumePreviewResponse,
     ResumeQualificationItem,
     ResumeResponse,
     ResumeUpdate,
@@ -58,6 +59,7 @@
     "Project",
     "ProjectTeam",
     "ResumeCreate",
+    "ResumePreviewResponse",
     "ResumeQualificationItem",
     "ResumeResponse",
     "ResumeUpdate",
diff --git a/backend/app/schemas/resume.py b/backend/app/schemas/resume.py
index 54c72e76..b15b335d 100644
--- a/backend/app/schemas/resume.py
+++ b/backend/app/schemas/resume.py
@@ -246,3 +246,15 @@ class ResumeResponse(ResumeBase):
     def serialize_as_jst(self, dt: datetime) -> str:
         """UTC datetime を JST (UTC+9) の ISO 8601 文字列にシリアライズする。"""
         return to_jst(dt).isoformat()
+
+
+class ResumePreviewResponse(BaseModel):
+    """保存前プレビュー（左右 diff 表示）用の整形済み HTML と画面用 CSS。
+
+    DB を更新せず、編集中 payload を PDF と同じレイアウトに整形した HTML を返す。
+    HTML 内の各値ノードには form パス（``data-fp``）が付与され、FE が変更箇所の
+    ハイライト・スクロール先特定に使う。
+    """
+
+    html: str
+    css: str
diff --git a/backend/app/services/pdf/generators/resume_generator.py b/backend/app/services/pdf/generators/resume_generator.py
index 2b62093f..ff93badb 100644
--- a/backend/app/services/pdf/generators/resume_generator.py
+++ b/backend/app/services/pdf/generators/resume_generator.py
@@ -1,3 +1,4 @@
+import re
 from datetime import datetime
 from html import escape as _html_escape
 from pathlib import Path
@@ -21,6 +22,9 @@
     Path(__file__).resolve().parent.parent.parent.parent / "fonts" / "NotoSansJP-Regular.ttf"
 )
 
+# 画面プレビュー（左右 diff）で除去する PDF 専用フォント定義。url 解決が画面では不要なため。
+_FONT_FACE_RE = re.compile(r"@font-face\s*\{[^}]*\}")
+
 
 def _esc(text: str) -> str:
     """HTMLエスケープのショートカット"""
@@ -32,6 +36,17 @@ def _md(text: str) -> str:
     return markdown.markdown(str(text), extensions=["tables"])
 
 
+def _fp(*segments) -> str:
+    """form パス属性（data-fp）の値を組み立てる。
+
+    frontend `utils/careerDiff.ts` の change.path を "." 連結した文字列と一致させる契約。
+    例: _fp("experiences", 0, "clients", 1, "projects", 0, "role")
+        → "experiences.0.clients.1.projects.0.role"
+    左右 diff のハイライト・スクロール先特定に使う。WeasyPrint の PDF 出力には影響しない。
+    """
+    return ".".join(str(s) for s in segments)
+
+
 def _format_period(start: str, end: str, is_current: bool) -> str:
     """1 期間をフォーマットする。在籍中は end を "" で受ける契約（Experience 用）。"""
     s = start.replace("-", " 年 ") + " 月" if "-" in start else start
@@ -41,6 +56,33 @@ def _format_period(start: str, end: str, is_current: bool) -> str:
     return f"{s}〜{e}"
 
 
+def _format_period_html(
+    start: str,
+    end: str,
+    is_current: bool,
+    *,
+    fp: str,
+    start_key: str,
+    end_key: str,
+    current_key: str,
+) -> str:
+    """1 期間を per-field の data-fp 付き span に分けてフォーマットする。
+
+    開始日は ``{fp}.{start_key}``、終了側は在籍状況に応じて在職中なら ``{fp}.{current_key}``
+    （「現在」テキスト）、それ以外は ``{fp}.{end_key}`` に紐づける。期間全体を start_date だけに
+    紐づけると end_date / is_current の編集が左右 diff でハイライトされないため、フィールド単位で
+    分割する。表示テキストは ``_format_period`` と同一なので PDF レイアウトは不変。
+    """
+    s = start.replace("-", " 年 ") + " 月" if "-" in start else start
+    start_span = f'<span data-fp="{fp}.{start_key}">{_esc(s)}</span>'
+    if is_current:
+        end_span = f'<span data-fp="{fp}.{current_key}">現在</span>'
+    else:
+        e = end.replace("-", " 年 ") + " 月" if "-" in end else end
+        end_span = f'<span data-fp="{fp}.{end_key}">{_esc(e)}</span>'
+    return f"{start_span}〜{end_span}"
+
+
 def _format_periods(periods: list) -> str:
     """複数期間を「、」区切りで連結してフォーマットする（Project 用）。"""
     parts: list[str] = []
@@ -72,8 +114,8 @@ def _format_team(project) -> str:
     return f"{total_text}{member_text}"
 
 
-def _build_project_html(project) -> str:
-    """プロジェクト1件分のHTMLを組み立てる"""
+def _build_project_html(project, fp: str) -> str:
+    """プロジェクト1件分のHTMLを組み立てる（fp = このプロジェクトの data-fp プレフィックス）"""
     # ヘッダー（3行構成: 期間/プロジェクト名、役割、工程）
     name = _a(project, "name")
     periods = _a(project, "periods", [])
@@ -84,21 +126,22 @@ def _build_project_html(project) -> str:
     line1_parts: list[str] = []
     period_str = _format_periods(periods)
     if period_str:
-        line1_parts.append(period_str)
+        line1_parts.append(f'<span data-fp="{fp}.periods">{period_str}</span>')
     if name:
-        line1_parts.append(_esc(name))
+        line1_parts.append(f'<span data-fp="{fp}.name">{_esc(name)}</span>')
     line1 = "　／　".join(line1_parts) if line1_parts else ""
 
     # 2行目: 役割（体制の人数情報を「、体制：…」として役割の右側に併記する）
     team_text = _format_team(project)
-    role_part = f"役割：{_esc(role)}" if role else ""
-    team_part = f"体制：{team_text}" if team_text else ""
+    role_part = f'役割：<span data-fp="{fp}.role">{_esc(role)}</span>' if role else ""
+    team_part = f'体制：<span data-fp="{fp}.team">{team_text}</span>' if team_text else ""
     line2 = "、".join(p for p in [role_part, team_part] if p)
 
     # 3行目: 工程
     line3 = ""
     if phases:
-        line3 = f"工程：{'／'.join(_esc(p) for p in phases)}"
+        joined = "／".join(_esc(p) for p in phases)
+        line3 = f'工程：<span data-fp="{fp}.phases">{joined}</span>'
 
     header_lines = [ln for ln in [line1, line2, line3] if ln]
     header_html = ""
@@ -125,35 +168,47 @@ def _build_project_html(project) -> str:
 
     # 体制は表のカラムではなく役割行に併記する（line2 で処理済み）。
     return (
-        f'<div class="project">{header_html}'
+        f'<div class="project" data-unit="{fp}">{header_html}'
         f'<table class="project-table">'
         f"<thead><tr><th>業務内容</th><th>スキルセット</th></tr></thead>"
-        f'<tbody><tr><td class="desc">{left_content}</td>'
-        f'<td class="env">{right_content}</td></tr></tbody>'
+        f'<tbody><tr><td class="desc" data-fp="{fp}.description">{left_content}</td>'
+        f'<td class="env" data-fp="{fp}.technology_stacks">{right_content}</td></tr></tbody>'
         f"</table></div>"
     )
 
 
-def _build_vacation_html(client) -> str:
-    """休暇エントリ1件分のHTMLを組み立てる（期間 + 詳細）。"""
-    period = _format_period(
-        _a(client, "vacation_start_date"),
-        _a(client, "vacation_end_date", ""),
-        _a(client, "vacation_is_current", False),
-    )
-    header = f"休暇　{_esc(period)}" if period else "休暇"
+def _build_vacation_html(client, fp: str) -> str:
+    """休暇エントリ1件分のHTMLを組み立てる（期間 + 詳細）。fp = この取引先の data-fp プレフィックス。"""
+    start = _a(client, "vacation_start_date")
+    if start:
+        period_html = _format_period_html(
+            start,
+            _a(client, "vacation_end_date", ""),
+            _a(client, "vacation_is_current", False),
+            fp=fp,
+            start_key="vacation_start_date",
+            end_key="vacation_end_date",
+            current_key="vacation_is_current",
+        )
+        header = f"休暇　{period_html}"
+    else:
+        header = "休暇"
     description = _a(client, "vacation_description")
     body = _md(description) if description else "-"
     return (
-        f'<div class="vacation">'
+        f'<div class="vacation" data-unit="{fp}">'
         f'<div class="vacation-header">{header}</div>'
-        f'<div class="vacation-body">{body}</div>'
+        f'<div class="vacation-body" data-fp="{fp}.vacation_description">{body}</div>'
         f"</div>"
     )
 
 
 def _build_html(resume: dict) -> str:
-    """職務経歴書データからHTML文字列を組み立てる"""
+    """職務経歴書データからHTML文字列を組み立てる。
+
+    各値ノードに data-fp（form パス）属性を付与する。これは左右 diff プレビューでの
+    変更ハイライト/スクロール先特定に使われる。PDF 生成では無視される（レイアウト不変）。
+    """
     parts: list[str] = []
 
     # タイトル
@@ -162,7 +217,7 @@ def _build_html(resume: dict) -> str:
     # 氏名
     full_name = resume.get("full_name") or ""
     parts.append(
-        f'<div class="meta">氏名　{_esc(full_name)}</div>',
+        f'<div class="meta">氏名　<span data-fp="full_name">{_esc(full_name)}</span></div>',
     )
 
     # 記載日（日本時間）
@@ -174,7 +229,10 @@ def _build_html(resume: dict) -> str:
     # 職務要約
     parts.append("<h2>■職務要約</h2>")
     career_summary = resume.get("career_summary", "")
-    parts.append(f'<div class="body-text">{_md(career_summary)}</div>')
+    parts.append(
+        '<div class="body-text" data-unit="career_summary" data-fp="career_summary">'
+        f"{_md(career_summary)}</div>",
+    )
 
     # 職務経歴
     parts.append("<h2>■職務経歴</h2>")
@@ -182,11 +240,15 @@ def _build_html(resume: dict) -> str:
     if not experiences:
         parts.append("<p>-</p>")
     else:
-        for exp in experiences:
-            period = _format_period(
+        for i, exp in enumerate(experiences):
+            period_html = _format_period_html(
                 _a(exp, "start_date"),
                 _a(exp, "end_date", ""),
                 _a(exp, "is_current", False),
+                fp=f"experiences.{i}",
+                start_key="start_date",
+                end_key="end_date",
+                current_key="is_current",
             )
             company = _esc(_a(exp, "company"))
 
@@ -198,15 +260,23 @@ def _build_html(resume: dict) -> str:
             capital_unit = _a(exp, "capital_unit", "千万円")
             capital = f"{_esc(capital_raw)}{_esc(capital_unit)}" if capital_raw else ""
             emp = f"{_esc(emp_raw)}名" if emp_raw else ""
-            info_parts = [f"事業内容：{biz}"]
+            info_parts = [
+                f'事業内容：<span data-fp="experiences.{i}.business_description">{biz}</span>',
+            ]
             if capital:
-                info_parts.append(f"資本金：{capital}")
+                info_parts.append(
+                    f'資本金：<span data-fp="experiences.{i}.capital">{capital}</span>',
+                )
             if emp:
-                info_parts.append(f"従業員数：{emp}")
+                info_parts.append(
+                    f'従業員数：<span data-fp="experiences.{i}.employee_count">{emp}</span>',
+                )
 
-            parts.append('<div class="company">')
+            parts.append(f'<div class="company" data-unit="experiences.{i}">')
             parts.append(
-                f'<div class="company-header">' f"{period}　{company}</div>",
+                '<div class="company-header">'
+                f"{period_html}　"
+                f'<span data-fp="experiences.{i}.company">{company}</span></div>',
             )
             parts.append(
                 f'<div class="company-info">' f'{"　".join(info_parts)}</div>',
@@ -217,23 +287,28 @@ def _build_html(resume: dict) -> str:
                 # 非IT企業: 取引先/プロジェクトの代わりに詳細を表示
                 detail = _a(exp, "description")
                 parts.append(
-                    f'<div class="company-detail">{_md(detail)}</div>' if detail else "<p>-</p>",
+                    f'<div class="company-detail" data-fp="experiences.{i}.description">'
+                    f"{_md(detail)}</div>"
+                    if detail
+                    else "<p>-</p>",
                 )
             else:
                 # 取引先 → プロジェクト（後方互換含む正規化は shared に集約）
                 clients = normalize_clients(exp)
-                for client in clients:
+                for j, client in enumerate(clients):
+                    client_fp = f"experiences.{i}.clients.{j}"
                     if _a(client, "is_vacation", False):
-                        parts.append(_build_vacation_html(client))
+                        parts.append(_build_vacation_html(client, client_fp))
                         continue
                     client_name = _a(client, "name")
                     if client_name:
                         parts.append(
-                            f'<div class="client-name">' f"案件名：{_esc(client_name)}</div>",
+                            '<div class="client-name">案件名：'
+                            f'<span data-fp="{client_fp}.name">{_esc(client_name)}</span></div>',
                         )
                     projects = _a(client, "projects", [])
-                    for proj in projects:
-                        parts.append(_build_project_html(proj))
+                    for k, proj in enumerate(projects):
+                        parts.append(_build_project_html(proj, f"{client_fp}.projects.{k}"))
 
             parts.append("</div></div>")
 
@@ -244,7 +319,7 @@ def _build_html(resume: dict) -> str:
         parts.append("<p>-</p>")
     else:
         parts.append('<table class="qual-table">')
-        for q in qualifications:
+        for i, q in enumerate(qualifications):
             name = _esc(_a(q, "name"))
             raw_date = _a(q, "acquired_date")
             if raw_date and "-" in raw_date:
@@ -257,27 +332,51 @@ def _build_html(resume: dict) -> str:
                     ds = f"{_esc(raw_date)}取得"
             else:
                 ds = f"{_esc(raw_date)}取得" if raw_date else ""
-            parts.append(f"<tr><td>{name}</td><td>{ds}</td></tr>")
+            parts.append(
+                f'<tr data-unit="qualifications.{i}">'
+                f'<td><span data-fp="qualifications.{i}.name">{name}</span></td>'
+                f'<td><span data-fp="qualifications.{i}.acquired_date">{ds}</span></td></tr>',
+            )
         parts.append("</table>")
 
     # 自己PR
     parts.append("<h2>■自己PR</h2>")
     self_pr = resume.get("self_pr", "")
-    parts.append(f'<div class="body-text">{_md(self_pr)}</div>')
+    parts.append(
+        '<div class="body-text" data-unit="self_pr" data-fp="self_pr">' f"{_md(self_pr)}</div>",
+    )
 
     return "\n".join(parts)
 
 
+def _load_css(for_screen: bool) -> str:
+    """resume.css を読み込む。
+
+    for_screen=True（左右 diff プレビュー）: PDF 用フォント(@font-face)を除去し、
+    body の font-family フォールバック（sans-serif）に任せる。
+    for_screen=False（PDF 生成）: {{ font_path }} を実フォントの URI に置換する。
+    """
+    css_text = _CSS_PATH.read_text(encoding="utf-8")
+    if for_screen:
+        return _FONT_FACE_RE.sub("", css_text)
+    return css_text.replace("{{ font_path }}", _FONT_PATH.as_uri())
+
+
+def build_resume_preview(resume: dict) -> tuple[str, str]:
+    """保存前プレビュー（左右 diff）用に (body HTML, 画面用 CSS) を返す。
+
+    HTML は data-fp 付き（`_build_html`）。CSS は PDF 専用フォントを除いた画面表示版。
+    frontend は両者を iframe srcdoc に流し込んで baseline / 編集中を並べて描画する。
+    """
+    return _build_html(resume), _load_css(for_screen=True)
+
+
 def build_resume_pdf(resume: dict) -> bytes:
     """職務経歴書データからPDFバイト列を生成する"""
     html_body = _build_html(resume)
 
     # CSSテンプレートを読み込み、フォントパスを埋め込む
-    css_text = _CSS_PATH.read_text(encoding="utf-8")
-    css_text = css_text.replace(
-        "{{ font_path }}",
-        _FONT_PATH.as_uri(),
-    )
+    css_text = _load_css(for_screen=False)
 
     full_html = (
         "<!DOCTYPE html>"
diff --git a/backend/tests/test_endpoints.py b/backend/tests/test_endpoints.py
index 757a1dcb..2682891a 100644
--- a/backend/tests/test_endpoints.py
+++ b/backend/tests/test_endpoints.py
@@ -10,6 +10,7 @@
     "method,path",
     [
         ("post", "/api/resumes"),
+        ("post", "/api/resumes/preview"),
         ("get", "/api/resumes/latest"),
     ],
 )
@@ -305,3 +306,79 @@ def test_resume_not_found(client: TestClient) -> None:
         headers=headers,
     )
     assert resp.status_code == 404
+
+
+# ── 保存前プレビュー（左右 diff 用 HTML）────────────────────────
+
+
+def test_resume_preview_returns_annotated_html(client: TestClient) -> None:
+    """保存せずに整形 HTML（data-fp 付き）と CSS を返す。"""
+    headers = auth_header(client, "resume-preview-user")
+    resp = client.post(
+        "/api/resumes/preview",
+        json={
+            "full_name": "山田太郎",
+            "career_summary": "キャリアサマリー",
+            "self_pr": "自己PR",
+            "experiences": [
+                {
+                    "company": "Example株式会社",
+                    "business_description": "SES事業",
+                    "start_date": "2020-04",
+                    "end_date": "2024-03",
+                    "is_current": False,
+                    "is_it_company": True,
+                    "clients": [
+                        {
+                            "name": "取引先A",
+                            "has_client": True,
+                            "projects": [
+                                {
+                                    "name": "案件X",
+                                    "role": "SE",
+                                    "periods": [
+                                        {
+                                            "start_date": "2020-04",
+                                            "end_date": "2021-03",
+                                            "is_current": False,
+                                        }
+                                    ],
+                                }
+                            ],
+                        }
+                    ],
+                }
+            ],
+            "qualifications": [{"acquired_date": "2020-04", "name": "応用情報技術者"}],
+        },
+        headers=headers,
+    )
+    assert resp.status_code == 200
+    body = resp.json()
+    html = body["html"]
+    # form パス（data-fp）が careerDiff のパス文字列と一致して付与されていること
+    assert 'data-fp="full_name"' in html
+    assert 'data-fp="experiences.0.company"' in html
+    assert 'data-fp="experiences.0.clients.0.name"' in html
+    assert 'data-fp="experiences.0.clients.0.projects.0.role"' in html
+    assert 'data-fp="qualifications.0.name"' in html
+    # 画面用 CSS は PDF 専用フォント定義を含まない
+    assert "@font-face" not in body["css"]
+    assert ".project-table" in body["css"]
+
+
+def test_resume_preview_validation_error(client: TestClient) -> None:
+    """必須欠落（full_name 空）は 422 を返す。"""
+    headers = auth_header(client, "resume-preview-invalid-user")
+    resp = client.post(
+        "/api/resumes/preview",
+        json={
+            "full_name": "",
+            "career_summary": "x",
+            "self_pr": "y",
+            "experiences": [],
+            "qualifications": [],
+        },
+        headers=headers,
+    )
+    assert resp.status_code == 422
diff --git a/backend/tests/test_pdf_generator.py b/backend/tests/test_pdf_generator.py
index 7f7437a1..abf072ca 100644
--- a/backend/tests/test_pdf_generator.py
+++ b/backend/tests/test_pdf_generator.py
@@ -1,6 +1,10 @@
 import base64
 
-from app.services.pdf.generators.resume_generator import build_resume_pdf
+from app.services.pdf.generators.resume_generator import (
+    _build_html,
+    build_resume_pdf,
+    build_resume_preview,
+)
 from app.services.pdf.utils.pdf_utils import (
     decode_photo as _decode_photo,
 )
@@ -76,6 +80,152 @@ def test_build_resume_pdf_with_non_it_and_vacation() -> None:
     assert len(pdf_bytes) > 100
 
 
+def test_build_html_annotates_data_fp() -> None:
+    """_build_html が careerDiff のパスと一致する data-fp を各値ノードに付与する。"""
+    payload = {
+        "full_name": "山田太郎",
+        "career_summary": "要約",
+        "self_pr": "PR",
+        "qualifications": [{"acquired_date": "2020-04", "name": "応用情報技術者"}],
+        "experiences": [
+            {
+                "company": "Example株式会社",
+                "business_description": "SES事業",
+                "start_date": "2020-04",
+                "end_date": "2024-03",
+                "is_current": False,
+                "is_it_company": True,
+                "clients": [
+                    {
+                        "name": "取引先A",
+                        "has_client": True,
+                        "projects": [
+                            {
+                                "name": "案件X",
+                                "role": "SE",
+                                "periods": [
+                                    {"start_date": "2020-04", "end_date": "2021-03"}
+                                ],
+                            }
+                        ],
+                    }
+                ],
+            }
+        ],
+    }
+
+    html = _build_html(payload)
+
+    assert 'data-fp="full_name"' in html
+    assert 'data-fp="career_summary"' in html
+    assert 'data-fp="self_pr"' in html
+    assert 'data-fp="experiences.0.company"' in html
+    assert 'data-fp="experiences.0.business_description"' in html
+    # 期間はフィールド単位の span に分割し、start_date / end_date を個別に紐づける
+    # （end_date / is_current の編集も左右 diff でハイライトできるようにするため）
+    assert 'data-fp="experiences.0.start_date"' in html
+    assert 'data-fp="experiences.0.end_date"' in html
+    assert 'data-fp="experiences.0.clients.0.name"' in html
+    assert 'data-fp="experiences.0.clients.0.projects.0.role"' in html
+    assert 'data-fp="experiences.0.clients.0.projects.0.technology_stacks"' in html
+    assert 'data-fp="qualifications.0.name"' in html
+    # 折りたたみ用の項目コンテナ（data-unit）も付与される
+    assert 'data-unit="experiences.0"' in html
+    assert 'data-unit="experiences.0.clients.0.projects.0"' in html
+    assert 'data-unit="qualifications.0"' in html
+
+
+def test_build_html_period_binds_is_current() -> None:
+    """在職中の期間は「現在」を is_current に、休暇期間は各日付フィールドに紐づける。"""
+    payload = {
+        "full_name": "山田太郎",
+        "career_summary": "要約",
+        "self_pr": "PR",
+        "qualifications": [],
+        "experiences": [
+            {
+                "company": "Example株式会社",
+                "business_description": "SES事業",
+                "start_date": "2020-04",
+                "end_date": "",
+                "is_current": True,
+                "is_it_company": True,
+                "clients": [
+                    {
+                        "name": "取引先A",
+                        "has_client": True,
+                        "is_vacation": True,
+                        "vacation_start_date": "2021-01",
+                        "vacation_end_date": "2021-03",
+                        "vacation_is_current": False,
+                        "vacation_description": "休養",
+                    }
+                ],
+            }
+        ],
+    }
+
+    html = _build_html(payload)
+
+    # 在職中: 「現在」テキストは is_current に紐づく
+    assert 'data-fp="experiences.0.is_current">現在</span>' in html
+    # 休暇期間も start/end が個別の span になる
+    assert 'data-fp="experiences.0.clients.0.vacation_start_date"' in html
+    assert 'data-fp="experiences.0.clients.0.vacation_end_date"' in html
+
+
+def test_build_resume_pdf_still_works_with_annotations() -> None:
+    """data-fp 付与後も PDF 生成は従来どおり成功する（属性はレイアウトに影響しない）。"""
+    payload = {
+        "full_name": "山田太郎",
+        "career_summary": "要約",
+        "self_pr": "PR",
+        "qualifications": [],
+        "experiences": [
+            {
+                "company": "Example株式会社",
+                "business_description": "SES事業",
+                "start_date": "2020-04",
+                "end_date": "2024-03",
+                "is_current": False,
+                "is_it_company": True,
+                "clients": [
+                    {
+                        "name": "取引先A",
+                        "has_client": True,
+                        "projects": [
+                            {
+                                "name": "案件X",
+                                "role": "SE",
+                                "periods": [
+                                    {"start_date": "2020-04", "end_date": "2021-03"}
+                                ],
+                            }
+                        ],
+                    }
+                ],
+            }
+        ],
+    }
+    pdf_bytes = build_resume_pdf(payload)
+    assert pdf_bytes.startswith(b"%PDF")
+
+
+def test_build_resume_preview_returns_html_and_screen_css() -> None:
+    """プレビューは (data-fp 付き HTML, 画面用 CSS) を返し、CSS は @font-face を含まない。"""
+    payload = {
+        "full_name": "山田太郎",
+        "career_summary": "要約",
+        "self_pr": "PR",
+        "qualifications": [],
+        "experiences": [],
+    }
+    html, css = build_resume_preview(payload)
+    assert 'data-fp="full_name"' in html
+    assert "@font-face" not in css
+    assert ".company" in css
+
+
 def test_parse_date_ym() -> None:
     assert _parse_date_ym("2020-04") == ("2020", "4")
     assert _parse_date_ym("2020-12-01") == ("2020", "12")
diff --git a/frontend/e2e/career-dirty-indicator.spec.ts b/frontend/e2e/career-dirty-indicator.spec.ts
index 3ea29b10..86fed835 100644
--- a/frontend/e2e/career-dirty-indicator.spec.ts
+++ b/frontend/e2e/career-dirty-indicator.spec.ts
@@ -41,6 +41,18 @@ async function setupResumeApi(page: Page) {
     route.fulfill({ status: 200, contentType: "application/json", body: "[]" }),
   );
 
+  // 保存前プレビュー（左右 diff モーダル）。整形 HTML と CSS を返す。
+  await page.route("**/api/resumes/preview", (route) =>
+    route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({
+        html: '<div class="meta">氏名　<span data-fp="full_name">山田 太郎</span></div>',
+        css: "",
+      }),
+    }),
+  );
+
   // 最新取得
   await page.route("**/api/resumes/latest", (route) =>
     route.fulfill({
@@ -232,8 +244,9 @@ test.describe("職務経歴書 未保存マーク", () => {
     const dirtyCountAfterReturn = await page.getByTestId("dirty-dot").count();
     expect(dirtyCountAfterReturn).toBeGreaterThanOrEqual(1);
 
-    // 4. 保存 → 🔴 が全消失
+    // 4. 保存ボタン → 変更点 diff モーダルが開く → 「この内容で保存」で確定 → 🔴 が全消失
     await page.getByRole("button", { name: /更新する|保存する/ }).click();
+    await page.getByRole("button", { name: "この内容で保存" }).click();
     await expect(page.getByTestId("dirty-dot")).toHaveCount(0);
   });
 });
diff --git a/frontend/src/api/generated.ts b/frontend/src/api/generated.ts
index dadb3415..15122729 100644
--- a/frontend/src/api/generated.ts
+++ b/frontend/src/api/generated.ts
@@ -436,6 +436,30 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/api/resumes/preview": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Preview Resume
+         * @description 保存せずに、職務経歴書を PDF と同じレイアウトに整形した HTML と画面用 CSS を返す。
+         *
+         *     左右 diff プレビュー（左=保存済み / 右=編集中）の描画に使う。HTML 内の各値ノードには
+         *     form パス（``data-fp``）が付与され、FE が変更箇所のハイライト・スクロール先特定に使う。
+         *     DB は更新しない。WeasyPrint を通さず HTML 文字列生成のみのため軽量。
+         */
+        post: operations["preview_resume_api_resumes_preview_post"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/api/resumes/{resume_id}": {
         parameters: {
             query?: never;
@@ -1313,6 +1337,20 @@ export interface components {
             /** Self Pr */
             self_pr: string;
         };
+        /**
+         * ResumePreviewResponse
+         * @description 保存前プレビュー（左右 diff 表示）用の整形済み HTML と画面用 CSS。
+         *
+         *     DB を更新せず、編集中 payload を PDF と同じレイアウトに整形した HTML を返す。
+         *     HTML 内の各値ノードには form パス（``data-fp``）が付与され、FE が変更箇所の
+         *     ハイライト・スクロール先特定に使う。
+         */
+        ResumePreviewResponse: {
+            /** Css */
+            css: string;
+            /** Html */
+            html: string;
+        };
         /** ResumeQualificationItem */
         ResumeQualificationItem: {
             /** Acquired Date */
@@ -2233,6 +2271,39 @@ export interface operations {
             };
         };
     };
+    preview_resume_api_resumes_preview_post: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["ResumeCreate"];
+            };
+        };
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ResumePreviewResponse"];
+                };
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HTTPValidationError"];
+                };
+            };
+        };
+    };
     get_resume_api_resumes__resume_id__get: {
         parameters: {
             query?: never;
diff --git a/frontend/src/api/paths.ts b/frontend/src/api/paths.ts
index 16fecbad..bba168a9 100644
--- a/frontend/src/api/paths.ts
+++ b/frontend/src/api/paths.ts
@@ -30,6 +30,7 @@ export const PATHS = {
   resumes: {
     base: "/api/resumes",
     latest: "/api/resumes/latest",
+    preview: "/api/resumes/preview",
     byId: (id: string) => `/api/resumes/${id}`,
     pdf: (id: string) => `/api/resumes/${id}/pdf`,
     markdown: (id: string) => `/api/resumes/${id}/markdown`,
diff --git a/frontend/src/api/resumes.ts b/frontend/src/api/resumes.ts
index 8ff87fd7..93ebb98b 100644
--- a/frontend/src/api/resumes.ts
+++ b/frontend/src/api/resumes.ts
@@ -1,7 +1,11 @@
 import { request } from "./client";
 import { downloadBlob, getBlobUrl } from "./download";
 import { PATHS } from "./paths";
-import type { ResumeCreate, ResumeResponse } from "./types";
+import type { ResumeCreate, ResumePreviewResponse, ResumeResponse } from "./types";
+
+// 保存前プレビュー（左右 diff 表示）のレスポンス型は OpenAPI 生成物（generated.ts）から
+// 取り込んだ ResumePreviewResponse を types.ts 経由で再エクスポートする。
+export type { ResumePreviewResponse };
 
 export function getLatestCareerResume(): Promise<ResumeResponse> {
   return request<ResumeResponse>(PATHS.resumes.latest);
@@ -39,3 +43,16 @@ export function downloadCareerResumeMarkdown(id: string): Promise<void> {
 export function getCareerResumePdfBlobUrl(id: string): Promise<string> {
   return getBlobUrl(PATHS.resumes.pdf(id));
 }
+
+/**
+ * 保存せずに、職務経歴書を整形した HTML（data-fp 付き）と画面用 CSS を取得する。
+ * 左右 diff プレビュー（左=保存済み / 右=編集中）の描画に使う。
+ */
+export function getCareerResumePreview(
+  payload: ResumeCreate,
+): Promise<ResumePreviewResponse> {
+  return request<ResumePreviewResponse>(PATHS.resumes.preview, {
+    method: "POST",
+    body: JSON.stringify(payload),
+  });
+}
diff --git a/frontend/src/api/types.ts b/frontend/src/api/types.ts
index 0fc03f60..76115802 100644
--- a/frontend/src/api/types.ts
+++ b/frontend/src/api/types.ts
@@ -59,6 +59,9 @@ export type ResumeResponse = Schemas["ResumeResponse"];
 /** 職務経歴の作成/更新ペイロード。backend `schemas/resume.py:ResumeCreate`（ResumeBase 同形）。 */
 export type ResumeCreate = Schemas["ResumeCreate"];
 
+/** 保存前プレビュー（左右 diff 表示）のレスポンス。backend `schemas/resume.py:ResumePreviewResponse`。 */
+export type ResumePreviewResponse = Schemas["ResumePreviewResponse"];
+
 /** 職歴（1 社分）。backend `schemas/resume.py:Experience`。 */
 export type Experience = Schemas["Experience-Output"];
 
diff --git a/frontend/src/components/forms/CareerDiffModal.module.css b/frontend/src/components/forms/CareerDiffModal.module.css
new file mode 100644
index 00000000..3befaf3a
--- /dev/null
+++ b/frontend/src/components/forms/CareerDiffModal.module.css
@@ -0,0 +1,245 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--overlay-bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1rem;
+}
+
+.modal {
+  background: var(--bg-card);
+  border-radius: 12px;
+  width: 94vw;
+  height: 92vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.header {
+  padding: 1rem 1.25rem 0.5rem;
+}
+
+.title {
+  margin: 0 0 0.25rem;
+  font-size: 1.1rem;
+}
+
+.description {
+  margin: 0;
+  font-size: 0.82rem;
+  color: var(--text-muted, #666);
+  line-height: 1.5;
+}
+
+/* 左ペイン / 右ペイン / サイドバー の 3 カラム。 */
+.body {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr 320px;
+  gap: 0.75rem;
+  padding: 0.5rem 1rem 0.75rem;
+}
+
+.pane {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 8px;
+  overflow: hidden;
+  position: relative;
+}
+
+.paneHead {
+  flex-shrink: 0;
+  padding: 0.4rem 0.7rem;
+  font-size: 0.8rem;
+  font-weight: 700;
+  background: var(--bg-page, #f5f5f5);
+  border-bottom: 1px solid var(--border-color, #e0e0e0);
+}
+
+.frame {
+  flex: 1;
+  border: none;
+  width: 100%;
+  background: #fff;
+}
+
+.placeholder {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted, #888);
+  font-size: 0.85rem;
+  padding: 1rem;
+  text-align: center;
+}
+
+/* 右ペインの再取得中インジケータ（既存表示の上に重ねる）。 */
+.refetching {
+  position: absolute;
+  top: 0.4rem;
+  right: 0.5rem;
+  font-size: 0.7rem;
+  color: var(--text-muted, #888);
+  background: var(--bg-card, #fff);
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 999px;
+  padding: 0.1rem 0.5rem;
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.sidebarHead {
+  flex-shrink: 0;
+  padding: 0.4rem 0.7rem;
+  font-size: 0.8rem;
+  font-weight: 700;
+  background: var(--bg-page, #f5f5f5);
+  border-bottom: 1px solid var(--border-color, #e0e0e0);
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0.5rem;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.row {
+  display: flex;
+  align-items: stretch;
+  gap: 0.4rem;
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+/* 行本体はクリックでスクロールするボタン。装飾はテキストブロック風に戻す。 */
+.rowMain {
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+  background: transparent;
+  color: inherit;
+  border: none;
+  border-radius: 0;
+  padding: 0.45rem 0.55rem;
+  font-weight: 400;
+  cursor: pointer;
+}
+
+.rowHead {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-bottom: 0.2rem;
+}
+
+.badge {
+  flex-shrink: 0;
+  font-size: 0.65rem;
+  font-weight: 600;
+  padding: 0.05rem 0.4rem;
+  border-radius: 999px;
+  color: #fff;
+}
+
+.modified {
+  background: #ca8a04;
+}
+
+.added {
+  background: #16a34a;
+}
+
+.removed {
+  background: #dc2626;
+}
+
+.label {
+  font-size: 0.78rem;
+  font-weight: 600;
+  word-break: break-word;
+}
+
+.values {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  font-size: 0.78rem;
+}
+
+.oldValue {
+  color: var(--text-muted, #888);
+  text-decoration: line-through;
+  word-break: break-word;
+}
+
+.arrow {
+  color: var(--text-muted, #888);
+}
+
+.newValue {
+  color: var(--text-primary, #111);
+  font-weight: 500;
+  word-break: break-word;
+}
+
+/* VSCode の diff の revert 矢印風。各変更行を編集前（保存済み）へ戻すアイコンボタン。 */
+.rollback {
+  flex-shrink: 0;
+  align-self: center;
+  margin-right: 0.4rem;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.95rem;
+  line-height: 1;
+  background: transparent;
+  color: var(--accent, #c96442);
+  border: 1px solid var(--border-color, #e0e0e0);
+  border-radius: 6px;
+}
+
+.rollback:hover:not(:disabled) {
+  background: rgba(201, 100, 66, 0.12);
+  border-color: var(--accent, #c96442);
+}
+
+.empty {
+  margin: 0;
+  padding: 0.75rem;
+  color: var(--text-muted, #666);
+  font-size: 0.85rem;
+}
+
+.actions {
+  flex-shrink: 0;
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+  padding: 0.75rem 1.25rem;
+  border-top: 1px solid var(--border-color, #e0e0e0);
+}
diff --git a/frontend/src/components/forms/CareerDiffModal.tsx b/frontend/src/components/forms/CareerDiffModal.tsx
new file mode 100644
index 00000000..bf55d039
--- /dev/null
+++ b/frontend/src/components/forms/CareerDiffModal.tsx
@@ -0,0 +1,230 @@
+import { useMemo, useRef } from "react";
+
+import { DIFF_DIALOG_MESSAGES as D } from "../../constants/messages";
+import type { CareerChange, ChangeKind } from "../../utils/careerDiff";
+import {
+  annotateHtml,
+  buildPathKindMap,
+  foldUnchanged,
+  injectRemovedPlaceholders,
+} from "../../utils/diffHighlight";
+import styles from "./CareerDiffModal.module.css";
+
+/** 種別ごとのバッジ文言。 */
+const KIND_LABEL: Record<ChangeKind, string> = {
+  modified: D.MODIFIED_LABEL,
+  added: D.ADDED_LABEL,
+  removed: D.REMOVED_LABEL,
+};
+
+/**
+ * iframe 内に注入する diff 着色 CSS。backend の resume.css に追記する形で srcDoc に埋め込む。
+ * 緑=追加 / 赤=削除 / 黄=修正。VSCode 系 diff の配色に寄せる。
+ */
+const DIFF_CSS = `
+  body { margin: 0; padding: 12px 16px; background: #fff; }
+  .diff-mark { border-radius: 2px; padding: 0 1px; }
+  .diff-added { background: rgba(22,163,74,0.18); box-shadow: 0 0 0 1px rgba(22,163,74,0.45); }
+  .diff-removed { background: rgba(220,38,38,0.16); box-shadow: 0 0 0 1px rgba(220,38,38,0.40); }
+  .diff-modified { background: rgba(234,179,8,0.25); box-shadow: 0 0 0 1px rgba(234,179,8,0.50); }
+  details.fold { margin: 3px 0; }
+  summary.fold-summary {
+    cursor: pointer; list-style: none; font-size: 8pt; color: #6b7280;
+    background: #f3f4f6; border: 1px dashed #cbd5e1; border-radius: 4px; padding: 2px 8px;
+  }
+  summary.fold-summary::-webkit-details-marker { display: none; }
+  summary.fold-summary::before { content: "▸ "; }
+  details[open] > summary.fold-summary::before { content: "▾ "; }
+  .diff-removed-stub {
+    font-size: 8pt; color: #b91c1c; background: rgba(220,38,38,0.08);
+    border: 1px dashed rgba(220,38,38,0.5); border-radius: 4px; padding: 2px 6px; margin: 2px 0;
+  }
+  .diff-removed-stub td { border: none; color: #b91c1c; }
+`;
+
+function buildSrcDoc(css: string, bodyHtml: string): string {
+  return (
+    "<!DOCTYPE html><html lang=\"ja\"><head><meta charset=\"utf-8\">" +
+    `<style>${css}\n${DIFF_CSS}</style></head><body>${bodyHtml}</body></html>`
+  );
+}
+
+/**
+ * 経歴書 保存時の左右 diff モーダル（VSCode フォーク風）。
+ *
+ * 左=保存済み(baseline) / 右=編集中(form) を PDF と同じ整形レイアウト（iframe srcdoc）で並べ、
+ * 変更箇所を緑/赤/黄でハイライト。右サイドバーに変更点リストを出し、各行で項目別ロールバック。
+ */
+export function CareerDiffModal({
+  changes,
+  baselineHtml,
+  editedHtml,
+  css,
+  loading,
+  error,
+  saving,
+  onConfirm,
+  onCancel,
+  onRollback,
+}: {
+  changes: CareerChange[];
+  baselineHtml: string | null;
+  editedHtml: string | null;
+  css: string;
+  loading: boolean;
+  error: string | null;
+  saving: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+  onRollback: (change: CareerChange) => void;
+}) {
+  const editedFrameRef = useRef<HTMLIFrameElement>(null);
+  const hasChanges = changes.length > 0;
+
+  const pathKindMap = useMemo(() => buildPathKindMap(changes), [changes]);
+
+  // 着色（annotateHtml）→ 変更なし領域を畳む（foldUnchanged）の順で整形する。
+  const baselineDoc = useMemo(() => {
+    if (baselineHtml === null) return null;
+    return buildSrcDoc(css, foldUnchanged(annotateHtml(baselineHtml, pathKindMap), pathKindMap));
+  }, [baselineHtml, css, pathKindMap]);
+
+  const editedDoc = useMemo(() => {
+    if (editedHtml === null) return null;
+    // 着色 → 削除跡のプレースホルダ挿入 → 変更なし領域の折りたたみ、の順で整形する。
+    const annotated = annotateHtml(editedHtml, pathKindMap);
+    const withStubs = injectRemovedPlaceholders(annotated, changes);
+    return buildSrcDoc(css, foldUnchanged(withStubs, pathKindMap));
+  }, [editedHtml, css, pathKindMap, changes]);
+
+  /** 変更点行クリックで、右ペイン（編集中）の該当ノードへスクロールする。 */
+  const scrollToChange = (change: CareerChange) => {
+    const doc = editedFrameRef.current?.contentDocument;
+    if (!doc) return;
+    const fp = change.path.join(".");
+    const escaped = CSS.escape(fp);
+    const target =
+      doc.querySelector(`[data-fp="${escaped}"]`) ??
+      doc.querySelector(`[data-fp^="${escaped}."]`);
+    target?.scrollIntoView({ block: "center", behavior: "smooth" });
+  };
+
+  return (
+    <div
+      className={styles.overlay}
+      onClick={() => {
+        // 保存処理中は背景クリックでの閉じ操作を無効化する（処理中状態を隠さない）。
+        if (!saving) onCancel();
+      }}
+    >
+      <div
+        className={styles.modal}
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-label={D.TITLE}
+      >
+        <div className={styles.header}>
+          <h2 className={styles.title}>{D.TITLE}</h2>
+          <p className={styles.description}>{D.DESCRIPTION}</p>
+        </div>
+
+        <div className={styles.body}>
+          {/* 左: 保存済み */}
+          <section className={styles.pane}>
+            <div className={styles.paneHead}>{D.PANE_BASELINE}</div>
+            {baselineDoc ? (
+              <iframe
+                className={styles.frame}
+                title={D.PANE_BASELINE}
+                sandbox="allow-same-origin"
+                srcDoc={baselineDoc}
+              />
+            ) : (
+              <div className={styles.placeholder}>{D.BASELINE_EMPTY}</div>
+            )}
+          </section>
+
+          {/* 右: 編集中 */}
+          <section className={styles.pane}>
+            <div className={styles.paneHead}>{D.PANE_EDITED}</div>
+            {error ? (
+              <div className={styles.placeholder}>{error}</div>
+            ) : editedDoc ? (
+              <iframe
+                ref={editedFrameRef}
+                className={styles.frame}
+                title={D.PANE_EDITED}
+                sandbox="allow-same-origin"
+                srcDoc={editedDoc}
+              />
+            ) : (
+              <div className={styles.placeholder}>{D.PREVIEW_LOADING}</div>
+            )}
+            {loading && editedDoc && <div className={styles.refetching}>{D.PREVIEW_LOADING}</div>}
+          </section>
+
+          {/* 変更点サイドバー */}
+          <aside className={styles.sidebar}>
+            <div className={styles.sidebarHead}>{D.CHANGES_HEADING}</div>
+            {hasChanges ? (
+              <ul className={styles.list}>
+                {changes.map((change) => (
+                  <li key={`${change.path.join("/")}:${change.kind}`} className={styles.row}>
+                    <button
+                      type="button"
+                      className={styles.rowMain}
+                      onClick={() => scrollToChange(change)}
+                    >
+                      <div className={styles.rowHead}>
+                        <span className={`${styles.badge} ${styles[change.kind]}`}>
+                          {KIND_LABEL[change.kind]}
+                        </span>
+                        <span className={styles.label}>{change.label}</span>
+                      </div>
+                      <div className={styles.values}>
+                        {change.kind !== "added" && (
+                          <span className={styles.oldValue}>{change.oldValue || D.EMPTY_VALUE}</span>
+                        )}
+                        {change.kind === "modified" && <span className={styles.arrow}>→</span>}
+                        {change.kind !== "removed" && (
+                          <span className={styles.newValue}>{change.newValue || D.EMPTY_VALUE}</span>
+                        )}
+                      </div>
+                    </button>
+                    <button
+                      type="button"
+                      className={styles.rollback}
+                      onClick={() => onRollback(change)}
+                      disabled={saving}
+                      aria-label={D.ROLLBACK}
+                      title={D.ROLLBACK}
+                    >
+                      ↩
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <p className={styles.empty}>{D.NO_CHANGES}</p>
+            )}
+          </aside>
+        </div>
+
+        <div className={styles.actions}>
+          <button
+            type="button"
+            className="primary"
+            onClick={onConfirm}
+            disabled={saving || !hasChanges}
+          >
+            {D.CONFIRM}
+          </button>
+          <button type="button" onClick={onCancel} disabled={saving}>
+            {D.CANCEL}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/forms/CareerResumeForm.tsx b/frontend/src/components/forms/CareerResumeForm.tsx
index bd177a01..9eb43cbe 100644
--- a/frontend/src/components/forms/CareerResumeForm.tsx
+++ b/frontend/src/components/forms/CareerResumeForm.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties, FormEvent, useRef, useState } from "react";
+import { CSSProperties, FormEvent, useMemo, useRef, useState } from "react";
 
 import {
   createCareerResume,
@@ -13,14 +13,17 @@ import { UI_MESSAGES } from "../../constants/messages";
 import { createInitialCareerForm, mapCareerResumeToForm } from "../../formMappers";
 import { useCareerDirty } from "../../hooks/career/useCareerDirty";
 import { useImportPanelLayout } from "../../hooks/career/useImportPanelLayout";
+import { useResumeDiffPreview } from "../../hooks/career/useResumeDiffPreview";
 import { useResumeImportAssist } from "../../hooks/career/useResumeImportAssist";
 import { useDocumentForm } from "../../hooks/useDocumentForm";
 import { buildCareerPayload } from "../../payloadBuilders";
+import { buildCareerChanges } from "../../utils/careerDiff";
 import type { CareerTextFieldKey } from "../../formTypes";
 import { useQualifications, useTechnologyStacks } from "../../hooks/useMasterData";
 import { usePdfActions } from "../../hooks/usePdfActions";
 import shared from "../../styles/shared.module.css";
 import { ConfirmDialog } from "../ConfirmDialog";
+import { CareerDiffModal } from "./CareerDiffModal";
 import { Skeleton } from "../ui/Skeleton";
 import { PdfPreviewModal } from "./PdfPreviewModal";
 import { ResumeSourceTracePanel } from "./ResumeSourceTracePanel";
@@ -32,6 +35,8 @@ import { CareerSelfPrSection } from "./sections/CareerSelfPrSection";
 
 export function CareerResumeForm() {
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  // 保存時の変更点確認ダイアログの表示状態。
+  const [showSaveConfirm, setShowSaveConfirm] = useState(false);
   // PDF 原本ビュー（右カラム）の折りたたみ状態。折りたたむと入力フォームが全幅に広がる。
   const [pdfCollapsed, setPdfCollapsed] = useState(false);
   const assist = useResumeImportAssist();
@@ -69,6 +74,18 @@ export function CareerResumeForm() {
   /** 未保存マーク（🔴）の表示判定に使う dirty マップ */
   const dirty = useCareerDirty(form, baseline);
 
+  /**
+   * baseline（保存済み）と form（編集中）の変更点リスト。左右 diff モーダルのサイドバーと
+   * ハイライト突合に使う。baseline が未ロード（null）のときは form 同士を比較して変更なし扱い。
+   */
+  const changes = useMemo(
+    () => buildCareerChanges(form, baseline ?? form),
+    [form, baseline],
+  );
+
+  /** 左右 diff モーダル用の整形 HTML プレビュー（保存済み / 編集中）。開いている間だけ取得する。 */
+  const preview = useResumeDiffPreview(form, baseline, showSaveConfirm);
+
   const {
     downloading,
     previewUrl,
@@ -98,9 +115,20 @@ export function CareerResumeForm() {
     setForm((prev) => ({ ...prev, [key]: value }));
   };
 
-  const onSubmit = async (event: FormEvent) => {
+  const onSubmit = (event: FormEvent) => {
     event.preventDefault();
+    // 変更が無ければ確認を挟まずそのまま保存。変更があれば確認ダイアログを開く。
+    if (changes.length === 0) {
+      void save();
+      return;
+    }
+    setShowSaveConfirm(true);
+  };
+
+  /** 確認ダイアログで「この内容で保存」を押したときの確定処理。 */
+  const handleConfirmSave = async () => {
     await save();
+    setShowSaveConfirm(false);
   };
 
   const handleDelete = async () => {
@@ -119,6 +147,20 @@ export function CareerResumeForm() {
           confirming={deleting}
         />
       )}
+      {showSaveConfirm && (
+        <CareerDiffModal
+          changes={changes}
+          baselineHtml={preview.baselineHtml}
+          editedHtml={preview.editedHtml}
+          css={preview.css}
+          loading={preview.loading}
+          error={preview.error}
+          saving={saving}
+          onConfirm={handleConfirmSave}
+          onCancel={() => setShowSaveConfirm(false)}
+          onRollback={(change) => setForm((prev) => change.rollback(prev))}
+        />
+      )}
       {previewUrl && <PdfPreviewModal previewUrl={previewUrl} onClose={closePreview} />}
       <form onSubmit={onSubmit}>
         <div className={shared.pageHeader}>
diff --git a/frontend/src/constants/messages.ts b/frontend/src/constants/messages.ts
index 49be4fce..5077d864 100644
--- a/frontend/src/constants/messages.ts
+++ b/frontend/src/constants/messages.ts
@@ -143,6 +143,99 @@ export const LOADING_MESSAGES = {
   GITHUB_LINK: "GitHubプロフィールを取得中...",
 } as const;
 
+/**
+ * 経歴書 保存時の変更点確認ダイアログのラベル（セグメント名・フィールド名）。
+ * `utils/careerDiff.ts` が「職歴1 ＞ 取引先2 ＞ 案件名」のような人間可読パスを組み立てる際に参照する。
+ */
+export const CAREER_DIFF_LABELS = {
+  // トップレベル
+  FULL_NAME: "氏名",
+  CAREER_SUMMARY: "職務要約",
+  SELF_PR: "自己PR",
+  // 配列のセグメント名（末尾に連番が付く: 「職歴1」）
+  EXPERIENCE: "職歴",
+  CLIENT: "取引先",
+  PROJECT: "プロジェクト",
+  PERIOD: "期間",
+  TEAM_MEMBER: "メンバー",
+  TECH_STACK: "技術スタック",
+  PHASE: "フェーズ",
+  QUALIFICATION: "資格",
+  // 職歴フィールド
+  COMPANY: "会社名",
+  BUSINESS_DESCRIPTION: "事業内容",
+  START_DATE: "開始年月",
+  END_DATE: "終了年月",
+  IS_CURRENT: "在職中",
+  EMPLOYEE_COUNT: "従業員数",
+  CAPITAL: "資本金",
+  CAPITAL_UNIT: "資本金単位",
+  IS_IT_COMPANY: "IT企業",
+  DESCRIPTION: "詳細",
+  // 取引先フィールド
+  CLIENT_NAME: "取引先名",
+  HAS_CLIENT: "取引先あり",
+  IS_VACATION: "休暇",
+  VACATION_START_DATE: "休暇開始年月",
+  VACATION_END_DATE: "休暇終了年月",
+  VACATION_IS_CURRENT: "休暇継続中",
+  VACATION_DESCRIPTION: "休暇内容",
+  // プロジェクトフィールド
+  PROJECT_NAME: "案件名",
+  ROLE: "役割",
+  PROJECT_DESCRIPTION: "案件詳細",
+  TEAM_TOTAL: "体制人数",
+  // 体制メンバーフィールド
+  MEMBER_ROLE: "役割",
+  MEMBER_COUNT: "人数",
+  // 技術スタックフィールド
+  TECH_CATEGORY: "カテゴリ",
+  TECH_NAME: "技術名",
+  // 資格フィールド
+  QUALIFICATION_NAME: "資格名",
+  ACQUIRED_DATE: "取得日",
+} as const;
+
+/** 経歴書 保存時の変更点確認ダイアログ／左右 diff モーダルの固定文言・表示記号。 */
+export const DIFF_DIALOG_MESSAGES = {
+  TITLE: "変更内容の確認",
+  DESCRIPTION: "保存前に変更点を確認できます。「元に戻す」で項目ごとに編集前の値へ戻せます。",
+  CONFIRM: "この内容で保存",
+  CANCEL: "キャンセル",
+  ROLLBACK: "元に戻す",
+  NO_CHANGES: "変更はありません。",
+  /** 空文字の値を表示するときの代替テキスト */
+  EMPTY_VALUE: "（空）",
+  /** パスセグメントの区切り（「職歴1 ＞ 会社名」） */
+  PATH_SEPARATOR: " ＞ ",
+  /** 種別バッジの文言 */
+  ADDED_LABEL: "追加",
+  REMOVED_LABEL: "削除",
+  MODIFIED_LABEL: "修正",
+  /** boolean 値の表示 */
+  BOOL_TRUE: "あり",
+  BOOL_FALSE: "なし",
+  /** 左右 diff ペインの見出し */
+  PANE_BASELINE: "保存済み",
+  PANE_EDITED: "編集中",
+  /** プレビュー生成中・取得失敗・保存済みデータなしの文言 */
+  PREVIEW_LOADING: "プレビューを生成中...",
+  PREVIEW_FAILED: "プレビューの生成に失敗しました。",
+  BASELINE_EMPTY: "保存済みデータがありません。",
+  /** 変更点サイドバーの見出し */
+  CHANGES_HEADING: "変更点",
+} as const;
+
+/** 左右 diff で「変更なし領域」を畳んだときの展開ラベル（件数を埋め込む）。 */
+export function foldedSectionLabel(count: number): string {
+  return `変更なし ${count} 項目を表示`;
+}
+
+/** 左右 diff の編集中ペインで、削除された項目の跡に出すプレースホルダ文言。 */
+export function removedStubLabel(text: string): string {
+  return `（削除）${text}`;
+}
+
 /** ダウンロード失敗時のメッセージにファイル名を付与する。 */
 export function downloadFailureMessage(filename: string): string {
   return `${FALLBACK_MESSAGES.DOWNLOAD}: ${filename}`;
diff --git a/frontend/src/hooks/career/useResumeDiffPreview.test.ts b/frontend/src/hooks/career/useResumeDiffPreview.test.ts
new file mode 100644
index 00000000..758c5dc5
--- /dev/null
+++ b/frontend/src/hooks/career/useResumeDiffPreview.test.ts
@@ -0,0 +1,92 @@
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { VALIDATION_MESSAGES } from "../../constants/messages";
+import type { CareerFormState } from "../../payloadBuilders";
+import { useResumeDiffPreview } from "./useResumeDiffPreview";
+
+vi.mock("../../api/resumes", () => ({
+  getCareerResumePreview: vi.fn(),
+}));
+
+import { getCareerResumePreview } from "../../api/resumes";
+
+const mockPreview = getCareerResumePreview as unknown as ReturnType<typeof vi.fn>;
+
+const validForm: CareerFormState = {
+  full_name: "山田 太郎",
+  career_summary: "サマリー",
+  self_pr: "自己PR",
+  experiences: [],
+  qualifications: [],
+};
+
+const baseline: CareerFormState = { ...validForm, full_name: "佐藤 花子" };
+
+beforeEach(() => {
+  mockPreview.mockReset();
+  mockPreview.mockResolvedValue({ html: "<p>preview</p>", css: ".c{}" });
+  vi.useFakeTimers();
+});
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe("useResumeDiffPreview", () => {
+  it("成功: baseline と編集中の HTML を取得する", async () => {
+    const { result } = renderHook(() => useResumeDiffPreview(validForm, baseline, true));
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(350);
+    });
+    expect(result.current.baselineHtml).toBe("<p>preview</p>");
+    expect(result.current.editedHtml).toBe("<p>preview</p>");
+    expect(result.current.css).toBe(".c{}");
+    expect(result.current.error).toBeNull();
+  });
+
+  it("失敗: 取得が reject したらエラーメッセージを立てる", async () => {
+    mockPreview.mockRejectedValue(new Error("取得失敗"));
+    const { result } = renderHook(() => useResumeDiffPreview(validForm, baseline, true));
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(350);
+    });
+    expect(result.current.error).toBe("取得失敗");
+    expect(result.current.editedHtml).toBeNull();
+  });
+
+  it("入力不正: payload 化できない form はエラーを立て API を呼ばない", async () => {
+    const invalidForm: CareerFormState = { ...validForm, full_name: "" };
+    const { result } = renderHook(() => useResumeDiffPreview(invalidForm, baseline, true));
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(350);
+    });
+    expect(result.current.error).toBe(VALIDATION_MESSAGES.FULL_NAME_REQUIRED);
+    expect(result.current.editedHtml).toBeNull();
+    // baseline 側だけ呼ばれ、編集中側（不正）は呼ばれない
+    expect(mockPreview).toHaveBeenCalledTimes(1);
+  });
+
+  it("baseline=null のときは baselineHtml を null にする（古い左ペインを出さない）", async () => {
+    const { result, rerender } = renderHook(
+      ({ b }: { b: CareerFormState | null }) => useResumeDiffPreview(validForm, b, true),
+      { initialProps: { b: baseline as CareerFormState | null } },
+    );
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(350);
+    });
+    expect(result.current.baselineHtml).toBe("<p>preview</p>");
+
+    // baseline が無くなったら（未保存化）キャッシュ済みでも null に倒す
+    rerender({ b: null });
+    expect(result.current.baselineHtml).toBeNull();
+  });
+
+  it("無効化中(enabled=false)は何もしない", async () => {
+    renderHook(() => useResumeDiffPreview(validForm, baseline, false));
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(350);
+    });
+    expect(mockPreview).not.toHaveBeenCalled();
+  });
+});
diff --git a/frontend/src/hooks/career/useResumeDiffPreview.ts b/frontend/src/hooks/career/useResumeDiffPreview.ts
new file mode 100644
index 00000000..997a4678
--- /dev/null
+++ b/frontend/src/hooks/career/useResumeDiffPreview.ts
@@ -0,0 +1,121 @@
+import { useEffect, useMemo, useState } from "react";
+
+import { getCareerResumePreview, type ResumePreviewResponse } from "../../api/resumes";
+import type { ResumeCreate } from "../../api/types";
+import { FALLBACK_MESSAGES } from "../../constants/messages";
+import { buildCareerPayload, type CareerFormState } from "../../payloadBuilders";
+
+/** 左右 diff プレビューの取得状態。 */
+export type ResumeDiffPreview = {
+  /** 左ペイン（保存済み）の整形 HTML。未保存・取得不可なら null。 */
+  baselineHtml: string | null;
+  /** 右ペイン（編集中）の整形 HTML。取得前・エラー時は null。 */
+  editedHtml: string | null;
+  /** iframe に流し込む画面用 CSS（baseline / edited で共通）。 */
+  css: string;
+  /** 編集中プレビューの取得中フラグ。 */
+  loading: boolean;
+  /** 取得失敗・入力不正のメッセージ。 */
+  error: string | null;
+};
+
+/**
+ * 編集中プレビュー再取得の遅延。diff モーダル表示中に form が変わるのはロールバック操作のみで、
+ * 連続入力は発生しないため即時反映（0ms）にする。setTimeout 自体は effect 本体での同期 setState を
+ * 避ける（react-hooks/set-state-in-effect 回避）目的で残す。
+ */
+const EDITED_DEBOUNCE_MS = 0;
+
+/** form/baseline を payload 化する（render 中に評価し、effect 内の同期 setState を避ける）。 */
+function toPayload(state: CareerFormState | null): { payload?: ResumeCreate; error?: string } {
+  if (!state) return {};
+  try {
+    return { payload: buildCareerPayload(state) };
+  } catch (e) {
+    return { error: e instanceof Error ? e.message : FALLBACK_MESSAGES.PREVIEW };
+  }
+}
+
+/**
+ * baseline（保存済み）と form（編集中）を backend のプレビュー API で整形 HTML 化するフック。
+ *
+ * - baseline はモーダルを開いている間不変なので、開いた時に 1 回だけ取得する。
+ * - form はロールバックで変わるため、その都度（即時に）再取得して右ペインへ反映する。
+ * - payload 化できない（未保存の空 baseline・入力不正）場合はクラッシュせず安全側に倒す
+ *   （baseline=null 表示 / form=エラーメッセージ）。payload 化は render 中（useMemo）で評価する。
+ */
+export function useResumeDiffPreview(
+  form: CareerFormState,
+  baseline: CareerFormState | null,
+  enabled: boolean,
+): ResumeDiffPreview {
+  const [baselinePreview, setBaselinePreview] = useState<ResumePreviewResponse | null>(null);
+  const [editedPreview, setEditedPreview] = useState<ResumePreviewResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [fetchError, setFetchError] = useState<string | null>(null);
+
+  // payload 化を render 中に評価（不正入力はここで検出し、effect では同期 setState しない）。
+  const baselinePayload = useMemo(() => toPayload(baseline).payload ?? null, [baseline]);
+  const edited = useMemo(() => toPayload(form), [form]);
+
+  // baseline プレビュー: モーダルを開いた時（enabled / baseline 変化時）に 1 回取得。
+  useEffect(() => {
+    if (!enabled || !baselinePayload) return;
+    let active = true;
+    getCareerResumePreview(baselinePayload)
+      .then((res) => {
+        if (active) setBaselinePreview(res);
+      })
+      .catch(() => {
+        if (active) setBaselinePreview(null);
+      });
+    return () => {
+      active = false;
+    };
+  }, [enabled, baselinePayload]);
+
+  // 編集中プレビュー: enabled の間、form 変化のたびに即時取得（ロールバックを右ペインへ反映）。
+  useEffect(() => {
+    if (!enabled || !edited.payload) return;
+    const payload = edited.payload;
+    let active = true;
+    const handle = setTimeout(() => {
+      setLoading(true);
+      setFetchError(null);
+      getCareerResumePreview(payload)
+        .then((res) => {
+          if (active) setEditedPreview(res);
+        })
+        .catch((err) => {
+          if (active) {
+            setFetchError(err instanceof Error ? err.message : FALLBACK_MESSAGES.PREVIEW);
+          }
+        })
+        .finally(() => {
+          if (active) setLoading(false);
+        });
+    }, EDITED_DEBOUNCE_MS);
+    return () => {
+      active = false;
+      clearTimeout(handle);
+      // クリーンアップ（モーダルを閉じる / form 変化で再取得）時は loading を確定的に下ろす。
+      // active ガードにより finally の setLoading(false) がスキップされても残留しないようにする。
+      setLoading(false);
+    };
+  }, [enabled, edited]);
+
+  // 入力不正は editedHtml を null にしてエラーを優先表示する。
+  const editedHtml = edited.error ? null : (editedPreview?.html ?? null);
+
+  // baseline はキャッシュ（baselinePreview）由来なので、現在の入力で baseline が無効化
+  // （未保存で baseline=null / プレビュー無効）された場合は古い左ペインを出さないよう null に倒す。
+  const baselineHtml = enabled && baselinePayload ? (baselinePreview?.html ?? null) : null;
+
+  return {
+    baselineHtml,
+    editedHtml,
+    css: editedPreview?.css ?? baselinePreview?.css ?? "",
+    loading,
+    error: edited.error ?? fetchError,
+  };
+}
diff --git a/frontend/src/utils/careerDiff.test.ts b/frontend/src/utils/careerDiff.test.ts
new file mode 100644
index 00000000..516f6283
--- /dev/null
+++ b/frontend/src/utils/careerDiff.test.ts
@@ -0,0 +1,140 @@
+import { describe, it, expect } from "vitest";
+
+import {
+  blankCareerClient,
+  blankCareerExperience,
+  blankCareerProject,
+  blankCareerTechnologyStack,
+  blankResumeQualification,
+} from "../constants";
+import type { CareerFormState } from "../payloadBuilders";
+import { buildCareerChanges } from "./careerDiff";
+
+/** ネストを含めて完全にコピーした form を作る（テスト間で参照を共有しないため）。 */
+function buildForm(): CareerFormState {
+  return structuredClone({
+    full_name: "山田 太郎",
+    career_summary: "サマリー",
+    self_pr: "自己PR",
+    experiences: [
+      {
+        ...blankCareerExperience,
+        company: "株式会社A",
+        business_description: "受託開発",
+        start_date: "2020-04",
+        clients: [
+          {
+            ...blankCareerClient,
+            projects: [
+              {
+                ...blankCareerProject,
+                name: "プロジェクトX",
+                role: "SE",
+                technology_stacks: [{ ...blankCareerTechnologyStack, name: "TypeScript" }],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+    qualifications: [
+      { ...blankResumeQualification, name: "基本情報", acquired_date: "2021-04-01" },
+    ],
+  });
+}
+
+describe("buildCareerChanges", () => {
+  it("変更が無ければ空配列を返す", () => {
+    const form = buildForm();
+    expect(buildCareerChanges(form, buildForm())).toEqual([]);
+  });
+
+  it("トップレベル文字列の修正を modified として検出する", () => {
+    const baseline = buildForm();
+    const form = buildForm();
+    form.full_name = "佐藤 花子";
+
+    const changes = buildCareerChanges(form, baseline);
+    expect(changes).toHaveLength(1);
+    expect(changes[0]).toMatchObject({
+      kind: "modified",
+      oldValue: "山田 太郎",
+      newValue: "佐藤 花子",
+    });
+    expect(changes[0].label).toBe("氏名");
+  });
+
+  it("職歴の追加を added として検出する", () => {
+    const baseline = buildForm();
+    const form = buildForm();
+    form.experiences.push({ ...structuredClone(blankCareerExperience), company: "株式会社B" });
+
+    const changes = buildCareerChanges(form, baseline);
+    const added = changes.find((c) => c.kind === "added");
+    expect(added).toBeDefined();
+    expect(added?.label).toBe("職歴2");
+    expect(added?.newValue).toBe("株式会社B");
+  });
+
+  it("職歴の削除を removed として検出し、ロールバックで復元できる", () => {
+    const baseline = buildForm();
+    baseline.experiences.push({ ...structuredClone(blankCareerExperience), company: "株式会社B" });
+    const form = buildForm(); // 1 社だけ
+
+    const changes = buildCareerChanges(form, baseline);
+    const removed = changes.find((c) => c.kind === "removed");
+    expect(removed).toBeDefined();
+    expect(removed?.label).toBe("職歴2");
+    expect(removed?.oldValue).toBe("株式会社B");
+
+    const restored = removed!.rollback(form);
+    expect(restored.experiences).toHaveLength(2);
+    expect(restored.experiences[1].company).toBe("株式会社B");
+  });
+
+  it("ネストした技術スタックの変更を検出する", () => {
+    const baseline = buildForm();
+    const form = buildForm();
+    form.experiences[0].clients[0].projects[0].technology_stacks[0].name = "Rust";
+
+    const changes = buildCareerChanges(form, baseline);
+    const techChange = changes.find((c) => c.newValue === "Rust");
+    expect(techChange).toBeDefined();
+    expect(techChange?.kind).toBe("modified");
+    expect(techChange?.oldValue).toBe("TypeScript");
+    expect(techChange?.label).toContain("技術名");
+  });
+
+  it("項目別ロールバックは当該フィールドのみ baseline に戻し、他の変更は保持する", () => {
+    const baseline = buildForm();
+    const form = buildForm();
+    form.full_name = "佐藤 花子";
+    form.career_summary = "新サマリー";
+
+    const changes = buildCareerChanges(form, baseline);
+    expect(changes).toHaveLength(2);
+
+    // 氏名だけロールバック
+    const nameChange = changes.find((c) => c.label === "氏名")!;
+    const rolledBack = nameChange.rollback(form);
+
+    expect(rolledBack.full_name).toBe("山田 太郎"); // baseline に戻る
+    expect(rolledBack.career_summary).toBe("新サマリー"); // 他の変更は残る
+
+    // 再計算すると氏名の行は消え、職務要約だけ残る
+    const remaining = buildCareerChanges(rolledBack, baseline);
+    expect(remaining).toHaveLength(1);
+    expect(remaining[0].label).toBe("職務要約");
+  });
+
+  it("boolean フィールドは「あり / なし」で表示する", () => {
+    const baseline = buildForm();
+    const form = buildForm();
+    form.experiences[0].is_current = !form.experiences[0].is_current;
+
+    const changes = buildCareerChanges(form, baseline);
+    const boolChange = changes.find((c) => c.label.includes("在職中"));
+    expect(boolChange).toBeDefined();
+    expect([boolChange?.oldValue, boolChange?.newValue].sort()).toEqual(["あり", "なし"]);
+  });
+});
diff --git a/frontend/src/utils/careerDiff.ts b/frontend/src/utils/careerDiff.ts
new file mode 100644
index 00000000..8a32b407
--- /dev/null
+++ b/frontend/src/utils/careerDiff.ts
@@ -0,0 +1,297 @@
+/**
+ * 経歴書フォームの「保存済み（baseline）」と「編集中（form）」の差分を、
+ * 変更点リスト（旧→新／追加・削除・修正＋項目別ロールバック）として算出する純関数群。
+ *
+ * 保存時の確認ダイアログ（`CareerSaveConfirmDialog`）が表示するモデルを生成する。
+ *
+ * ## 突合方針（index ベース）
+ * `CareerFormState` の配列要素には安定 ID が無いため、`useCareerDirty` と同じく
+ * **index による突合**で「追加 / 削除」を判定する。長さ差分の末尾を追加/削除とみなすため、
+ * 配列途中の要素削除は「以降の要素がすべて修正＋末尾が削除」と近似表示される。
+ * これは安定 ID が無い以上の制約であり、既存 dirty 判定と挙動を一致させている。
+ * 突合戦略を差し替えたい場合は `diffArray` のマッチングだけ変更すればよい。
+ *
+ * 等価判定は `isDeepEqual`（`utils/deepEqual.ts`）に集約済みのものを再利用する。
+ */
+import { CAREER_DIFF_LABELS as L, DIFF_DIALOG_MESSAGES as D } from "../constants/messages";
+import type {
+  CareerClientForm,
+  CareerExperienceForm,
+  CareerFormState,
+  CareerProjectForm,
+  CareerProjectPeriodForm,
+  TeamMemberForm,
+} from "../payloadBuilders";
+import type { ResumeQualificationItem, TechnologyStackItem } from "../api/types";
+import { isDeepEqual } from "./deepEqual";
+import { insertAtPath, removeAtPath, setAtPath } from "./setAtPath";
+
+/** 変更の種別。 */
+export type ChangeKind = "modified" | "added" | "removed";
+
+/** 1 件の変更点。ダイアログ表示とロールバックの両方に必要な情報を持つ。 */
+export type CareerChange = {
+  /** form 上の対象パス（ロールバック適用・key 生成に使う）。 */
+  path: (string | number)[];
+  /** 人間可読ラベル（例: 「職歴1 ＞ 取引先2 ＞ 案件名」）。 */
+  label: string;
+  kind: ChangeKind;
+  /** 表示用の旧値（modified / removed で意味を持つ）。 */
+  oldValue: string;
+  /** 表示用の新値（modified / added で意味を持つ）。 */
+  newValue: string;
+  /** この変更だけを baseline 値へ戻した form を返す純関数。 */
+  rollback: (form: CareerFormState) => CareerFormState;
+};
+
+/** 表示用に値を文字列へ整形する。boolean は「あり / なし」、空値は代替テキスト。 */
+function formatScalar(value: unknown): string {
+  if (typeof value === "boolean") return value ? D.BOOL_TRUE : D.BOOL_FALSE;
+  if (value === "" || value === null || value === undefined) return D.EMPTY_VALUE;
+  return String(value);
+}
+
+/** ラベルセグメントを区切り文字で連結する。 */
+function joinLabel(segments: string[]): string {
+  return segments.join(D.PATH_SEPARATOR);
+}
+
+/**
+ * スカラーフィールドの差分を 1 件 push する。等しければ何もしない。
+ * rollback は当該パスを base 値へ書き戻す。
+ */
+function pushScalar(
+  changes: CareerChange[],
+  labelSegments: string[],
+  fieldLabel: string,
+  path: (string | number)[],
+  current: unknown,
+  base: unknown,
+): void {
+  if (isDeepEqual(current, base)) return;
+  changes.push({
+    path,
+    label: joinLabel([...labelSegments, fieldLabel]),
+    kind: "modified",
+    oldValue: formatScalar(base),
+    newValue: formatScalar(current),
+    rollback: (form) => setAtPath(form, path, base),
+  });
+}
+
+/**
+ * 配列の差分を index 突合で算出する汎用ヘルパ。
+ * - 片側にしか無い要素 → 追加 / 削除として 1 件 push（ロールバックは要素の除去 / 復元）
+ * - 両側にある要素 → `diffItem` に委譲（中身のフィールド差分を再帰展開）
+ */
+function diffArray<T>(
+  changes: CareerChange[],
+  current: T[],
+  base: T[],
+  path: (string | number)[],
+  labelSegments: string[],
+  itemLabel: string,
+  summarize: (item: T) => string,
+  diffItem: (
+    changes: CareerChange[],
+    cur: T,
+    bas: T,
+    itemPath: (string | number)[],
+    itemLabelSegments: string[],
+  ) => void,
+): void {
+  const maxLen = Math.max(current.length, base.length);
+  for (let i = 0; i < maxLen; i++) {
+    const cur = current[i];
+    const bas = base[i];
+    const itemPath = [...path, i];
+    const itemLabelSegments = [...labelSegments, `${itemLabel}${i + 1}`];
+
+    if (cur !== undefined && bas === undefined) {
+      changes.push({
+        path: itemPath,
+        label: joinLabel(itemLabelSegments),
+        kind: "added",
+        oldValue: "",
+        newValue: summarize(cur) || D.EMPTY_VALUE,
+        rollback: (form) => removeAtPath(form, itemPath),
+      });
+    } else if (cur === undefined && bas !== undefined) {
+      changes.push({
+        path: itemPath,
+        label: joinLabel(itemLabelSegments),
+        kind: "removed",
+        oldValue: summarize(bas) || D.EMPTY_VALUE,
+        newValue: "",
+        rollback: (form) => insertAtPath(form, itemPath, bas),
+      });
+    } else if (cur !== undefined && bas !== undefined) {
+      diffItem(changes, cur, bas, itemPath, itemLabelSegments);
+    }
+  }
+}
+
+function diffTeamMember(
+  changes: CareerChange[],
+  cur: TeamMemberForm,
+  bas: TeamMemberForm,
+  path: (string | number)[],
+  seg: string[],
+): void {
+  pushScalar(changes, seg, L.MEMBER_ROLE, [...path, "role"], cur.role, bas.role);
+  pushScalar(changes, seg, L.MEMBER_COUNT, [...path, "count"], cur.count, bas.count);
+}
+
+function diffPeriod(
+  changes: CareerChange[],
+  cur: CareerProjectPeriodForm,
+  bas: CareerProjectPeriodForm,
+  path: (string | number)[],
+  seg: string[],
+): void {
+  pushScalar(changes, seg, L.START_DATE, [...path, "start_date"], cur.start_date, bas.start_date);
+  pushScalar(changes, seg, L.END_DATE, [...path, "end_date"], cur.end_date, bas.end_date);
+  pushScalar(changes, seg, L.IS_CURRENT, [...path, "is_current"], cur.is_current, bas.is_current);
+}
+
+function diffTechStack(
+  changes: CareerChange[],
+  cur: TechnologyStackItem,
+  bas: TechnologyStackItem,
+  path: (string | number)[],
+  seg: string[],
+): void {
+  pushScalar(changes, seg, L.TECH_CATEGORY, [...path, "category"], cur.category, bas.category);
+  pushScalar(changes, seg, L.TECH_NAME, [...path, "name"], cur.name, bas.name);
+}
+
+/** phases は string[]。セグメント名（「フェーズN」）自体がラベルになるので直接 push する。 */
+function diffPhase(
+  changes: CareerChange[],
+  cur: string,
+  bas: string,
+  path: (string | number)[],
+  seg: string[],
+): void {
+  if (isDeepEqual(cur, bas)) return;
+  changes.push({
+    path,
+    label: joinLabel(seg),
+    kind: "modified",
+    oldValue: formatScalar(bas),
+    newValue: formatScalar(cur),
+    rollback: (form) => setAtPath(form, path, bas),
+  });
+}
+
+function diffProject(
+  changes: CareerChange[],
+  cur: CareerProjectForm,
+  bas: CareerProjectForm,
+  path: (string | number)[],
+  seg: string[],
+): void {
+  pushScalar(changes, seg, L.PROJECT_NAME, [...path, "name"], cur.name, bas.name);
+  pushScalar(changes, seg, L.ROLE, [...path, "role"], cur.role, bas.role);
+  pushScalar(changes, seg, L.PROJECT_DESCRIPTION, [...path, "description"], cur.description, bas.description);
+  pushScalar(changes, seg, L.TEAM_TOTAL, [...path, "team", "total"], cur.team.total, bas.team.total);
+
+  diffArray(
+    changes, cur.team.members, bas.team.members, [...path, "team", "members"], seg,
+    L.TEAM_MEMBER, (m) => m.role, diffTeamMember,
+  );
+  diffArray(
+    changes, cur.periods, bas.periods, [...path, "periods"], seg,
+    L.PERIOD, (p) => p.start_date, diffPeriod,
+  );
+  diffArray(
+    changes, cur.technology_stacks, bas.technology_stacks, [...path, "technology_stacks"], seg,
+    L.TECH_STACK, (t) => t.name, diffTechStack,
+  );
+  diffArray(
+    changes, cur.phases, bas.phases, [...path, "phases"], seg,
+    L.PHASE, (p) => p, diffPhase,
+  );
+}
+
+function diffClient(
+  changes: CareerChange[],
+  cur: CareerClientForm,
+  bas: CareerClientForm,
+  path: (string | number)[],
+  seg: string[],
+): void {
+  pushScalar(changes, seg, L.CLIENT_NAME, [...path, "name"], cur.name, bas.name);
+  pushScalar(changes, seg, L.HAS_CLIENT, [...path, "has_client"], cur.has_client, bas.has_client);
+  pushScalar(changes, seg, L.IS_VACATION, [...path, "is_vacation"], cur.is_vacation, bas.is_vacation);
+  pushScalar(changes, seg, L.VACATION_START_DATE, [...path, "vacation_start_date"], cur.vacation_start_date, bas.vacation_start_date);
+  pushScalar(changes, seg, L.VACATION_END_DATE, [...path, "vacation_end_date"], cur.vacation_end_date, bas.vacation_end_date);
+  pushScalar(changes, seg, L.VACATION_IS_CURRENT, [...path, "vacation_is_current"], cur.vacation_is_current, bas.vacation_is_current);
+  pushScalar(changes, seg, L.VACATION_DESCRIPTION, [...path, "vacation_description"], cur.vacation_description, bas.vacation_description);
+
+  diffArray(
+    changes, cur.projects, bas.projects, [...path, "projects"], seg,
+    L.PROJECT, (p) => p.name, diffProject,
+  );
+}
+
+function diffExperience(
+  changes: CareerChange[],
+  cur: CareerExperienceForm,
+  bas: CareerExperienceForm,
+  path: (string | number)[],
+  seg: string[],
+): void {
+  pushScalar(changes, seg, L.COMPANY, [...path, "company"], cur.company, bas.company);
+  pushScalar(changes, seg, L.BUSINESS_DESCRIPTION, [...path, "business_description"], cur.business_description, bas.business_description);
+  pushScalar(changes, seg, L.START_DATE, [...path, "start_date"], cur.start_date, bas.start_date);
+  pushScalar(changes, seg, L.END_DATE, [...path, "end_date"], cur.end_date, bas.end_date);
+  pushScalar(changes, seg, L.IS_CURRENT, [...path, "is_current"], cur.is_current, bas.is_current);
+  pushScalar(changes, seg, L.EMPLOYEE_COUNT, [...path, "employee_count"], cur.employee_count, bas.employee_count);
+  pushScalar(changes, seg, L.CAPITAL, [...path, "capital"], cur.capital, bas.capital);
+  pushScalar(changes, seg, L.CAPITAL_UNIT, [...path, "capital_unit"], cur.capital_unit, bas.capital_unit);
+  pushScalar(changes, seg, L.IS_IT_COMPANY, [...path, "is_it_company"], cur.is_it_company, bas.is_it_company);
+  pushScalar(changes, seg, L.DESCRIPTION, [...path, "description"], cur.description, bas.description);
+
+  diffArray(
+    changes, cur.clients, bas.clients, [...path, "clients"], seg,
+    L.CLIENT, (c) => c.name, diffClient,
+  );
+}
+
+function diffQualification(
+  changes: CareerChange[],
+  cur: ResumeQualificationItem,
+  bas: ResumeQualificationItem,
+  path: (string | number)[],
+  seg: string[],
+): void {
+  pushScalar(changes, seg, L.QUALIFICATION_NAME, [...path, "name"], cur.name, bas.name);
+  pushScalar(changes, seg, L.ACQUIRED_DATE, [...path, "acquired_date"], cur.acquired_date, bas.acquired_date);
+}
+
+/**
+ * 編集中フォーム（form）と保存済みスナップショット（baseline）の差分を変更点リストにする。
+ * 変更が無ければ空配列を返す。
+ */
+export function buildCareerChanges(
+  form: CareerFormState,
+  baseline: CareerFormState,
+): CareerChange[] {
+  const changes: CareerChange[] = [];
+
+  pushScalar(changes, [], L.FULL_NAME, ["full_name"], form.full_name, baseline.full_name);
+  pushScalar(changes, [], L.CAREER_SUMMARY, ["career_summary"], form.career_summary, baseline.career_summary);
+  pushScalar(changes, [], L.SELF_PR, ["self_pr"], form.self_pr, baseline.self_pr);
+
+  diffArray(
+    changes, form.experiences, baseline.experiences, ["experiences"], [],
+    L.EXPERIENCE, (e) => e.company, diffExperience,
+  );
+  diffArray(
+    changes, form.qualifications, baseline.qualifications, ["qualifications"], [],
+    L.QUALIFICATION, (q) => q.name, diffQualification,
+  );
+
+  return changes;
+}
diff --git a/frontend/src/utils/diffHighlight.test.ts b/frontend/src/utils/diffHighlight.test.ts
new file mode 100644
index 00000000..b0051a00
--- /dev/null
+++ b/frontend/src/utils/diffHighlight.test.ts
@@ -0,0 +1,198 @@
+import { describe, it, expect } from "vitest";
+
+import type { CareerChange } from "./careerDiff";
+import { annotateHtml, buildPathKindMap, foldUnchanged, injectRemovedPlaceholders } from "./diffHighlight";
+
+/** テスト用の最小 CareerChange を作る（rollback は使わないのでダミー）。 */
+function change(
+  path: (string | number)[],
+  kind: CareerChange["kind"],
+  oldValue = "",
+): CareerChange {
+  return {
+    path,
+    label: path.join(" > "),
+    kind,
+    oldValue,
+    newValue: "",
+    rollback: (form) => form,
+  };
+}
+
+describe("buildPathKindMap", () => {
+  it("path を '.' 連結したキーで種別を引ける", () => {
+    const map = buildPathKindMap([
+      change(["full_name"], "modified"),
+      change(["experiences", 0, "company"], "modified"),
+    ]);
+    expect(map.get("full_name")).toBe("modified");
+    expect(map.get("experiences.0.company")).toBe("modified");
+  });
+});
+
+describe("annotateHtml", () => {
+  it("スカラー修正は該当 data-fp ノードに diff-modified を付ける", () => {
+    const html = '<div data-fp="full_name">山田</div><div data-fp="self_pr">PR</div>';
+    const map = buildPathKindMap([change(["full_name"], "modified")]);
+    const out = annotateHtml(html, map);
+    expect(out).toContain("diff-modified");
+    // 変更のない self_pr には付かない
+    const doc = new DOMParser().parseFromString(out, "text/html");
+    expect(doc.querySelector('[data-fp="self_pr"]')?.className).toBe("");
+  });
+
+  it("コンテナノードは配下の子変更で着色される（子孫マッチ）", () => {
+    const html =
+      '<table><tbody><tr>' +
+      '<td data-fp="experiences.0.clients.0.projects.0.technology_stacks">env</td>' +
+      '</tr></tbody></table>';
+    const map = buildPathKindMap([
+      change(["experiences", 0, "clients", 0, "projects", 0, "technology_stacks", 1, "name"], "modified"),
+    ]);
+    const out = annotateHtml(html, map);
+    expect(out).toContain("diff-modified");
+  });
+
+  it("追加要素の内側ノードは added で着色される（祖先マッチ）", () => {
+    const html = '<span data-fp="experiences.2.company">新会社</span>';
+    const map = buildPathKindMap([change(["experiences", 2], "added")]);
+    const out = annotateHtml(html, map);
+    expect(out).toContain("diff-added");
+  });
+
+  it("追加/削除は配下の修正より優先される", () => {
+    const html = '<span data-fp="experiences.2.company">X</span>';
+    const map = buildPathKindMap([
+      change(["experiences", 2], "added"),
+      change(["experiences", 2, "company"], "modified"),
+    ]);
+    const out = annotateHtml(html, map);
+    expect(out).toContain("diff-added");
+    expect(out).not.toContain("diff-modified");
+  });
+
+  it("変更が無ければ着色せず sanitize のみ（script 除去）", () => {
+    const html = '<div data-fp="full_name">x</div><script>alert(1)</script>';
+    const out = annotateHtml(html, buildPathKindMap([]));
+    expect(out).not.toContain("diff-mark");
+    expect(out).not.toContain("<script>");
+  });
+});
+
+describe("foldUnchanged", () => {
+  it("変更のない項目は <details> に畳まれ、変更のある項目は残る", () => {
+    const html =
+      '<div data-unit="experiences.0"><span data-fp="experiences.0.company">A</span></div>' +
+      '<div data-unit="experiences.1"><span data-fp="experiences.1.company">B</span></div>';
+    const map = buildPathKindMap([change(["experiences", 0, "company"], "modified")]);
+    const out = foldUnchanged(html, map);
+    expect(out).toContain("<details");
+    expect(out).toContain("fold-summary");
+    // 変更ありの experiences.0 は畳まれず残る
+    expect(out).toContain('data-unit="experiences.0"');
+    // 変更なしの experiences.1 は details の中に入る
+    expect(out).toContain('data-unit="experiences.1"');
+  });
+
+  it("変更ありの親は残し、配下の変更なし項目だけ畳む", () => {
+    const html =
+      '<div data-unit="experiences.0"><div class="company-body">' +
+      '<div data-unit="experiences.0.clients.0.projects.0">P0</div>' +
+      '<div data-unit="experiences.0.clients.0.projects.1">P1</div>' +
+      "</div></div>";
+    const map = buildPathKindMap([
+      change(["experiences", 0, "clients", 0, "projects", 0, "role"], "modified"),
+    ]);
+    const out = foldUnchanged(html, map);
+    const doc = new DOMParser().parseFromString(out, "text/html");
+    // 親（experiences.0）と変更ありの projects.0 は details の外
+    expect(doc.querySelector('details [data-unit="experiences.0"]')).toBeNull();
+    expect(doc.querySelector('details [data-unit="experiences.0.clients.0.projects.0"]')).toBeNull();
+    // 変更なしの projects.1 は details の中
+    expect(
+      doc.querySelector('details [data-unit="experiences.0.clients.0.projects.1"]'),
+    ).not.toBeNull();
+  });
+
+  it("変更なしの親は配下ごと丸ごと畳む（入れ子では畳まない）", () => {
+    const html =
+      '<div data-unit="experiences.0"><div class="company-body">' +
+      '<div data-unit="experiences.0.clients.0.projects.0">P0</div>' +
+      "</div></div>";
+    const map = buildPathKindMap([change(["qualifications", 0, "name"], "modified")]);
+    const out = foldUnchanged(html, map);
+    const doc = new DOMParser().parseFromString(out, "text/html");
+    const detailsList = doc.querySelectorAll("details");
+    // experiences.0 が 1 つの details に丸ごと入り、内側の project は別 details にならない
+    expect(detailsList).toHaveLength(1);
+    expect(doc.querySelector('details [data-unit="experiences.0"]')).not.toBeNull();
+  });
+
+  it("連続する変更なし項目は 1 つの details にまとめ、件数を表示する", () => {
+    const html =
+      '<div data-unit="qualifications.0">a</div>' +
+      '<div data-unit="qualifications.1">b</div>' +
+      '<div data-unit="qualifications.2">c</div>';
+    const map = buildPathKindMap([change(["full_name"], "modified")]);
+    const out = foldUnchanged(html, map);
+    const doc = new DOMParser().parseFromString(out, "text/html");
+    expect(doc.querySelectorAll("details")).toHaveLength(1);
+    expect(doc.querySelector(".fold-summary")?.textContent).toContain("3");
+  });
+
+  it("変更が無ければ（map 空）何もしない", () => {
+    const html = '<div data-unit="experiences.0">a</div>';
+    expect(foldUnchanged(html, buildPathKindMap([]))).toBe(html);
+  });
+});
+
+describe("injectRemovedPlaceholders", () => {
+  it("削除項目の直前の兄弟の後ろにスタブを挿入する", () => {
+    const html = '<div data-unit="experiences.0">A社</div>';
+    const out = injectRemovedPlaceholders(html, [change(["experiences", 1], "removed", "B社")]);
+    const doc = new DOMParser().parseFromString(out, "text/html");
+    const stub = doc.querySelector(".diff-removed-stub");
+    expect(stub).not.toBeNull();
+    expect(stub?.textContent).toContain("B社");
+    expect(stub?.textContent).toContain("削除");
+    // experiences.0 の直後に入る
+    const prev = doc.querySelector('[data-unit="experiences.0"]');
+    expect(prev?.nextElementSibling).toBe(stub);
+  });
+
+  it("テーブル行（tr）の削除は tr スタブで挿入する", () => {
+    const html =
+      '<table><tbody><tr data-unit="qualifications.0"><td>応用情報</td><td>2021</td></tr></tbody></table>';
+    const out = injectRemovedPlaceholders(html, [
+      change(["qualifications", 1], "removed", "AWS SAA"),
+    ]);
+    const doc = new DOMParser().parseFromString(out, "text/html");
+    const stub = doc.querySelector("tr.diff-removed-stub");
+    expect(stub).not.toBeNull();
+    expect(stub?.querySelector("td")?.textContent).toContain("AWS SAA");
+  });
+
+  it("先頭削除(index=0)は後続の兄弟の直前にスタブを挿入する", () => {
+    // index 0 が削除され、編集中 HTML には後続だった項目が残っている
+    const html = '<div data-unit="experiences.0">B社</div>';
+    const out = injectRemovedPlaceholders(html, [change(["experiences", 0], "removed", "A社")]);
+    const doc = new DOMParser().parseFromString(out, "text/html");
+    const stub = doc.querySelector(".diff-removed-stub");
+    expect(stub).not.toBeNull();
+    expect(stub?.textContent).toContain("A社");
+    // 後続兄弟の直前（= 先頭）に入る
+    const next = doc.querySelector('[data-unit="experiences.0"]');
+    expect(next?.previousElementSibling).toBe(stub);
+  });
+
+  it("削除が無ければ何もしない", () => {
+    const html = '<div data-unit="experiences.0">A</div>';
+    expect(injectRemovedPlaceholders(html, [change(["full_name"], "modified")])).toBe(html);
+  });
+
+  it("アンカーが取れない（data-unit 不在）場合はスキップする", () => {
+    const html = "<div>no units here</div>";
+    const out = injectRemovedPlaceholders(html, [change(["experiences", 0], "removed", "X")]);
+    expect(out).not.toContain("diff-removed-stub");
+  });
+});
diff --git a/frontend/src/utils/diffHighlight.ts b/frontend/src/utils/diffHighlight.ts
new file mode 100644
index 00000000..2723413e
--- /dev/null
+++ b/frontend/src/utils/diffHighlight.ts
@@ -0,0 +1,238 @@
+import DOMPurify from "dompurify";
+
+import { foldedSectionLabel, removedStubLabel } from "../constants/messages";
+import type { CareerChange, ChangeKind } from "./careerDiff";
+
+/** 種別 → 着色用 CSS クラス。 */
+const KIND_CLASS: Record<ChangeKind, string> = {
+  added: "diff-added",
+  removed: "diff-removed",
+  modified: "diff-modified",
+};
+
+/** 着色の優先度（左ほど優先）。追加/削除（要素まるごと）は配下の修正色より優先する。 */
+const KIND_PRIORITY: ChangeKind[] = ["added", "removed", "modified"];
+
+/**
+ * 変更点リストを「form パス文字列 → 種別」の Map にする。
+ * パス文字列は `change.path.join(".")`（= backend の data-fp と同じ規則）。
+ */
+export function buildPathKindMap(changes: CareerChange[]): Map<string, ChangeKind> {
+  const map = new Map<string, ChangeKind>();
+  for (const c of changes) {
+    map.set(c.path.join("."), c.kind);
+  }
+  return map;
+}
+
+/**
+ * data-fp ノードのパス（nodePath）と変更パス（changePath）の対応を判定し、最優先の種別を返す。
+ *
+ * 対応関係は双方向:
+ * - `changePath === nodePath`: スカラー値そのものが修正された
+ * - `changePath` が `nodePath` の子孫: コンテナノード（配列やブロック）配下で子が変わった
+ * - `nodePath` が `changePath` の子孫: 追加/削除された要素の内側ノード（要素種別で着色）
+ */
+function matchKind(nodePath: string, map: Map<string, ChangeKind>): ChangeKind | null {
+  let best: ChangeKind | null = null;
+  for (const [changePath, kind] of map) {
+    const matched =
+      changePath === nodePath ||
+      changePath.startsWith(`${nodePath}.`) ||
+      nodePath.startsWith(`${changePath}.`);
+    if (!matched) continue;
+    if (best === null || KIND_PRIORITY.indexOf(kind) < KIND_PRIORITY.indexOf(best)) {
+      best = kind;
+    }
+  }
+  return best;
+}
+
+/**
+ * プレビュー HTML（backend 生成・data-fp 付き）の変更ノードへ着色クラスを付与し、
+ * sanitize 済み HTML 文字列を返す。
+ *
+ * 変更が無ければ sanitize のみ行う。`dangerouslySetInnerHTML` には渡さず、
+ * iframe の `srcDoc` に埋め込む前提（呼び出し側で隔離）。
+ */
+export function annotateHtml(html: string, map: Map<string, ChangeKind>): string {
+  if (map.size === 0) return DOMPurify.sanitize(html);
+
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  doc.body.querySelectorAll("[data-fp]").forEach((node) => {
+    const fp = node.getAttribute("data-fp");
+    if (!fp) return;
+    const kind = matchKind(fp, map);
+    if (kind) {
+      node.classList.add("diff-mark", KIND_CLASS[kind]);
+    }
+  });
+  // DOMPurify は既定で data-* 属性・class を保持する（ALLOW_DATA_ATTR=true）。
+  return DOMPurify.sanitize(doc.body.innerHTML);
+}
+
+/** 項目（data-unit）配下に変更があるか（matchKind と同じ双方向ルール）。 */
+function unitChanged(unitPath: string, map: Map<string, ChangeKind>): boolean {
+  return matchKind(unitPath, map) !== null;
+}
+
+/**
+ * prefix 直下で「先頭（最小 index）の既存兄弟（data-unit）」を探す。
+ *
+ * 先頭削除（index=0）や直前の兄弟が全て不在のケースでは後方探索でアンカーが取れない。
+ * 削除により残存項目は前へ詰められて再採番されるため、削除位置に対応する edited 側の
+ * インデックスは一致しない。そこで「残っている兄弟リストの先頭」をアンカーにし、その直前へ
+ * スタブを挿入する。`prefix.N`（N は数値、それ以上ネストしない直接の子）のみを対象にする。
+ */
+function findForwardAnchor(doc: Document, prefix: string): Element | null {
+  let best: Element | null = null;
+  let bestK = Number.POSITIVE_INFINITY;
+  doc.querySelectorAll(`[data-unit^="${prefix}."]`).forEach((el) => {
+    const unit = el.getAttribute("data-unit");
+    if (!unit) return;
+    const rest = unit.slice(prefix.length + 1);
+    if (rest.includes(".")) return; // 直接の子（孫は対象外）
+    const k = Number(rest);
+    if (!Number.isInteger(k) || k >= bestK) return;
+    bestK = k;
+    best = el;
+  });
+  return best;
+}
+
+/** 削除プレースホルダ要素を作る（テーブル内なら tr、それ以外は div）。 */
+function makeRemovedStub(doc: Document, anchor: Element, text: string, fp: string): Element {
+  if (anchor.tagName === "TR") {
+    const tr = doc.createElement("tr");
+    tr.className = "diff-removed-stub";
+    tr.setAttribute("data-removed", fp);
+    const td = doc.createElement("td");
+    td.colSpan = anchor.children.length || 1;
+    td.textContent = text;
+    tr.appendChild(td);
+    return tr;
+  }
+  const div = doc.createElement("div");
+  div.className = "diff-removed-stub";
+  div.setAttribute("data-removed", fp);
+  div.textContent = text;
+  return div;
+}
+
+/**
+ * 編集中（form）側の HTML に、削除された項目の跡を示すプレースホルダ（「（削除）…」）を挿入する。
+ *
+ * baseline では削除項目が赤で残るが、edited では消えて左右がずれる。そこで edited 側に
+ * 同じ位置（直前の兄弟項目 data-unit の直後）へ赤いスタブを差し込み、削除を可視化する。
+ * data-unit を持たない項目（非休暇の取引先など）はアンカーが取れず挿入をスキップする
+ * （サイドバーの変更リストでは表示される）。edited 側専用。
+ */
+export function injectRemovedPlaceholders(html: string, changes: CareerChange[]): string {
+  const removed = changes.filter((c) => c.kind === "removed");
+  if (removed.length === 0) return html;
+
+  const doc = new DOMParser().parseFromString(html, "text/html");
+
+  // 親パス（prefix）ごとに index 昇順で処理し、直前に挿入したスタブから連結する。
+  const sorted = [...removed].sort((a, b) => {
+    const pa = a.path.slice(0, -1).join(".");
+    const pb = b.path.slice(0, -1).join(".");
+    if (pa !== pb) return pa < pb ? -1 : 1;
+    return (a.path[a.path.length - 1] as number) - (b.path[b.path.length - 1] as number);
+  });
+  const lastByPrefix = new Map<string, Element>();
+
+  for (const change of sorted) {
+    const index = change.path[change.path.length - 1];
+    if (typeof index !== "number") continue;
+    const prefix = change.path.slice(0, -1).join(".");
+
+    let anchor: Element | null = lastByPrefix.get(prefix) ?? null;
+    for (let k = index - 1; k >= 0 && !anchor; k--) {
+      anchor = doc.querySelector(`[data-unit="${prefix}.${k}"]`);
+    }
+    // 後方アンカーは「直後」へ、前方アンカー（先頭削除のフォールバック）は「直前」へ挿入する。
+    const insertBeforeAnchor = anchor === null;
+    if (!anchor) anchor = findForwardAnchor(doc, prefix);
+    if (!anchor || !anchor.parentElement) continue;
+
+    const stub = makeRemovedStub(
+      doc,
+      anchor,
+      removedStubLabel(change.oldValue || change.label),
+      change.path.join("."),
+    );
+    anchor.parentElement.insertBefore(stub, insertBeforeAnchor ? anchor : anchor.nextSibling);
+    lastByPrefix.set(prefix, stub);
+  }
+
+  return doc.body.innerHTML;
+}
+
+/**
+ * 変更のない「項目（data-unit）」を畳んで `<details>` にまとめる（VSCode/GitHub 風の差分集中表示）。
+ *
+ * - 変更のある項目・見出し・氏名などの文脈ノードはそのまま残す。
+ * - 変更が無く、かつ祖先の項目も変更が無い（＝丸ごと畳まれる）ものを「畳み根」とし、
+ *   連続する畳み根を 1 つの `<details><summary>変更なし N 項目を表示</summary>…</details>` に置換する。
+ * - `<details>` はネイティブの開閉なので、スクリプト無効の sandbox iframe 内でも展開できる。
+ *
+ * 変更が無ければ（map 空）何もしない。annotateHtml の後段に適用する前提。
+ */
+export function foldUnchanged(html: string, map: Map<string, ChangeKind>): string {
+  if (map.size === 0) return html;
+
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  const units = Array.from(doc.body.querySelectorAll<HTMLElement>("[data-unit]"));
+
+  // 畳み根: 自身が未変更 かつ 最も近い祖先 unit が「変更あり or 不在」のもの。
+  const collapseRoots = new Set<Element>();
+  for (const u of units) {
+    const path = u.getAttribute("data-unit");
+    if (!path || unitChanged(path, map)) continue;
+    const parentUnit = u.parentElement?.closest<HTMLElement>("[data-unit]");
+    if (parentUnit) {
+      const parentPath = parentUnit.getAttribute("data-unit");
+      if (parentPath && !unitChanged(parentPath, map)) continue; // 祖先ごと畳まれる
+    }
+    collapseRoots.add(u);
+  }
+  if (collapseRoots.size === 0) return DOMPurify.sanitize(doc.body.innerHTML);
+
+  // 親ごとに、連続する畳み根の run を 1 つの <details> に置換する。
+  const parents = new Set<Element>();
+  collapseRoots.forEach((el) => {
+    if (el.parentElement) parents.add(el.parentElement);
+  });
+
+  parents.forEach((parent) => {
+    const children = Array.from(parent.children);
+    let i = 0;
+    while (i < children.length) {
+      if (!collapseRoots.has(children[i])) {
+        i++;
+        continue;
+      }
+      let j = i;
+      while (j < children.length && collapseRoots.has(children[j])) j++;
+      const run = children.slice(i, j);
+
+      const details = doc.createElement("details");
+      details.className = "fold";
+      const summary = doc.createElement("summary");
+      summary.className = "fold-summary";
+      summary.textContent = foldedSectionLabel(run.length);
+      const bodyDiv = doc.createElement("div");
+      bodyDiv.className = "fold-body";
+
+      parent.insertBefore(details, run[0]);
+      run.forEach((el) => bodyDiv.appendChild(el));
+      details.appendChild(summary);
+      details.appendChild(bodyDiv);
+
+      i = j;
+    }
+  });
+
+  return DOMPurify.sanitize(doc.body.innerHTML);
+}
diff --git a/frontend/src/utils/setAtPath.test.ts b/frontend/src/utils/setAtPath.test.ts
new file mode 100644
index 00000000..4ff2934e
--- /dev/null
+++ b/frontend/src/utils/setAtPath.test.ts
@@ -0,0 +1,56 @@
+import { describe, it, expect } from "vitest";
+
+import { insertAtPath, removeAtPath, setAtPath } from "./setAtPath";
+
+describe("setAtPath", () => {
+  it("オブジェクトの 1 フィールドを更新し、元オブジェクトを破壊しない", () => {
+    const original = { a: 1, b: { c: 2 } };
+    const next = setAtPath(original, ["b", "c"], 99);
+    expect(next).toEqual({ a: 1, b: { c: 99 } });
+    expect(original.b.c).toBe(2); // 非破壊
+    expect(next).not.toBe(original);
+    expect(next.b).not.toBe(original.b);
+  });
+
+  it("配列の index を更新する", () => {
+    const original = { items: [{ name: "x" }, { name: "y" }] };
+    const next = setAtPath(original, ["items", 1, "name"], "z");
+    expect(next.items[1].name).toBe("z");
+    expect(original.items[1].name).toBe("y");
+    expect(next.items[0]).toBe(original.items[0]); // 触らない要素は参照共有
+  });
+
+  it("空パスはルート置換になる", () => {
+    expect(setAtPath({ a: 1 }, [], { b: 2 })).toEqual({ b: 2 });
+  });
+});
+
+describe("removeAtPath", () => {
+  it("配列要素を取り除く", () => {
+    const original = { items: ["a", "b", "c"] };
+    const next = removeAtPath(original, ["items", 1]);
+    expect(next.items).toEqual(["a", "c"]);
+    expect(original.items).toEqual(["a", "b", "c"]); // 非破壊
+  });
+
+  it("ネストした配列要素を取り除く", () => {
+    const original = { groups: [{ items: ["a", "b"] }] };
+    const next = removeAtPath(original, ["groups", 0, "items", 0]);
+    expect(next.groups[0].items).toEqual(["b"]);
+  });
+});
+
+describe("insertAtPath", () => {
+  it("配列の指定位置に要素を挿入する", () => {
+    const original = { items: ["a", "c"] };
+    const next = insertAtPath(original, ["items", 1], "b");
+    expect(next.items).toEqual(["a", "b", "c"]);
+    expect(original.items).toEqual(["a", "c"]); // 非破壊
+  });
+
+  it("末尾を超える index への挿入は末尾に追加される", () => {
+    const original = { items: ["a"] };
+    const next = insertAtPath(original, ["items", 5], "b");
+    expect(next.items).toEqual(["a", "b"]);
+  });
+});
diff --git a/frontend/src/utils/setAtPath.ts b/frontend/src/utils/setAtPath.ts
new file mode 100644
index 00000000..c03400ad
--- /dev/null
+++ b/frontend/src/utils/setAtPath.ts
@@ -0,0 +1,92 @@
+/**
+ * フォーム値（プリミティブ／配列／プレーンオブジェクトのみで構成）に対し、
+ * パス指定で 1 点だけを更新・挿入・削除する immutable な純関数群。
+ *
+ * 経歴書の「変更点を項目ごとに baseline へ戻す（ロールバック）」処理で用いる。
+ * 元のオブジェクトは一切破壊せず、辿った経路だけ浅いコピーした新しい値を返す。
+ */
+
+type Path = ReadonlyArray<string | number>;
+
+/**
+ * `path` が指す位置の値を `value` で置き換えた新しいオブジェクトを返す。
+ * path が空配列のときは `value` 自体を返す（ルート置換）。
+ */
+export function setAtPath<T>(target: T, path: Path, value: unknown): T {
+  if (path.length === 0) return value as T;
+  const [head, ...rest] = path;
+
+  if (Array.isArray(target)) {
+    const index = head as number;
+    const copy = target.slice();
+    copy[index] = setAtPath(copy[index], rest, value);
+    return copy as unknown as T;
+  }
+
+  const obj = target as Record<string, unknown>;
+  return {
+    ...obj,
+    [head]: setAtPath(obj[head as string], rest, value),
+  } as unknown as T;
+}
+
+/**
+ * `path` の末尾セグメントが指す配列要素を取り除いた新しいオブジェクトを返す。
+ * 経歴書で「追加された項目」を baseline 状態（＝項目が無い状態）へ戻すのに使う。
+ */
+export function removeAtPath<T>(target: T, path: Path): T {
+  if (path.length === 0) return target;
+  const [head, ...rest] = path;
+
+  if (rest.length === 0) {
+    if (Array.isArray(target)) {
+      const copy = target.slice();
+      copy.splice(head as number, 1);
+      return copy as unknown as T;
+    }
+    // 配列以外への remove は今回の用途では発生しない（呼び出し側がパスを保証する）。
+    return target;
+  }
+
+  if (Array.isArray(target)) {
+    const copy = target.slice();
+    copy[head as number] = removeAtPath(copy[head as number], rest);
+    return copy as unknown as T;
+  }
+
+  const obj = target as Record<string, unknown>;
+  return {
+    ...obj,
+    [head]: removeAtPath(obj[head as string], rest),
+  } as unknown as T;
+}
+
+/**
+ * `path` の末尾セグメントが指す位置に `value` を挿入した新しいオブジェクトを返す。
+ * 経歴書で「削除された項目」を baseline の値で復元するのに使う。
+ */
+export function insertAtPath<T>(target: T, path: Path, value: unknown): T {
+  if (path.length === 0) return target;
+  const [head, ...rest] = path;
+
+  if (rest.length === 0) {
+    if (Array.isArray(target)) {
+      const copy = target.slice();
+      copy.splice(head as number, 0, value);
+      return copy as unknown as T;
+    }
+    return target;
+  }
+
+  if (Array.isArray(target)) {
+    const copy = target.slice();
+    copy[head as number] = insertAtPath(copy[head as number], rest, value);
+    return copy as unknown as T;
+  }
+
+  const obj = target as Record<string, unknown>;
+  return {
+    ...obj,
+    [head]: insertAtPath(obj[head as string], rest, value),
+  } as unknown as T;
+}