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

筆者の体験をざっくりまとめた軽快な読み口「ユーザインタフェース開発失敗の本質」

こんにちは、ちょこです！当月にアップロードできるデータ容量の上限に引っ掛かったので図らずも連日の書籍紹介です。本日紹介するのは「ユーザインタフェース開発失敗の本質」です。 www.amazon.co.jp 成功の再現性よりも失敗の再現性の方が簡単だと感じており、それであれば先人の失敗を知り、回避することで楽に物事が進められるのではないか、と考え購入してみました。基本的には著者の主張で構成されており、読みやすい印象を受けました。全体としては連載記事を読んでいる感覚です。 PS3やwii、DSなどが活躍していた頃のゲーム業界が登場するため、ゲーム業界の過去を知ることにも有効だと感じました。 …

2022/05/31 00:29

弁証法ってなに？「直線は最短か？」

こんにちは、ちょこです！書籍紹介です。今回紹介するのは「直線は最短か？」です。前半は弁証法を利用した発想法、後半はキャリアの考え方が書かれています。 ▼紙媒体直線は最短か？〜当たり前を疑い創造的に答えを見つける実践弁証法入門〜 [ 阪原淳 ] ▼電子書籍直線は最短か？〜当たり前を疑い創造的に答えを見つける実践弁証法入門〜【電子書籍】[ 阪原淳 ] 結論から述べると、弁証法の入門の読み物として分かりやすいものであると感じたものの、ゲームUIデザイナーとして見たときに有効かと考えると、具体的にどういった業務の時に必要になるのかはすぐに思い浮かびませんでした。ただ、ゲームUIデザイナーな…

2022/05/29 23:00

参考書籍

こんにちは、ちょこです。このページでは、このブログで紹介した書籍を一覧でまとめてみました。なんとなくジャンルで分けていますが、複数ジャンルを扱っている書籍もあります。目安程度で考えていただければと思います。レイアウト「っぽくなるデザイン誰でもできるかっこいいレイアウト集」「っぽくなるデザイン誰でもできるかっこいいレイアウト集」レイアウト「っぽくなるデザイン誰でもできるかっこいいレイアウト集」フォント「英国人デザイナーが教えるアルファベットのひみつ」「タイポさんぽ改」ユニバーサルデザイン『アクセシブルデザインの発想不便さから生まれる「便利製品」』ゲームUI（設計）…

2022/05/29 01:13

ガチャ演出はなぜ豪華になるのか「快感回路」

こんにちは、ちょこです。久々の書籍紹介！今回はご紹介させていただくのは「快感回路」です。 ▼電子書籍快感回路なぜ気持ちいいのかなぜやめられないのか【電子書籍】[ デイヴィッド・ジェー・リンデン ] 価格:913円(2022/4/3 14:15時点) ▼紙媒体快感回路なぜ気持ちいいのかなぜやめられないのか（河出文庫） [ デイヴィッド・J・リンデン ] 価格:968円(2022/5/29 00:58時点) 読んでみた理由は以下の2点です。ユーザーがなぜその行動を好むのか理解する手掛かりの発見ユーザーの行動の誘導書籍の紹介文には以下のように書かれています。恋愛と性的興奮は…

2022/05/29 01:02

「ロックマンX DiVE」デザイン面で商品の訴求に貢献している要素8点あげてみた

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「ロックマンX DiVE」における商品の訴求手法をご紹介します。ソシャゲのUIはゲーム内で商品も販売しないといけないので、商品訴求については割と大事な要素な気がしています。該当の画面はこちらです。ショップ画面ですね。画面左端にはショップのタブが並び、商品のラインナップが切り替えられるようになっています。画面右側には商品のサムネイルが並んでいます。右側に寄せることで指が届きやすくなり、操作もしやすいと感じます。 …

2022/05/28 04:44

