【PC不要】スマホ1台で落ち物パズルゲームを開発する方法！Claudeアプリ活用術
こんにちは。麗です。
先日、無性にテトリスがやりたくなりました。（私はパズルゲームが大好物なのです！）
AppStoreからスマホにアプリを入れて遊んでいたのですが、広告が多すぎる！
私はテトリスの世界に没頭したいのに、1ステージごとに広告を見ないといけなかったり、多いものだとプレイ中にもいきなり割り込んできたり💦
「じゃあ自分で作ろう！」
「ないものは自分で作る」という精神で開発作業をしている私は、自作することを考え始めました。
スマホから落ち物パズルを開発してみた
本当は「明日、パソコン開いたら作ってみよう」と考えていたのですが、私の中に湧き上がるパズル欲（？）は待てませんでした。
「どうしても、今すぐやりたい！」という一心に支配される中、ふと、スマホでも作れるんじゃないかと思いついたのです。
そして、あっという間に落ち物パズルが出来上がりました。
ブロックが落ちてきて、回転して、列が揃ったら消える。
ちゃんと、落ち物パズルになっています。
もちろん広告もないし、動きもサクサクです。
スマホからの開発に使ったもの一覧
まず全体像です。
使ったのはこれだけです。
- ChatGPT（スマホアプリ）— 画像生成
- GitHub（ブラウザ）— コードの保管・公開
- Claude（スマホアプリ）— コードを書いてもらう
- GitHub Pages（GitHubの機能）— 動作確認用
全部スマホのブラウザとアプリだけで使えます。
ちなみに、今回はパソコンは使いませんでしたが、あったほうが断然便利というか、基本的にはパソコンからの開発を推奨します。
パソコンが使えないとき or 実験や学習目的で作るのは良いと思います。
手順① ChatGPTでイメージ画像を作る
最初にやったのは、パズルゲームの見た目のイメージ画像を作ることでした。
ChatGPTに「こんな配色で、こんな雰囲気のパズルゲームの画面」と伝えて、自分好みのデザインに近い画像を作りました。
ちなみに、この作業は必須ではありません。
なくても落ち物パズルは作れます。
ただ、完成イメージを先に用意しておくと「こういう見た目にして」と伝えやすくなるので、見た目にこだわりたい方にはおすすめです。
手順② GitHubでリポジトリを作る
次に、GitHubで「リポジトリ」を作りました。
リポジトリというのは、ファイルの保管場所のこと。
パソコンでいう「フォルダ」に近いイメージで、ここにゲームのデータを入れていきます。GitHubはこのリポジトリをインターネット上に置いておけるサービスです。
スマホのGitHubアプリから、新しいリポジトリ「TETRIS」をひとつ作りました。
手順③ Claudeに落ち物パズルを作ってもらう
ここがメインです。
スマホのClaude アプリを開きます。
普段スマホアプリだと「チャット」を使っている人が多いのではないかと思いますが、今回使うのは「コード」の方です。
完全未経験の方であれば、たぶんこの辺りでつまずくのではないかと思うので、少し丁寧に説明します。
（※2026年5月31日の情報です）
作業場所を選ぶ
「コード」を選んだあと、GitHubリポジトリ（今回は「TETRIS」）を選択します。
チャットと違って、GitHubリポジトリやローカルにあるフォルダなど、作業場所を指定してあげないと作業を始められません。
基本的には、開いているフォルダ（リポジトリ）の中でのみ作業をするのです。
チャットとコードで何が違うのか、なぜ作業場所をつなぐのかをもう少し初心者向けに整理した記事もあります。Claude Codeって結局なに？Chatとの違い、1年半の大激変まとめもよければどうぞ。
指示を送る
手順①で作ったイメージ画像を添付し、こう伝えました。
添付画像のようなテトリスを作ってください。スマホ縦画面でのプレイを想定しています。
（※当時、実際に送った文面そのままです）
これだけです。
するとClaudeから「操作はボタン式にしますか？ タッチ操作にしますか？」と質問がありました。
「両方」という選択肢があったので、両方を選んでみました。
そのあとはしばらく待ちです。
数分待つと、落ち物パズルのコードが完成しました。
Claude Code が作ったコードは、そのままGitHubのリポジトリに保存されます。
手順④ 動作確認する（ここが一番悩んだ）
コードはできたっぽいのですが、ここで問題が発生しました。
「見れない。動作確認ができない。遊べない」
落ち物パズルのコードは、リポジトリのindex.htmlというファイルに書かれています。
index.htmlというのは、Webページの本体のようなファイルです。パソコンで開発をするときは、「完成した」と言われたらindex.htmlを開けば動作確認ができます。
しかし、スマホだと、index.htmlを直接開く方法がないのです。
コードはできた（らしい）のに、動くかどうか確認できない。
いくつか方法はあると思いますが、私が選んだのはGitHub Pagesを使う方法でした。
GitHub PagesからアプリをWebサイトにに
GitHub Pagesは、GitHubにあるリポジトリの中身をそのままWebサイトとして公開できる機能です。
公開してしまえばスマホのブラウザからアクセスして動作確認やプレイができます。
ただし、GitHub Pagesを無料で使うには、公開リポジトリにする必要があります。自分の開発したコードが世界中に大公開されてしまうのです。
本当は非公開リポジトリにしておきたかったので苦肉の策でしたが、動作確認のために一時的に公開リポジトリに変更することにしました。
ちなみに公開／非公開の切り替えはGitHubモバイルアプリからはできないので、Web版を開いて行いました。Pagesの設定も同様です。
設定を済ませて、ブラウザでアクセスしてみると、ちゃんと落ち物パズルが動いていました。
スマホ開発のまとめ
改めて、流れをまとめるとこうなります。
- ChatGPT でイメージ画像を作る（任意）
- GitHub でリポジトリを作る
- Claude にイメージ画像を渡して「作って」と頼む
- GitHub Pages で動作確認・公開する
パソコンがなくても、スマホとこれらのツールがあればゲームを作って公開するところまでできると分かりました。
※ちなみに、現在Neon StackはGitHub Pagesではなく、自分のサイトに移して公開しています。
最後に：たった10分で落ち物パズルが作れた理由
正直なところ、スマホから10分でゲームが作れたのは、AIの技術が進化した影響が大きいと思います。
スマホからゲームを作るにあたって、難しいことは何ひとつしていません。
「誰でも！超簡単！たった10分！スマホでOK！」と言いたくなります。
でもよくよく考えてみると、AIだけの力ではない気もしています。
- GitHubと連携させること
- 自分好みのデザインで作らせること
- 完成したものをブラウザで開くこと
こうした段取りは、3ヶ月前の私には絶対にできなかったからです。
少しばかりの開発経験が、今回の開発に活きたことを実感。自分の成長を感じられる落ち物パズル制作となりました。
そんなスマホで作った落ち物パズルは、広告なしで快適に遊べます。