AI によるスマホアプリ（Webアプリ）とWindows用アプリの作り方

（執筆、修正中の文章です　26/06/18）

スマホ用のアプリを作るのはなかなかハードルが高いです。
基本的には言語を習得し、Apple や Google にお金を払い、ストアに並べる必要があります。

しかし昨今のAIの進化により言語を深く知らなくてもプログラムは作れるようになりました。
ブラウザ上で動作させるアプリであればAppleやGoogleに申請しなくても簡単にリリースすることができます。

↑ウェブアプリとしてリリースしたキーボードアプリです
MKYBD
これの作り方を通してウェブアプリの作り方を説明していきます。

注意

・有名キャラクターをそのまま使ったり、市販のゲームをそのまま再現したり、法律上問題になる可能性が高いアプリ、作品を作るのはやめましょう

・自分のPCの中をAI に勝手に覗かれることは基本ないですが、何でも「承認」してしまうと大切なデータが共有される可能性があるので注意しましょう。

・この記事によって損害が発生しても一切責任は負いません。

■　概要

パソコンとスマホがあればOKです。
使用するサービスは全て無料のものです。
パソコンだけで動くゲームを作りたいならスマホも必要ありません。
（ただしUnityの使用はストレージをたくさん使うのでSSD、HDDには十分な余裕が必要です。50GByteくらいの空きはあったほうがいいです）

スマホアプリ（ウェブアプリ）作りの手順をざっくり言うと
AIでアプリを作り、サーバーに置いてブラウザで遊べるようにします。
具体的に言いかえると
Antigravityを使いAIでUnityのアプリを作り、
Git、GitHubを使ってアプリをリリースします。

色んな単語が出てきましたが以下それぞれを「雑に」説明します。
（ちなみにソフトを作ってPCで実行したいだけならUnityとAntigravityのインストールだけでOKです）

・Unity

ゲームが作れる有名なソフト。市販のスマホゲームもかなりの割合Unityで作られている。
C#という言語を使ってプログラムを作りますが、AIが作ってくれるため細かく覚える必要はありません。
ただUnityのどこをさわったら何が起こるのかは知っておいた方がいいので超初心者向けのYoutubeや本で簡単なゲームを作っておいた方がいいです。ブロック崩しとかね。

・Antigravity

Google が作った AI 用のプログラミングツール。
Claude CodeというAIソフトを使っている人が多いようですが個人的に使い慣れているのでAntigravity を使いました。
AntigravityはAIを扱うためのツールでAIではありません。Antigravity からAI（Gemini、Claude、GPT-OSS）を呼び出して使います。

・Git

 バージョン管理アプリ。

作ったプログラムを１つ前のバージョンに戻したり、複数人で開発したプログラムをくっつけたりできる。
 

初心者プログラマーにGitでのプログラミングコードの管理は必要ないけど、今回はアプリをブラウザで動かすのに GitHub を使いたいのでGitも使います。

 

もしゲームデータをアップして動作するサーバサービス、ホームページを持っているならここから説明するGit関連は使う必要がありません。  

・GitHub

Gitをインターネット上で使うためのサイト。
要するにプログラムをインターネット上に置ける。
GitHub の Pages というサービスを使えば GitHub に置いた index.html を公開ウェブページにすることができて、そこからWebアプリを起動することができる。

・GitHub Desktop

GitHub をウィンドウアプリ（GUI）で操作できるツール。

上記５つをそれぞれインストールしてください。
各インストールについてはそれぞれサイトやYoutubeを見つけて行ってください。

 GitHubに登録する名前はゲームを公開するURLの一部になるので本名のフルネームは使わずニックネームにしましょう（後からでも変えられますが全ゲームのURLが変わってしまいます）。

Antigravityのインストールの際、「入力した内容をAIの学習に使う事を許可しますか？」のような質問もあるので何でも「Yes」を押さないように注意してください。

■　ゲーム開発の流れ

・アプリ名を決める

アプリ名がフォルダやデータの名前になるので後から変えるのは大変です。 

アプリ名を先にちゃんと決めておきましょう。

・Unity Hubで新しくプロジェクトを作る

Unityをインストールするとアプリ達を管理するUnityHubもインストールされます。
UnityHubを起動し、ウィンドウの右上あたりにある「＋ New Project」ボタンを押します。

