searchカテゴリー選択
chevron_left

カテゴリーを選択しなおす

カテゴリーのご意見・ご要望はこちら
cancel
プロフィール
PROFILE

appgameuiさんのプロフィール

住所
未設定
出身
未設定

自由文未設定

ブログタイトル
アプリゲームUIデザイン
ブログURL
https://appgameui.hatenablog.com/
ブログ紹介文
プレイしたアプリゲームのUIデザインに関して、書き残しておこうと思います
更新頻度(1年)

366回 / 365日(平均7.0回/週)

ブログ村参加:2019/06/22

本日のランキング(IN)
読者になる

新機能の「ブログリーダー」を活用して、appgameuiさんの読者になりませんか?

ハンドル名
appgameuiさん
ブログタイトル
アプリゲームUIデザイン
更新頻度
366回 / 365日(平均7.0回/週)
読者になる
アプリゲームUIデザイン

appgameuiさんの新着記事

1件〜30件

  • 「ファイナルギア」お知らせ画面の新しいメンタルモデルが出来てきてる…?

    こんにちは、ちょこです! 「ファイナルギア」のお知らせ画面と同じようなデザインのフォーマットを最近よく見るようになったので、もうちょっとちゃんと見ようかと思います。 「ファイナルギア」のお知らせ画面はこちらです。 大きな特徴としては… お知らせ本文を見るために画面遷移しない 遷移しないので、手数が少なくなる 遷移しないので、戻るボタンが省略できる タイトル一覧に日付を表示しない 最近プレイしたゲームが軒並みこのデザインなので、中国系のゲームのトレンドとかなのかな…。 最近プレイしたゲームはこちらです。 ▲「三国 -IKUSA-」 ▲「神無月」 こんな感じです。 遷移せずにお知らせ本文が確認でき…

  • 「ファイナルギア」世界観を作り込む為にデザインされたUIパーツの例

    こんにちは!ちょこです! 「ファイナルギア」のUIパーツの中に世界観の作り込みが感じられるグラフィックがありました。 世界観を表現する際にどういった部分に気を付けてUIパーツをデザインしているのか、考える際の参考になりそうだと感じたので、紹介します! SFっぽいフィルタ フィルタ以外にも凝っているデザイン タイポグラフィについて 通信状況を示すアイコン SFっぽいフィルタ 依頼画面の左側にキャラクターが表示されているのですが、SFっぽいフィルタがかけられていました。 動きで見るとこんな感じです! 他のゲームでこういった表現はあまり見ないかも…。ミッション系の画面で、キャラクターが表示されている…

  • 「ファイナルギア」エフェクトや演出を作り込むと世界観の没入感に繋がる

    こんにちは、ちょこです! 「ファイナルギア」のバトル中の会話UIがコクピットで通信してる様子を表現していました! 没入感や演出の参考になると感じたので紹介します。 該当の画面はこちらです! バトル中に会話イベントが発生すると、左上に(イベントによっては右上にも)話者のグラフィックとセリフが表示されます。 動きで見るとこんな感じです! こんな感じでキャラクターが表示される時のエフェクトが凝っています。 細かい部分ですが、こういった表現があると世界観が伝えやすくなったり、ゲームへの没入感を高めることができます。 以上は演出を作り込むことによって、世界観への没入感も高められるという話ですが、演出を除…

  • 「ファイナルギア」バトル結果画面が時間経過で自動で進行するデザインになってて便利!

    こんにちは、ちょこです! 「ファイナルギア」で時間経過で自動的に画面が遷移していく機能が実装されていました。 意外と見たことないかも…? 該当の画面はいくつかありますが、一例として以下の画面をあげます。 こちらはバトル結果の画面です。 画面右下の「次へ」ボタンのところに、自動的に画面が遷移するまでのカウントダウンが表示されています。 画面全体で見るとこんな感じですね。 他タイトルで同じクエストを連続して実行する機能はしばしば見かけます。自動周回機能ですね。 ただ、時間経過で次の画面に進むデザインはあまり見た記憶がありませんでした。 あるとすれば、例えば… ゲームオーバーになりコンティニューまで…

  • 「ファイナルギア」設定画面にあるベゼルレスUIって何?

    こんにちは、ちょこです! 「ファイナルギア」の設定画面に「ベゼルレスデザインUI最適化」という 見慣れない項目がありました。 ん~…初めて見ました。 相変わらず中国のゲームはオプションが細かい…! ベゼルレスデザインUIの設定をスライダーで調整してみるとこんな感じになりました。 ちょっと分かりづらかったので、変化が分かりやすい箇所をアップにします。 なるほど…ベゼルレスの意味は分からないけど、要するに画面の余白の調整機能なのかな…。 (ちなみに「ベゼルレス」について調べてみましたが大体認識合っていたようです) www.724685.com 背面に敷いていると分かりづらいのですが、ダイアログを閉…

  • 「ファイナルギア」バッテリー残量と現在時刻の表示のさせ方がスキューモーフィズムだった

    こんにちは、ちょこです! 「ファイナルギア」のホーム画面にバッテリーの残量と現在時刻が表示されていました。 それ自体は珍しくはないのですが、表示されている場所とデザインの思想が珍しかったので紹介します。 該当の画面はこちらです。 ホーム画面はどこかの基地か施設のようです。 画面中央にナビキャラが表示されており、背面には情報が映し出されるスクリーンが表示されています。 バッテリー残量と現在時刻の表示はこちらです。 今まで、バッテリーの残量や現在時刻は画面上部にあるイメージでした。 実際に過去にプレイしたゲームでバッテリー残量や現在時刻が表示されているゲームを抽出したので確認してみます。 他画面の…

  • 「ファイナルギア」水滴エフェクトを実装する際はオンオフの設定があると良さそう

    こんにちは、ちょこです! 「ファイナルギア」にて、バトルフィールドの天気が雨であった場合、画面に水滴が付き、流れていきます! かっこいい! ▲バトル中に雨が降ってたら水滴が付きます 動画で見るとこんな感じです! ん~、解像度粗くて分かりづらいですね…。ちょっと拡大表示してみます。 画面中央付近、右から左にかけて水滴が流れるの様子が分かりますでしょうか? 実装方法は異なるのかもしれませんが、同じような水滴表現は「ペンギンの島」でもありました。 ▲「ペンギンの島」水面からあがるとカメラに水滴が付きます 表現としては目新しさがあり、面白いです。没入観も高まるかと思います。 ただ、画面いっぱいにエフェ…

  • 「プラネット・コマンダー」チャットに書き込む際の注意文の圧が強すぎ

    こんにちは、ちょこです! 「プラネット・コマンダー」のチャット画面に、チャット機能を利用するにあたっての注意事項が結構強めに書かれていました。 注意事項というより警告文に近く、驚いたので紹介します。 該当画面はこちらです。 分かりやすくアップにしました。 文章を抽出するとこんな感じです。 チャットがシステムによって監視されています!チャットの相手を尊敬してください。送信されたすべてのデータは基本的にすべて保管されます。テロに関わるメッセージを知ったら、すべてのデータが早速警察へ送られます。 いや、怖いわ! 日本語の翻訳はやや不自然ではありますが、伝えたいことは伝わっています。むしろ不自然な文章…

  • 「プラネット・コマンダー」文字は読めるサイズにしてほしい

    こんにちは!ちょこです! 「プラネット・コマンダー」でめちゃくちゃ小さい文字があったので、アンチパターンとして紹介します。 該当の文字があったのはこちらの画面です。 分かりやすくトリミングすると、この箇所です。 うぅ…視力検査の文字みたいなサイズです…。 頑張って読んでみると「戦闘への参加やダメージのXXを行って、シーズンランキングを上げましょう!」と読めなくもないですが…どうだろう…。 自然と読める人はまず居ないんじゃなかろうか…。 ローカライズすると想定以上の文字数になることがあります。 翻訳する言語にもよりますが、こういった文章が表示されるような場所は2倍程度の文字数が入るようにデザイン…

  • 「神無月」CVが未実装のままリリースされた時、どう表記するのが良いか。UIデザイナーにできること

    こんにちは、ちょこです! コロナの影響などで、CVが未実装のままキャラクターがリリースされた場合、UIデザイナーとしてどう表記するのが良いのか…。 以前なら考えたことはなかったのですが、実際にそういうケースがありました。 「神無月」のガチャ演出でキャラクターを獲得した際、CVのところに「乞うご期待」という文字が…! ▲CVとはCharacterVoiceの略です。 こちらです! 要するにボイス未実装な状態です。 CVはソシャゲにおいては重要な訴求ポイントです。 「好きな声優さんが参加されているからゲームを始めた!」 「好きな声優さんが声をあてているからそのキャラクターが欲しい!」 …という動機…

  • 「神無月」スタンプ作成機能があるのはユーザー間のコミュニケーションの促進を狙っている

    こんにちは!ちょこです! 「神無月」に自分でスタンプが作れる機能がありました。 スタンプ機能があるだけでも凝っている部類なのに、自分でスタンプが作れる機能まであるとは…。 先日紹介した「フィギュア機能」や「ストーリー中にコメントを流せる機能」もかなり変わった機能だったし…。 全体的に気合が入ってるますね、このゲーム。 ちなみにスタンプ制作機能については以下のような実装になっているようです。 初期設定では8個のスタンプ枠があり、空き枠を開放するには少量のダイヤが消費されます。 スタンプを作成する時は、スペースを使わず、5文字まで入力できます。 完成後に、スタンプを保存するには少額なコインが必要で…

  • 「神無月」スクロールに合わせて歯車が回転するUI

    こんにちは、ちょこです! 「神無月」で歯車のUIパーツがあるのですが、スクロールに合わせて回転するデザインになっていました! スクロールするとこのように動きます! あ、ダメだ。全然分からん。 拡大しました! スクロールする向きに合わせて歯車が動く方向も変わります! いいですね! 歯車が動くのは作り込まれていてとても良いのですが…、なぜ歯車なのかは謎です…。 ミッション以外だと、クエスト結果画面にも歯車が表示されています。 右側のこの部分ですね。 ミッション画面のデイリータブでも同様に歯車と花が描かれています。 ん~…察するに何かしら意図的なものは感じます…。 リストを表示する場所で必ず歯車のデ…

  • 「神無月」フィギュア機能はキャラを魅力的に見せる機能なのでそれは良いと思うけど…

    こんにちは、ちょこです! 「神無月」にて『フィギュア』という機能がありました。見慣れない…というか、かなりマイナーな機能なのでUIの価値として考えてみます。 フィギュア機能のUIとしての価値は「キャラクターを魅力的に見せること」だと考えます。 魅力的に伝えるための機能としては以下のようなものがあります。 モーションの切り替え フレーム送り カメラ移動 土台のデザイン変化 アニメーションで見るとこんな感じです。 左側のフライドバーでコマ送りしています。右側のプルダウンでモーションを切り替えることが出来ます。 土台のデザイン変更についてはこんな感じです。 もうこれ『フィギュア』というより半分デバッ…

  • 「神無月」キャラ獲得演出。ローコストっぽいけど飛び出す演出によってZ軸方向に情報が増え、リッチに見える

    こんにちは!ちょこです! 「神無月」のガチャのキャラの獲得演出の見せ方が良かったです! 限られたリソースの中で工夫されていたので紹介します! まず、獲得演出を全体で見るとこんな感じです。 まずカードを見せて… 次にキャライラストを見せます。 3Dのキャラクターが必殺技を繰り出して… 最後にキャラクターの名前などを見せて演出終了です。 この一連の演出の中で特に見せたいのはここの部分です! このようにカードからキャラクターが飛び出している様な演出がされています。 カード枠の中に収めるにあたってトリミングしていた部分も見えるので、初見の演出としては驚きと感動が得られました。 データの構造については上…

  • 「神無月」エンプティステートの紹介(13回目)

    こんにちは!ちょこです! エンプティステートをこつこつ紹介して13回目。少しずつ、システム的なダイアログではなく、キャラクターなどのグラフィックを表示するゲームも増えてきた気がしないでもない。 もっと一般的になって欲しい…! 「神無月」でもエンプティステートがあったので、デザインの紹介です! 今回紹介する箇所は以下です! 1:フレンドがいない時 2:メールがない時 3:所持しているカスタムスタンプがない時 1:フレンドがいない時 ▲友達が居ない時 友達が居ない時はこういった画面のデザインです。このデザインの良いところとしては… 解決するための導線がある 吹き出しを利用して、キャラクターのセリフ…

  • 「神無月」アドベンチャーパート中にニコニコみたいなコメント流す機能が実装されてて驚きました

    こんにちは!ちょこです! 「神無月」の会話シーンにて、ニコニコ動画のようなコメントが流れる機能が実装されていました。 動きで見るとこんな感じです! この機能が実際されているアプリは久々に見たので驚きました。 特許絡みで実装できないのかな、と思い込んでいたのですが、開発・運営が中国っぽいので対象外なのかな…。 この機能があると、感情の共有ができ、他のユーザーと一緒に盛り上がれます。 デメリットとしては… 1:良くも悪くも人の賑わいが可視化されるので、過疎が分かりやすい。 例えば、シナリオを少し先に進めたり、サブコンテンツであるキャラクターシナリオを読もうとすると急激に過疎るので、人によってはネガ…

  • 「三国 -IKUSA-」既存のメンタルモデルと違うお知らせ画面のデザインがされていました

    こんにちは!ちょこです! 「三国 -IKUSA-」のお知らせ画面のデザインが興味深かったので紹介です。 挙動としてはこんな感じです。 左側のタブのような場所をタップすると、右側に本文がプレビューされます。 この挙動をするお知らせ画面は初めて見ました。 多くの日本のゲームの場合は以下のようなデザインが多いです。 まず一覧が並びます。 タップすると詳細ページに遷移します! 挙動としてはこんな感じです。 多少デザインが違っていても基本的には同じタイプのデザインかと思います。 ▲「とある魔術の禁書目録 幻想収束」 ソシャゲのお知らせについては、ガラケーの頃から「一覧表示」⇒「お知らせ本文表示」という構…

  • 「三国 -IKUSA-」巻物の形をしたUIって大体ドロワー

    こんにちは!ちょこです! 「三国 -IKUSA-」にて画面下部のメニューがドロワーになっていました。 中国のアプリってフッターがこういった挙動になってること多いですよね。なんでだろう…。 挙動としてはこんな感じです。 このドロワーのデザインは現実世界の巻物の挙動を知っているからこそ成立するデザインです。 なので、アフォーダンスを上手に使っていると感じました。 参考:ノンデザイナーこそ知っておきたい「アフォーダンス」入門|ferret」 UIのデザイン手法には、「三国 -IKUSA-」のようにグラフィックを描き込む「スキューモーフィズム」と、あまり描き込まない「フラットデザイン」という手法があり…

  • 「鉄腕アトム:ブリックブレーカー」画面から指を離した時に表示されるUIって斬新な発想だと思った

    こんにちは!ちょこです! 「鉄腕アトム:ブリックブレーカー」にて、画面から指を離すことで表示されるUIがありました。 画面上の挙動だとこんな感じです。 画面から指を離すと、画面がスローモーションになり、使用可能なアイテムがポップアップします。 これ、凄く興味深いです…! 通常、アプリの画面を考える際、情報を呼び出す為に画面をタップする、という発想になりがちです。というか、個人的には当たり前すぎるので疑いもしませんでした。 これは現実の世界でそのような挙動になっていることが理由のひとつとしてあげられます。 しかし、デジタルの世界ではもっともっと柔軟な発想をもってデザインをしても良いのだな、と思い…

  • 「プロジェクトセカイ カラフルステージ! feat.初音ミク」MVP獲得演出のUIアニメーションがMVPなので紹介させてください!

    こんにちは!ちょこです! 「プロジェクトセカイ カラフルステージ! feat.初音ミク」のマルチプレイの結果画面にて、UIアニメーションを使って上手に視線誘導されている箇所がありました! デザインとして、凄く良いと感じたので紹介します! 場面としてはこちらです! 画面遷移の一覧の流れとしては以下のようになっています。 楽曲クリア、ランク表示 各自のスコア表示 MVPの発表 自身のスコア詳細表示 一見すると各パネルが等間隔に並べられているように見えます。 しかし、よく見るとMVPを発表する際にMVPを獲得したユーザーを少しだけ大きく表示するようなアニメーションが実装されています! ▲MVPを獲得…

  • 「プロジェクトセカイ カラフルステージ! feat.初音ミク」楽曲開始演出のUIアニメーションが視線誘導と情報の優先度を上手く使われている

    こんにちは!ちょこです! 「プロジェクトセカイ カラフルステージ! feat.初音ミク」の楽曲開始演出のUIアニメーションが視線誘導と情報の優先度を上手く使っているな、と感じました。 こちらのアニメーションです。 これもアニメーションを利用して視線を誘導。 ここですね、にゅっと表示されます。 難易度ごとにイメージカラーが設定されています。順番に見ていきます。 「EASY」は明るい緑色です。 「NORMAL」は水色です。 「HARD」は明るいオレンジ色です。 「EXPERT」は赤です。 ※もうひとつ上に「MASTER」と呼ばれる難易度があるのですが、解放できていないので省略します。 改めて画面を…

  • 「プロジェクトセカイ カラフルステージ! feat.初音ミク」バーチャルライブの臨場感が凄かった!

    こんにちは!ちょこです! 「プロジェクトセカイ カラフルステージ! feat.初音ミク」のバーチャルライブに感動しました! これすごいです! ビジュアルや没入感も素晴らしいのですが、ここではUIデザインについて書いてみます。 バーチャルライブとは? まず、バーチャルライブについて簡単に説明します。サポートページによると以下の通り説明されています。 バーチャルライブとはなんですか? バーチャルライブとは他のプレイヤーと、リアルタイムで参加するライブです。 プレイヤーはアバターとしてセカイのライブを鑑賞、応援することができます。 バーチャルライブは開催スケジュールが決められています。 スケジュール…

  • 「プロジェクトセカイ カラフルステージ! feat.初音ミク」アニメーションを利用することにより、段階的開示を取り入れている

    こんにちは!ちょこです! 「プロジェクトセカイ カラフルステージ! feat.初音ミク」のUIアニメーションで上手く視線誘導している箇所がありました! 情報量の多い画面のデザインをする際の参考になれば幸いです。 該当画面はこちらのホーム画面の初心者ミッションの通知バーです。 左上にあるこちらの情報です。 こちらの通知バーです。アニメーションによって時間差で画面に表示されています。 アニメーションはこちらです! 一連のアニメーションを細かく分けると以下のようになっています。 カメラがキャラクターに寄る カメラが静止 ミッションの通知バーが画面外からスライドイン キャラクターのセリフ(吹き出し)が…

  • 「プロジェクトセカイ カラフルステージ! feat.初音ミク」スタミナ一括消費に似た機能が実装されていた。より利便性が高められていた

    こんにちは、ちょこです! 「プロジェクトセカイ カラフルステージ! feat.初音ミク」にて、ライフボーナス消費設定機能というものがありました。 これ、どういう機能かと言うと、以前「ヒプノシスマイク-A.R.B-」で紹介したスタミナを一括消費する機能に近いものです。 リソースを一括消費してその分報酬やEXPを多く獲得することが出来る機能です。 厳密に言うと、「プロジェクトセカイ カラフルステージ! feat.初音ミク」はスタミナを消費せずにゲームがプレイできます。 この機能に関するヘルプを抜粋します。 「ライブボーナス」とはなんですか? ライブをプレイした際に消費したライブボーナス数に応じてラ…

  • 「プロジェクトセカイ カラフルステージ! feat.初音ミク」ストーリー選択画面にて登場キャラの情報が見れるデザインの紹介。最近音ゲー界隈で流行ってるのかな

    こんにちは!ちょこです! 「プロジェクトセカイ カラフルステージ! feat.初音ミク」 のストーリー選択画面の詳細情報に、ストーリー内に登場するキャラの一覧が見れるようになっています。 こちらの「i」のボタンを押すと… このように「登場メンバー」のダイアログが表示され、ストーリーに登場するキャラが把握できます。 ここですね。 キャラクターのアイコンがグループ別に並んでいます。 動きで見るとこんな感じです! ん~…なぜか個人的に最近よく見るデザイン…。 例えば「ブラックスター」はこんな感じです。 「ヒプノシスマイクARB」も同じようにストーリーに登場するキャラが見れます。 なぜか3つとも音ゲー…

  • 「プロジェクトセカイ カラフルステージ! feat.初音ミク」フィルタ画面で顔グラフィックを表示する際は、名前も併記した方が分かりやすい

    こんにちは!ちょこです! 「プロジェクトセカイ カラフルステージ! feat.初音ミク」のフィルタ画面でアイコンを用いたデザインが採用されていました。 こんな感じです!グラフィカルで楽しそうな画面です! ただ、直感的に選択しづらさを感じてしまいました。理由を言語化してみます。 選択しづらいと感じた大きな理由は認知コストの増加です。任意のキャラを選択しようと 思った時に、名前が表示されておらず、該当のキャラをぱっと見で見つけられません。 既存キャラもいますが、多くはゲームオリジナルのキャラクターたちです。 ▲これらは既存キャラ ▲オリジナルキャラたち 初見では顔と名前を覚えきれていないことが考え…

  • 「三国ドライブ」色覚多様性対応について。まずは「自分とは違った色の見え方の世界がある」というところから意識して欲しい

    こんにちは!ちょこです! 「三国ドライブ」で視認性が良くない文字があったのが気になりました。画面としては以下の画面です。 具体的にはこの部分です。背景が無彩色に近い赤、文字が暗めの赤です。 オリジナルでも視認性は低いのですが、これをシミュレーターを通してみました。P(protanopia)型だとこんな感じの見た目です。 見えなくはないけど…隠れてる感じがします。 「いや、見えるじゃん」と思う方もいると思います。画面全体で見るとこんな感じです。 情報量が増え、より目立つ情報、読みやすい文字もあります。 ぱっと見で「ヒント」の文字が見づらいと感じるかな、と思います。 見えるかどうか、ではなく、相対…

  • 「三国ドライブ」素材選択数がパない。常に運用を見越してデザインすることも忘れないようにする必要がある。

    こんにちは!ちょこです! 「三国ドライブ」の強化画面にて、消費する強化素材を選択する画面があります。その画面では一度に選べる素材の数が150個(!!)と非常に多かったです。 選択数の上限はこちらです。ちょっとこの数は初めて見ました。150て…。 所持数の上限も初期状態で1000でした。こちらも多い。 これくらい多いとゲームはどうなっているかというと… Lvを上げるために必要な素材数が多い Lvを上げるキャラクターの数が多い 素材がたくさん入手できるほどインフレが進んでいる などが考えられます。 程度の差こそあれ、運用が続くとこの傾向は現れます。 というのも、運用が続けば続くほど既存ユーザーと新…

  • 「三国ドライブ」NEWの文字をキャラの顔に被せんといてくれぇ

    こんにちは!ちょこです! 「三国ドライブ」のガチャ結果画面にて、キャラのサムネイルとNEWの文字が被っているのが気になりました…。 ガチャ結果画面をデザインする際のアンチパターンとして紹介します。 人間の生理的な反応として、人の顔に目が行くので、それが阻害されることにより、ストレスに感じやすいのだと考えられます。 アニメーションで見るとこんな感じです。 NEWが明滅してめっちゃ鬱陶しい… そして「ドラゴンエッグ」でも全く同じ演出なんですよね。 ちなみに過去にも同じ部分で引っ掛かっていました。 appgameui.hatenablog.com マネするなり参考にするのは良いとして、悪いところは参…

  • 「三国ドライブ」アイテムのカラーバリエーションを展開する時に色覚多様性対応の視点で注意したいこと

    こんにちは!ちょこです! 「三国ドライブ」のアイテムデザインが色覚多様性対応の視点から見たときに懸念がありました。デザイナーが陥りがちなアンチパターンとして紹介してみます。 アイテムのカラーバリエーションを作る機会のある方 カラーバリエーションを発注する方 カラーバリエーションを監修する立場の方 色覚多様性対応に興味のある方 など、広く知ってもらいたいな、と思っています。 早速ですが、該当のデザインはこちらです。 P(protanopia)型だとこんな感じに見えます。 上の「桃桜の神盃」のほうはちょっと区別つかないですね。下の「鬼玉の指輪」は色は分からないものの、光沢の差分が手掛かりになりそう…

カテゴリー一覧
商用