サイトアイコン のざのざノート

AIとの会話だけで、カメラワーク単語帳アプリを作ってみた

最近、AI動画生成に触れる機会が増えてきました。そこでふと気づいたことがあります。

カメラワークの英語用語を、実はちゃんと覚えていません。

「slow dolly in」や「orbit around the subject」といった表現を、なんとなく使ってはいるものの、正確な意味や使い分けが曖昧なままプロンプトを書いていました。

そこで思いつきました。

「これ、単語帳アプリを作ればいいんじゃないか」と。

普通なら自分でHTMLを書き、JavaScriptでロジックを組むところですが、今回はほぼAIとの会話だけで作ってみることにしました。相手はGrokです。

結果、思ったより短時間で形になったので、その過程を記録として残しておきます。

作ったもの

完成したのは、こんなシンプルなWebアプリです。

用語は全部で32個。基本のパン・ティルト・ドリーから、オービット、クレーン、Dutch angle、ショットサイズまでカバーしています。

ローカルで動くHTMLファイル1つなので、ダウンロードすればスマホでもPCでもそのまま開けます。ネット接続も不要です。

※ iPhoneでご覧になる場合は、Safariでファイルを直接開こうとするとうまく動作しないことがあります。「HTMLビューアー」のようなアプリでファイルを読み込む方法がおすすめです。

実際に触ってみる

文章だけだと伝わりにくいので、この記事にそのまま埋め込んでおきます。スマホからでも操作できます。

作り方(ほぼ会話だけ)

流れはこうでした。

  1. まず「AI動画のプロンプトに使えるカメラワーク用語を教えて」と聞く
  2. 出てきた用語をもとに「単語ドリルみたいなアプリをHTMLで作って」とお願いする
  3. できたものを触ってみて、気づいた点をそのまま伝える
    • 「ランダム20問のテストを追加して」
    • 「結果を保存できるようにして」
    • 「全部四択形式にして」
    • 「iPhoneでボタンが反応しない」

中でも印象的だったのが、iPhoneでの反応の悪さです。

最初のバージョンでは、選択肢をタップしても反応しないことがありました。そこで「iPhoneで開くとボタンが反応しない」とだけ伝えたところ、touch-action: manipulation の追加、タップ領域を48px以上に拡大、イベントの書き方の見直しなど、iOS向けの修正を一通り入れてくれました。

ここがポイントだと思います。

「動かない」と具体的に伝えると、ちゃんと原因を推測して直してくる。

完璧ではないけれど、「こういう挙動が欲しい」と伝え続けることで、少しずつ使いやすいものに近づいていく感覚がありました。

実際に使ってみて

正直、最初は「自分で覚えた方が早いのでは」と思っていました。

でも、四択形式で何度も繰り返すと、意外と頭に残ります。特に「Dolly in」と「Zoom in」の違いや、「Orbit」と「Arc shot」のニュアンスといった、似た用語の区別がしやすくなりました。

テストモードで20問解いてみると、自分が曖昧にしか覚えていなかった用語が一発でわかります。間違えた問題だけ後から復習できるのも、地味に便利でした。

感じたこと

AIにコードを書かせるとき、最初から完璧な仕様を渡そうとしなくていい。これが今回の一番の実感です。

  1. まず最低限動くものを作らせる
  2. 触ってみて不満な点を具体的に伝える
  3. 修正を繰り返す

このサイクルのほうが、結果的に早いことが多いです。特にUIの細かい挙動――タップの感触、進捗の保存、結果画面の見せ方など――は、実際に使ってみないとわからない部分が多いからです。

一方で、ゼロから複雑なアプリを丸ごと任せるのは、まだ厳しい場面もあります。今回うまくいったのは、「単一のHTMLファイルで完結するシンプルなドリル」という範囲に収めたことが大きいです。

まとめ

AI動画を本気で使うなら、カメラワーク用語は早めに整理しておいたほうが楽です。

今回作ったドリルは、もともと自分用のツールとして作ったものですが、同じように困っている人がいれば自由に使ってもらって構いません。

作り方のポイントを一言でまとめるなら、こうなります。

欲しいものを、具体的に、何度も伝える。

これに尽きます。

モバイルバージョンを終了