【遊べる】日向葵ちゃんの床材ためこみゲーム｜ChatGPTとClaudeでブラウザゲームを作ってブログに置くまで

うちのキンクマハムスター、日向葵（ひまわり）ちゃんは、ほっぺに床材をぎゅうぎゅうに詰めて巣へ運びます。その姿をそのままゲームにしました。

アイデアとイラストはChatGPTと相談しながら、ゲームとして動く形にするところはClaudeと一緒に作っています。

まずは最新版で遊んでみてください。

最新版

遊び方

• 押したまま動かした場所へ日向葵ちゃんが歩いて（PCはクリックしたまま、または矢印キー）、床材を拾います
• ほっぺを詰めすぎると、おうちの入口で「むぎゅっ」と引っかかって床材を落とします
• 5回運んだらおやすみ。持ち帰った床材の量で、寝心地が決まります

この記事では、このゲームがどうやってできたのかを、版ごとに残していきます。改良したら、新しい版を冒頭に置いて、前の版はその版の章で遊べるようにしておきます。

このゲームを作ろうと思ったきっかけ

Xのタイムラインを見ていて、最近よくゲームが流れてくるというポストに貼られていたURLから簡易的なゲームを遊んでみました。文面的にタイムライン上で動くゲームかと思っていたのですが、ブラウザで動いていることが分かり、ChatGPTにこういう埋め込みゲームはブログに置けるか聞いてみました。

できると返ってきて、ChatGPTでも作れると分かりました。ただ、ChatGPTには動画からいくつもイラストを生成してもらわなければならないため、リソースの節約も兼ねてプログラムの作成はClaudeに任せることにしました。

ちょうどHIVANTの動画作成用に日向葵ちゃんをモデルに作成したハムスターイラストをChatGPTに作ってもらっていたので、これをそのまま使えるのではないかとClaudeに渡して作ってもらいました。

日向葵ちゃんは、ラーメンをすするように、ちゅるちゅると床材を吸い込みます。ほっぺがパンパンになっても、まだ詰めようとします。

そんな姿がとても印象に残っていたので、ゲームにできないかなと思ったのがこのゲームのきっかけです。

プログラミングは高校時代に独学で勉強を始め、大学では自分の学科のプログラミングの授業が二年からだったため、一年の時に他学科で履修して学びました。新卒の会社にはプログラマー志望で入りましたが、開発に配属にはならず、業務としての経験を積めないまま開発者としての夢は諦めていました。

ゲームの流れは、ChatGPTと話しながら決めました。

1. 床材を集めて、ほっぺにため込む
2. おうちに持ち帰る。ため込みすぎていると、入口に引っかかって床材を落とす
3. 何回か往復したら、おやすみ。持ち帰った量で、睡眠の快適さが変わる

「詰めすぎると入口で引っかかる」は、ただ集めるだけではなくゲーム性を持たせたかったことと、いつもほっぺたをパンパンにしてライオンみたいになっている日向葵ちゃんを見ていて、入り口の小さなもう一つの隠れ家にはあの状態では入れなさそうだと思っていたことから連想しました。

ChatGPTとClaudeの分担

	ChatGPT	Claude
担当	ゲームのアイデア出し、日向葵ちゃんのイラスト	ゲームのプログラム、ブログに貼れる形への作り直し
使ったもの	日向葵ちゃんの写真や動画	ChatGPTで作ったイラスト、ゲームの流れの説明

イラストは、日向葵ちゃんの写真や動画をもとにChatGPTで作りました。

最初にHIVANTの動画内で使うイラストを作る時に日向葵ちゃんの写真を何枚か渡し、そこから2枚のイラストを生成してもらいました。

今回ゲーム用にさらに表情差分などを作るために、新たな参考動画を渡しつつ、イラストのテイストは最初に作ってあったイラストを改めて渡し、基準にしました。

Claudeには、ゲームの流れを文章で説明して、イラストを渡しただけです。どんな風に頼んだかは、別途AIとのゲーム制作についての有料noteを書く予定なので、そこでプロンプトなども含めて公開していきたいなと思っています。

第1版：まずは最後まで遊べる形に

※遊び方の文言は当時のままです

相談してから十数分で、ブラウザで動いた

Claudeに相談したのは、10月16日の夜中1時42分ごろです。ChatGPTと考えたゲームの流れを伝えて、イラストを2枚渡しました。

十数分後には、床材を集める、入口で引っかかる、おやすみ、までが一通り遊べる試作ができていました。
本当に感動しました。自分自身で叶えるのは諦めていた夢が、一瞬で形になったのです。

もちろん、私の技術ではありません。しっかりと学び続けている開発者の方々に追いつけるなんて思ってもいません。ですが、自分が頭に描いたイメージ、こんなものがあったらいいなという妄想が、あっという間に形になったのです。

「これは世界が一気に開けたぞ」そんな希望にワクワクして、真夜中だというのに眠れなくなりそうでした。

この時点では、ほっぺがふくらんだ絵はまだありませんでした。そこでClaudeは、ふつうの立ち姿にほっぺのふくらみを重ねて描く仮の表示にして、あとから絵を差し替えやすい作りにしてくれました。

第2版：歩く・かき集める・くわえる姿が加わった

※遊び方の文言は当時のままです

追加のイラスト3枚で、動きが出た

ChatGPTに追加で作ってもらったのは、次の3枚です。

• 床材をかき集める姿
• 床材をくわえて、ほっぺがふくらんだ立ち姿
• ほっぺがふくらんだまま、横向きに歩く姿

