14
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

いろんな生成AIを使ってアプリを作ってみる

Last updated at Posted at 2025-12-04

今年もクソアプリカレンダーに投稿です
ちなみに去年は以下を投稿してました
今年もなんか作るぞ!

まずは結果

今回はアプリそのものは公開してなくて、「こんなコンセプトのゲームはどうでしょう」という感じです
公開できるほどの品質に達することなく、今後も開発しないのでクソアプリとして供養させてください

作る

モチベーション

去年は3Dキャラでアドベンチャーゲームを作ってみました
もうちょっと3Dを勉強したいなというところからスタート

何を作る?

ちょっと前にこんな動画を作ってみてました
だから、異世界お料理系ケモ耳Tuberにスパチャして料理を作ってもらうゲームを作ってみることに
なぜこの結論にいたったのか、論理的な説明はできません

キャラクターの作成

まずはNano Bananaでキャラを作成し、4方向から見た画像を生成します

image.png

次は画像から3Dモデルを生成します

Tripoを試すも、コレじゃない感(いや、凄いんだけど)
image.png

TRELLISなど、いくつか試していくもいまいちでした
(スクショの画像が小さくてわかりづらいのですが、顔がかなりぼけてます)
image.png

Meshyは良い感じではあったけど無料ユーザーだとダウンロードできない・・・
image.png

他にもいくつか試してみたけど、どれもいまいち
で、諦めてデフォルメキャラにすることにしてTripoでtext to 3Dを試すことに

あら、可愛い
image.png

ということで、デフォルメキャラで進めてみることに

Tripo上でリギングできるものの、無料アカウントだとボーンが入ってないモデルしかダウンロードできないため、動かすことのできないモデルしかダウンロードできないみたいです
ちなみにデータを見た感じアニメーション自体はmixamoっぽいです
image.png

ということで、ボーンなしのモデルをダウンロードして、Blenderで手作業でリギングすることにします
image.png

そのままだと自動でのリギングに失敗するのでメッシュの数を減らすことにします
単純に減らすと解像度の荒い画像みたいになるので、デシメートのモディファイアーを使ってメッシュを減らします
画像は左がデシメートの場合、右側が単純に「距離でマージ」でメッシュを減らした場合の結果です
image.png

背景の作成

風景となるオブジェクトを最近Metaから出てきた話題のSAM 3Dを使ってみます
AIで作ったファンタジーな風景画像からSAM 3Dで3Dモデル化します
そしてply形式で出力した結果をSuperSplatで部品を良い感じに並べるとこんな感じになります
image.png

最後に背景一式を1個のplyとして出力しなおします

立ち絵を作る

リアル路線の3Dモデルではなくなったので、ゲームっぽく喋る時にキャラ絵を表示することにします
イメージ的にはゲームのペルソナを意識

左がNano Bananaで右がChatGPT
どうしてもChatGPTはChatGPT感が強いのでNano Bananaを採用
image.png

Nano Bananaの絵は線が細かすぎて日本の漫画っぽくないので手作業で頬と手指の線を減らして少しだけスッキリさせます
ほんとはもうちょっとデフォルメ化した方が良いと思うけどめんどくさいので諦める
画像の下の方を若干暗めにした方が(個人的に)よりペルソナ感が増すので、うっすら下の方を暗くします
image.png

Opalを使って感情バリエーションの画像を一気に増やします
背景はいらないのであとで手作業で削除
image.png

実装する(AIが)

Google Antigravityで開発する

やりたい雰囲気をAIに伝えて要求仕様を書いてもらって、それをベースにAIに実装プランを考えてもらって進めます
基本的に提案されるPlanに対して何も考えずにProceed
image.png

スクショ撮ってなかったのですが、最初はUIがしょぼいので何度かやりとりしてブラッシュアップしていきました
Gemini3が使えなくなったらClaudeに変えたり、Gemini CLIでGemini2.5で進めたり
とはいえ、画面系は意図していない挙動を伝えてもうまくいかないことがあるので、そんなときは早めに諦めて手動で直すか、コードレベルで修正内容を指示して直してもらう

アバターを表示する

基本的に実装はAIですが
ThreeJSで表示、モーションはMixamoからいくつかダウンロード

image.png

背景は先ほど用意したものですが、ThreeJSはそのままだとply形式はただの点群データとしての表示しかできず、3D Gaussian Splattingでの表示できません
Instant Skinned Gaussian Avatarsの実装を借りて、3D Gaussian Splattingさせます
ここは単純なAIへの指示では無理なので、こちらで色々下準備をしてサンプルコードを渡した上で実装をしてもらいます

ちなみに窓の外の風景は3Dじゃなくて一枚の絵です

音声を用意する

喋らないとTuberじゃない
ローカルTTSについては以前いくつか試してました

ということでTsukasa Speechで生成する
セリフ一覧をAIに作ってもらって、セリフ一覧をバッチ的に音声に変換します

音楽を用意する

裏でBGMをうっすら流したいのでSunoで曲を作ります
アプリ中のお料理レシピをAIに渡して作詞を頼めば、歌詞だけではなく曲のスタイルからAメロ、Bメロ、サビなどのパート分けもしてくれます
image.png

(作ったあとに歌詞を見返して思ったけど、「聖獣」は食べない方が良いのではないだろうか)

料理作成シーンを用意する

スパチャで料理をリクエストすると調理してくれるというゲーム仕様です
料理中はSora2で作った動画を流すことにします

hunting_1.gif cooking1_1.gif

料理画像を用意する

