2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

「通信遅延5分」を仕様にしたWebアプリ。火星との距離をUXに落とし込むまでの思考プロセス

2
Posted at

はじめに

こんにちは。現在、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アプリ」があってもいい。
火星との通信に思いを馳せながら、ゆっくりとチェスの駒を動かす。そんな「待機時間」を楽しむ体験が、今の便利な世の中には少しだけ足りないのかもしれません。

もし興味があれば、ぜひ火星の彼方へ一手、打ってみてください。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?