春休み備忘録1日目:UXはロマン

# はじめに
　大学2年生の春休み期間に、知り合いの天才が突如毎日記事を書くと言い出したので、凡人の自分がやらないわけにはいかないと思い見切り発車で記事を書いています。大学からプログラミングを学び始め、ゲーム制作を1年ほど経験しただけの初心者プログラマーなので間違ったことを発言しているかもしれませんが、関係ないです。全て個人の意見です。自分のために書きます。対戦よろしくお願いします。

# 概要
　今回は関西最大級のハッカソンでデザイン賞をいただいた「KANSCREAM」のUXについて、拘ったところを重点的に述べていきます。

# ゲームについて
　まず、ゲームのアイコンが図1、ゲームの初期画面が図2になります。
　今回のゲームのコンセプトは「関西vs関東」で、6×6のオセロゲームをベースにしたKANSCREAMを作りました。関東は人口が多いため、初期状態から既に角を2つ取っています。しかし、関東人の中にも関西魂を持ったエセ関東人がいるため、ゲーム中に関西人陣営のプレイヤーが「なんでやねん」と叫ぶことで関東コマを関西コマにすることができます。

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853507/3d8b2687-7e7b-43fc-8dd2-f563214d8b9a.png)
図1 タイトルアイコン

![スクリーンショット 2025-02-26 1.11.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853507/db6ace8c-9fa9-4e59-b861-6b70338bee08.png)
図2 初期画面

## ゲーム性のUX
　このゲームの最大のゲーム性は、「プレイヤーがマイクに向かって叫ぶことで関西が有利になる」ところです。「なんでやねん」の叫びによって最大5枚の関東コマがランダムで寝返るようになっています。一見ゲーム性皆無のバカゲーのように思われるかもしれませんが、そうです、ゲーム性皆無のバカゲーです。私たちはゲーム性皆無のバカゲーを作りました。
　そもそも今回のハッカソンは約120人、30チームが参加していました。そんな中、ゲームクリエイターである自分ができることは「周りとは全く別の作品を発表する」、これだけでした。そこから、誰も考えないであろうプレイヤーの叫びという要素を取り入れ、バカゲーにすることで、何も考えずにとにかく笑えるようなゲームを作りました。オセロという誰でも知っている説明不要のゲームを採用し、通常8×8マスのゲーム盤を6×6マスに縮小することで、より頭を使わずゲームを進める目的もありました。ここでのUXとは、「プレイヤーが叫ぶこと」と「これまでの積み重ねが無意味になる理不尽要素」からなる「圧倒的バカゲー感」これにつきます。みんな笑顔で楽しんでくれていたので絶対に間違えていません。絶対に。

## デザインのUX
　次はデザインのUXについてです。
　有名なボードゲームであるオセロを元にしたゲームであるため、オセロに似たゲームであると誰しもが初見で簡単に理解できます。そのため、オセロに近いものだとそれに引っ張られ、後述の没頭感が薄れてしまうので、どうしても全く異なる世界観にしたいと考えました。
　今回必要だったデザインやモデルの一覧表を以下に記載します。
 
  今回必要だったデザイン/モデル一覧
  - 関東/関西コマ
  - ゲーム盤
  - 背景
  - フォント

### 関東/関西コマデザイン
　百聞は一見にしかずということで、初期のデザインと修正後のデザインを見ていただきましょう。
 
![スクリーンショット 2025-02-26 1.39.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853507/d840a3a5-4db5-46ad-9351-f91552f2aa6c.png)
図3 初期の関東/関西コマ
![スクリーンショット 2025-02-26 1.38.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853507/21928cd0-36f5-4ad8-8c2e-c24f55e8ce5a.png)
図4　修正後の関東/関西コマ

文字の後ろの円の色が変更されました。正直あまり変化はないように思えます。しかし、ゲームを進めてみるとこの変更の重要さに気づくことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853507/67c90d92-9a9c-4958-a2f4-f00270e08b45.png)
図5 初期のデザインのゲーム画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853507/234aa7f4-cb11-4878-99e2-b2e76ac36d18.png)
図6 修正後のデザインのゲーム画面

全く違う印象を持ったかと思います。この変更により、プレイヤーは瞬時にコマの区別をすることができるようになりました。

### ゲーム盤デザイン
　こちらは特に言うことがありません。世界観に合うようにUnityで基本の形をモデリングし、高級感のあるテクスチャを貼りました。
 
![スクリーンショット 2025-02-26 1.50.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853507/12864e4f-563a-4b77-a3de-070e5c2aa316.png)
図7 ゲーム盤のモデル

