アプリゲームUIデザイン

「未定事件簿」UIアニメーションの実装事例の紹介

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、UIアニメーションの事例をご紹介します。 最近はUIにアニメーションを付けるゲームも増えてきた印象があります。「未定事件簿」ではUIアニメーションが多く採用されていました。 数が多いので、ユーザーが操作する際に再生されるUIアニメーションを「インタラクション系」、ユーザーが操作しないところで再生されるUIアニメーションを「演出系」としてみました。 目次です。 インタラクション系 1：トグルボタ…

2022/01/30 15:57

「未定事件簿」ストーリーを読み終わると自動的に次のストーリーに遷移するデザインのメリットなど

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、時限式で画面遷移するデザインの事例をご紹介します。 該当の画面はこちらです。 ストーリーを読み終わると約5秒ほどかけて、自動的に次の画面に遷移します。 遷移するタイミングをユーザーに伝える手段としてはリングゲージが採用されていました。 「未定事件簿」の中ではあまり見られない、独自なUIパーツであるように感じました。 このような自動的に次の画面に遷移するデザインのメリット・デメリットを整理してみ…

2022/01/29 03:18

アイデアしりとりって知っていますか？「∞（むげん）アイデアのつくり方」

こんにちは、ちょこです。 今日はゲームUIの紹介はお休みして、書籍紹介をします。 読み終わった書籍の感想も残しておきたいなー…と思ってはいるのですが、ついついサボりがちになってしまいます。 今回ご紹介させていただくのは「∞（むげん）アイデアのつくり方」という書籍です。 ∞（むげん）アイデアのつくり方／高橋晋平【1000円以上送料無料】 価格:1,100円(2022/1/28 00:38時点) 内容的には発想法です。むげんプチプチを開発した著者が考えた「アイデアしりとり」による発想法の紹介が主な内容です。 概要としては以下の通りです。 自己紹介 「アイデアしりとり」とはなにか？ なぜこの発想法が…

2022/01/28 01:28

「未定事件簿」エンプティステートの紹介 Vol.22

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

2022/01/27 01:30

「未定事件簿」弁論敗北時の導線は問題解決、アプリの売り上げ貢献、ユーザーの離脱防止などに役立てられそう

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、弁論失敗時の導線をご紹介します。 該当の画面はこちらです。この「弁論失敗」とは、所謂バトルの敗北です。 弁論失敗すると以下の文章と導線が表示されています。 惜しい！編成を見直して再挑戦しましょう！ 思い出強化（キャラクターの強化） 女神の影（ガチャ） ショップ（アイテム販売） また、アイコンのグラフィックをよく見ると、遷移する導線であることを矢印マークで仄めかしていることが分かります。細かい工…

2022/01/26 00:04

「未定事件簿」メッセージ枠が画面中央付近にあるので、キャラの表情を見ながら状況が把握しやすいデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、会話シーンのメッセージ枠の位置をご紹介します。 該当の画面はこちらです。 このようにメッセージ枠が画面中央付近に配置されています。 以前は画面下部に配置することが多かったのですが、最近は端末が縦長になっている傾向があるため、やや上に配置する流れが作られつつあるように感じます。 メッセージ枠が画面下部にあると以下のデメリットが考えられます。 指でテキストが隠れる 顔とテキストの距離が離れることで…

2022/01/25 01:09

「未定事件簿」ババ抜きをさせてキャラクターと双方向のコミュニケーションを取るデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、キャラクターと遊べるミニゲームをご紹介します。「未定事件簿」ではキャラクターとババ抜きが遊ぶことができます。 あまり見かけない仕様かなと思います。 該当の画面はこちらです。 アニメーションで見るとこんな感じです（約23秒あります）。 タッチして親愛度を高めるゲームはよく見かけます。「未定事件簿」でもそのような仕組みも取り入れられています。 その上でこのようなミニゲームを用意する意図は双方向のコ…

2022/01/24 00:42

