emuramemo

製品レビュー、HTML/CSS、webデザイン、音楽、その他いろいろ

FGOをオブジェクトベースUIにしてプロトタイプを作ってみた

f:id:emj1025:20191126152157j:plain

 

オブジェクトベースUIという考え方を実践してみたいと思い、よく遊んでいるFGOでプロトタイプを作ってみました。作ったと言ってもほんの一部ですが。

 

(最初に言っておきますが、FGOのUI、個人的にはわかりやすくてとても好きですよ! )

 

 

ソシャゲってメニューがタスクベースUIになりがちだと思うんです。

よく「強化する」ってメニューがありますよね。

 

それをオブジェクトベースにしたらどうなるんかなと、興味本位でプロトタイプをつくってみました。

 

 

オブジェクトベースUI 

はじめに、オブジェクトベースUIについては以下の記事がおすすめです。長いですが、是非読んでください。 

 

www.sociomedia.co.jp

 

 

簡単に概念だけ説明すると、

オブジェクトベースUIの基本は

「名詞」→「動詞」

です。

 

「コップ」を「つかむ」

「キーボード」を「打つ」

など、現実世界のように、ユーザーがオブジェクトを自由に操作できるのが特徴。

PCやスマートフォンの操作画面であるGUI(グラフィカルユーザーインターフェース)がこれにあたります。

 

 

逆にタスクベースUIだと、

「動詞」→「名詞」

です。

 

「つかむ」→「コップ」を

「打つ」→「キーボード」を

のように、命令が先にあって、後に対象物を指定します。

CLI(コマンドラインインターフェース)がこれにあたります。

 

 

現状のUI・導線設計を見てみる

現状のUI・導線設計を見てみましょう。

 

サーヴァント強化をする

f:id:emj1025:20191125171605j:plain

FGOメニュー一覧

FGOではご覧のとおりメニュー一覧に「強化」があります。

 

f:id:emj1025:20191125171531j:plain

FGO強化画面

「強化」を開くと、様々な「強化」メニューがあります。

「サーヴァントを強化する」「スキルを強化する」など、動詞の項目が並んでおり、これらがタスクベースと言えますね。

 

 

f:id:emj1025:20191125171752j:plain

FGOサーヴァント強化画面

「サーヴァント強化」を見てみましょう。

まず対象の「サーヴァント」を選び、次に「強化素材」を選んで強化をします(画像ではサーヴァントが選ばれた状態)。

この画面はオブジェクトベースUIなのかなと思ったりしますがどうなのでしょう。

 

 

スキル強化についても同じ流れです。

「強化」→「スキル強化」→「サーヴァント選択」→「強化スキル選択」

という感じ。

 

 

つまり、手順にそってタスクを実行するフローとなっています。

 

 

サーヴァント一覧を見る

UIというよりは導線設計の話になります。

 

サーヴァント一覧を見たい時、僕はよく「強化」メニューから詳細へ行くのですが、目的が違うので少し気持ち悪いですね。

 

f:id:emj1025:20191125171954j:plain

FGO編成画面

一応「編成」メニューに「霊基一覧」があります。この霊基一覧ページはサーヴァント詳細を見れるだけでこの画面で操作できることがあまりなく、ほとんど来ることがありません。

 

 

「霊基一覧」「霊基保管室」のどちらも、メインナビの「マイルーム」にあるのか「編成」にあるのかよく迷います。これらはFGOのUIで導線が気持ち悪いと感じる一つです。

 

 

 

オブジェクトベースUIにしてみた

XDで作ったプロトタイプを録画しました(無料プランなので共有できなくてすまない…)。XDまじで使いやすい。

 

 

解説です。

 

f:id:emj1025:20191126144147j:plain

FGOメニューの変更

まずはオブジェクト一覧を表示するページが必要です。

「強化」というタスク的なメニューを無くし、代わりに「所有」というメニューを配置しました。

 