「ロックマンX DiVE」指先カーソルがロックマンらしい見た目になってる！

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「ロックマンX DiVE」における世界観を取り入れた指先カーソルのデザインをご紹介します。該当の画面はこちらです。画面中央に指先カーソルが表示されているのが分かりますでしょうか。人の指先ではありますが、ロックマンらしい見た目になっています。アニメーションで見るとこのように動いています。動き自体は縮小、拡大を繰り返しているシンプルなものですね。このようなカーソルを用意する目的は視線の誘導です。矢印や指先のように…

2022/05/26 22:41

「ロックマンX DiVE」低レベルの時は無条件でコンティニューできる機能が実装されていてチャレンジし放題

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「ロックマンX DiVE」におけるステージクリア失敗時のリカバリー方法をご紹介します。該当の画面はこちらです。戦闘不能になってもレベル20までは無条件でコンティニュー可能というのが特徴的です。ダイアログ内の文章が見やすいように拡大します。戦闘を再開しますか？（プレイヤーレベルが21以上の場合は再起動プログラムを消費します） MMORPGでゲーム開始直後はペナルティ無しで復活できたり、対人戦（あるいはランク戦）で…

2022/05/26 01:01

「ロックマンX DiVE」ステージをリストから選択する機能を使うと手数の省略に繋がる

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「ロックマンX DiVE」、ステージ選択画面においてステージ間を遷移する方法をご紹介します。手数の省略に繋がる方法かもしれません。該当の画面はこちらです。「ロックマンX DiVE」ではステージ選択の手段が2つあります。直感的には画面の左右をタップして前後のステージに遷移する手段が気付かれやすいかと思います。アニメーションで見るとこんな感じです。もうひとつは画面左上をタップしてステージリストから選択する手段で…

2022/05/24 23:47

「ブレイブリーデフォルトブリリアントライツ」セーブデータを削除する時に誤操作防止のため、チェックボックスが採用されていた

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「ブレイブリーデフォルトブリリアントライツ」、通称「BDBL」から、ユーザーデータを削除する際のセーフティの事例をご紹介します。「シュナイダーマンのインターフェイスデザインの8つの黄金率」ではやり直しが出来ることが求められています。アクションのやり直しを許可する：デザイナーは、ユーザーにアクションをやり直すわかりやすい方法を提供するよう努めましょう。単一のアクションのあとでも、データ入力のあとでも、一連のアクシ…

2022/05/24 01:06

「ブレイブリーデフォルトブリリアントライツ」黒背景と赤文字の組み合わせは見づらいので避けたい

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「ブレイブリーデフォルトブリリアントライツ」、通称「BDBL」から、色覚多様性を考慮しておくと良さそうなデザインをご紹介します。具体的には、黒背景に赤文字が採用されており、見づらいと感じた点です。黒と赤の組み合わせは、C型であってもやや見づらい色の組み合わせですが、それ以外のP型、D型のユーザーを考慮すると避けておくのが良いとされる色の組み合わせです。該当の画面はこちらです。こちらはアイテム合成をする画面です…

2022/05/22 22:24

「ブレイブリーデフォルトブリリアントライツ」スクロール可能な情報を表示する時に、スクロールする方向とUIアニメーションの方向を一致させているのでわかりやすい

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「ブレイブリーデフォルトブリリアントライツ」、通称「BDBL」から、UIアニメーションを利用した認知の助けの事例をご紹介します。具体的にはスクロール可能な方向と同じ方向のアニメーションを利用することで、ユーザーにスクロールすることと向きを伝えているデザインです。該当の画面はこちらです。こちらは所持アイテムのリストです。サムネイルの登場するアニメーションをよく見ると、登場時に若干下から上に移動しながら登場してい…

2022/05/22 01:26

