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

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

「オクトパストラベラー 大陸の覇者」長押しするとゲージが表示されるので、何かアクションがあることが分かりやすい

こんにちは!ちょこです!

 

このブログでは「ゲームUIを見てみよう!」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。

 

今回は「オクトパストラベラー 大陸の覇者」通称「オクトラ大陸の覇者」の長押しをすると表示されるリングゲージのUIを紹介します。長押しの操作と一緒に実装されていると、より分かりやすいデザインになるのかな、と思います。

 

該当のUIはこちらです!

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

「オクトパストラベラー 大陸の覇者」では一部のキャラクターのサムネイルを長押しすると下位階層の詳細画面に遷移します。
長押しするとリングゲージが表示されるため、何かが起こるであろうヒント、どれくらい長押しすれば良いのかが直感的に分かるデザインになっています。

アニメーションで見るとこんな感じです。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

分かりやすいように該当部分を拡大します。

キャラクターのサムネイルを長押しすると、時計回りにゲージが溜まっていき、満タンになるとリングが広がりつつ消えていきます。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

リングゲージのUIパーツを表示する主なメリットとしては以下の2点かと思います。

  1. 長押しすることで何かが起きる手掛かりを伝えている
  2. どの程度長押しすれば良いか分かる

 

また、リングゲージ以外のUIも採用されていました。
一部のストーリーでは画面を長押しすることで演出をスキップするできるのですが、横長のゲージが表示されています。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

このように事前に

※画面長押しでイベントスキップができます

と表示されています。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

アニメーションで見るとこんな感じです。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆



画面右下に「長押しでスキップ」と書かれたゲージが表示されています。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

画面を押し続けるとゲージが溜まるアニメーションです。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

 

長押しの操作は直感的には気付かれにくい操作です。
リングゲージを表示することで手がかりを与え、情報があることに気付きやすくなります。あるいはテキストで直接的に伝えることも手法としては取り入れられていました。

小さな工夫に見えるかもしれませんが、こういった一つ一つの工夫が分かりやすさに繋がると考えています。

 

 

以上です。

長押しの操作を採用する際に、より分かりやすくするための工夫を考える際の参考になれば幸いです。



このブログではこのようにゲームUIついて簡単にまとめて紹介しています。

他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 

© 2020 SQUARE ENIX CO., LTD. All Rights Reserved.

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

「オクトパストラベラー 大陸の覇者」のガイドラインを確認したところ、ゲーム内で使用されている画像やスクリーンショット画像はWebサイトやSNSへ投稿しても良い旨の文章がありました。

 

GUIDELINE | OCTOPATH TRAVELER 大陸の覇者(オクトパストラベラー) | SQUARE ENIX

 

主な参照箇所を抜粋します。

◆    画像などの取り扱いについて

  •   『OCTOPATH TRAVELER 大陸の覇者』におけるゲーム内容、画像、映像、キャラクター、音楽など、すべての表現物は、弊社もしくは弊社が『OCTOPATH TRAVELER 大陸の覇者』での利用に必要な権利の許諾を受けている権利者による著作物であり、事前の許可なく複製や頒布をすることはできません。ただし、以下の場合については、インターネット上での掲載にご使用いただくことができます。その際には、【利用条件】に従って利用してください。また、下記以外の著作物(『OCTOPATH TRAVELER 大陸の覇者』内の動画、音声、楽曲等)の掲載、転用は行わないでください。
  • OCTOPATH TRAVELER 大陸の覇者』の画像を個人使用の目的でオンラインサービスで使用すること。
  • プレイ動画(ゲーム内のBGMを含みます)を「YouTube」「ニコニコ動画」等の動画共有サイトに配信すること(この配信動画のURLやサムネイルを個人使用の目的で個人のブログやツイッターなどのミニブログなどにリンクすることを含みます)。
  • 掲載・配信に際して、著作権者を表示してください。
    掲載例)
    © 2020 SQUARE ENIX CO., LTD. All Rights Reserved.

 

以下は確認したガイドラインページのキャプチャです。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

◆◆◆◆◆◆◆◆◆◆◆◆◆◆


これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

 

お問い合わせ