chevron_left

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

cancel
アプリゲームUIデザイン https://appgameui.hatenablog.com/

ゲームのUIデザインを紹介しています。ゲームUIに興味を持つ方が増えるといいな。

appgameui
フォロー
住所
未設定
出身
未設定
ブログ村参加

2019/06/22

arrow_drop_down
  • 「スタースマッシュ」スタンプを送るとボイスが流れるけど、スタンプに文字が含まれていないので送信するまで何のメッセージが伝わるのか分からない

    こんにちは!ちょこです! 「スタースマッシュ」のスタンプ機能のデザインがちょっと変わったアンチパターンであったので事例として共有してみます。 該当の機能が使える画面はこちらです。 分かりやすいようにスタンプ部分を大きくします。見て分かる通り、スタンプに文字が描かれていません。 スタンプに文字が無いこと自体は別に良いのですが、実はボイスが流れる実装になっています。 文字が表示されておらずボイスが流れる実装により、デザイン面でいくつかデメリットが出てきてしまっています。 文字が描かれていないことによるデメリットは以下の3つです どういったボイスが流れるかわからない ボイスが流れることについて、ユー…

  • 「食物語」でもアズレン同様にオート戦闘機能を有効にしようとした際に注意喚起が表示されるデザインでした

    こんにちは!ちょこです! 「食物語」でオートバトルにした時に表示されるヒント画像が気になりました。 該当の画像はこちらです。 画像の中に「オート機能を使うには一定のリスクがある」という文字と、キャラクターが倒れている画像が表示されています。 個人的に気になる部分としては… オート戦闘だとどうなるのか? その結果ユーザーにどういった影響があるのか? ユーザーは何を判断すれば良いのか? などです。 文字で説明されていないので画像から察することしかできないのですが、画像を見る限りは機能としてポジティブに見えません。 また、ログインするたびに表示されるので、結構強めな注意喚起として受け止められます。 …

  • 「食物語」ブロックするユーザーがいない時の表現が世界観に沿った表現になっていた話

    こんにちは、ちょこです! 「食物語」にて、ブロックするユーザーがいなかった場合のテキストが世界観に沿っていて感動しました。 該当の画面はこちらです。 文字小さいですね。大きくします。 このように「若さまを煩わす人がいません」と表示されています。※煩わす(わずらわす) こういった画面で、よくありがちなのは「ブロックしているユーザーはいません」とかかな…。 より汎用的にするのであれば…「ユーザーは見つかりませんでした」などであれば、ユーザー検索時のメッセージにも流用可能です。 ただ、どちらもシステム的な表現です。正確なメッセージではあるものの、世界観に沿った表現らしさは失われてしまっています。 「…

  • 「ファイナルギア」ホームボタンでメインコンテンツのボタンが縦に並べてあって、指の可動域的に押しやすいレイアウトだと思った

    こんにちは、ちょこです。 「ファイナルギア」のボタンが押しやすい配置になっていました。 早速見ていきます! 具体的にはこちらのホーム画面です。 通常、画面下部に並んで配置されがちなメインコンテンツのボタンが画面右側に配置されています。 ここの部分ですね。 上から順に ホーム 出撃 パイロット 格納庫 募集 開発 …以上の6つが並んでいます。 中国開発の横画面のゲームの場合、フッターを無くしたデザインにすることは珍しく無いのですが、右端にメインメニューを吸着させるようのデザインは初めて見たかも? でも、気のせいかもしれないので確認します。 過去プレイした範囲で、中国の開発タイトルでフッターメニュ…

  • 「スタースマッシュ」アドベンチャーパートが漫画だった。メリットとデメリットを考えてみた

    こんにちは!ちょこです! 「スタースマッシュ」でストーリーの展開がいわゆるアドベンチャーパートではなく、漫画で進行するデザインになっていました。 これについてUIの視点から考えてみたいと思います。 以下が該当の画面です。 このようにストーリーの進行が漫画形式で行われます。 漫画と漫画の間にバトルが行われるデザインです。 これについてUIの視点からのメリット、デメリットを考えてみます。 1:タップ数が減らせる 2:キャラクターの表情やポーズに制限が無い 3:セリフのフォントにも変化を持たせることができるので、文字での感情表現がより強化できる 1:後になって修正することが基本的には不可能 まずメリ…

  • 「プロジェクトセカイ カラフルステージ! feat.初音ミク」エラー文にキャラグラフィックを使うと、開発側の温度感を伝えられるという話

    こんにちは!ちょこです! 「プロジェクトセカイ カラフルステージ! feat.初音ミク」でバーチャルライブの接続上限になった時の表示を紹介します。 エラー文にキャラクターのグラフィックを利用すると、開発側の温度感も伝わるので良いデザインだと思いました。 以下が該当の画面です。 ここの部分に注目ですね。 ミクのグラフィックと「満員のため入室できません」「しばらく時間をおいて、再度お越しください。」と表示されています。 この「満員」についてはユーザーからすると理解しづらい状況です。 恐らくサーバーを使い分けしてるのかな、と思うのですが、外から見た時に状況が明らかではないので「満員」とはどういった状…

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

    こんにちは、ちょこです! 「ファイナルギア」のお知らせ画面と同じようなデザインのフォーマットを最近よく見るようになったので、もうちょっとちゃんと見ようかと思います。 「ファイナルギア」のお知らせ画面はこちらです。 大きな特徴としては… お知らせ本文を見るために画面遷移しない 遷移しないので、手数が少なくなる 遷移しないので、戻るボタンが省略できる タイトル一覧に日付を表示しない 最近プレイしたゲームが軒並みこのデザインなので、中国系のゲームのトレンドとかなのかな…。 最近プレイしたゲームはこちらです。 ▲「三国 -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.初音ミク」はスタミナを消費せずにゲームがプレイできます。 この機能に関するヘルプを抜粋します。 「ライブボーナス」とはなんですか? ライブをプレイした際に消費したライブボーナス数に応じてラ…

arrow_drop_down

ブログリーダー」を活用して、appgameuiさんをフォローしませんか?

ハンドル名
appgameuiさん
ブログタイトル
アプリゲームUIデザイン
フォロー
アプリゲームUIデザイン

にほんブログ村 カテゴリー一覧

商用