「ブレイブリーデフォルトブリリアントライツ」UIの見た目とアニメーションを一致させることでゲームの没入感を高めている

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「ブレイブリーデフォルトブリリアントライツ」、通称「BDBL」から、ビジュアルに合わせたUIアニメーションをご紹介します。ゲームにスキューモーフィズムデザインを取り入れるメリットの中には世界観の表現があげられます。見た目に合わせたアニメーションを取り入れることでより没入感を高められます。該当の画面はこちらです。いくつかありますがこちらは所持アイテムのリストです。タブを切り替えるとページをめくるアニメーションが再…

2022/05/21 00:33

「ブレイブリーデフォルトブリリアントライツ」キャラ詳細画面に表示されている年齢の補足情報

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「ブレイブリーデフォルトブリリアントライツ」、通称「BDBL」から、ちょっと特殊なキャラクターの年齢表記の事例をご紹介します。該当の画面はこちらです。こちらはキャラクターのプロフィール画面ですが、以下の項目が並んでいます。性別登場作品タイプ属性キャラ紹介「キャラ紹介」の項目の中にもいくつか小項目があります。その中にある「年齢」の項目の中に「年齢対象作品※」という文言があるのが気になりました。あまり…

2022/05/19 23:46

「ブレイブリーデフォルトブリリアントライツ」ラジオボタンとチェックボックスの見た目が同じなので、見た目だけでは操作が予測しづらい件

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「ブレイブリーデフォルトブリリアントライツ」、通称「BDBL」から、UIパーツの使われ方のアンチパターンをご紹介します。ラジオボタンとチェックボックスの見た目が同じなので、操作する時にどのような挙動になるか推測できずにストレスに感じます。一般的にはラジオボタンとチェックボックスは挙動該当の画面はこちらです。翻訳された文章ですが、GUIのガイドラインには以下の様なことが書かれている。標準的な形状のものを使う…

2022/05/19 01:10

「ブレイブリーデフォルトブリリアントライツ」図鑑画面にキャラを獲得するための導線が設置されていました

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「ブレイブリーデフォルトブリリアントライツ」、通称「BDBL」から、所謂図鑑画面からキャラを獲得するための導線が設置されているデザインをご紹介します。該当の画面はこちらです。この画面は「図鑑画面」の下にある「キャラクターの詳細画面」です。未所持のキャラを選択すると、画面下部にキャラを獲得する導線が設置されています。導線に従って進んでいくと、キャラを獲得できます。キャラの獲得はガチャなどの確率ではなく、ゲーム内…

2022/05/18 01:48

「ブレイブリーデフォルトブリリアントライツ」エンダウド・プログレス効果を知って、より良いログインボーナス生活を

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「ブレイブリーデフォルトブリリアントライツ」、通称「BDBL」から、ログインボーナスはどのような心理効果と共にデザインとされているかご紹介します。「エンダウド・プログレス効果」という言葉を知ったので、それを使って事例として紹介してみます。初めて知った言葉だったので積極的に使って覚えたい。前から知っていたともさ、的な感じで使っていきたい。まず「エンダウド・プログレス効果」の意味ですが… はじめから進捗があると目標…

2022/05/17 01:34

「ブレイブリーデフォルトブリリアントライツ」スタミナ消費が0なので気軽に挑戦でき、同時にスタミナを消費するための行動を誘導しているデザイン

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「ブレイブリーデフォルトブリリアントライツ」、通称「BDBL」から、初回クリアするまでクエストの消費スタミナが0であるデザインについてご紹介します。スタミナの消費をコントロールすることで、ユーザーの行動を誘導しているように感じました。該当の画面はこちらです。こちらはメインクエストのクエスト選択画面ですね。左から順にクエストのステージが並んでいます。よく見ると、ステージ同士をつなぐ線がキャラクターの足跡になっ…

2022/05/16 00:21

