何でも人狼風ゲームにできちゃうWebアプリケーションをリリースしました（モードレスなUIへの挑戦）
この記事は何
RustでWebアプリケーションを作ってリリースしたのでざっくりとした紹介とアプリのこだわりポイントであるモードレスなUIデザインについて書いていきます。
アプリケーションの紹介
これを作りました
これは何？
簡単に言うと、みなさんが普段遊んでるゲームに正体隠匿（自分の正体を隠しながらゲームを進めていくこと）的な要素を手軽に追加できるWebアプリです。
ホストが自由に設定した配役から各プレイヤーのブラウザにランダムかつその人のみに送信します。
ホスト及びプレイヤーは自分のブラウザから部屋のURLにアクセスできれば良いのでオンサイト・オフサイト問わず簡単に利用できます。
想定されるユースケース
- スプラトゥーンなどのチームで協力するようなゲームにおいて、人狼として味方をわざと負けさせようとするプレイヤーを1人紛れ込ませてプレイする
- Among Usに自分達の考えたオリジナル役職を追加する
作り直そうと思ったわけ
余談ですが実は1年前にも同じようなアプリを作っていました。 しかしながら、開発速度重視・学習目的で柔軟性の低い設計・ライブラリ選定をした事によりUIを改善したり機能を追加することが難しくなってしまったため0から作り直すことにしました。
アプリケーションの構成
アプリケーションの構成は至ってシンプルです。
バックエンドFirestore一本で、静的なHTMLからfirestore上のデータを購読することでリアルタイムに状態を画面に描画させています。
主な採用技術
- Firestore
- Rust
- Yew
- TailwindCSS
モードレスなUIへの挑戦（現在も試行錯誤中）
今回、アプリを作る上で挑戦したことの1つに「モードレスなUIの実現」があります。
モードレスって？
モードレスとは何かを説明する前にモードについての解説として以下を引用します。
UIにおけるモードとは、ある操作の持つ意味が状況に依存して変化し、それによってユーザーに対して、現在可能な操作を限定したり、操作の順序を固定的に強制する状態のこと
ヒューマンインターフェース ガイドライン/モードレス（ソシオメディア）より
モードレスについて例えるならオープンワールドなRPGというと分かりやすいかもしれません。
つまりアプリ側が決めた順序や制約の中でユーザーがアプリを操作するのではなく、開かれた選択肢の中でユーザーが自分の好きなように目的を達成していけるようなUIのことを言います。
因みに対になる語としてモーダルがありますがこちらの方が有名ですね。モーダル（ダイアログ）という呼ばれ方は、前面にダイアログを表示しユーザーにモードに入らせるというUIの役割から来ています。
なぜモードレス？
「なんでも人狼」において、ホストとなるユーザーがすべきタスクには主に2つあります。
- 部屋のURLを共有してユーザーを集める
- 役職を設定する
モーダルにこれらのタスクを実行できるUIを考えるのであれば、ユーザーを集める→配役を設定する もしくはその逆の順番でホストに画面を表示し1つずつタスクをこなさせるようなUIになるかと思います。
しかしながら、「ユーザーを集める」と言うタスクはホストの作業というよりは集まる他のプレイヤーの作業なのでホストはその間待つことしかできません。
モーダルなUIではユーザーはモードによって決められた行動しか取れないためです。
では、モードレスなUIならどうなるでしょう。
ホストは「ユーザーを集める」というタスクをこなしながら「配役を設定する」タスクを行えます。
具体的にはホストは以下のようにタスクをこなします。
- 部屋のURLを共有
- 役職の設定を入力（この間に他のプレイヤーが部屋に入ってくる）
- 部屋の締切
他のプレイヤーが部屋に入ってくる間、役職の設定を入力できるので効率的です。
また、一回行った操作を見直し修正するために前の画面に戻ったりできます。
これがこのアプリをモードレスなUIにしたいモチベーションです。
モードレスの難しさ
魅力的なモードレスUIですが、実装してみるとかなりデザインの難しいUIであることが分かってきました。
考慮すべき状態が増える
まず、各UIで考慮すべき状態のパターンが増えます。
例えばモーダルに実装していた場合は、ユーザーを集めるUIにおいて「既にユーザーの入室を締め切っている」という状態を考慮する必要はありませんでした。
なぜなら部屋を締め切った瞬間に次の画面に移動してしまい、ユーザーは自由にその画面に戻ることができないからです。
しかしながら、モードレスにすることであらゆる状態においてそのUIが表示される可能性を考慮しなければならなくなりデザインすべきパターンと実装量が単純に増えました。
UIの遷移先が自明ではなくなる
また、「次に何をするか」がユーザーの意思に委ねられるため、何かのタスクを完了した後の遷移先が自明ではなくなりました。
モーダルなUIならば「Aが終わった後B」と言った具合でアプリケーション側の制約で次の遷移先が決まりますが、モードレスの場合Aが終わった後にBに行くかCに行くかはアプリケーションには判断できないため「1ステップ増やしてユーザーに自由に遷移させる」もしくは「自明ではない遷移を強制させる」という実装をする必要があります。
どんなUIができたか
ホストの操作UIの上部に次のようなナビゲーションを配置しました。
これによってホストはどのような状態でも別のUI（一番右のボタンを除いて）に遷移でき、1つのタスクが完了する前に次のタスクに切り替えができるようにしています。
逆にホストは何も考えずモーダルなUIとして決められた順序でタスクをこなしていくことも可能です。
課題点として、ある程度レールを敷いてユーザーを導くこととモーダレスの自由度を共存させようとしているため結果中途半端で直感に反するUIになっています。
モードレスUIの難しさを綺麗に解決できていないのは自分のデザイナーとしてのスキルの低さから来るものであり、ぜひこれからスキルを磨いて改善していきたいところです。
振り返り
個人的にはチャレンジングな要素が沢山あったアプリ作成でした。
ただ、やはり「あれもこれもやりたい」に対して業務外の時間でのデザインや実装が追いつかなかったなという想いがあり、これからもしこのアプリを誰かに使ってもらえるのであればどんどん改善していきたいなと考えてます！
Discussion