「霊基一覧」でもよいかもしれませんが、ここには概念礼装などもまとめたかったので「所有」としました。単純に「一覧」でも良いかもしれません。ラベルの命名難しい

 

 

f:id:emj1025:20191126144244j:plain

FGO 所有一覧

「所有」ページです。ここで所有物の一覧を見ることができます。

上のタブメニューからサーヴァント、概念礼装、コマンドコード、霊基保管室、など所有物の一覧を切り替えられるようにします。

個人的なお気に入りポイントはコマンドコードの所有一覧へアクセスしやすいところです。

 

f:id:emj1025:20191126144329j:plain

FGOフィルタ

「強化」メニューを無くしたことで、レベルやスキルレベル、宝具レベルの表示切り替えが必要になりました。右上の表示切り替えボタン(並び替えボタン)で対応します。

 

f:id:emj1025:20191126144411j:plain

FGOフィルタ:スキル

一覧の表示を「スキル」に切り替えた状態。各サーヴァントにはスキルレベルが表示され、比較できるようにします。

 

 

このほかにも、

・一括選択して霊基保管室へ移動

・ロック/解除

などを行う必要があるので、一覧ページはシステムの大幅改善が必要となりそうです。

 

売却については、センシティブな操作なので、特別な操作にしたほうが良いかもしれません。

 

 

 

f:id:emj1025:20191126144553j:plain

FGOサーヴァント詳細

サーヴァント詳細画面です。

サーヴァントの「ステータス」画面から強化を行えるように変更しました。

ちょうど、ステータス画面には強化が必要な項目が並んでいたので、それぞれのスキルや宝具の箇所から強化できるよう導線を貼りました。

 

サーヴァントの何を強化するかはユーザーが自由に選ぶことができます。

 

f:id:emj1025:20191126144639j:plain

FGO強化素材選択

強化素材選択画面は現状とほぼ同じ。サーヴァント詳細からこのページにきているのですでにサーヴァントが選択されているくらいです。オブジェクトベースUIなら、この画面からもサーヴァントを選択し直せるのが良いでしょう。

 

 

f:id:emj1025:20191126144743j:plain

FGO編成

メニューは変わって「編成」画面です。

もともとメニューに「霊基一覧」「霊基保管室」がありましたが、「所有」にまとめたので不要となりました。ラベルの意味合いに辻褄が合い、スッキリしました。

 

 

どうなったか

オブジェクトベースUIのいいところ

・画面が減る

・自由度が増える

・直感的な操作ができる

 

「もの」に対して「何を」したいのか、現実に近い形になったのでUI画面上で考えるストレスは軽減される気がします。

 

 

あと、強化メニューがなくなるとダヴィンチちゃんから「クエストに行け」と急かされなくなります。悲しいですね。

 

オブジェクトベースUIの大変なところ

一覧ページで様々な操作が要求されるため、実装コストは高くなりそうな予感。

 

 

タスクベースUIのいいところ

・タスクに集中できる

・手順通りにやればタスクが完遂できる

 

ゲームをやっていると連続して同じタスクを繰り返したいことがあります。

FGOの場合は、レベル上げしたいときは「レベル上げすっぞ!」という思考になり、集中しやすいです。

 

 

 

最後に

一部を作り変えただけなので、違いが分かりにくかったかもしれません。(題材が悪かった??)

ページが大規模になるほど、操作性に大きく差が出てくるのではないかと思いました。

オブジェクトベースUIを意識することで、ページがまとまったり、ラベルの意味が明確になるのは作っていて気持ち良かったです。

 

 

オブジェクトベースUIはユーザーの創造性を豊かにする、という考えがあります。

しかし、ゲームに創造性が必要なのか?と感じることもあり、必ずしもオブジェクトベースUIがすべてを解決するわけではないとも思いました。

 

 

それぞれの特性を知り、適切にUIに落とし込める力がほしいですね。 

 

 

 

 

emuramemo(c) All Rights Reserved.