「ブレイブリーデフォルトブリリアントライツ」強化画面のキャラ一覧画面でどんな強化が出来るか教えてくれるデザイン

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「ブレイブリーデフォルトブリリアントライツ」、通称「BDBL」から、キャラ強化画面のデザインについてご紹介します。該当の画面はこちらです。短冊状にキャラクターのグラフィックが並んでいます。育成可能なキャラクターには赤い通知バッジが表示されているのですが、それだけではなくどのような育成ができるか書いてあるのが特徴です。例えば「Lv強化」「キャラ覚醒」といったテキストが表示されていることが確認できます。複数の育成…

2022/05/15 00:26

「ブレイブリーデフォルトブリリアントライツ」節電モードのUIについて事例紹介

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「ブレイブリーデフォルトブリリアントライツ」、通称「BDBL」から、節電モードのデザインについてご紹介します。自動的にクエストを進行する時など、放置する時間が長いゲームだと見かけることがありますね。該当の画面はこちらです。節電モードはバトル進行中に一定時間放置していると自動的に入ります。節電モードに入る時はこんな感じです。解除する時はこんな感じです。どちらも凝ったアニメーションではなくフェードで切り替わって…

2022/05/14 02:11

「ブレイブリーデフォルトブリリアントライツ」お知らせ画面が見出しの一覧と本文が一度に確認できるデザインで好き

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「ブレイブリーデフォルトブリリアントライツ」、通称「BDBL」から、お知らせ画面のデザインについてご紹介します。画面遷移せずに本文が横断的に閲覧できるので、個人的にはこのタイプのデザインは好きです。該当の画面はこちらです。画面左側に見出しが並び、右側には本文が表示されています。このレイアウト自体は中国で開発されたアプリでよく見かける印象です。見出し部分の特徴として以下の2点を挙げたいと思います。見出しの文章…

2022/05/12 23:26

「ブレイブリーデフォルトブリリアントライツ」確認ダイアログのボタンの中のテキスト、ボタンだけ見れば何をするのかが分かるデザイン

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「ブレイブリーデフォルトブリリアントライツ」、通称「BDBL」から、確認ダイアログに表示されるボタンの中の文字ついてご紹介します。本文を読まなくても選択肢が選べるデザインになっています。いくつか事例を紹介します。該当の画面はこちらです。確認ダイアログには以下のように書かれています。ストーリーを閲覧し、ステージを進行しますこれに対して選択肢は… 「キャンセル」「進行する」 …と、なっています。他の事例も紹…

2022/05/12 00:52

「ブレイブリーデフォルトブリリアントライツ」案内板で導線のリストを作ることでユーザーのやることを誘導したり手数の省略になったり

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「ブレイブリーデフォルトブリリアントライツ」、通称「BDBL」から、ホーム画面にある案内板の画面の役割ついてご紹介します。実体としてはちょっと階層が深い画面へのショートカット集です。該当の画面はこちらです。画面左側に妖精のグラフィックが表示され、右側には何やら画面遷移するための導線が並んでいます。ここに並ぶ導線は以下の6点です。錬金が完成した遠征から帰還した街に宝箱が出現しているサブクエスト獲得で…

2022/05/11 01:11

「ブレイブリーデフォルトブリリアントライツ」戦闘敗北画面にどんな情報が表示されて、どういった意味があるのか考えてみた話

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「ブレイブリーデフォルトブリリアントライツ」、通称「BDBL」から、戦闘敗北時に表示される情報…、具体的には画像と導線についてご紹介します。戦闘敗北はユーザーの期待結果ではありません。そういった意味ではエラーと似ているのかなと思っています。エラーの時にどういった情報を表示するのが適切なのか、という視点でも見ています。該当の画面はこちらです。戦闘に敗北し画面上部に大きく「GAME OVER」と赤文字で表示されてい…

2022/05/10 00:56

「ブレイブリーデフォルトブリリアントライツ」サムネイルを長押しした時に表示されるUI

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「ブレイブリーデフォルトブリリアントライツ」、通称「BDBL」から、サムネイルを長押しした時に表示されるゲージについてご紹介します。長押しは直感的な操作ではないため、ゲージを表示するなど何かしらリアクションがあるとユーザーも「何かあるのかな…」と推測する手掛かりになるのかな、と思います。該当の画面はこちらです。所持アイテムのサムネイルが並んでいます。サムネイルを長押しすると装備品の詳細情報が表示されます。アニ…

