はじめに
こんにちは。現在、140種類以上のWebツールを公開している「TOOL FARM」という個人開発サイトを運営しています。
最近、このサイトに「Mars Chess(火星チェス)」という一風変わったツールを追加しました。見た目は普通のチェスですが、最大の特徴は「一手指すと、相手が指せるようになるまで5分間待たされる」という、現代のWebサービスとは逆行するような「重い」仕様です。
なぜ、あえてこんな不便なものを作ったのか? そこには、個人開発における技術的制約をアイデアで楽しんだ、泥臭い思考プロセスがありました。
始まり:「めちゃくちゃシンプルな対戦できるゲームがほしい」
この「TOOL FARM」というサイトは、「ログイン不要」「1ページで完結」「誰でもすぐ使える」という軽快さをコンセプトにしています。
中には息抜きとしてちょっとした遊びのコンテンツやミニゲームもあったりします。
そんな中、「誰かと対戦できるゲームを作りたい」という欲求が湧いてきました。しかし、リアルタイムなオンライン対戦を真面目に実装しようとすると、複数の壁が立ちはだかります。
複数人で遊べるゲームを作る以上、本来はこうなります。
- ユーザー識別
- セッション管理
- サーバーでの状態管理
- リアルタイム通信(WebSocketなど)
これらを実装すれば「普通のオンラインゲーム」は作れます。でも今回作りたいのは、もっと軽くて「誰でもふらっと触れる遊び」でした。
SPAっぽくしすぎない
複雑なAPI設計をしない
状態を持ちすぎない
でも複数人でゆるく対戦ができる仕組みはないか?
この矛盾する問いが、開発のスタート地点でした。
逆転の発想:「物理的に時間を空ければいいじゃない」
「ログインさせずに別の人に手番を渡す」ための技術的な課題は、「連続して同じ人間(ブラウザ)が操作できてしまうこと」をどう防ぐか、という点でした。
CookieやIP制限なども考えましたが、どれもコンセプトに合わず、また完璧ではありません。
ここで一度行き詰まってしまったのですが、問題をシンプルに考えると、
「1人が連続で操作できない仕組み」
つまり、
「自分が動かしたら次は“別の誰か”が動かす」
という状態を作れればいい。
実はそれだけのことなんじゃないか? そこで、ふとある考えが浮かびました。
「ワンアクション終えたら、強制的に待ち時間を発生させればいいのでは?」
例えば、一手指したらその盤面を「ロック」してしまい、数分間は誰にも操作させない。その時間があれば、別の誰かがそのページを訪れ、手番が回ってくるのを待つことができる。
「5分間」という時間を空ければ、同一人物が粘着して指し続けるのをある程度抑制できますし、何より「ゆるい非同期の対戦」という、昔のBBSにあった「しりとり」のような温度感のコミュニケーションが生まれるのではないか。
これが、今回の最大のブレイクスルーでした。
「クオリティ」と「不便さ」の両立
「5分待たせる」という不便な仕様を受け入れてもらうには、大前提としてアプリ自体のクオリティが高くなければなりません。
まずは、Vue.jsもReactも使わないバニラJS(あるいはシンプルなライブラリ)で、「ヌルっと動く、適度に心地よいチェス」を作り込みました。
- 軽量でストレスのない表示
- シンプルかつわかりやすいデザイン
- コマを動かす時のちょっとしたアニメーション
ベースの体験を磨くことで、ユーザーに「もうちょっと付き合ってみるか」「もう一手だけ動かしてみるか」と感じてもらうためです。
最後のパーツ:不便さを「ロマン」に昇華させる
さて、ベースのチェスは完成し、5分の待ち時間も実装できましたが、ただ「5分待ってください」と表示するだけでは、ユーザーはストレスを感じて離脱してしまいます。
なので、この5分間に遊び心を与えようと考えました。
「なぜ5分待つのか?」
「……そうだ、宇宙と通信していることにしよう!」
SF映画やニュースでよく聞く、宇宙探査機との通信ラグ(ちょうど大物宇宙SF映画も公開されていました)。地球からの命令が届くまでに何分もかかる、あの「もどかしくも壮大な距離」をコンセプトに据えることにしました。
「これは単なるチェスではない。火星と地球の距離を越えて通信しているのだ(という設定)」
調べてみると、驚くべき都合の良さが見つかりました。
地球と火星の距離は、光の速さ(光速)で片道約4分〜24分かかります。
「5分」という待ち時間は、まさに火星が地球にかなり接近している時期(最接近期)のリアルな通信タイムラグに近かったのです。これを使わない手はありません。
- UI: 待ち時間の間、盤面の上部に「通信中...」というステータスが、浮遊するようなアニメーションで表示させる。
- テキスト: ルール説明欄に「地球と火星の距離は4〜13光分であり、この5分というラグは最接近している時の距離である」という豆知識を追記。
という要素で言い訳が成り立ちました。
結実: Mars Chess の誕生
こうして、ただの「不便な仕様」は「火星チェス」というコンセプトに結実。
スタート地点の矛盾を煮詰めていった結果、
- 見知らぬ誰かと盤面を共有する
- 自分の一手が未来に影響する
- 次に誰が動かすかはわからない
という、非同期でつながるボードゲームのようなものが完成しました!
技術的にはシンプル
技術的には、サーバーサイド(PHP)で最後に移動された時間を保存し、それから300秒経過するまではAPIが最新のステートを返さない、という非常にシンプルな排他制御だけです。
でも発想を少し変えるだけで、
- ログイン不要
- サーバー最小構成
- 1ページ完結
という制約の中で「マルチプレイヤー風」の体験が実現できました。
おわりに
個人開発において、大きなリソース(DBや認証サーバー)を使えないことは一見「弱み」に見えます。しかし、その制約を逆手に取り、アイデアひとつで「独自のUX(ロマン)」へと昇華させるプロセスこそが、個人開発の醍醐味だと感じました。
「遅いWebアプリ」があってもいい。
火星との通信に思いを馳せながら、ゆっくりとチェスの駒を動かす。そんな「待機時間」を楽しむ体験が、今の便利な世の中には少しだけ足りないのかもしれません。
もし興味があれば、ぜひ火星の彼方へ一手、打ってみてください。