Loup-Garou

Duration
3 months
Role
Wireframes
Prototype
Icons
UI/UX
Animation
Logo Design
Photography
3D Modeling
Softwares
Procreate
Figma
Adobe Photoshop
Adobe Illustrator
Adobe After Effects
Blender

Loup-Garou (日本語:人狼) はフランスのカードゲーム「ミラーズホロウの人狼」を元にしたRPGのUI/UXです。

ミラーズホロウの人狼では、毎夜人狼たちは一緒に決めた住人を殺し、毎朝住人たちが話し合って人狼を見つけようとします。人狼と住人以外には、占い師、盗賊、ハンター、キューピッド、魔女、少女、保安官などの特別な能力を持つキャラクターが登場します。

もっといいデザインが作れるように、スマホやWEBだけではなく、
色々なUI/UXを通じてユーザー心理の知識を深めて、ゲームを作ることになりました。

ミラーズホロウの人狼

Game Overview

Genre
‍
サバイバル・ダークファンタジー

Platform
‍
PlayStation
‍
Goal
‍
人狼の人口を抑えつつ、キャラクターのカードを集める

Design Style
中世ヨーロッパ風
‍
Story
主人公が旅中の町の住人がどんどん消えていき、人狼化しているという噂が流れています。
ある日、森で不思議なカードを発見します。そのカードに人狼の絵が描いてあり、血の跡も付いています。
そのきっかけで人狼の噂はただの噂じゃないとわかりました。
満月の日に人狼が現れ、人を殺し、噛まれて生き残った人は人狼化し、人狼の人口が増えていっています。
人狼の毒を止めるには解毒剤が必要になります。自分に使用することもできれば、人狼に与えることで人間に戻すこともできます。

UI Design

下記は上記のコンセプトと参考画像を元に設計したUIデザインです。
セーフエリアを守ってナビ・文字・アイコンなどを実機テストしながら見やすさに注意しました。

Colors & Fonts

カラー
中世ヨーロッパといえば金色と黄色ですので、選択中の状態や見出し、ボタンなど目立たせたいところにポイント色として使用しています。
その他にグレー・黒を使っています。
‍
フォント
中世ヨーロッパの本やテキストを表すセリフ体を使用しています。
また、飾りとして扱いできる見出しと可読性が重要になる本文の書体を分けています。
日本語版も作成し、言語を問わず雰囲気を守るためにアルファベットに似た書体を選びました。
明朝体の見出しとのバランスを見て、差をつけて本文ではゴシックを使用した方がバランスと読みやすさ的に良かったです。

1. Flow & Wireframes

コンセプトができたら、
最初のステップとしてゲームのコンセプトが把握しやすいメニューとインベントリーのフローマップとワイヤーフレームを考え始めました。
Procreateを使ってフローのラフを描き出しました。

その次、Figmaでワイヤーを作り込んで、プロトタイプを作りました。下記のプロトタイプからプレイができます。
ボタンの操作や画面遷移に違和感ないか確認するために友達に遊んでもらいました。
また日本語が分からない友達にも触ってもらうことでUXの分かりやすさを判断できました。

スタート画面からHUDに遷移します。
HUDには武器、ミニマップ、HP、スタミナ、毒の表示器などプレイヤーに一番必要なものを配置しました。
また、人狼は満月毎に現れるので、月の状態がわかるような表示器も考えて追加しました。
‍
スタートを押すとメニューが開きます。クイックメニューも用意し、スタートボタンを長押しすると開きます。
メニューの中にカード一覧、リュック、マップ、クエスト、ノート、オプションがあります。
カード一覧から2Dのカードが見れますが、プレイヤーの収集意欲を高めるために調べるボタンを押すことで3Dのカードを詳しく見ることができます。
‍
また、マップから次の満月へスキップすることができます。
解毒剤の用意ができ満月までに待つことに対してのプレイヤーの欲求不満を避けるための工夫です。

下記は最終のフローマップになります。

2. Card Design

UI作成に入る前にカードのデザインを考えました。
集めた参考を見ながらProcreateでラフを描きました。
中世ヨーロッパのデザインでよく見かける尖った形にすることで一般的なカードの長方形よりも怖い感を出しました。

3. Icons

その次、カード一覧で使用するキャラクターのアイコンを考えました。
Procreateでアイデアをラフで描いてから描き込んで、形が確定したらイラストレーターでの作業に入りました。
同時にナビゲーションなどUI全体で使用するアイコンを作りました。
‍
カードの怖い感の反対に、アイコンの方は風変わりなデザインを選びました。
元のカードゲームでは一人一人の顔をじっと見て人狼を探すので、その方向性で不思議な形の「目」を中心にデザインを作りました。

4. Textures

山にカメラを持って行ってカードや背景などで使用しているテクスチャ撮影を行いました。
デザインに入れ込んだらフリー素材よりもクオリティーがかなり上がりました。

愛犬を連れて山登りのついでにテクスチャ撮影しました。

5. Logo Design

ゲームの怖い雰囲気と人狼を表すロゴを作成しました。
書体を並べてから選択し、バリエーションをおこしました。

一つのデザインに決定し、書体をそのまま使わず文字に変化させました。
また、ロゴが小さく使用された時を注意しました。

6. Animations

UI周りがFIXしたら、アニメーションを考え始めました。
プレイヤーにストレスを与えないような登場演出や全体的の尺に注意しながらカード一覧、ローディング、ゲームオーバーの画面を動かしました。
魔術を表すパーティクルを活かし、ゲームオーバーの画面は人狼の毒に侵された感じを出しました。

7. 3D Modeling

大学でMAYAを学びましたので3Dの基本の知識を持っています。現職では、購入できる3DレンダーをBlenderでいじったりする時がありますが、
今回のゲームでは自分でモデリングに挑戦したく、3Dのテクスチャが詳しい友達に相談したりしながらインベントリに出てくるナイフとスタート画面で使用している焚き火を作りました。

Blenderで動かしたナイフ

Parts

パーツ作成の際にラフで検証しました。

Old Designs

グロナビを画面の上部に配置してみたり、全てのタブを出してみたり、選択中のタブと前後のタブだけ出したり、
またインベントリの背景をジャーナル的な感じにしてみたり、UIのバリエーションを考え出しながらデザインを作りました。

今回のゲームのUI/UXのコンセプトがきっかけ、
色々なゲームの画面をじっくり勉強し、ゲームの作り方に目が覚め、
ゲームを作りたい気持ちがさらに大きくなりました。
これから一緒に制作するゲームのおかげで
世界中の人の生活が少しだけでも楽しくなれたらとても嬉しいです。

Thank you for reading!

More Work

02
Animation
03
Drawing