2022/05/08 19:47

「ブレイブリーデフォルトブリリアントライツ」用語の説明にリンクテキストを採用した事例紹介

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「ブレイブリーデフォルトブリリアントライツ」、通称「BDBL」から、ゲーム内用語のヘルプ機能についてご紹介します。ほとんどのゲームにはマニュアルが用意されています。用語集もそのひとつかなと思います。該当の画面はこちらです。ヘルプ画面ですね。画面左側が見出しで右側が本文という構成になっています。本文内にある下線が引いてある青文字をタップすると関連するヘルプページにジャンプします。見た目がリンクっぽくなってい…

2022/05/08 00:40

「モンスターハンターライダーズ」周回中の画面に何を表示するか

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「モンスターハンターライダーズ」、通称「モンハンライダーズ」から、クエストの自動周回機能についてご紹介します。周回中の画面に何を表示すれば良いのか、どのような操作形態が採用されているのか、という点で見てみました。該当の画面はこちらです。周回機能の一連の流れをアニメーションで見るとこんな感じです。周回回数の指定もできますが、スタミナが無くなるまで周回することも出来ます。今回はスタミナが無くなるまで周回する設定で…

2022/05/07 04:05

「モンスターハンターライダーズ」リングゲージのデザイン事例紹介。ゲージの開始位置は12時方向が見やすい

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「モンスターハンターライダーズ」、通称「モンハンライダーズ」から、長押しすると表示されるリングゲージのデザインの事例についてご紹介します。「モンスターハンターライダーズ」一部キャラなどのアイコンを長押しすると、詳細画面に遷移します。その際にアイコンの周囲にリングゲージが表示されます。該当の画面はこちらです。ガチャで獲得できるキャラクターの一部がアイコンで並んでいます。画面上部にはアイコンが長押しすることがで…

2022/05/05 17:51

「モンスターハンターライダーズ」チュートリアルでの段階的開示とキャラのメタ発言

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「モンスターハンターライダーズ」、通称「モンハンライダーズ」から、チュートリアルの構成についてご紹介します。「モンスターハンターライダーズ」では段階的にキャラクターが機能の説明をしてくれる構成になっています。該当の画面はこちらです。これはガチャ機能の説明をするために画面に誘導する場面ですね。「モンスターハンターライダーズ」ではゲームを進めると適宜機能が解放されるので、その都度適切なメッセージが表示されてい…

2022/05/05 01:20

「モンスターハンターライダーズ」総戦力の表示を目立たせることでゲームのプレイの促進につなげている

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「モンスターハンターライダーズ」、通称「モンハンライダーズ」から、総戦力の表示についてご紹介します。ゲームによってはホーム画面で総戦力を表示するゲームを見かけます。数字が増える様子を分かりやすく見せることでユーザーのモチベーションを高めたいのかな、と推測します。該当の画面はこちらです。ホーム画面では画面左上に総戦力が表示されています。総戦力の最高値が更新された場合、アニメーション演出が表示されます。gif動画…

2022/05/03 18:31

「モンスターハンターライダーズ」キャラボイスを聴くことが出来る画面で工夫されていると感じたこと

こんにちは！ちょこです！このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「モンスターハンターライダーズ」、通称「モンハンライダーズ」から、キャラボイスを聴ける画面で工夫されている点についてご紹介します。キャラボイスを聴くことができるゲームはたくさんあるので、それだけの需要があるか開発側もアピールしたい要素なのかもしれません。該当の画面はこちらです。画面中央に3Dのキャラクターが表示され、画面下部にはボイスを再生するボタンが並んでいます。CVはキャラクターボイスの略称ですね。声優さ…

2022/05/01 20:46