### 背景デザイン
　これについてもあまりいうことがありません。背景なしの図6と背景ありの図2を見比べて貰えば一目瞭然かと思います。ここはもっと良いデザインがあったかもしれませんが、ゲーム盤やコマを引き立たせるようなデザインの背景を採用したので、特に問題はないと考えています。個人的に満足しています。

 ### フォントデザイン
 　これも先に見てもらいましょう。
  ![スクリーンショット 2025-02-26 1.57.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853507/5f5425db-fd9c-42e2-b838-3b407b2b0a95.png)
図8 勝利画面
![スクリーンショット 2025-02-26 2.00.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3853507/08faddd4-4f15-453a-a1e2-6b3a7556921e.png)
図9 敗北画面

　コマの枚数と勝利/敗北の字が重なっていますがご容赦を。こんな感じで盛大に結果を報告されます。また、後で話しますBGMともマッチしていて、勝利した際はとても満足できるようになっています。(実は背景も結果次第で変化していてアニメーションまでついています。)

　以上がデザインのUXになります。図2を見てもらうとわかりやすいと思いますが、ライトに関しても気を使っていて、プレイヤーがより盤面に集中できるよう工夫しています。ここでのUXは、「ゲームに違和感を感じさせない」ように制作し、「ゲームに没頭してもらう」ことです。

 ## BGM/SEのUXとアニメーションのUX
 　実は今回の作品で初めてゲームにサウンドとアニメーションを取り入れました。そのため、これらに関してもとてもこだわりました。必要だったサウンドとアニメーション一覧を以下に記載します。
  必要だったサウンド一覧
  - 試合中BGM
  - 叫び後試合中BGM
  - 勝利BGM
  - 敗北BGM
  - コマ置きSE
  - 関西寝返りSE
      - コマ光りSE
      - 寝返り待機BGM
      - 寝返り成功SE

　必要だったアニメーション一覧
 - コマひっくり返り
 - 関西寝返り
     -  コマ浮く
     -  くるくる回る
     -  強く叩きつける

　おそらく誰も気づいていないと思いますが、実は関西陣営のプレイヤーが叫ぶ前と後でBGMの緊迫感が大きく変わっています。BGM/SEに関して、チームメンバーの1人をアセットストアから良さそうなものを選定してくる係として任命することで、とても満足できる作品を作ることができました。まじでありがとう。
　BGM/SE、アニメーションに関して、実際にプレイしていただかないと伝わらないと思うので、知り合いの方はぜひお声がけいただき、プレイしてみてください。よろしくお願いします。
  サウンドやアニメーションが無くてもゲームは作れます。しかし、今回初めてサウンドとアニメーションを取り入れ、それらの素晴らしさを実感しました。ここでのUXは、「より没頭させること」、「より臨場感を与えること」にあると考えます。

## シナリオのUXとプレゼンのUX
　ここまで読んでいただいた方ならとっくに理解していると思いますが、このゲームは戦国時代を意識し、和のテイストで作りました。また、人口の多い関東と情熱はある関西という謎シナリオでゴリ押しをすることでよりバカゲー感が出たなと思っています。そして、こんなのは後付けでしかないのですが、プレゼンテーションでのテンション感やテンポ感もよりバカゲー感を際立たせたと思います。最終発表でプレゼンした自分的には、最後から4番目という「よっしゃもうそろそろ終わる」ともならない一番だるい時間帯のプレゼンでとても不安でしたが、聞いていただいた皆さんが楽しんでもらえたようでとても満足しています。以上。この節にまとめなんていらん。はよ次や。

# まとめ
　以上が今回の作品で意識したUXでした。ハッカソンはプログラマーが集まる場であるため、あまりUXに焦点が当たっていないように感じていました。もちろん、プログラマーがそこに力を入れる必要はあまりないと思いますし、機能的なことを言うと全く関係のない部分になります。しかし、一度UXのことを考えるとそれしか考えられなくなり、時間の許す限りブラッシュアップしたいなと思える分野でした。
  ### UXは作品の機能に全く関係しない、だからこそ、UXはロマン!!
  

# 最後に
　企画段階から「このゲームはUXに全振りする」と考えていたので、今回のハッカソンでデザイン賞をいただけてとても嬉しく思います。ハッカソン運営の皆様、ありがとうございました。また、会場で実際に体験していただいた方々からたくさんの良い評価をいただきました。ありがとうございました。そして、1週間厳しく無茶なオーダーを出しても、それ以上のクオリティで返してくれたチームメンバーへ、本当にありがとう。自身の、チームの成長を実感できたとても良いハッカソンでした。これからも引き続きゲーム制作を楽しんでいきます。
 ### 最後まで読んでいただき、ありがとうございました。