「未定事件簿」あえてデザインの原則に逆らうことで分かりづらくし、発見を楽しむデザイン！

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、会話パートの選択肢の配置をご紹介します。 該当の画面はこちらです。早速ですが動画でご覧ください。 画面端、キャラクターの顔付近に選択肢が表示されています。こういった選択肢は、視線の移動が少なく、テキストが読みやすい画面中央付近に表示されているゲームが多い気がします。 「未定事件簿」の場合、選択肢を選ぶと新たな選択肢が生まれることがあります。例えば「泣きわめく子供」の選択肢を選んだ後は「薬物アレ…

2022/01/22 23:46

「未定事件簿」誕生日を過ぎたらカレから寂しがってる手紙が届いた…！ごめん！

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、プレイヤーの誕生日のお祝い機能をご紹介します。 該当の画面はこちらです。こんな感じでカレからプレイヤーに対して誕生日プレゼントが贈られます！ 誕生日機能はよくある機能じゃないかな、と思われるかもしれませんが「未定事件簿」はもう少しだけ手が込んでいました。 こちらの手紙の文面をよく見て欲しいです… ちょこ、誕生日おめでとう。本当は今日の為にいろんな計画があったんだけど、忙しくて忘れてるとは思わな…

2022/01/22 01:52

「未定事件簿」選択肢をゲージが一体となったデザイン、ちょっと変わったバトル画面の事例紹介

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、選択肢とゲージが一体となったUIパーツをご紹介します。 該当の画面はこちらです。 状況としては相手に攻撃し、ダメージを与えてHPを減らす、という所謂バトル画面です。 アニメーションで見るとこんな感じの挙動をします。白いゲージが徐々に減少していくのが分かるかと思います。 バトルシステムを少し説明します。HPは画面右上に表示されていますが、選択肢の中にあるゲージはWAVEの中でのHPというデザイン…

2022/01/21 02:05

「未定事件簿」タイトル名が表示されていないタイトル画面

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、ちょっと変わったタイトル画面をご紹介します。 該当の画面はこちらです。 どうでしょう…。便宜上タイトル画面と呼んだのですが、タイトルの表記がありません。ゲームのキャラクターもいません。 もしかしたらゲームが進行するとデザインも変わっていくタイプのタイトル画面なのかもしれないのですが、ゲームを始めて間もなくはこのような画面デザインです。 では、タイトルはどこで行われるかと言うと、スプラッシュスク…

2022/01/19 23:55

「未定事件簿」ゲーム内アンケート機能があったので事例の紹介

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、ゲーム内にあるアンケート機能をご紹介します。 該当の画面はこちらです。 ちなみに画像の中の文章は以下の内容が書かれています。 親愛なる弁護士様：ゲーム品質向上の為に初代より『未定事件簿』体験アンケート（報酬付き）を作成しました！アンケートにお答え頂いた弁護士様には、「女神の涙×1」を差し上げます！アンケートの報酬は、アンケートを回答し、提出に成功した後、自動的にメールボックスに送付されます。 …

2022/01/19 00:37

「未定事件簿」キャラクターごとにボイスの言語切り替え機能が実装されていたので、なぜこの実装になったのか理由を推測してみた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、キャラクター毎にボイスの言語設定が出来るオプションをご紹介します。 ソシャゲではかなり珍しい部類のオプションかなと思います。 該当の画面はこちらです。 こちらの項目ですね。画面左側のボタンをタップすると言語を切り替えることができます。 言語は全部で以下の4か国語です。 簡体字中国語 日本語 韓国語 繁体字中国語 このようにキャラクター別にボイスの言語を切り替えることが可能です。 キャラクター全…

2022/01/18 01:02

「未定事件簿」画面内のボタンをタップすることでイケメンがこちらを向くからドキッとするデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、画面遷移時のキャラクターのリアクションをご紹介します。キャラクターをタップするとリアクションするゲームはいくつもありますが、画面遷移時にキャラクターがリアクションするケースは珍しいと感じました。 該当の演出がある画面はこちらです。 こちらの画面はキャラクターのストーリーを閲覧したり、好感度を高めたり、ミニゲームをすることができる画面です。 何が良いかと言うと、画面下部の「個人ストーリー」「交流…

