「遠くから拾う?近くから拾う?」をClaudeにアニメで比べてもらった。動画AIなしで、ブラウザで動く

遠くから拾う?近くから拾う?Claudeにゲームみたいなアニメで比べてもらった

「荷物は、遠くにあるものから集めたほうが早い」。仕事の段取りの話で、ときどき聞くたとえです。本当にそうなのか。

ちょうどその頃、「Claude Opus 5.5なら、動画AIなしでアニメが作れる」という見出しを見かけました。そこで、このたとえをClaudeに頼んで、ゲームのように動くアニメーションで比べてもらいました。できあがったものが、下の「空き缶ひろい競争」です。

空き缶ひろい競争を最初から最後まで流した動画(約33秒)

上は、最初から最後まで流した動画です。記事の中では、実際に動くものも触れます。

トミー

頼んだのは、「遠くのものから拾う」と「近くのものから拾う」を、ゲームみたいに見て分かる形で比べてほしい、というひとことでした。まず静止画のデザイン案が出てきて、それを見て「いいね」と返したら、次はもう動いていました。

まずは遊んでみてください

ルールはシンプルです。ゴールから2mおきに空き缶を10個並べ、2人が同じ速さで歩いてゴールまで運びます。青い人は遠くの缶から、黄色い人は近くの缶から拾います。

▶ スタートを押すと動きます。右上のボタンでルールを切り替えられます。別のページで大きく開く

右上のボタンで、「1個ずつ運ぶ」と「3個まで持てる」の2つのルールを切り替えられます。速さは×1・×2・×4から選べます。

答え:1個ずつなら、どっちも同じ

「1個ずつ運ぶ」で動かすと、2人は同時にゴールします。途中で見比べると、運んだ缶の数はちがうのに、歩いた距離はいつも同じです。

理由は単純です。1個ずつ運ぶなら、どの缶も「行って戻る」ので、その缶までの距離の2倍を歩きます。拾う順番を変えても、足し算の順番が入れ替わるだけで、合計は変わりません。

図1:1個ずつ運ぶなら、どの順番でも歩く距離は220m
図1:1個ずつ運ぶなら、どの順番でも歩く距離は220m

つまり、「遠くから拾うと早い」は、このルールのままでは成り立ちません。

遠くからは損をしない。差がつくのは「端数」が出るとき

ルールを「3個まで持てる(途中で拾える)」に切り替えると、結果が変わります。遠くからは88m、近くからは112m。遠くからのほうが24m短くなります。ただし、まとめて運べれば必ず差がつく、というわけではありません(このあと説明します)。

図2:3個まで持てる(途中で拾える)なら、遠くから88m・近くから112m
図2:3個まで持てる(途中で拾える)なら、遠くから88m・近くから112m

1回の往復の距離は、その回で拾う缶のうち「いちばん遠い缶」で決まります。遠くから拾うと、いちばん遠い20mまで行くのは最初の1回だけで、帰り道に18m・16mの缶も一緒に拾えます。最後の往復は2mだけです。近くから拾うと、最後に20mの缶を1個だけ取りに行く往復が残ってしまいます。

何個まで持てたら、差がつく?

持てる数を1個から10個まで変えて、全部計算してみました。

1回に持てる数遠くから近くから差
1個220m220m0(同じ)
2個120m120m0(同じ)
3個88m112m24m
4個72m88m16m
5個60m60m0(同じ)
6〜9個56〜44m64〜76m8〜32m
10個40m40m0(同じ)

差がつくのは、10個が持てる数で割り切れないときだけです。割り切れないと、どこかで「持てる数より少ない缶だけを運ぶ回」が出ます。遠くから拾うと、その半端な回がいちばん近くの缶になるので、短く済みます。近くから拾うと、半端な回がいちばん遠くの缶になってしまいます。

2個ずつ・5個ずつのように割り切れるときは、どちらから拾っても同じです。つまり、遠くから拾って損をすることはないけれど、いつも得をするわけでもない、というのが正確な答えです。

トミー

仕事にたとえると、「遠くの用事から片づける」で損をすることはない。ただ、得をするのは、帰り道で小さな用事も一緒に済ませられて、しかも最後に中途半端な用事が残るときです。1つずつしか運べない仕事なら、順番を変えても楽にはならない。

どうやって作ったのか

ここからは、作り方の話です。専門的なことは省いて、流れだけ書きます。

1. 頼んだのは、たとえ話とひとこと

空き缶を2mおきに10個置いて、遠くから拾う場合と近くから拾う場合を比べたい。ビジュアルも分かりやすいゲーム的な表現で。頼んだのは、だいたいこれだけです。

2. 先に「カンプ」を見せてもらった

