アプリゲームUIデザイン

「V4」ゲームを見ている時間が長いゲームの場合、節電モードによってバッテリー消費や発熱量を抑えることにも繋がる可能性

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「V4」から、節電モードのデザインをご紹介します。節電モードはソシャゲでは一部のMMORPGや放置ゲーなどでは見かけることがあります。バッテリーの消費量や端末の発熱量を抑える意図があるのかな、と感じます。 該当の画面はこちらです。 アニメーションで見るとこんな感じです。真っ暗な画面ですが、裏ではゲームが進行しています。 具体的にはこちらの情報を見ると分かりやすいかと思います。この情報はキャラクターがクエストを進め…

2022/02/28 01:07

「V4」報酬を用意したり通知バッジを置くことで、ユーザーにチュートリアルを促そうとしているデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「V4」から、チュートリアルを見るように誘導するデザインをご紹介します。UIデザイナーにとってユーザーの行動を誘導することも大切な取り組みの一つかと思います。 該当の画面はこちらです。 まず「V4」ではチュートリアルを後で見ることが可能です。このように「今はしない」という選択肢が用意されています。 ユーザーの任意のタイミングでチュートリアルを確認することが出来る点は便利に感じます。 さて、チュートリアルを見るよう…

2022/02/26 00:19

「V4」任意のサーバーを選択するとインセンティブが獲得できる、ユーザーの行動を誘導するデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「V4」から、ユーザーの行動を誘導するサーバー選択画面のデザインをご紹介します。UIデザイナーにとってユーザーの行動を誘導することも大切な取り組みの一つかと思います。 該当の画面はこちらです。 こちらはサーバー選択画面ですね。全部で9つのサーバーが並んでいます。ズーク、レノア、タルシーというのがサーバーの名前ですね。 サーバー名の右下には「円滑」と表示されています。これはサーバーの混雑状況を表わしており、ユーザー…

2022/02/25 02:26

「崩壊3rd」ユーザーが常に最適なルートを把握できるナビゲーションのデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「崩壊3rd」から、目的地までのナビゲーションのデザインをご紹介します。任意で設定したルートではなく、時機の現在地と目的地までの最短ルートで結ばれています。 該当の画面はこちらです。 アニメーションで見るとこんな感じです。 キャラクターの足元から画面奥に向かって、六角形の青白いエフェクトが明滅しているのが分かります。SFの世界観らしいデザインに合わせた感じになっています（この街並みは和風のステージではありますが、…

2022/02/23 23:59

「崩壊3rd」文字をナナメにするちょっと変わった会話シーンのデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「崩壊3rd」から、会話シーンのデザインをご紹介します。「崩壊3rd」のデザインは少し珍しいパターンなので事例を知っておくのも有用かと思います。 該当の画面はこちらです。 デザインの特徴を挙げると以下の6点が浮かびました。 操作キャラが会話UIを見ているので視線の誘導をしている 通信していることが分かるインターフェイスの中にキャラクターが表示されている 発言者が分かるように名前の部分が明るくなっている グリッチフ…

2022/02/23 02:35

「崩壊3rd」3Dのカメラを使用した遷移の無い情報設計の事例

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「崩壊3rd」から、3Dのカメラを使用した遷移の無い情報設計の事例をご紹介します。画面遷移のないデザインはゲームの没入感を阻害せず、レスポンスも俊敏に感じます。 該当の画面はこちらです。 アニメーションで見るとこんな感じです。学寮画面を中心に「学寮メニュー」「模様替え」のコマンドを選択した場合の挙動です。3D空間であることを利用し、カメラ演出で情報の見せ方を切り替えています。 学寮メニューを展開した場合はこちらで…

2022/02/22 00:39

「崩壊3rd」リングゲージUIは長押しすることで操作できることがある、と伝えるための工夫

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「崩壊3rd」から、リングゲージのUIデザインご紹介します。 該当の画面はこちらです。 「崩壊3rd」では学寮画面にて、3DのSDキャラクターを長押しすると、キャラクターを掴んで動かすことができます。 「崩壊3rd」におけるリングゲージUIのデザインの特徴をあげると、以下の4点が浮かびました。 長押しすることで何かが起きることを伝えている どの程度長押しすれば良いのか伝えている キャラの頭上に表示することで、キャ…

2022/02/20 16:49

「崩壊3rd」ドロワーのデザインを考えてみた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「崩壊3rd」から、ドロワーのデザインと開閉の挙動についてご紹介します。最近、ドロワーの開閉について考えるきっかけがあったので調べてみました。 「崩壊3rd」でドロワーが使われている場所を4か所ほどピックアップしてみました。 1：学寮 2：基地 3：キャラクターリスト 4：アルバイト選択 1：学寮 アニメーションで見ると僅かに開閉アニメーションが付いていますね。 2：基地 こちらは開閉アニメーションはなく、瞬間的…

