百鬼異聞録〜妖怪カードバトル〜 デザイン考察

今回は「百鬼異聞録〜妖怪カードバトル〜」（以下、百鬼異聞録）について記載します。

このゲームの特徴は以下。

百鬼異聞録のデザインの特徴

イラスト、3D、スキューモーフィック、シンプルデザインを複合した高度なUI

Net Ease Gamesの前例として『陰陽師』にもある通り、百鬼異聞録も様々な表現を複合してUI、というよりも画面を構成しています。

基本的な、いわゆるUIパーツのデザインはシンプル。

ただしグラデーションや光彩のかけ方が丁寧で美しく、適度な密度感もあるため百鬼異聞録の世界観を構成するイラストや3Dにもしっかりとマッチしています。

かつ、UIとしてのコントラストは効いているので「操作できる感（押す、スライドするなど）」はしっかりと役目を果たせるような表現になっています。

各画面でユニークな構成のオンパレード

フリーマッチ

基本的にUIのパーツはある程度共通化（汎用的に）して、プレイヤーの学習コストを下げたり、反復的に見せる場所は変化を抑えて認知ストレスを軽減させるのが一般的だったりします。

百鬼異聞録でも最低限のUIパーツを共通化するのですが、他のアプリと比べても極端に少ない印象です。

各機能で共通化されているのは、左上の「画面タイトル」程度。

ストーリー

それでも機能として成立しているのが、画面内で要素にプライオリティをしっかりと持たせ、要素を削ぎ落とし、どこが操作できるかを明確にしているからです。

また、「この画面では何ができるのか」が各画面でしっかりと設計されていて、「あ、これができそう」とユーザーに連想させることができる画面になっているのも秀逸。

これによって遷移が増えたり、ハブとなるホーム画面のボリュームが大きくなったりしますがそれでもプレイヤーに一目で楽しんでもらえる工夫が随所に散りばめられていて、多少難解な画面があっても次の画面がみたくなる、引き出しを全部開けたくなるようなUIです。

とにかく動く、画面上に盛り込まれたアニメーション

なぜか屏風の絵まで動く！

百鬼異聞録の各画面は世界観設定をガッツリと表現した、ビジュアルでも楽しめるのが魅力。

そんな中でも特に注目したいのがアニメーションです。

生き物はもちろん、看板のタコも動く笑

とにかくどの画面も細かーいアニメーションがふんだんに盛り込まれています。

UIアニメーションには３つの役割があり、「注目のための動き」「理解のための動き」そしてもう一つが「装飾のための動き」。

その装飾のための動きがゲームUIの魅力をグッと引きあげてくれるのですが百鬼見聞録もこれによってビジュアルの良さがめちゃくちゃ増してます。

勾玉屋のタコが動くのも、妖怪の世界という世界観で成り立つものかもしれません。

タイトルの各画面を見てみる

ホーム画面

横画面の百鬼見聞録、なんとホーム画面は３画面分の領域をスクロールありで使用しています。

本作の売りの一つと感じる世界観表現を、広大な領域を使って見事に表現してます。

また、前述した通り動く箇所が多く、3Dも取り入れてまるで世界が生きている様子を表現してます。

ストーリー

ステージの進行によって背景にも変化が

まるで絵巻物をみているようなステージ選択画面。

ステージを進行するごとに画面右側に新しいステージが追加されていくのですが、進捗に合わせて絵巻物にもキャラクターが表示されたりととにかく凝っています。

バトル画面

上下点対称の扇子と刀が印象的な画面

刀、そして扇子をモチーフにしたバトルフィールド。

和風の要素を取り入れつつ、カラーバランスはゲーム全体でトーンを合わせていて一体感がありつつもバトルっぽさをちゃんと表現しています。

バトル自体は、ハースストーンやシャドウバースのようなコストを消費して進行していく形式。

後半にいくにつれてできることも増える系ですね。

デッキ編成

遷移した際に表示されるのがデッキリストですが、これもまた和っぽい表現が取り入れられていてgood。

そして注目なのがデッキにカードをセットする演出。

じわりとカードがセットされる

札にカードが染められていくような表現は思いついてもなかなかできません。

ここまで表現してしまう開発力と思い切りがすごい。

ランクマッチ

ダルマや中央の猫、画面左上の飾りもボタンとしての機能がある

百鬼見聞録の一つのポイントとして、UIがいい具合に説明を省いている点。

プレイヤーが押せる部分にはどんな機能があるかをテキストで書いて添えたり、が一般的です。

が、百鬼見聞録では「コントラストをあげる」「画面中央に配置する」「広い面に要素を配置する」などのテクニックで押せる感を演出。

これにより、プレイヤーが押した時に返ってくる反応、それが面白く、ビジュアル的な楽しさにつながります。

また、世界観表現をUIで邪魔することもなくなるのでかなり高度なUI設計だなと思います。

まとめ：世界観表現、ビジュアル表現がふんだんに盛り込まれた見てて楽しいUI

和っぽいモチーフと、洒落の効いたデフォルト名称

百鬼見聞録、なかなか日本の開発が真似できないような規模の大きく表現力の高さを感じさせる高クオリティな画面設計でした。

そして、UIのみならず3Dデザイナー、イラストレーター等デザイナー全体でプレイヤーを楽しませるようにデザインされていました。

とにかく世界観を感じさせる、細部にも神を宿らせる素敵なUXを提供してくれるゲームです。

陰陽師式神図録〜公式ビジュアルガイド〜 本格幻想RPG [ 鷲尾知美 ]

posted with カエレバ

楽天市場で探す

Amazonで探す