Webカメラで手を使って操作する映像をClaude Codeで作る

手をかざすと映像が動く。展示会のブースやショールームでよく見かけるこの演出は、専用センサーと制作会社が必要に見えます。実際には、普通のノートPCのWebカメラと、ブラウザ上で動くGoogleの無料モデル、そしてClaude Codeがあれば形になります。難しいのは技術よりも、手の動きをどう「気持ちのいい数値」に変えるかです。

仕組みはシンプルです

使うのはGoogleのMediaPipe Hand Landmarkerです。カメラ映像から手の21個の点（ランドマーク）の座標を返してくれます。処理はWebAssemblyでブラウザ内で行われるので、映像を外部サーバーに送る必要はありません。ただしライブラリとモデルファイルは読み込み時にCDNからダウンロードされます。社内のセキュリティ担当に説明するときは、この二点を分けて伝えると話が早いです。

21個の点をそのまま演出に使うと、ブレて落ち着きません。まず次の4つの数値にまとめます。

• 位置：手首と4本の指の付け根の平均。手のひらの中心です。
• 開き具合：指先から手首までの平均距離を、手のひらの大きさで割った値。カメラとの距離が変わっても同じように動きます。
• つまみ：親指の先と人差し指の先の距離。
• 回転：手首から中指の付け根へ向かう線の角度。

ネットワーク図が花のように広がる演出も、動画がくしゃっと潰れる演出も、この4つの組み合わせでできています。

準備するもの

• Claude Code（公式クイックスタートでセットアップ）
• Webカメラ付きのノートPCと、ChromeかSafari
• 空のプロジェクトフォルダ

一つだけ注意点があります。ブラウザがカメラを許可するのは、httpsかlocalhostで開いたページだけです。HTMLファイルをダブルクリックして開く方法は安定しないので、必ずローカルサーバー経由で開いてください。

最初は「数値を見るだけのページ」を作る

いきなり派手な映像を作ると、カクつきの原因がトラッキングなのか描画なのか分からなくなります。私はいつも、数値を表示するだけのデバッグページから始めます。Claude Codeには日本語でそのまま頼んで大丈夫です。

このフォルダに index.html を一つ作ってください。Webカメラで片手を追跡し、
あとで演出に使う数値を画面に表示するだけのページです。

・MediaPipe Tasks Vision の Hand Landmarker を jsDelivr から読み込む。
  JSとwasmは同じバージョンに固定。書く前に公式のWeb版ガイドを確認すること。
・VIDEOモード、numHands は 1、GPUを試してだめならCPU。
・video.currentTime が変わったときだけ detectForVideo を呼ぶ。
・「開始」ボタンでカメラの用途を説明してから許可を求める。「停止」で全トラックを止める。
・映像は左右反転。
・位置、開き具合（0から1）、つまみ（0から1）、回転（度）、手の有無を平滑化して表示。
・状態表示：モデル読み込み中、カメラ拒否、手なし、追跡中。
・カメラがない環境用に、マウスで数値を代用できるモード。
・127.0.0.1 の空いているポートで起動してURLを教えてください。
・コンソールエラーは直してから渡すこと。カメラの実機確認は私がやります。

ページが開いたら、手をゆっくり開いたり閉じたりして数値を眺めてください。手を止めているのに値が大きく揺れるなら、平滑化を強めるか照明を見直します。ここで安定させておけば、後から足す演出はすべて落ち着いて見えます。

しきい値は決め打ちしない

手の大きさや構え方は人によって違います。展示で不特定多数に触ってもらうなら、なおさらです。最初に2秒ずつ「パー」と「グー」をしてもらい、その人の範囲に合わせて0から1に変換するキャリブレーションを入れましょう。つまみの判定は、0.25以下でON、0.35以上でOFFのように幅を持たせると、境目でチカチカしません。

演出は一つに絞る

数値が安定したら、演出を一つだけ載せます。

• ネットワーク図：自社サービスの機能や、展示テーマのキーワードをノードにして、開き具合で広がるようにする。ラベルは日本語でも問題ありません。回転しても文字は常に正立させます。
• 動画スクラブ：短い映像を用意し、開き具合を再生位置に対応させる。全フレームをキーフレームにして書き出しておくと、手の動きに遅れず追従します。
• 3Dオブジェクト：three.jsで製品モデルを表示し、回転で向きを変え、つまみで掴む。商品紹介に向いています。

動画は次のコマンドで変換できます。

ffmpeg -i clip.mp4 -an -c:v libx264 -g 1 -crf 18 -pix_fmt yuv420p -movflags +faststart clip-scrub.mp4

現場で使うときのチェックリスト

• 会場の照明で必ず試す。逆光の窓際は精度が落ちます。
• カメラ許可が取れない貸し出しPCに備えて、マウス操作モードは残しておく。
• 開始画面に「カメラ映像はこの端末内で処理し、保存も送信もしません」と一行添える。日本の来場者はここをよく気にします。
• OSで動きを減らす設定（prefers-reduced-motion）がオンなら、動きを控えめにする。

本格的なインスタレーションに進みたくなったら、TouchDesignerとMediaPipeを組み合わせる方法もあります。ただ、ポートフォリオや社内デモ、ローンチページならブラウザ版で十分です。まずは今日、数値を表示するだけのページを作って、自分の手で10分触ってみてください。そこが一番の近道です。