2022/02/18 01:36

「崩壊3rd」キャラのフィルタ画面では名前だけではなくグラフィックも表示されていた方が分かりやすいデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「崩壊3rd」から、フィルタ画面でキャラクターの名前だけではなく、顔グラフィックを表示するデザインをご紹介します。 該当の画面はこちらです。 見やすいように部分拡大しますね。 こんな感じで… デフォルメされた顔グラフィック キャラクターの名前 といった情報で構成されています。 顔グラフィックがある方がストレスなく見分けることができる！ 「崩壊3rd」のフィルタ画面では17名のキャラクターが並んでいます。ゲームを始…

2022/02/17 00:36

「崩壊3rd」ショップに無料アイテムを陳列し、無料アイテムを購入することで通知バッジが消えるデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「崩壊3rd」から、無料アイテムをショップに陳列する施策をご紹介します。 該当の画面はこちらです。 このようにショップなのにも関わらず、無料アイテムがリストの一番上に並んでいます。 無料アイテムは実質的には配布と同じです。なので、ユーザー的にはショップに置かずに、ログインボーナスなどの直接配布をしてもらう方が、手数が省略できるため利便性が高まります。 このショップに無料アイテムを置く施策については過去に何度かブロ…

2022/02/16 02:34

「崩壊3rd」環境画面の時間帯と天気の差分表現一覧。開発者のこだわりを紹介！

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「崩壊3rd」から、天候と時間の背景のバリエーションをご紹介します。 該当の画面はこちらです。 晴れ 曇り 早朝 早朝 早朝 朝 昼 昼 昼 昼 夕方 夕方 夜 夜 深夜 深夜 深夜 確認できた限り、時間帯によって15の差分がありました。思った以上に多い！ 最初は朝昼晩くらいだと思っていたのですが、ここまで多いとは予想外です。開発側のこだわりが感じられます。 天気については晴れている時、曇っている時以外にも、荒天…

2022/02/15 02:16

「崩壊3rd」ショップ画面で見られるアンカリング効果

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「崩壊3rd」のショップ画面から、アンカリング効果のデザインをご紹介します。 先にアンカリング効果について説明します。アンカリング効果とは… アンカリング効果とは、先に与えられた数字や情報(アンカー)によって、その後の判断や行動に影響が及ぼされるという現象を表す心理学用語です。具体的には、判断がアンカーに近くなる傾向があります。 アンカリング効果は、人間が先に知っている情報を基準として、その後の判断を歪めてしまう…

2022/02/14 00:00

「崩壊3rd」エンプティステートの紹介 Vol.23

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「崩壊3rd」から、エンプティステートをご紹介します。色んなゲームのエンプティステートを紹介して今回で第23回目です。 まず、「エンプティステート」とはどういうものか、簡単にお伝えいたします。 エンプティステートとは、表示する情報がない時にユーザーが見る画面のことだ。 見落とされがちな「エンプティステート」のUXデザインが、実際は一番重要なのかもしれない TechCrunch Japan 情報が空（エンプティ…

2022/02/13 17:00

「崩壊3rd」アイテム獲得するための導線が設置されていると、獲得方法を調べるコストと遷移の手数が抑えられるので素敵なUI

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「崩壊3rd」から、アイテム獲得のための導線設置をご紹介します。装備を強化したい！しかし強化素材が足りない！そんなの時に設置されていると便利な導線です。 該当の画面はこちらです。 ダイアログの右側に該当のアイテムが獲得可能な方法と導線が設置されています。これにより以下の2点のメリットがあると感じました。 ユーザーが素材を獲得する方法を調べるコストが抑えられる 画面遷移する手数が抑えられる アニメーションで見るとこ…

2022/02/12 07:30

「崩壊3rd」押しやすい指の位置と視線誘導を意識した報酬受け取りボタンの配置

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「崩壊3rd」から、2列のリストの時の報酬受け取りボタンの配置をご紹介します。 1列のレイアウトは多く見かけるのですが、2列はあまり見ないかも。該当の画面はこちらです。 リストの最上部、右側が受け取りボタンになっています。それ以外のボタンはミッションを達成するための導線になっています。 この画面でのユーザーの行動の優先順位は、ミッションを達成するための遷移よりも、まずは報酬を受け取ることだと考えられます。 指の位…

2022/02/12 00:13