2022/01/16 22:27

「未定事件簿」ユーザーのことを世界観に合わせた呼び方をしている事例の紹介

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、世界観に寄せたユーザーの呼び方のデザインをご紹介します。 このブログではしばしば紹介しているのですが、いくつかのゲームでは、ユーザーのことをゲームの世界観にあわせて呼んでいることがあります。 該当の画面はこちらです。 お知らせなど、フォーマルな場面では「親愛なる弁護士様」と呼んでいます。 「未定事件簿」のデザインで面白い点はイベントでは別の呼び方も用意されている点です。 このデザインは初めて見…

2022/01/15 01:44

「未定事件簿」ショップ画面で用いられやすいアンカリング効果の事例紹介

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

2022/01/14 01:05

「未定事件簿」2Dイラストが動く会話シーンって新しい表現だなと感じた事例紹介

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、会話画面のデザインをご紹介します。 該当の画面はこちらです。 この会話シーン…動きます！ 補足すると、動くのは一部のシーンです。多くのシーンでは立ち絵が採用されています。 国内のゲームでここまで動いているソシャゲは見たことが無いのですが、「ブルーアーカイブ」では一部のレアリティの高いキャラクターイラストは動いていました。 中国のゲームではトレンドなのかもしれませんね。 UIの評価軸に当てはまる…

2022/01/13 00:16

「未定事件簿」ヒント機能があることでユーザーの離脱を防ぐことにも繋がってるのかな

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、ヒント機能のデザインをご紹介します。 該当の画面はこちらです。 挙動としては、マップを調べるパートにて、画面左の虫眼鏡のアイコンをタップすると、調べれば良い箇所が光る挙動になっています。 アニメーションで見るとこんな感じです。左から右にかけてスキャニングする演出が表示されます。 調べると重要な情報を得られる箇所はこのようにアウトラインが光ります。画面全体が暗くなるため、光っている箇所がより分か…

2022/01/12 01:13

「未定事件簿」ゲーム内の専用端末に6Gって表示されていて、近未来感を表現していると感じた話

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、世界観を表現した端末のデザインをご紹介します。 最近の中国のアプリは近未来のSFをモチーフとした世界観のアプリが多く、その世界における専用の端末もよく登場しています。「未定事件簿」にも専用の端末が登場するのですが、ちょっと面白い工夫がありました。 該当の画面はこちらです。 ぱっと見て、バッテリーの残量や現実世界の日時が画面にも反映されているのが分かるかと思います。これはよくあるデザインのひとつ…

2022/01/11 00:00

「未定事件簿」適切な初期値は利便性に繋がる

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、オプションの初期値をご紹介します。このブログでは何度か紹介しているのですが、適切な初期値が設定されていないとユーザーに手数をかけたり、ストレスを与える可能性があります。 逆に言えば、適切な初期値はユーザーの利便性に繋がります。初期値はUIデザイナーにとっては重要度の高い要素であると考えている為、たまに紹介しています。 該当の画面はこちらです。いわゆるオプション画面ですね。 具体的に紹介するのは…

2022/01/10 23:38

「ポケモンユナイト」ネットワークアイコンをタップするとPing値が表示されるデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ポケモンユナイト」から、ネットワークを示すアイコンをタップすると、ゲームサーバーからの応答速度（Ping値）が表示されるデザインをご紹介します。 あまり見たことが無かったのですが、Ping値の表示方法の参考になれば幸いです。 該当の画面はこちらです。 こちらはホーム画面ですが、画面右上にネットワークを示すWifiのようなアイコンが表示されています。普段はアイコンのみですが、このアイコンをタップすると、大まかなP…

2022/01/09 18:20

