【PC不要】スマホ1台で落ち物パズルゲームを開発する方法！Claudeアプリ活用術

こんにちは。麗です。

先日、無性にテトリスがやりたくなりました。（私はパズルゲームが大好物なのです！）

AppStoreからスマホにアプリを入れて遊んでいたのですが、広告が多すぎる！ 　

私はテトリスの世界に没頭したいのに、1ステージごとに広告を見ないといけなかったり、多いものだとプレイ中にもいきなり割り込んできたり💦

「じゃあ自分で作ろう！」

「ないものは自分で作る」という精神で開発作業をしている私は、自作することを考え始めました。

スマホから落ち物パズルを開発してみた

本当は「明日、パソコン開いたら作ってみよう」と考えていたのですが、私の中に湧き上がるパズル欲（？）は待てませんでした。

「どうしても、今すぐやりたい！」という一心に支配される中、ふと、スマホでも作れるんじゃないかと思いついたのです。

そして、あっという間に落ち物パズルが出来上がりました。

ブロックが落ちてきて、回転して、列が揃ったら消える。

ちゃんと、落ち物パズルになっています。

もちろん広告もないし、動きもサクサクです。

スマホからの開発に使ったもの一覧

まず全体像です。

使ったのはこれだけです。

全部スマホのブラウザとアプリだけで使えます。

ちなみに、今回はパソコンは使いませんでしたが、あったほうが断然便利というか、基本的にはパソコンからの開発を推奨します。

パソコンが使えないとき or 実験や学習目的で作るのは良いと思います。

手順① ChatGPTでイメージ画像を作る

最初にやったのは、パズルゲームの見た目のイメージ画像を作ることでした。

ChatGPTに「こんな配色で、こんな雰囲気のパズルゲームの画面」と伝えて、自分好みのデザインに近い画像を作りました。

ちなみに、この作業は必須ではありません。

なくても落ち物パズルは作れます。

ただ、完成イメージを先に用意しておくと「こういう見た目にして」と伝えやすくなるので、見た目にこだわりたい方にはおすすめです。

手順② GitHubでリポジトリを作る

次に、GitHubで「リポジトリ」を作りました。

GitHubはこのリポジトリをインターネット上に置いておけるサービスで、ここにゲームのデータを入れていきます。

スマホのGitHubアプリから、新しいリポジトリ「TETRIS」をひとつ作りました。

手順③ Claudeに落ち物パズルを作ってもらう

ここがメインです。

スマホのClaude アプリを開きます。

普段スマホアプリだと「チャット」を使っている人が多いのではないかと思いますが、今回使うのは「コード」の方です。

完全未経験の方であれば、たぶんこの辺りでつまずくのではないかと思うので、少し丁寧に説明します。

作業場所を選ぶ

「コード」を選んだあと、GitHubリポジトリ（今回は「TETRIS」）を選択します。

チャットと違って、GitHubリポジトリやローカルにあるフォルダなど、作業場所を指定してあげないと作業を始められません。

基本的には、開いているフォルダ（リポジトリ）の中でのみ作業をするのです。

指示を送る

手順①で作ったイメージ画像を添付し、こう伝えました。

（※当時、実際に送った文面そのままです）

これだけです。

するとClaudeから「操作はボタン式にしますか？ タッチ操作にしますか？」と質問がありました。

「両方」という選択肢があったので、両方を選んでみました。

そのあとはしばらく待ちです。

指示を送ってから数分待つと、落ち物パズルのコードが完成しました。

Claude Code が作ったコードは、そのままGitHubのリポジトリに保存されます。

手順④ 動作確認する（ここが一番悩んだ）

コードはできたっぽいのですが、ここで問題が発生しました。

「見れない。動作確認ができない。遊べない」

落ち物パズルのコードは、リポジトリのindex.htmlというファイルに書かれています。

index.htmlというのは、Webページの本体のようなファイルです。パソコンで開発をするときは、「完成した」と言われたらindex.htmlを開けば動作確認ができます。

しかし、スマホだと、index.htmlを直接開く方法がないのです。

コードはできた（らしい）のに、動くかどうか確認できない。

いくつか方法はあると思いますが、私が選んだのはGitHub Pagesを使う方法でした。

GitHub PagesからアプリをWebサイトにに

GitHub Pagesは、GitHubにあるリポジトリの中身をそのままWebサイトとして公開できる機能です。

公開してしまえばスマホのブラウザからアクセスして動作確認やプレイができます。

本当は非公開リポジトリにしておきたかったので苦肉の策でしたが、動作確認のために一時的に公開リポジトリに変更することにしました。

ちなみに公開／非公開の切り替えはGitHubモバイルアプリからはできないので、Web版を開いて行いました。Pagesの設定も同様です。

設定を済ませて、ブラウザでアクセスしてみると、ちゃんと落ち物パズルが動いていました。

スマホ開発のまとめ

改めて、流れをまとめるとこうなります。

パソコンがなくても、スマホとこれらのツールがあればゲームを作って公開するところまでできると分かりました。

※ちなみに、現在Neon StackはGitHub Pagesではなく、自分のサイトに移して公開しています。

最後に：たった10分で落ち物パズルが作れた理由

正直なところ、スマホから10分でゲームが作れたのは、AIの技術が進化した影響が大きいと思います。

スマホからゲームを作るにあたって、難しいことは何ひとつしていません。

「誰でも！超簡単！たった10分！スマホでOK！」と言いたくなります。

でもよくよく考えてみると、AIだけの力ではない気もしています。

こうした段取りは、3ヶ月前の私には絶対にできなかったからです。

少しばかりの開発経験が、今回の開発に活きたことを実感。自分の成長を感じられる落ち物パズル制作となりました。

そんなスマホで作った落ち物パズル「Neon Stack」は、広告なしで快適に遊べます。