ファンタジーな料理をNano Bananaで生成します
やろうとして気づいたのですが、無料のAPIキーではNano Bananaは呼べない・・・
仕方なく手作業で実施
image.png
image.png

ミニゲームを用意する

スパチャの資金はゲームテスターのバイトでお金を稼ぐという仕様なのでミニゲームを作ります(AIが)
バグを探すことが目的ではなくて、ただミニゲームを遊ぶだけです

作った

ミニゲームの方は公開してます

雰囲気はこんな感じです

作ったゲーム達は我が子達に触ってもらいます

名前 説明 子供達の評価
弾幕回避 ひたすら弾幕を避ける無理ゲー 高評価
アタマの体操ゲーム 大昔にFlashで作ったゲームをリメイク ややウケ
グラビティ・ランダー AIに面白のを作って、で作ってもらった 高評価
Cyber Rhythm 音ゲー ややウケ
ブロック爆破パズル パズルゲーム ややウケ
スネークゲーム AIに面白のを作って、で作ってもらった ウケない

最近、長男はバグ探し名人になってるので触らせると面白い

ピックアップ ①

上記の中で音ゲーだけは結構前から取り組んでいたゲームでした
image.png

これを取り組んだきっかけは「AIで作った音楽が自動で音ゲーになったら面白そう」でした

1年ぐらい前から音ゲーの譜面作成プログラムとゲームクライアントを生成AI丸投げで、たまに試していたのですがなんだかいまいちでした
が、最近試すと良い感じになってきました

譜面作成プログラムをAIに説明してもらうとこんな感じです
これが良いのか悪いのかも自分にはわかってないですけど

# 🎵 譜面生成アルゴリズムの要点まとめ

## 1. 音声の読み込みと前処理
- MP3 をロード(モノラル)
- preemphasis で高域強調 & DC成分除去
- 全体の曲長を取得

## 2. BPM とビートの推定
- beat_track で BPM & beat 時刻を推定
- 失敗時はオンセット検出で代替
- 拍から量子化グリッドを生成

## 3. メロディ・構造特徴の抽出
- STFT → スペクトログラム
- HPSS で harmonic/percussive 分離
- スペクトラルコントラスト、RMS、Chromagram 計算
- これらからメロディ顕著度(pitch_salience)算出

## 4. オンセット検出
- onset_strength(メディアン集約)
- difficulty に応じて delta を変更
- 検出したオンセットに「音量 × メロディ顕著度」で重要度付け

## 5. 難易度別にオンセットを選択
- 重要度順にソート
- easy:60%、normal:100%、hard:130% でノート量調整
- 近すぎるオンセットをフィルタ(hard は同時押し許容)

## 6. リズムグリッドへの量子化
- BPM と subdivision に基づく時間グリッドを生成
- オンセットを最も近いグリッドにスナップ

## 7. レーン(キー)割り当て
- 周波数帯域を log-scale で n_keys に分割
- 対応フレームのスペクトルからピーク周波数を取得
- その周波数帯に該当するレーンに割り当て
- hard は 2 ピークで同時押し生成

## 8. ノート生成
- ms へ変換、anticipation_offset で前倒し
- duration は subdivision に応じて一定
- 最低 100ms を保証
- `{type, start_msec, end_msec}` のノートを生成

## 9. 譜面難易度メトリクス
- ノート数
- notes/sec
- 同時押し回数
- 最大密度ポイント(盛り上がり)

## 10. JSON 出力
- metadata + notes をまとめて書き出し

ピックアップ ②

ブロック爆破パズルが初見でルールがわからない状態だったのだけど、親切なUIを考えるのもめんどくさかったので説明を最初に表示することに

そこでAIに書いてもらっていた仕様書をNotebookLMに読ませてインフォグラフィックを作ってもらい、それをゲーム起動時に表示するようにする
image.png

おー、なんて手軽で素晴らしい!

完成

こんな感じです
動いてる感じは本記事冒頭の動画を参照
image.png
image.png

一応、ログイン時間に応じてメッセージが変わったり(上記画像では夜に起動したので「遅くまでありがとう」と言っている)、Idle時には適当に喋ったり動いたり、チャットが勝手に増えたり、などしてます

所感

3D生成のAI (text-to-3d, image-to-3d)

素人意見ですが3D生成はまだ荒いところが多いのかな。
一見良さそうに見えても、よくよく見ると・・・という感じ。
3D Gaussian Splattingみたいな「ボヤッとしたのをそれっぽく見せる技術」の方が今はまだ良いのかもと思いました。
あと、リギングして動かすのはできるけど、表情とかモーフターゲットが素人には作れない。

コーディングのAI (text-to-text)

画面系はAIガチャを頑張るよりは諦めて自分でやったが早い気がする。
Figma MCPも組み合わせようかと思ったけど今回は省略。

部分的なロジックは良いけど、アプリとして仕上げるには自分の言語化能力がネックになる・・・

音楽生成のAI (text-to-audio)

素晴らしい。
吹奏楽部をやってる娘にも使ってもらったけど、吹奏楽(≠クラシック、オーケストラ)が出せなくてがっかりしてた。
今回は使ってないですが効果音を作ることもできるので、ちょうど良い素材がないときは使ってみたい。

動画生成のAI (text-to-video)

思い通りのものを作るのは難しい。

画像生成のAI (text-to-image)

素晴らしい。
日本語がほんとにあと少し。

音声生成のAI (text-to-speech)

素晴らしいけどもう一歩。

参考

今回試したもの達

最終的に採用してるもの

最終的には使ってないもの

14
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?