これを渡すと、歩いているときは横向き、床材を拾った瞬間はかき集める姿、ほっぺがたまって立ち止まったときはくわえた姿、と場面ごとに切り替わるようになりました。

最初に動くものが出来た時点でも感動モノでしたが、さらに動きが加わっていよいよ「ゲームを作ってる」という実感が湧いてきました。

ブログに置くまでにつまずいたこと

ここからが、思ったより大変でした。同じことで困っている人の参考になればと思うので、つまずいた順に書いておきます。

そのまま貼ると、ページ全体がスクロールしなくなる

最初のゲームは、1つのページで遊ぶ前提で作っていました。そのため、ブログ記事に貼ると、記事全体がスクロールできなくなったり、画像が読み込めなかったりする作りでした。Claudeに聞いたところ、ゲームの枠の中だけに見た目の設定が効く「ブログ貼り付け版」を別に作ってくれました。
おかげで今のように記事の中に埋め込んで途中経過のバージョンも実際に遊べる状態になっています。

プレビューで「あそぶ」が反応しない

WordPressのカスタムHTMLブロックに貼ると、編集画面のプレビューでは絵が出るのに、記事のプレビューでは何も表示されず、「あそぶ」を押しても動きませんでした（朝7時11分ごろ）。

原因は、WordPressが保存のときに、貼ったプログラムの一部を書き換えてしまったことだと考えられます。ゲームの本体を改行のない1行にまとめ、書き換えられやすい記号を使わない形に変えてもらったところ、遊べるようになりました。

今度は画像が出ない

遊べるようにはなったのに、今度は画像が表示されません。画像を置いたフォルダの指定が、実際の場所と違っていたのが原因で、これはClaudeの設定ミスでした。指摘して直してもらいました。

1行だと、自分では直せない

動くようにはなったものの、全部が1行だと、回数や時間を変えたいときに自分では触れません。そこで、書き換えてもいい設定（画像の場所、おでかけ回数、入口の大きさなど）だけを先頭に1行ずつ、説明つきで並べてもらいました。ここの数字を変えるだけで、ゲームに反映されます。

朝7時22分ごろ、記事の中でちゃんと遊べるようになりました。起きてきたのが6時過ぎだったので、朝の作業は1時間もかかっていないと思います。その間に、追加のイラスト用に動画を切り抜いてChatGPTに渡したり、埋め込み方を確かめたり、画像をアップロードしたりを並行して進めました。PCでもスマホでも、ブラウザで動くことを確認できました。

第3版：入口の「むぎゅっ」と寝姿

入口で引っかかる場面を、横から見た断面に

ChatGPTに、ほっぺに詰め込みすぎて「むぎゅっ」と引っかかった絵と、寝ている絵を追加で作ってもらいました。

むぎゅっの絵を見て、入口を横から見た断面のような場面にして、引っかかったらこの絵に切り替わるのが合いそうだと思いました。

このイラストの元にした動画は、まさに日向葵ちゃんが床材をほっぺたに詰め込み過ぎて回し車の後ろの狭いスペースを通る時に途中でつっかえて、そのまま寝てしまった時に撮影したものだったからです。

起き上がって再び抜け出そうとしてもがいている時に見せた表情なのでぴったりだと思いました。

Claudeに伝えると、入口に着いたところで横から見た場面に切り替わるようになりました。ほっぺが入口の大きさを超えていると、むぎゅっの絵になって、頭が入口の上の壁につかえます。ぷるぷるしたあとに床材が飛び散って、するっと中に入ります。

おやすみ画面に寝姿

おやすみ画面では、集めた床材の巣の上で日向葵ちゃんが眠るようになりました。第2版までは結果の表示が画面をほとんど覆っていたので、結果を画面の下にまとめて、寝顔が見えるようにしています。

版を並べても動くように作り直した

この記事のように、1つの記事に版を並べたいと伝えると、Claudeから注意がありました。それまでの作りのままだと、並べたときに矢印キーが両方のゲームに効いてしまうそうです。

そこで、版ごとに独立して動き、最後に触ったゲームだけがキー操作を受け取る作りに直してもらいました。見えていないゲームは止まるので、記事が重くなりにくくなっています。第1版と第2版も、中身はそのままで、この作りのものに貼り替えています。

HIVANTとのつながり

日向葵ちゃんの日常を描いているショート動画シリーズ「HIVANT」があります。

日向葵ちゃんがハムスター界で暗躍する謎の組織『非番』の一員であることが明らかになり、その行動の意味を、かいぬしが解析AI『N.I.K.I』と一緒に調べていくストーリーです。

HIVANT公式ページ

最初に使った2枚のイラストは、もともとHIVANTのとあるシーンで使用するためにChatGPTに作ってもらったものでした。

このゲームも、少しずつHIVANTの世界とつながっていく予定です。版を重ねるごとに、どこがHIVANTとつながったのか、この記事でちょっぴり裏側もお見せしていきます。

これからやりたいこと

このゲーム一本で終わりではなく、連動したゲーム群をいくつか展開していきたいというのが今の展望です。
ミッションをうまくこなせた人にだけ続きが用意されたり…？

改良したら、この記事に版を追加していきます。

更新履歴

• 2026/10/16　第1版（床材を集める、入口で引っかかる、おやすみまで遊べる）
• 2026/10/16　第2版（歩く・床材をかき集める・くわえる姿のイラストを追加）
• 2026/10/16　第3版（入口を横から見た「むぎゅっ」の場面、寝姿のイラスト）
• 2026/10/16　この記事を公開