ゲームアプリのUIデザイン

プレイしたゲームアプリのUIデザインに関して書き残します。毎日頑張って更新!

「Sky 星を紡ぐ子どもたち(Sky: Children of the Light)」主な画面UIまとめ

こんにちは、ちょこきなこです。

 

「Sky 星を紡ぐ子どもたち」がリリースされ、一部で話題になっています。
グラフィック部分でのUI(いわゆるGUI)はあまりないのですが、どんなUIなのか一通り紹介します。

 

 

1:タイトル画面

背景は夜の水面です 画面の中央にはskyの白い文字がうかび上がります

タイトル画面 左側はアプリのお知らせが表示されている 右側は水辺の畔に立つプレイヤーアバター 再生マークのグラフィックが表示されている

タイトル画面。
定番の「TAP TO START」がないのが印象的。

 

 

2:メインUI

広場のような場所に立つプレイヤーのアバター

呼び出して表示される各種アイコンです。
普段は隠れています。

左上はリソース、上部はステータス、右上はショップやゲーム設定などのメニュー
左下はチャット、右下は高画質のスクリーンショットです。 

 

 

3:メニュー画面

メニュー画面にはいくつかのコマンドが表示されています

・フレンド招待機能
・パフォーマンス(省エネ設定)機能
・操作設定
・ユーザーサポート
・受信箱
・不具合報告

などのメニューがあります。

 

 

4:招待メニュー

招待するフレンドのニックネームを入力するフィールド

画面左側にQRコードを読み込むフィールドがあります QRコードを読み込んでフレンドになることも可能です

QRコードで任意の人とフレンドになれる仕様です。
インポートは端末のフォルダから読み込みます。

 

 

 

5:フレンドメニュー

扉の前に立つプレイヤーと他のプレイヤー

他のプレイヤーの後を追従するか確認中の場面

他のプレイヤーとハイタッチをしてろうそくを送るか確認している3人のプレイヤー

フレンド機能に関するヘルプが書かれています フレンドがいるとよりゲームを楽しめる といった内容が書かれています

ヘルプ

右上の「?」をタップするとヘルプが表示されます。
いわゆる「ヘルプ画面」があって、そこにヘルプ項目が並ぶのではなく、必要な時に見れるようにしているのが特徴的です。

 

 

 

 

6:操作方法の設定

操作方法の説明と設定が行える画面

片手操作、両手操作など、操作性に関する設定が変更できます。 

 

 

 

7:精霊メニュー

夜空に浮かぶ精霊を示す星座を見上げるプレイヤーアバター

ホーム画面から各種精霊メニューが呼び出せます。

 

 

精霊の前に立つプレイヤーアバター 画面右側には精霊のメニューが表示されています

精霊メニュー。
リソースとアバターなどの報酬を交換することができます。

 

精霊メニューのヘルプ画像です 精霊の見つけかたや精霊に対して何をすれば良いのかなどが書かれています

精霊メニューのヘルプ。

 

 

8:自キャラのアクションメニュー

広場のような場所で集まるプレイヤーたち 画面右側にプレイヤーがとれるアクションのアイコンが並んでいます

自キャラのエモーションやアクションコマンドが並びます。

 

 

ゲームのサイクルが説明されている画面です 謎を解いて精霊を解放していきましょう

ヘルプ。

ここでは基本的なゲームの進め方が説明されています。

 

 

 

9:ショップメニュー

ショップのメニューが並んでいます ピアノやろうそくなどかわいいアイコンが並んでいます

値段やレアリティの高いものほど下地のデザインが凝っています。

 

 

アイテムの購入確認ダイアログです 商品のアイコン、説明文の順番などが書かれています

購入確認ダイアログ。
OK、キャンセルではなく〇と×で選択するデザイン。

 

ショップのヘルプ画面です アイテムのグラフィックと説明文が並んでいます

ショップのヘルプ。
購入できるアイテムに関する説明が表示されます。

 

 

 

10:チャットウィンドウ 

広場のような場所で、ほかのプレイヤーと挨拶をしている場面

キャラクターの頭上に文字が表示されます。
システムフォントではなく、世界観にあったデザインされたフォントが実装されています。

 

 

 

11:アバター変更画面

大きな岩の壁の前に立つプレイヤーアバター 画面右側には着せ替え可能なパーツが並びます

髪型や服装など、ゲームを進めるとアバターのパーツがもらえるようです。

 

 

アバターアイテムのヘルプです どうやったら手に入れることができるのかなどが書かれています

アバターアイテムのヘルプ。

 

 

 

12:Tips表示

ゲーム中にTipsが表示される場面です ここでは画面左上に表示されるろうそくのアイコンについての説明がなされています

ゲームの進行に応じて都度適切なTipsが表示されます。 

 

 

 

13:フィールドタイトル

画面中央にステージの名前が表示されます このステージは孤島という名前です

 フィールドに入ると表示されます。

 

14:アンケート依頼

ゲームプレイ中にアンケートの協力依頼が表示されることもあります 画面左下にその文章が表示されています

 表示タイミングや条件不明ですが、ゲーム中にアンケートの依頼が飛んできます

 

以上です。

ほんと画面がきれいですよね。

ゲームの進行に合わせて機能がアンロックされるのかもしれないので、何かあれば追記します。

 

 

UIの解説記事はこちらです!

「Sky 星を紡ぐ子どもたち(Sky: Children of the Light)」UIデザインの視点で9つ特徴をあげてみました - ゲームアプリのUIデザイン