いきなり動くものを作るのではなく、まず静止画のデザイン案(カンプ)を出してもらいました。2本のレーン、ゴール、目盛り、歩いた距離のメーター、スタートボタン。この時点で、全体の見た目と、どの数字を見せるかを決めました。

最初に出てきたカンプ。この時点で見た目と見せる数字を決めた
最初に出てきたカンプ。この時点で見た目と見せる数字を決めた

3. 「いいね」のあとは、動くものが届いた

カンプでよければ、次は実際に動く形です。ボタンを押すと2人が歩き出し、缶を持つと頭の上に積まれ、ゴールに置くと箱に入ります。途中で、吹き出しの文字が変な位置で折れる、「完了!」の札が缶に重なる、スマホだと文字が小さすぎる、といったところが見つかり、直してもらいました。

4. 最後に、動画にも書き出した

ブログには動くものをそのまま埋め込み、インスタやXには動画を使います。動画は、動くアニメーションを1コマずつ撮ってつなげたものです。見た目は、ブラウザで動くものとまったく同じです。

「アニメーション生成機能」ではない

ひとつ正確に書いておきます。Claude Opus 5.5に「アニメーションを作る専用の機能」があるわけではありません。Anthropicの発表にも、その名前の機能は出てきません。

実際にやっていることは、ClaudeがWebページを作る言葉(HTML・CSS・JavaScript)でアニメーションを書く、ということです。動画を生成するAIとちがって、できあがるのは「ブラウザで動くプログラム」なので、次のような特徴があります。

  • 数字が正確:距離や缶の数は、計算して動かしているので、見た目と数字がずれない
  • あとから直せる:「札を小さく」「色を変えて」と言葉で頼めば、その部分だけ直る
  • 触って遊べる:ボタンでルールを切り替えるなど、見る人が操作できる
  • 軽い:1つのファイルだけで動き、ネットにつながっていなくても開ける
トミー

「動画AIなしでアニメが作れる」という言い方は、うそではないけれど、中身は「AIがWebの言葉でアニメを書いてくれる」です。ここを分かっておくと、何に使えるかが見えてきます。

仕事ではどう使えそう?

KAKERUデザインとしての見立てです。

1. 提案書の「動く図解」

「A案とB案で何が変わるか」を、数字の表ではなく、動きで見せられます。今回のように、同じ条件で2つを並べて走らせるだけでも、説明の時間がぐっと短くなります。

2. 社内研修や勉強会の教材

段取り、在庫、動線など、頭で考えるとややこしい話を、スタートボタン1つで見せられます。ルールを切り替えられるので、「もしこうだったら?」をその場で試せます。

3. ホームページやLPの説明パーツ

サービスの仕組みや、導入前と導入後の違いを、動くパーツとしてページに埋め込めます。1つのファイルで動くので、今のホームページにも組み込みやすいです。

4. SNS用の短い動画の素材

動くものを作っておけば、そこから縦長の動画を書き出せます。インスタのリールやXに、そのまま使えます。

作るときに気をつけたいこと

  • 前提と数字は人が確かめる:今回も、220m・88m・112mは計算で確かめてから記事にしている
  • 最初にカンプを見る:いきなり動くものより、静止画で見た目と見せる数字を決めてからのほうが、やり直しが少ない
  • スマホで必ず見る:パソコンでは良くても、スマホだと文字や部品が小さすぎることがある
  • ブログへの入れ方:記事に直接貼るより、サーバーに置いて「窓(iframe)」で埋め込むほうが、ブログのデザインとぶつからない
  • 「機能名」を盛らない:公式にない機能名で紹介しない。何をしているかを正確に書く

まとめ

  • 「遠くから拾うと早い」は、1個ずつ運ぶなら成り立たない。どちらも220mで同じ
  • 遠くから拾って損をすることはない。差がつくのは、まとめて運べて、最後に端数の回が出るとき。3個までなら88m対112m(2個ずつ・5個ずつなら同じ)
  • Claude(Opus 5.5)に、ブラウザで動くアニメーションを書いてもらった。専用の「アニメ機能」ではなく、Webの言葉で書いている
  • 流れは、たとえ話を頼む → カンプを見る → 動くものを直す → 動画に書き出す
  • 提案書、研修、ホームページの説明パーツ、SNS動画に使える

たとえ話は、言葉で聞くより、動いているのを見たほうが早く伝わります。気になっている「たとえ」があれば、一度Claudeに動かしてもらうと面白いと思います。

ふだんの制作の話や、作ったものの裏側は Instagram と X でも出しています。

関連記事

Claude Opus 5.5 発表。Fable並みの力で40%安く3割速い
遠くから拾う?近くから拾う?Claudeにゲームみたいなアニメで比べてもらった

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA