2022年03月のアプリゲームUIデザイン新着記事

「COUNTER: SIDE（カウンターサイド）」スクロールバーが無くてもスクロールすることが分かるデザインの事例

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「COUNTER: SIDE（カウンターサイド）」から、スクロールできることを仄めかすデザインをご紹介します。リストでよく見かけますが情報をあえて中途半端に途切れさせ、続きがあることを暗に伝えるデザインです。綺麗に配置することに集中すると見落としてしまったり、自然に溶け込んでいるので意識しないと見過ごしてしまう部分かなと思います。該当の画面はこちらです。今回はショップを事例に紹介してみます。この画面でスクロー…

2022/03/31 00:03

「COUNTER: SIDE（カウンターサイド）」ガチャの提供割合にて【未獲得】と、獲得状況が表示されていた。ユーザーがガチャを回す動機を作っていると感じた

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「COUNTER: SIDE（カウンターサイド）」から、ガチャの提供割合のリストのデザインをご紹介します。基本的には排出キャラと確率が表示されているリストですが、「COUNTER: SIDE（カウンターサイド）」の場合は獲得状況も表示されていました。該当の画面はこちらです。レアリティ、獲得状況、キャラクター名、キャラクターのタイプ、排出確率（小数点第三位まで表示）などが並んでいます。ここで注目したいのは「獲得…

2022/03/29 23:58

「グランサガ」アンカリング効果を用いた商品と、おまけを付ける見せ方の商品があった

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

2022/03/29 00:34

「グランサガ」1日1回限定の無料ガチャを用意するのはガチャ画面に遷移してもらうキッカケ作り

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「グランサガ」から、無料で回せるガチャがあるデザインをご紹介します。ショップに無料アイテムを陳列するデザインはしばしば取り上げていましたが、よく考えるとガチャ画面も以前から同様のデザインになっていました。該当の画面はこちらです。ショップに無料アイテムを陳列するデザインについてしばしば書いていますが、ガチャでも「無料ガチャ」ってよく見るな、と気付きまして、今回紹介してみます。まず、ガチャ画面にある無料召喚ボタン付…

2022/03/27 23:04

「グランサガ」ガチャの提供割合画面にグラフィックを表示することで『何が』手に入るかよく分かるデザイン

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「グランサガ」から、提供割合の画面デザインをご紹介します。よくあるソシャゲのガチャの提供割合と異なりグラフィックが目立つデザインでした。該当の画面はこちらです。アニメーションでページ全体をスクロールするとこんな感じです。グランウェポンのサムネイルが並び、壮観に感じます。この画面で何を見せたいか、というのを考えてみると、提供確率を見やすく表示するというよりはグラフィックを強く見せていると感じました。特にピックアッ…

2022/03/26 02:56

「グランサガ」キャラクターの癖という項目は趣味など項目と違って共感しづらい部分があり、それがメリハリを生んでいる気がする

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「グランサガ」から、キャラプロフィール画面で見かけた項目をご紹介します。具体的には「癖」と言う項目。個人的には珍しいと感じました。よくありそうな気もするけど少数派であるとは思います。該当の画面はこちらです。画面左側にキャラクターのグラフィック、右側にはキャラクターのパーソナルな情報が記載されています。具体的には以下の情報です。名前：ドロレス性別：女性種族：妖精所属・職業：マリーゴールド社交クラブ趣味：楽譜を…

2022/03/24 22:32

「グランサガ」ユニバーサルデザインが身近に感じられるキャラ詳細画面での事例を紹介してみます

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「グランサガ」から、キャラプロフィール画面のユニバーサルデザインをご紹介します。具体的にはキャラボイスを音声だけではなく文字でもユーザーに伝えている点です。該当の画面はこちらです。画面左側にキャラグラフィック、右側にキャラクターの名前や種族、職業、生い立ちなどのプロフィール情報が記載されています。このキャラクター画像をタップするとキャラボイスが再生されるのですが、どういったボイスが流れているのか、吹き出しの中の…

2022/03/23 23:29

「グランサガ」衣装を販売する画面が高級感ある見た目になっていた

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「グランサガ」から、ドレスルームのデザインをご紹介します。キャラクターの衣装を閲覧、購入、変更などが行える画面群です。該当の画面はこちらです。ドレスルームのトップ画面ですね。天井が高く、重厚感のある背景に、ショウウィンドウのように衣装を着せたマネキンとキャラクターが並んでいますたっぷりと余白が多いことも高級感を演出しているように感じます。衣装を変更する演出はこちらです。キャラクターが光に包まれて瞬間的に衣装が…

2022/03/23 00:40

「グランサガ」文字情報がなくてもグラフィックを利用してどんな画面か分かるデザインのお手本

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「グランサガ」から、ミュージック画面のデザインをご紹介します。主な役割としてはゲーム内の様々なBGMを視聴できる画面です。該当の画面はこちらです。文字情報は少ないのですが、蓄音機が背景にあり、レコードが並んでいるため、パッと見て何をする画面か理解できるのが特徴的だと感じました。待機中はキャラクターが蓄音機に触れて、ユーザーの注意を向けるように仕向けています。楽曲選択中は、ジャケットからレーコードが飛び出すアニ…

2022/03/21 16:55

「グランサガ」クエスト一覧画面のビジュアル面、ユーザーの行動を誘導するデザインに注目して紹介

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「グランサガ」から、クエスト一覧画面をご紹介します。結論から書くと「グランサガ」のクエスト一覧画面では以下の5点に注目しています。ビジュアル面では以下の2点、世界観に合わせたデザイン画面内に多くの情報を配置ユーザーの行動を誘導している面では以下の3点です。「ディドロ効果」と「ツァイガルニク効果」報酬を用意視線誘導では早速紹介しますね。該当の画面はこちらです。 1：世界観に合わせたデザイン 2：画面内の…

2022/03/21 01:26

「グランサガ」クエストの自動進行機能はユニバーサルデザインのひとつだと思う

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「グランサガ」から、クエストの自動進行機能をご紹介します。どういった処理を自動で行うかはゲームにより様々ですが、MMORPG系のソシャゲではほぼ確実に実装されている印象です。「グランサガ」の場合は主に以下の4点を中心に、自動でクエストが進行しているように見えました。プレイヤーのマップ移動 NPCとの会話敵の討伐アイテムの収集それぞれの処理が完了すると自動進行は停止します。該当の画面はこちらです。自動進行…

2022/03/20 02:53

「グランサガ」マップ遷移時に関連性のある画像を表示することでゲームの没入感を阻害しないデザイン

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「グランサガ」から、場面に沿ったロード画面のデザインの事例をご紹介します。「グランサガ」はマップを切り替える際にロード画面が表示されるのですが、その際にランダムではなく場面に応じたグラフィックが表示されます。該当の画面はこちらです。この画面は騎士団会館に遷移する際に表示されるロード画面です。このロード画面表示後に騎士団会館のマップに遷移します。2Dと3Dと表現方法は異なりますが、同じ場面を表示することで統一感を与…

2022/03/19 01:25

「グランサガ」ショップに無料アイテムを設置し、誘導するための導線設計の紹介

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「グランサガ」から、ショップで無料のアイテムを配布しているデザインをご紹介します。該当の画面はこちらです。このテーマは何度かブログでも取り上げているのですが、流行っているのか、効果が認められているのか、最近は割と見かけることが多いです。早速画面を見てみます。まずショップ画面の左にあるタブに通知バッジが表示されています。この通知バッジによりユーザーの注意を引き、通知バッジを消したい心理が働きます。その結果、こ…

2022/03/18 00:04

「グランサガ」パネルミッションのUIデザインで素敵だなと感じたこと3点

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「グランサガ」から、パネルミッションのデザインをご紹介します。「グランサガ」のパネルミッションはミッションの中でも特に強調したいミッションをまとめた画面であるように感じました。該当の画面はこちらです。ファンタジーらしく酒場の掲示板を下地に手配書が貼られたデザインになっていますね。また、画面が殺風景にならないように画面の右側にゲームのキャラクターが表示されています。いずれの要素も世界観が表現された素敵なデザインだ…

2022/03/16 23:11

「グランサガ」省エネモードにするとキャラクターが寝るし、モードを解除するとパッと目を覚ます

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「グランサガ」から、省エネモード画面の見た目をご紹介します。省エネモード実行中の見た目の参考になれば幸いです。該当の画面はこちらです。暗い画面の中央にキャラクターの寝姿が表示されています。緩みきっている表情がとてもかわいい。また、画面の下部には以下のテキストが表示されていました。スライドするとこの画面は解除されます。タップだと誤まって省エネモードを解除してしまう恐れがありますが、スライド操作にすることで誤ま…

2022/03/15 23:39

「グランサガ」データダウンロード中に遊べるミニゲームの事例紹介

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「グランサガ」から、データダウンロード中にミニゲームがプレイできるUIをご紹介します。データDLは時間がかかる処理です。ユーザーを長く待たせてしまうため、少しでもそのストレスを軽減させようと、各社で様々な取り組みなされています。該当の画面はこちらです。ゲームの流れとしては以下です。スタートを押すとモグラたたきのようなゲームが遊べます。穴から出てくるモンスターをタップし、スコアを伸ばすのが目的です。画面上部の…

2022/03/15 00:51

「グランサガ」エンプティステートの紹介 Vol.24

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

2022/03/13 22:56

「グランサガ」ムービーシーンにて、残り時間と獲得できる報酬を伝えるUIデザイン

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「グランサガ」から、ストーリーを閲覧すると報酬が獲得できることを示すUIをご紹介します。該当の画面はこちらです。こちらはムービーです。スキップする方法は分からなかったのですが、少なくとも画面上にはスキップボタンはありませんでした。その代わり、画面右上に何か青いアイコンがありました。拡大してみると、青いダイヤモンドのグラフィックとリングゲージのUIが表示されています。このリングゲージはムービーの残り時間を表わし…

2022/03/12 22:43

「グランサガ」メンテナンス画面にデザインバリエーションが用意されていた…だと…！ユーザーを少しでも楽しい気持ちにさせたい意思を感じた

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「グランサガ」から、メンテナンス画面のデザインをご紹介します。該当の画面はこちらです。ゲームを起動してからメンテナンス画面が表示されるまでのアニメーションはこんな感じです。画面左側にキャラクターが大きく表示されています。メンテナンス画面にキャラクターが表示しているデザインは稀に見かけますが、ここまで大きく表示されているのは初めて見ました。画面右側にはメンテナンス画面に表示されがちな、以下の3つの情報が表示され…

2022/03/11 00:30

「V4」次のレベルまでの進捗率は小数点第四位まで表示されてた

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「V4」から、次のレベルまでの進捗率を小数点第何位まで表示しているかをご紹介します。該当の画面はこちらです。次のレベルまでどれくらいかは画面左下に表示されています。画像で言うところ「77.5409％」というのがそれです。これが100％になるとレベルが上がります。アニメーションで見るとこんな感じです。はい！全然見えません！該当の箇所を拡大してみました。経験値を獲得するたびに○○％の部分も増えているのが分かります…

2022/03/10 00:36

「グランサガ」メール画面が手紙のようなパーツで構成されていました

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「グランサガ」から、メール画面におけるビジュアルデザインをご紹介します。該当の画面はこちらです。このように汎用の枠デザインではなく、エアメールのような装飾が施されているUIパーツを使っています。手紙らしいデザインにすることで、よりメッセージらしさを強調しているように感じました。よく見ると紙が重なっているような見た目になっています。これにより薄い紙の質感が表現されているように感じます。また、メールを開封してアイ…

2022/03/09 00:34

「V4」MMOPRGの場合、ロードを挟むような深い階層のメニューや専用の画像が多く使われているような画面デザインは避けた方が望ましいのかも

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「V4」から、各機能にアクセスする際の設計思想をご紹介します。結論から言うと「V4」では各機能にアクセスする際に画面遷移が発生していません。バックグラウンドでゲーム画面が動き続けており、昨日から抜けるとすぐさまゲームを再開する設計になっています。該当の画面はこちらです。最初は「メニューにあるコマンドめっちゃ多いなぁ」とか書こうと思ったのですが、色々とアクセスしている内に「これって遷移無しで切り替えしてる…？」と…

2022/03/08 00:00

「V4」キャラクターを魅力的に撮影するためのキャプチャー機能の紹介

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「V4」から、ゲーム画面のキャプチャー機能をご紹介します。端末で画面を撮影する機能もありますが、ゲーム側で撮影をサポートするような機能です。特にキャラクターを魅力的に撮影する機能だと感じました。該当の画面はこちらです。ゲーム画面のキャプチャーを編集する機能は以前も見かけたことがありますが、「V4」の場合は撮影する前に編集する機能でした。アニメーションで見るとこんな感じです。このように画面上の情報の表示を切…

2022/03/05 13:33

「V4」チャットの定型文入力機能って改めて便利、手数の省略を起点として利便性が高い機能

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「V4」から、チャットでのマクロ機能をご紹介します。該当の画面はこちらです。もうMMORPGではお馴染みの機能ですね。よく使うメッセージを事前に登録して、一手で呼び出すことができます。これにより、他プレイヤーとの迅速なメッセージのやりとりが可能になります。 UIの面で評価するなら手数の省略に直結します。貢献する要素は少ないように見えますが、手数の省略により時間の節約に繋がります。 MMORPGでは他のゲームジ…

2022/03/04 02:15

「V4」初めて見た操作形態のフィルタ画面。見た目はすっきりしてる。

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「V4」から、アイテムのフィルタ画面のデザインをご紹介します。該当の画面はこちらです。アニメーションで見るとこんな感じです。ランクや強化といった項目がチェックボックスではなく、ゲージになっています。これにより画面の情報量を少なくすることに繋がっているように感じます。見やすくするために一部分を大きくします。ランクは一般、高級、希少、英雄、伝説。強化は+0～+12になっています。ランクの高いアイテムのみを抽出…

2022/03/03 00:31

「V4」採取コマンドを実行中はリングゲージではなく横ゲージが採用されていた

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「V4」から、採取コマンドを実行中のUIをご紹介します。該当の画面はこちらです。アニメーションで見るとこんな感じです。蜂蜜を得るために蜂の巣の前で採取コマンドを実行しています。2メートル近い蜂の巣に躊躇なく近づくのは怖すぎます。採取コマンドを実行中は基本中には操作せずに待機する必要があります。画面中央、キャラクターの足元付近に進捗ゲージが表示されているのが分かるかと思います。ゲージだけではなくコンマ秒で残…

2022/03/01 02:07