猫が宇宙を漂うサイト「ネコスペース」を作りました。
クリックすると、猫がぽーんと飛んでいく。長押しすると、くるくる回る。つかんで投げれば、別の猫にぶつかって跳ね返る。
スコアも、勝ち負けも、クリア条件もありません。
猫を触って、動きを眺めて、ぼーっとするだけのサイトです。
「やっぱこれからの時代、猫だよ」
きっかけは、猫好きな上司からの依頼でした。
上司は普段から「やっぱこれからの時代、猫だよ」とよく話します。
そこまで言うなら、猫に地球上だけでなく宇宙まで進出してもらおう。そんな流れで、猫による宇宙侵略が始まりました。
もっとも、完成した画面に侵略らしい緊迫感はありません。猫たちは無重力空間で、好き勝手にふわふわしています。
頼んできた人は、癒やされたいのかもしれない
企画を考えながら、「これを頼んできた上司は、もしかして癒やされたいのでは」と思いました。
そこで今回は、無理にゲームへしないことにしました。
何かを倒す必要も、誰かと競う必要もありません。高い点数を取るために集中する必要もありません。
操作に意味はあるけれど、目的はない。触ると何かが起きるけれど、結果を求められない。
たまには、そんな意味の分からないサイトがあってもいいと思いました。
ゲーム性がないから、簡単とは限らない
作る前は、ゲームよりシンプルにまとまる気がしていました。
しかし、スコアやルールがないぶん、「どこで、何を起こせば楽しいのか」を決めるのが難しくなりました。
ゲームなら、障害物を避ける、敵を倒す、ゴールを目指すといった理由をもとに動きを決められます。今回は、その基準がありません。
猫がただ漂うだけでは、数秒で見終わってしまいます。反対に、派手な演出を増やしすぎると、癒やしから遠ざかります。
そこで「遊び方を説明しなくても、つい触りたくなるか」を基準にしました。
- クリックすると、猫が弾かれて光る
- 長押しすると、その場でくるくる回る
- ドラッグすると、猫をつかめる
- 離すと、その勢いで飛んでいく
- 猫同士がぶつかると、跳ね返って火花が散る
クリックした猫が、ぽわぁ……と光る。冷静に考えるとかなりシュールです。
でも、単調な操作から少し予想外のことが起きると、それだけで触る理由になります。
学生時代の猫が、宇宙へ行った
猫のベースには、専門学生時代にBlenderで作った3Dデータを使いました。
形は同じですが、毛色を変えて何種類か展開しています。色を考えるときは、これまでの作品に登場した猫のキャラクターも参考にしました。
Three.jsとBlenderは、どちらも専門学校で触ったことがあります。当時のデータを現在のWeb作品へ持ってこられたのは、少し不思議で面白い体験でした。
以前から、表示するだけではなく、もっとアクション的な要素を足してみたいとも思っていました。
モデルを眺めるための3Dではなく、つかむ、投げる、ぶつけるための3D。今回のサイトは、その実験にもなりました。
猫同士がぶつかると、宇宙に奥行きが生まれた
一番気に入っているのは、猫が壁や別の猫にぶつかって跳ね返る動きです。
最初の猫たちは、互いに干渉せず、すり抜けていました。それでも3Dモデルは回転し、画面の手前や奥へ移動します。
ただ、同じ場所にいるはずなのに何の影響も与え合わないため、どこか背景映像のように見えました。
猫同士の衝突を追加すると、1匹を投げた先で別の猫が跳ね、そこからさらに動きが広がるようになりました。
目の前にあるのは同じ画面ですが、猫たちが同じ空間を共有しているように感じられます。ここで初めて、Three.jsを使った良さがはっきり出たと思います。
画面の端で跳ね返る処理も同じです。猫が外へ消えないための対策でありながら、壁に当たって回転する新しい動きにもなりました。
不具合を防ぐための処理が、そのまま遊びになる。この作品らしい部分です。
癒やしには「何も起きない時間」も必要だった
サイト全体は、暗い宇宙と淡い星の光を中心にしました。
情報をたくさん置かず、タイトルと短い説明だけを表示しています。猫の動きも、普段はゆっくりです。
触れば反応する。でも、触らなければ勝手に漂い続ける。
これは、デジタルの中でやる、少し矛盾したデジタルデトックスです。
短い動画を次々に送るのではなく、同じ画面を眺める。何か役立つ情報を得るのではなく、猫が回っているのを見る。
「何も起きない時間」を退屈として消すのではなく、作品の一部として残しました。
今回、AIに任せたこと
AIには、Blenderのベース素材から毛色違いを展開する作業や、慣性、画面端の跳ね返り、猫同士の衝突などの調整を手伝ってもらいました。
ただ、これまで作ったゲームと比べると、AIとのやり取りは少なめでした。
ゲーム性が低いため、得点、失敗条件、難易度、攻略方法のような調整がありません。AIに実装してもらう機能も、自然と絞られました。
一方で、「何を足せば楽しくなるか」は、AIに任せきれませんでした。
猫を光らせるのか、回すのか、ぶつけるのか。どれくらい動かすと癒やしを壊すのか。最終的には、実際に触りながら決める必要があります。
Deep Researchに頼るほど、触ることを忘れやすい
今回、ゲーム性はないけれどギミックがあるサイトを作る難しさを感じました。
次に同じ種類のものを作るなら、似た作品をもっと自分で触って、知見やアイデアを増やしてから始めたいと思います。
言葉にすると、とても当たり前です。
ただ、AIのDeep Researchを使えば、多くの事例や考え方を短時間で集められます。その便利さに慣れるほど、実際の作品を触って、自分の感覚で確かめるという初心を忘れやすくなっていました。
調べることと、体験することは違います。
特に今回のように「なんとなく気持ち良い」「意味はないけれど触りたくなる」を作る場合、最後に頼れるのは自分の指先でした。
ぼーっとするために、画面を開く
ネコスペースは、集中して攻略するゲームではありません。
少し疲れたときに開いて、猫をつつく。何匹かぶつけてみる。あとは勝手に漂う姿を眺める。
縦動画ばかり見ずに、たまには同じ画面をぼーっと見てください。
心穏やかに、少しでも癒やされてもらえたらうれしいです。
🐱 でぶねこ｜猫好きエンジニア
週2ペースで、ゆるくネタ系Webアプリを作っています。
よければXもフォローしてください🐾