Universal 2D か Universal 3D を選んでください。１作目は２Ｄのゲーム、アプリを作ることをおすすめします。
Locationにゲームを作成する親のパスを指定します。

Locationで指定したパスの下にゲーム名のディレクトリができるのでパス名にゲーム名は入れません。
Project Name に作るソフトの名前を入れます。
名前を後から変えるのは大変なのでよく考えて名前を付けましょう。
 
「＋ Create Project」を押してプロジェクトを作ります。
Unityが必要なファイルをごっそりコピーするので数分待ちます。

・Antigravityを起動し準備する

Unityを立ち上げたままでAntigravityも起動します。 

AIは使用量の上限が決まっているのでなるべく使用量(トークン)を消費しないように設定しておきます。

C:\Users\（ユーザ名）\.gemini\GEMINI.md

をテキストエディタで開き、例えば以下のように書いて上書き保存しておきます。

日本語で質問して日本語で返す。
結果の返信は最低限の報告だけでいいです。敬語不要。

上記内容は
Antigravity＞左下にあるSetting＞Customizations＞Rules
から確認できます。

・AntigravityでUnityのプロジェクトのフォルダを指定する

Antigravityのメニュー＞File＞ Create Project

を選択し、「＋ Add Folder」ボタンを押してUnityで作ったプロジェクトのフォルダ「～～/Unity/(アプリ名)」を指定します。

これで開発するアプリのフォルダをAIに操作してもらうことができるようになりました。
UnityとAntigravityの間で通信するわけではなく、AntigravityがUnityのアプリのフォルダ内を（勝手に）書き換え、書き換えが終わったらUnity側で実行するイメージです。  

 

・簡単に仕様書とレイアウトを作る

AIに基本的な仕様と何を作るかを教えてあげます。
最初から細かく指示するよりざっくりしたものを作って、そこからさらに指示を出して後から色々追加する方が作りやすいです。

例えは今回のアプリでは以下のように文章と画像を入力しました。
 

UNITYのプロジェクトです。Unityのバージョンは6000。

画面サイズは　844 × 452

画面をタッチして入力するキーボードアプリです

WebGLで動作します

添付した画像を元に作成してください。

文字をクリック（タッチ）すると上のエリアに文字列を表示していきます。

上のエリアには5行分の文字（文字列）を表示します

 

こんな感じで「Ask anuthing」と書いてあるエリアに入力して ➡ ボタンを押します。

画像はAntigravity内にエクスプローラからドラッグ＆ドロップしたり、Ctrl+Vで貼り付けるだけで送ることができます。

上記ではAIに画像を送りましたが、画像の解析はAIの使用量（トークン）を大きく消費するので頻繁にはしない方がいいです。

ちなみにどのAIを使うかはその下の＋の右の文字をクリックすると選べます。 

僕は 「Claude sonnet」か「Gemini 3.5 Flash (Medium)」をよく使ってます。

AIの使用残量は Setting ＞ Models から確認できます。

（有料プランも高くないので契約しちゃえば快適ですよ）

AIからの返信で、

UnityのメニューからSetup～～Sceneを選択してから実行してください

的な事を言われるのでUnity側でそれに従ってから▶ボタンを押すとうまくいけば実行できます。

初回はだいたいエラーがたくさん出ます。

Unityのコンソールに出力されるエラーメッセージをまとめて選択するとその下にまとめて表示されてるので、エラーメッセージの内容を選択してコピーし、Antigravityに貼り付けて送ります。

これだけでエラーを修正してくれます。

これを繰り返せばゲームが完成します。

 

実行できる状態になったら、Antigravityに
Web アプリとして実行できる形式にしてください
と入力するとUnityのメニューに「Build WebGL」というメニューを作ってくれます。
Build WebGL を選択し、数十秒から数分待つとWebで実行できる形式のファイルがアプリフォルダの下の「Build」フォルダの下にできます。 

 実行形式（.exe）のゲームを作るのであればAntigravityに「.exeにしてください」と言えば作ってくれるのでここで完成です。

・GitHubにアップロードするためのフォルダを作る

～～/Unity/アプリ名フォルダ

のサイズは3ギガバイトを超えています。

これを全部GitHubにアップするわけではなく、基本的には

～～/Unity/アプリ名フォルダ/Build

