構造化エディタでセクション別編集を可能にした

求人原稿は複数のセクションで構成されている：仕事内容・給与・勤務地・福利厚生…。

これを1つの巨大なテキストエリアで編集させると、どこを直せばいいのか分からない。

そこで、セクション単位で編集できる構造化エディタを実装した。

ビフォー・アフター

Before: 全文テキストエリア

仕事内容：...
給与：...
勤務地：...

→ 全部ごちゃ混ぜで、どこを改善すべきか分かりにくい。

After: セクション別カード

各セクションが独立したカードUIになり：
– 「仕事内容」だけ改善提案を見る
– 「給与」だけAIに改善させる
– 差分表示で変更箇所が一目瞭然

実装のポイント

1. セクション定義

const SECTIONS = [
  { id: 'job_description', label: '仕事内容', required: true },
  { id: 'salary', label: '給与', required: true },
  { id: 'location', label: '勤務地', required: true },
  { id: 'benefits', label: '福利厚生', required: false },
  { id: 'requirements', label: '応募資格', required: false },
];

2. セクションごとの改善API

// src/app/api/improve-section/route.ts
export async function POST(req: Request) {
  const { sectionId, content, prompt } = await req.json();
  const improved = await ai.improve(content, prompt);
  return Response.json({ improved });
}

フロントエンドから「このセクションだけ改善して」とリクエストを投げると、そのセクションだけAIが改善して返してくれる。

3. 差分表示（react-diff-viewer）

改善前と改善後を並べて表示。

import ReactDiffViewer from 'react-diff-viewer-continued';

<ReactDiffViewer
  oldValue={original}
  newValue={improved}
  splitView={true}
/>

赤字で削除部分、緑字で追加部分が表示されるので、変更内容が直感的に分かる。

ユーザー体験の改善

Before

「AIが勝手に全部書き換えちゃった…どこ変わったの？」

After

「『仕事内容』だけ改善して」→ 差分で確認 → 気に入ったら採用、気に入らなければ元に戻す

ユーザーがコントロールしている感覚が大事。

まとめ

構造化エディタは実装コストが少し上がるけど、UX改善の効果は絶大。

AIツールは「勝手に全部やってくれる」より、「必要な部分だけ手伝ってくれる」方がユーザーに受け入れられる。

タグ: #UI/UX改善 #開発実績 #エディタ