はじめに
はじめまして、ねこバタと申します。
VR法人HIKKYにてUI/UXデザインチームに所属しております。
この記事はHIKKYアドベントカレンダー23日目の記事となります。
UI/UXデザインチームは、主にWebサイトやアプリケーションのUI/UXに関するデザインの策定と実装を担っています。
今回は、私が実装を担当したVket 2023 Winterにて行われた謎解きイベント「シブハラ猫あつめ謎解き大作戦」のサイトの制作についてお話させていただきます。
 |
|---|
シブハラ猫あつめ謎解き大作戦とは
シブハラ猫あつめ謎解き大作戦は、バーチャルマーケットにおけるリアルイベントの企画の一つとして開催されました。
Vket 2023 Summerで行われた「パラリアル秋葉原からの脱出」の流れを組む謎解きイベントです。
 |
|---|
| パラリアル秋葉原からの脱出 |
前回の「パラリアル秋葉原」ではVket Cloudを利用したゲーム内世界とリアル世界とを行き来しつつ一本のストーリーを体験していただく内容となっていましたが、今回の「シブハラ猫あつめ」では渋谷と原宿の２つの拠点をそれぞれスタートとゴール地点として、途中でどの謎を解くかはユーザーの方に任せて進行するという内容になっています。
これは、参加のハードルを低くし、軽い気持ちで謎解きイベントに参加してもらえばという意図によるものです。
 |
|---|
| シブハラ猫あつめ謎解き大作戦：謎画面と会話シーン |
 |
|---|
| シブハラ猫あつめ謎解き大作戦：マップ画面 |
サイト制作の流れ
「シブハラ猫あつめ」のWebサイトはFigmaでプロトタイプの作成を行ない、ユーザーテストを経てデザインを確定させ、確定したデザインに基づいてエンジニアが実装を行うという流れで製作しました。
デザイン策定
Figmaについて
UI/UXデザインチームではデザインツールとして2023年からはFigmaを使用することになりました。
元々はAdobe XDを使用していましたが、Figmaにすることで以下のようなメリットがありました。
- プロジェクトの共有が容易に行えるようになった
- プロジェクト管理が楽になった
- アセットのエクスポートが楽になった（ような気がする）
Figmaにはチームライブラリなどの便利な機能もありますが、まだ十分に使いこなせているとは言えない状態なので、チームメンバー皆で勉強しながら習得していきたいところです。
デザイン策定
Figmaでは最初にワイヤーフレームを作成し、それを元にしてプロトタイプを作りブラッシュアップしていくという方法を取っています。
なお、今回の「シブハラ猫あつめ」はワイヤーフレームや各ページの遷移、デザインコンポーネント等諸々の要素をすべて一つのページ内で完結させています。
 |
|---|
| Figmaで作成されたワイヤーフレーム |
プロトタイプがある程度進んだ段階でプロジェクトメンバーでプロトタイプを見ながらあーでもないこーでもないとすったもんだしながら、デザインや謎、ストーリーのアイデア等を話し合って詰めていきます。
なお、プロジェクトメンバー間ではミーティング以外にコメントを積極的に活用してコミュニケーションを行なっています。
 |
|---|
| Figmaでのデザインの一部 |
デザインの実装
諸々の事情によりフロントエンドの実装期間を長く取ることができなかったため、以下のような方法で工数の削減を行ないました。
- 前回の「パラリアル秋葉原」で作成したコンポーネントの再利用
- ユーザーをスマホまたはタブレットに限定してデザインの実装を行う
- テキスト類をFigmaからエクスポートして画像化して使用する
なお、今回の「シブハラ猫あつめ」では、前回の「パラリアル秋葉原」で作成したコンポーネント類を拡張・発展させ、より汎用性の高いシナリオ進行システムを実装しています。
「パラリアル秋葉原」ではVketちゃん1号またはVketちゃん2号との単体の会話のみでしたが、「シブハラ猫あつめ」では複数のキャラクタ同士の掛け合いによるストーリー展開が行われています。
そのため、会話に参加しているキャラクタや感情アイコン・選択肢・飛び先などを簡単に指定してシナリオを再現できるようにしました。
 |
|---|
| シナリオデータスプレッドシートとスクリプト内への実装 |
ユーザーテスト
社内体験会
「シブハラ猫あつめ」はリアルイベントの企画の一環のため、実際にユーザーに触れてみてもらうのが一番ということで、一通りできた段階で社内メンバーに遊んでみてもらいました。
必ずしも謎解きに慣れているメンバーばかりではないため、「意味が分からない！！」など率直な意見をもらえるのがありがたいところです。
 |
|---|
| 社内メンバー体験会 |
Figjamでのレビュー会
また、ユーザー体験会とは別にチーム内でもレビュー会を実施しました。
チーム内では普段オンラインコミュニケーションが主となっているため、ボイスチャットをしながらFigjamを利用してレビュー会を行ないました。
 |
|---|
| Figjamレビュー会 |
 |
|---|
| 日本語指摘コーナー |
イベント本番
当日はサイトで掲載されている情報に間違いや説明不足な点などがあり、ご迷惑をおかけしてしまいましたが、一部を除いてプレイ不能になるなどのトラブルはなくイベントを行うことができました。
一部発生したトラブル（システム面）
iOSでコードリーダーを使用した際にコードリーダのアプリ内ブラウザからアクセスすると謎解きの進行データが保存されないという問題が発生しました。
この点については今後同様のイベントを行う際に案内を強化するなどしていきたいと思います。
最後に
謎解きを遊んでいただいた皆様、本当にありがとうございました。
また、アンケートやSNS等で様々なご意見・ご感想をいただき、チームメンバーおよびプロジェクトメンバー一同、とてもありがたく思っています。
今後もユーザーの方に楽しんでもらえるサイトやサービスを提供できるよう、がんばっていきたいと思っておりますので、今後ともどうぞよろしくお願いします。
最後になりますが、まーにゃを始め猫達が可愛いので、よかったらサイトを見てください！！
猫は正義！！！！
 |
|---|
| シブハラ猫あつめ謎解き大作戦 |