をアップロードするだけでOKです。

ただアップする際のフォルダ名はプロジェクト名（アプリ名）である必要があるので

Buildフォルダの下にあるWebGLフォルダを複製コピーして、アプリ名のフォルダ名に変えます。

 

以降、Unityが実行ファイルを出力するのはWebGLフォルダの中、
GitHubにアップするのはアプリ名フォルダの中になるので、Unityでビルドをしたら毎回WebGLフォルダの中身をアプリ名フォルダにコピーしてください。

・GitHub Desktop でプロジェクト設定（リポジトリ設定）

GitHubデスクトップを起動し

メインメニュー ＞ File ＞ New repository

を選択します。

 

リポジトリはプロジェクト名です。アプリ名と同じでOKです。 

 

LocalPathの「Choose」ボタンを押し、Buildフォルダを指定します。

Nameにアプリ名（Buildの下のアプリフォルダ名）を指定します。

下の「CreateRepository」を押してください。

これで～～/Build/アプリ名フォルダ以下のファイルを Git でのバージョン管理の対象として扱います。 

・GitHub Desktop でアップロード

Gitはバージョン管理ソフトなので、アップロードするときに今回のバージョンでの修正点を記入します。

更新内容のタイトルをSummary、詳細をDescriptionに記入します。

今回はバージョン管理はしないのでSummaryに「0」と入れるだけでいいです。

入力が終わったら下の「Commit to main」ボタンを押してください。
そのあと右の「Publish repository」ボタンを押してください。
 
２回目からはは「Push origin」ボタンを押してください。 

main、Commit、Push 
 
これらの単語を知らなくても作業はできますが知っておいた方が問題が起きた時に対応できます。
Git はアプリのバージョン管理ができると言いましたが、開発を枝分かれさせたり統合したりすることもできます。
あるアプリを作っていて開発メンバーの一人が 修正案Bをメインを元に作成する。
その修正案Bが採用され、main に新規機能として統合する。
これをGitでは「mainからブランチ B を作成、開発して採用されたらmainにマージする」と言います。
今回はブランチ（枝分かれ）がないので main だけになります。

Commitはプログラムのセーブポイントを作るイメージです。あとでそのセーブポイント（バージョン）まで戻ることもできます。

Commit しないと修正が終わってないことになるので注意。 

 

ここまでは自分のPCの中だけの処理です。

「Push ～」を押すと、GitHubサーバーにデータをアップロードします。 

・GitHub でPagesを設定する

github.com を開きます。

さっき Push したアプリ（リポジトリ）が左のリポジトリ一覧にあるのでクリックします。

 

 

ページが切り替わったらメニュー右端の「Setting」をクリックします。

GitHubはグループ内でプログラムの作成を共有するツールなので最初は「公開」設定にはなっていません。

左の「General」が選択されていることを確認し、下の方に行くと「Danger Zone」という領域があります。

「Change Visiblity」ボタンを押して「Change to public（一般公開）」に設定しましょう。

仕事で使っている場合、社内のプログラムを世界に公開してしまう可能性があるので何度も承認を聞かれます。

承認し gmail などに届くverify code も入力しましょう。

左のSetting項目から「Branch」を選択し、Branch の「None▼」をクリックして「main」に切り替えて右の「Save」ボタンを押します。

３分くらい待ってブラウザをリロードすると表示が変わり「Visite site」ボタンが表れます。

クリックするとうまくいけば作成したアプリが起動します。

何かしらエラーが出たらまたAntigravityのチャット欄に貼ってください。

AIがUnityのコードを修正してくれます

・WebGLでの実行について

Unity上でうまく動くなら .exe にしてもたいていちゃんと動きます。

しかしブラウザ上（WebGL）で動作させると音が出なかったり表示がおかしかったりすることが多いです。

音楽は音楽ファイルにしてもらうようにAntigravity経由でAIにお願いしたほうがいいです。

・iPhone で使用する場合

iPhone の場合はアドレスバーがじゃまなので「ホーム画面に追加」を使用します。

Safari のシェアボタンを押してホーム画面に追加を選択してください。

  

アドレスバーなしでタッチで操作できるようになります。 

起動時に携帯をしっかり横に向けてから起動しないとタッチの位置がずれてしまう場合があります 。