「崩壊3rd」輝度設定がリアルタイムでプレビューされるので調整するのが楽！

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「崩壊3rd」から、輝度設定がリアルタイムでプレビューされるデザインをご紹介します。 オプション項目ってリアルタイムで反映され、分かるようにフィードバックがあると調整しやすいよね、という話です。 該当の画面はこちらです。 輝度設定の項目ですが、輝度値を変えると画面中心に表示されているプレビューがリアルタイムで変化します。 アニメーションで見るとこんな感じです。輝度値を小さくするとプレビューは明るく、反対に値を大き…

2022/02/10 01:58

「崩壊3rd」スクリーンショット撮影時にゲームロゴやSNSのシェアボタンが表示されるのはプロモーション目的だろうか

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「崩壊3rd」から、スクリーンショット撮影時にロゴが映り込むデザインをご紹介します。 スクリーンショット撮影時にコピーライトを表示する機能を実装したアプリもありますが、それと似たような挙動ですね。 該当の画面はこちらです。 アニメーションで見るとこんな感じです。スクリーンショットを撮影するとゲームロゴやSNSにシェアするボタンが表れます。 ゲームロゴはこちらですね。画面右上に表示されています。 スクリーンショット…

2022/02/09 01:49

「崩壊3rd」動くスタンプがあるとチャット欄が賑やか！

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「崩壊3rd」から、動くタイプのスタンプをご紹介します。 該当の画面はこちらです。 アニメーションで見るとこんな感じです。動いているスタンプと静止画のスタンプが数多く用意されています。 初期状態で種類も豊富なのでコミュニケーションには困ったりしなさそうです。 デザインが分かりやすいように動いている部分を拡大します。この画面上では以下の種類のスタンプが表示されています。 バーベキュー 優しい なでなで 腹ペコ 苦し…

2022/02/08 01:02

「崩壊3rd」端末を模したメニューUIの紹介。世界観が近未来SFだとフラットな見た目とスキューモーフィズム的な考え方の相性って良い気がする

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「崩壊3rd」から、メニューを開いたときのビジュアルデザインをご紹介します。 該当の画面はこちらです。 ホーム画面右下の端末のグラフィックをタップするとメニューが開きます。 アニメーションで見るとこんな感じです。画面端からスライドインする形で表示されます。 メニュー以外にも以下の7項目が表示されています。 時間 ネットワーク回線の状況 バッテリー 日時 曜日 気温 天気 天気や温度を表示しているゲームはかなり珍し…

2022/02/06 14:48

「崩壊3rd」データを個別にダウンロードする仕組みがあるメリット5つ

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「崩壊3rd」から、ゲームデータのダウンロード画面をご紹介します。 該当の画面はこちらです。このようにいくつかのパッケージごとにゲームデータをまとめ、任意で事前にダウンロードすることができます。 スクロールすると分かりますが、全部で15のパッケージに分けられています。 CGパック1（ゲームをプレイするために必要なCGデータ）83.47MB 艦橋触れ合い（艦橋触れ合い関連データ）234.41MB システムデータ（一…

2022/02/04 02:22

「崩壊3rd」タイトル画面とホーム画面を自然に繋げる演出

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「崩壊3rd」から、タイトル画面とホーム画面を自然に繋げる演出をご紹介します。 まずは実際の画面をご覧ください。このようにタイトル画面からホーム画面に遷移します。 動いていると分かりづらいかと思うので、静止画で順に紹介していきます。 1：まずはこちらがいわゆるタイトル画面です。タイトルロゴなどは表示されていませんがユーザーが画面タップするのを待ちます。エヴァンゲリオンのような工業用のエレベーターを永遠に昇っていき…

2022/02/03 01:07

「崩壊3rd」ユーザーのことを「艦長」と呼ぶことで世界観の没入感を高めている

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「崩壊3rd」から、世界観に合わせたユーザーの呼び方をご紹介します。 ゲームUIでは世界観の表現をデザインすることが重要な要素です。多くはビジュアル面ですが、テキストでも世界観を表現することも可能です。 手法としては非常に古く、「ゆうしゃ」と呼ぶなどしてゲームの没入感を高めていました。 「崩壊3rd」での事例はこちらです。 お知らせ画面の文章ですが「崩壊3rd」ではユーザーのことを「艦長」と呼んでいます。 また、…

2022/02/02 01:27

「崩壊3rd」画面遷移しないお知らせ画面のデザインの紹介

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「崩壊3rd」から、お知らせ画面のデザインをご紹介します。 該当の画面はこちらです。 アニメーションで見るとこんな感じです。 画面左側にお知らせの見出しが並んでいます。更新日時はここでは表示されていませんね。「システム更新」と同じ見出しが並んでいますが「崩壊3rd」の場合は許容されています。 左側の見出しタブを切り替えると、右側にある本文も切り替わります。画面遷移を挟まずに本文が確認できて手数の省略に繋がっていま…

2022/02/01 01:03