「ポケモンユナイト」ゲーム設定に色覚多様性対応があった、オンにすると自キャラのHPゲージが目立ちやすくなる

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ポケモンユナイト」から、ゲーム設定の中に色覚サポートがある事例をご紹介します。 該当の設定はこちらです。 このようにゲームのシステム設定の中に「色覚サポート」の項目があります。 色を調整し、バトル中に相手チームと味方チームを見分けやすくします。 実際に設定のオンオフを比較して見てみます。 こちらは「色覚サポート・オフ」です。 こちらが「色覚サポート・オン」です。 PhotohopのP型フィルタをかけるとこんな感…

2022/01/07 00:25

「ポケモンユナイト」ポケモンらしいUIパーツの事例紹介

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ポケモンユナイト」から、IPらしいデザインを取り入れたUIパーツの事例をご紹介します。 該当のUIパーツはこちらです。 画面下部にあるこちらの丸いパーツ群です。よーく見ると画面左端だけポケモンボールになっています。 さりげない！ 隠れミッキーのような趣のあるデザインですが、これくらいのさりげなさが大切だと感じています。 例えば、この画面ではUIパーツ自体を見せたいわけではありません。 この画面での目的は「ユーザ…

2022/01/06 02:04

「ポケモンユナイト」アバター作成画面の流れと4つの特徴に注目してみた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ポケモンユナイト」から、アバター作成の流れの事例をご紹介します。 特に編集パーツごとのキャラクターとカメラの位置、キャラクターのポーズ、シームレスな画面遷移など3Dを使ったデザインなどに注目してみます。 該当の画面はこちらです。 大きく分けて以下の5つの段階でアバターを作成していきます。 みため かお ヘアスタイル ヘアカラー ファッション まずは「みため」です。 「性別」と表現せず「みため」と表現している点に…

2022/01/05 23:57

「ポケモンユナイト」快適なマッチング環境を用意することもUIの一部だと思うのと、見た目の工夫を3点あげてみた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ポケモンユナイト」から、フェアプレイポイントを表示している画面を紹介します。この「フェアプレイポイント」とは、オンライン対戦においてのインセンティブ、あるいはペナルティを管理するポイントです。 ポイントが高ければマッチングしやすく報酬も得られますが、ポイントが低ければマッチングに制限が課せられ、報酬も得られません。 該当の画面はこちらです。 画面のビジュアルデザインに注目してみます。ユーザーの認知、行動に影響す…

2022/01/04 23:35

「ポケモンユナイト」ロードの進捗状況に合わせて、プログレスバーの上にいるピカチュウも進んでいくエンタメ感あるデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ポケモンユナイト」から、プログレスバーのデザインを紹介します。 ここで言うところの「プログレスバー」とはゲーム起動時のロード中に表示されるゲージを指します。 該当の画面はこちらです。 画面下部にプログレスバーが表示されているのが分かるかと思います。主に以下の5つの要素で構成されています。 進捗状況がわかるゲージ 進捗状況がわかる数字（30％） 状況が分かるテキスト（更新データをダウンロード中） 通信速度（速度5…

2022/01/03 21:36

「ポケモンユナイト」季節感を背景に取り入れるだけではなく、ミッションの進捗状況に応じてツリーにライトが点く演出もあるデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ポケモンユナイト」から、季節感あふれるホーム画面のデザインを紹介します。ソシャゲの運用において季節感は重要視されがちです。 例えば、以下のような特徴があるのかな、と考えます。 デザインが変わることで話題作りになる 現実の世界観と陸続きにさせたい 該当の画面はこちらです。 ホーム画面の背景がクリスマスシーズンのデザインになっていました。 注目したいのは画面左側に表示されているツリーです。電飾が消えているので寂しい…

2022/01/02 23:39

「ガーディアンテイルズ」クリスマスっぽいホーム画面のデザイン紹介

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ガーディアンテイルズ」通称「ガデテル」から、季節感あふれるホーム画面のデザインを紹介します。ソシャゲの運用において季節感は重要視されがちです。 例えば、以下のような特徴があるのかな、と考えます。 デザインが変わることで話題作りになる 現実の世界観と陸続きにさせたい 該当の画面はこちらです。 このようにクリスマス風に飾り付けがされています。 夜になるとライトアップもされます。 1月に入ってもこのままだったので、お…

2022/01/01 18:28