1. 同じ事例に、同じ条件で説明アニメーションを依頼した
対象は、公開中の事例「LINEとAIで、書類の読み取りから請求書の発行まで自動化」です。LINEで書類を送るのは人、読み取り・分類はAI、読み取れないものの補正は人が担当します。その後のスプレッドシートへの記録、請求書の作成、LINEへの通知は通常の自動化です。
この5工程を、ページを見た人が短い時間でつかめるようにしたいと考えました。アニメーションの最後に出す「数時間 → 30分程度」は、元の事例で紹介している業務の結果です。今回AIにアニメーションを作らせたことで得られた時間短縮ではありません。
きっかけは、Claude Opus 5.5で作った短い動画を集めた公開リポジトリ「awesome-opus5-5-videos」を見たことでした。その動画やプロンプトは作者のもので、この記事には転載・引用していません。
両方に渡した依頼の条件は次のとおりです。
- この事例ページだけに、15〜30秒・音声なしの説明アニメーションを足す。
- SVG・CSSと少しのJavaScriptで作り、動画ファイルや外部ライブラリは使わない。
- 画面上の文字は14px以上。書類・金額は架空にし、「説明用のイメージです」と書く。
- 再生・停止・最初から・位置の移動ができ、画面外では止まる。「動きを減らす」設定では、止まった状態で全体が分かるようにする。
- 既存のシステム開発ページの説明アニメーションを参考にする。
2. 同じ依頼でも、制作時に持っていた前提は違った
Claude版は、Claude Code（モデルはClaude Opus 5.5）が、当社の担当者との対話の中で作りました。会話の流れを知っているため、依頼文以外の前提も持っていました。
Codex版は、Codexが作業の依頼文だけを読んで作りました。Codexの設定上のモデルはgpt-6.1-solです。
同じ依頼文だけでモデルの能力を公平に測った実験ではありません。 対話で前提を共有する作り方と、依頼文だけを渡す作り方の違いも含まれます。また、Codex版は途中で確認条件を変更して再開しています。
3. 3つの場面を、画像で並べて比べる
左がClaude版、右がCodex版です。同じ工程・役割の場面を並べており、再生時刻をそろえた画像ではありません。すべて架空の内容で、画面・書類・金額は説明用のイメージです。画像はクリックすると大きく表示できます。スマホでは比較欄を左右にスクロールできます。
AIの読み取り：項目が埋まる絵と、工程を伝える一文
Claude版では、領収書の日付や金額が読み取られ、右側の項目が埋まります。Codex版は書類のアイコンと「AIが読み取り・分類」という見出し、一文の説明で工程を伝えます。
| Claude版（採用） | Codex版 |
|---|---|
 |
 |
人の補正：読み取りの中で見せるか、場面を分けるか
Claude版は、読み取りの場面の中で用途の「？」が人の補正によって「交通費」に変わり、その後に表の行が埋まる構成です。画像は補正後を切り取っています。Codex版は「読み取れないものを補正」を独立した場面にし、人が担当することを示します。
| Claude版（採用） | Codex版 |
|---|---|
 |
 |
最後の全体像：アイコンをつなぐ図と、工程・担当の一覧
Claude版は5工程のアイコンと担当を横につなぎ、「数時間 → 30分程度」を大きく出します。Codex版は工程と担当を文字の一覧にし、下に結果の一文を添えます。
| Claude版（採用） | Codex版 |
|---|---|
 |
 |
画像だけでは動きのつながりまでは分かりません。採用したClaude版は事例ページで再生できます。
4. 手直しはどれだけ必要だったか
Claude版は作る途中で2回直しました。1つの図形に2つの動きが重なっていた箇所と、JavaScriptで後から足した担当表示に色が付いていなかった箇所です。作業時間は記録していません。
Codex版は、1回目の約6分の作業で止まりました。依頼の確認条件にあった「Chromeで動きを減らす設定にして確かめる」を実施できなかったためです。当社で条件を「設定を切り替えられなければコードで確かめ、未確認と書く」に緩めて再開し、2回目の約5分で変更ができあがりました。この約5分には、Codex自身による見直しを含みます。
Codex版は、指示なしに保守手順への記録も追加していました。止まったことはアニメーションの見た目の不具合とは分けて捉えています。また、条件を緩めたことと、Chromeで設定を切り替えて確認できたことは同じではありません。
| 比較項目 | Claude版 | Codex版 |
|---|---|---|
| 手直し・再開の記録 | 制作中に2回修正 | 確認条件を変更して再開 |
| 記録された作業時間 | 未記録 | 1回目は約6分、2回目は約5分（Codex自身の見直しを含む） |
| 変更の量 | 約330行 | 約170行 |
| 変更した場所 | 部品1つ、事例ページ2行、保守手順 | 部品1つ、事例ページ2行、保守手順 |
| アニメーションの長さ | 26秒 | 24秒 |
| ページ内の置き場所 | ページ上部の既存画像の上 | 「業務フロー」の見出しの下 |
Claude版の時間が分からないので、どちらが速かったかは比べられません。行数の違いだけで品質や保守のしやすさも決まりません。
5. 今回はClaude版を選んだ。その理由とCodex版の使いどころ
当社の担当者が両方を見比べ、Claude版を採用しました。2026年10月25日に事例ページで公開しています。今回の目的に照らした理由は、領収書の項目が読み取られ、人の補正を経て表に記録されるという、処理の中で何が起きるかを目で追えることです。
当社の見立てでは、Claude版は絵の作り込みに手間がかかります。一方、Codex版は文字が大きく読みやすく、作りが単純なため、ほかの事例にも広げやすい構成です。これは今回の成果物への見立てで、別の事例へ展開して確かめた結果ではありません。
自社の説明資料でも、工程の一覧を読みやすく伝えたいのか、処理の変化まで見せたいのかで選ぶ基準が変わります。今回は後者を重視しました。
6. 自社で比べるなら、依頼と選ぶ基準を先にそろえる
この1件から、ClaudeとCodexの一般的な優劣は言えません。持っていた前提が違い、同じ条件で繰り返した比較でもないためです。今回の経験から、画面や資料をAIに依頼するときは、次のように進めると比較の判断材料を残せます。
- 見せたい変化を書く。 「分かりやすく」だけでなく、今回なら「項目が読み取られ、補正され、表に入るところを見せたい」と指定します。
- 前提も一緒に渡す。 対象の事例、担当の分担、参考の画面、公開できる情報、文字や操作の条件をそろえます。会話で決めたことは依頼文にも残します。
- 同じ場面で見比べる。 見た目だけでなく、読みやすさ、処理の伝わり方、直す箇所、ほかの資料へ広げる手間で選びます。
- 確認できない項目を残す。 作れたことと、実際の設定で動作を確認できたことを区別します。時間を比べたいなら、修正や確認を含めて両方を記録します。
依頼の書き方や前提の渡し方も含めて振り返り、出てきたものを比べて選ぶ。その手順を、自社でAIに任せる範囲を決める材料にできます。