必殺技ジェネレーター

概要

ハックツハッカソン dipカップ2026 テーマ「妄想」

妄想→漫画やアニメ→必殺技→全力でポーズ→現実で対戦

「子どもの頃に憧れた必殺技を、本気の技術で現実に」をコンセプトに、チーム東九海が開発した体験型対戦アプリです。カメラ映像から2人のポーズをリアルタイムで認識し、必殺技のエフェクトを発動。お互いのHPを削りながら、身体を動かして必殺技バトルを楽しめます。

デモ動画→　https://youtu.be/iSUz7K9-QUU

妄想を「遊べる体験」に！

「ポーズを認識してエフェクトを出せたからOK」では終わらせませんでした！

2人の動きを同時に認識し、必殺技の発動、攻撃、HPの増減、勝敗の決定までを一つの対戦体験として実装。技を出す本人のワクワクだけでなく、全力でポーズを取る少しの恥ずかしさや、周囲で見ている人も一緒に盛り上がれるライブ感にもこだわりました。

また、プレイヤーが発した声を認識し、その内容を文字の塊として画面上に出現させ、相手にぶつける物理攻撃として使用できます。

“必殺技を出す妄想”を、実際にみんなで遊べる体験にすることを目指しました！

主な特徴

• リアルタイムポーズ認識：MediaPipeなどを活用し、カメラに映った参加者の骨格やポーズをリアルタイムで認識。自分の身体そのものがコントローラーになります。
• 身体と連動する必殺技演出：決められたポーズを取ると、動きに合わせて色やエフェクトが出現。実際に必殺技を発動しているような体験を楽しめます。
• 4人同時の対戦システム：2~4人の動きを同時に認識し、必殺技で相手のHPを減らします。先に相手のHPを0にした参加者が勝利です。
• みんなで盛り上がるライブ感：全力でポーズを取る少しの恥ずかしさも楽しさに変換。対戦する人だけでなく、周囲で見ている人も一緒に盛り上がれる体験を目指しました。

画面遷移図

各画面説明

カメラ起動画面

対戦開始画面

対戦画面（２人）

必殺技はもちろん、HPの回復や、ガードを繰り出すことが可能です。 対戦の様子はデモ動画参照→https://youtu.be/iSUz7K9-QUU

対戦結果画面

設定画面

対戦画面（4人）

実際に遊んで確認してみてください！

使用技術

フロントエンド

・React / React DOM| UI・画面描画
・TypeScript | 型付きでの実装
・Vite | 開発・ビルド環境
・MediaPipe| 手・姿勢・顔の認識
・Canvas 2D API | 必殺技・エフェクト描画
・Web Camera API | カメラ映像の取得
・requestAnimationFrame | リアルタイム処理
・localStorage| 設定の保存
・CSS | レイアウト・デザイン

インフラ

・Node.js | 開発コマンドの実行 ・npm | パッケージ管理 ・package-lock.json | バージョン固定 ・Vite | ローカル開発サーバー ・静的ファイル配信 | MediaPipeモデル等の読み込み ・Google Storage | 手・姿勢モデルの取得

推しポイント

1台のカメラで最大4人までを同時認識

姿勢推定にはMediaPipe、Hand Landmarker、Face Landmarkerを使用しています。Webカメラの映像から、参加者のランドマーク（関節などの特徴点）をリアルタイムで検出します。

1人だけではなく、複数人の姿勢を同時に認識できるようにしたことで、同じ画面の中で向かい合い、実際に必殺技を撃ち合う対戦を実現しました！

仕組み

カメラ映像から複数人の身体を検出し、それぞれの関節の位置を個別に取得します。取得した情報からポーズを判定し、条件を満たすと必殺技が発動します。

• カメラから参加者の姿勢を読み取る
• それぞれの関節の位置を取得する
• 決められたポーズと一致しているか判定する
• ポーズが成立すると必殺技を発動する

1台のカメラだけで、複数人が同時に参加できることが大きなポイントです！

身体そのものがコントローラー

ボタンや専用コントローラーを使うのではなく、参加者自身の身体や声を使って攻撃することができます。

カメラの前で構え、全身でポーズを決めると、その動きに合わせて必殺技のエフェクトが出現します。さらに、プレイヤーが声を発するとその内容を認識し、発した言葉が「文字の塊」となって画面上に出現し、相手にぶつける攻撃として使用できます。

「自分の身体を動かす・声を出す」という現実のアクションが、そのまま画面上の攻撃や演出につながる、直感的な操作を目指しました。

ポーズと連動する必殺技エフェクト

取得した身体の動きや発した言葉に合わせて、CanvasやCSSを使った必殺技のエフェクトを表示します。

単にポーズの成否を表示するだけではなく、「本当に必殺技を発動している」と感じられるように、技の色や動き、発動した瞬間の見せ方にもこだわりました。

現実では出せない必殺技を画面上に出現させる、技術の無駄遣いポイントです！

エフェクトだけで終わらない対戦システム

「ポーズを認識してエフェクトが出たから完成」では終わらせず, 複数人で実際に遊べる対戦システムまで実装しました。

参加者にはそれぞれHPが与えられ、必殺技を発動すると相手を攻撃できます。お互いに技を撃ち合い、先に相手のHPを0にした参加者が勝利です。

姿勢認識・必殺技の発動・攻撃・HPの変化・勝敗の決定までを、一つのゲーム体験としてつなげています。

対戦中にプレイヤー同士の位置が入れ替わっても、最初に認識した1P・2Pの情報を追跡し続けるため、プレイヤー番号が途中で入れ替わることはありません。

恥ずかしさまで楽しさに変えるライブ感

このアプリの魅力は、画面の中だけでは完結しません。

人前で全力のポーズを取ったり、大声を発したりする少しの恥ずかしさを、あえて体験の一部として取り入れました。対戦している本人たちだけでなく、周囲で見ている人も「頑張れ！」「そのポーズ何！？」と一緒に盛り上がれます。

参加者の全力な動きと周囲の反応によって、その場でしか生まれないライブ感をつくり出します！

開発メンバー

東京・九州（福岡、大分）・東海（名古屋）から集まった、チーム「東九海」のメンバーを紹介します！

• 脇坂颯大
• 須田悠聖
• 松本唯愛
• 德光はな

初心者だからこそ、使ったことのない技術へ！

東九海は、開発初心者のメンバーも多いチームです。しかし、できる範囲の技術だけで完成させるのではなく、「せっかくなら、これまで使ったことのない技術に挑戦しよう！」という思いを大切にしました。

React・TypeScript・Viteを使ったWebアプリ開発に加え、MediaPipe Poseによる全身の姿勢認識や、Hand Landmarkerによる手の動きの認識、Face Landmarkerによる口の動きの認識、Canvas・CSSによる必殺技エフェクトの表現に挑戦しました。

分からないことはメンバー同士で調べて共有し、何度も試行錯誤しながら実装を進めました。

開発の進め方

機能ごとにブランチを分け、まずdevブランチで動作を確認してからmainブランチへ反映することで、作業中のコードがほかの機能へ影響しにくい進め方を取り入れました。

初心者だからこそ開発ルールや役割分担を意識し、地域を越えて協力しながら、「必殺技を現実で出す」という妄想を形にしました！