こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
情報設計って難しい専門書しか見たことないので、今回は間取り風にして画面の階層を観察してみました。こうして見ると、情報設計というよりは間取りを考えてるみたいで、また印象も変わってくるのかな、と思いまして…。
クエスト画面をはじめとして、いくつか削っていますが、アウトゲームは大体こんな感じの規模感です。ざっくり150部屋以上あります。
主な画面を順番に紹介していきます。
タイトル画面
まず、タイトル画面です。
タイトル画面から入るとログインボーナス、お知らせポップアップを経由してホーム画面に遷移します。
©SEGA
この辺はシンプルな階層です。
玄関というか門扉というか…とりあえず基本的には一本道です。
実際にはデータダウンロード、複数のログインボーナスがあるのでもう少し奥行きはある感じですね。アニメーションで見るとこんな感じです。
©SEGA
ホーム画面
さて、ホーム画面からは色んな部屋に遷移できます。
部屋に例えるならリビングみたいな部屋でしょうか。
©SEGA
間取りで見ると直接行き来できるのはこんな感じですね。
クエストやイベント、その他ホーム画面のキャラを編集する機能への導線などは省略してありますが、９部屋に通じています。
こうして見ると、ホーム画面ではユーザーが次に行く場所を示すことが求められるのかな、という印象です。
楽しいリビングでリラックスするのも良いですが、やっぱり先に進んでもらいたい気持ちもありそうです。
そういう意味ではもしかするとリビングよりも商業施設のエントランスに近いのかもしれません。
では他の画面も覗いてみます。
ショップ画面
まず、ショップ画面です。
ショップ画面の間取りはこんな感じです。
比較的シンプルな階層です。
商品購入ページだからか、階層が深かったり迷わせる導線は排除され、洗練されていってるのかもしれません。
ちなみに実際の画面はこんな感じです。
©SEGA
階層は深くないですが、商品の種類は多いです。
コンビニみたいに手が伸ばしやすい位置に商品が並んでいる感覚に近いのかもしれません。
©SEGA
また、法律やガイドラインで定められた情報も表示されるのがソシャゲならではのUIという印象です。
©SEGA
酒場
続いて酒場画面です。いわゆるガチャ画面ですね。
商品の種類は多いですが階層はシンプルです。
実際の画面はこんな感じです。
©SEGA
情報量が多いせいか
- 文字が多い
- ガチャの種類が複数ある
- 購入方法が複数ある
- セールがある
…など、受け取る情報が多く、複雑に見えがちですが、階層自体はシンプルです。
最適な判断をするために複雑に見えていたのかも…。
商品はこんな感じで訴求されています。
ビジュアルの面積が多く、性能よりもビジュアルで推すデザインですね。
©SEGA
商品購入時の演出はこんな感じです。一応紹介。
©SEGA
強化画面
続いて強化画面です。強化画面は結構広かったです。
基本的には強化元と素材を選択して、強化を実行する流れは変わりません。
故に大体の手数は決まっているので奥行きはどこも同じ程度でした。
実際の画面はこんな感じです。背景は城下町のような見た目ですね。
©SEGA
また武器・魔具の強化については、城下町にある鍛冶屋を訪れる設定のように感じました。
©SEGA
精霊強化についてもNPCがいます。
こちらも何かしらの施設をイメージしているのかもしれませんがハッキリとはわかりません。
©SEGA
ただ、アビリティパネル、覚醒・入隊依頼についてはNPCはおらず、背景も施設ではありません。
©SEGA
この辺りの設計思想は一貫性を保つのが難しいように感じました。
というのも、アビリティパネルはキャラ詳細からも遷移できます。
城下町を経由して遷移することを強く印象づけてしまうと他の画面から導線を繋いだ時に没入感が削がれてしまう懸念が考えられます。
こちらは強化メニューからアビリティパネルに遷移するアニメーションです。
©SEGA
こちらはキャラ詳細から遷移するパターンです。
色んな方向から遷移できると城下町経由で遷移している印象は薄れてしまうのかもしれません。
©SEGA
また、限界突破、武器強化、分解はそれぞれ直接行き来できないようになっており、タスクベースの設計になっていることが分かります。
物語の記録
物語の記録はアドベンチャーパートを見返す機能です。
量や種類があるため結構深くて複雑でした。
正直どこに何が入っているのかユーザーは分からないかも…。
また、簡単に行き来することができないので、行き先を間違えたら戻るのが結構大変です。
例えるなら、団地の４階まで荷物を届けに行き、棟を間違えてしまった場合は１階に戻ってやり直す、みたいな構成です。
１階に下りずに別の棟への連絡通路が欲しくなります。
©SEGA
肌感としてはツリー構造にするよりも、フィルタ機能を充実した方が管理しやすくなるのかな、と感じました。
また、メインストーリーの孫階層のラベルにもメインストーリーが使われているので、そういった部分でも少し分かりづらく感じました。
[©SEGA
©SEGA
周辺の部屋の間取りを見るとこんな感じですね。
ちらほらと同じラベルの部屋があるので混乱する要因になりました。
パーティ画面
最後にパーティ画面です。
階層は深くありませんが、色んな部屋に繋がっているのが特徴的でした。
特にキャラ詳細からキャラ強化に繋がっているのは便利に感じました。
実際の画面はこちらです。
©SEGA
パーティ編成画面、キャラクター詳細画面、それぞれボタンが多く配置され、各機能に繋がりがある様子が分かりますでしょうか。
©SEGA
今回はここまでです！
クエストやイベントなどやってないところもありますが、気になる方はぜひゲームをプレイして観察してみてください！
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「シン・クロニクル」のガイドラインを確認したところ、公式HPにて、ゲーム画像をブログに投稿することは許諾されている旨の記載がありました。
主な参照箇所を抜粋します。
【著作物の利用範囲】
『シン・クロニクル』に関する文章・画像・動画、楽曲は、それぞれ次に定める範囲で利用することを許可します。
※『シン・クロニクル』アプリ内のTwitter投稿機能ご利用時も同様ですが、その場合公式サイトへのリンクの明記や権利表記を行っていただく必要はございません。文章・画像・動画（映像と楽曲が同期しているもの）
個人用かつ非営利目的のホームページ（Webサイト、ブログ、SNS、掲示板などのサービスを対象とします）及び非営利目的の動画等投稿サイト※において公開することを許可します。※文章・画像・動画投稿サイトを指します。なお、当該サイトで、YouTube、Twitch等の投稿サイトが正式に提供するパートナー機能等を使用して収益化する場合、個人でご利用になられる限り非営利目的とみなします。ただし、当該サイト内での文章・動画・画像・楽曲の販売や画像等を利用したグッズ・作品等の販売はこの限りではありません。以下、動画等投稿サイトについて同様とします。
【スクリーンショット（画像）の公開】
スクリーンショットを公開するにあたり、全ての画像内、または画像の直下に以下の権利表記を記載ください。
©SEGA
また、可能な範囲内で画像が掲載されるページ内に、公式サイトのリンクを明記してください。
『シン・クロニクル』公式サイト
https://sin-chronicle.sega.jp/
©SEGA
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
『シン・クロニクル』公式サイト
