アプリゲームUIデザイン

「千銃士:Rhodoknight」キャラクターにプレゼントするアイテムのサムネに？マークが付いてる

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「千銃士:Rhodoknight」（以下、千銃士R）から、親愛度を高める場面で見られたデザインの工夫を紹介します！ キャラクターの好みを探す楽しさがある！ プレゼントの入手は簡単。だからこそ気軽に試せる！ まとめ ？マークがあることで、隠された情報を明らかにしたくなる 好みではないアイテムをプレゼントした時の反応も見たくなる アイテムは気軽に入手でき、気軽に試せるためストレスも少ない 親愛度の上昇度合いをビジュアルで…

2022/10/31 00:25

「千銃士:Rhodoknight」親愛度を上げる画面に遷移する時、キャラ選択の手順が省略され、デフォルトでキャラが選択されている

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「千銃士:Rhodoknight」（以下、千銃士R）から、寮室画面に遷移する際に、予めキャラが選択されているデザインを紹介します！ 最初からキャラが選択された状態で画面に遷移する 「千銃士R」では、寮室画面に遷移する時に「どのキャラの部屋に行く？」という選択が表示されません。タップすると特定のキャラクターの寮室に遷移する挙動になっています。 アニメーションで見るとこんな感じです。キャラクターを選ぶ画面が省略されていま…

2022/10/29 22:24

「千銃士:Rhodoknight」キャラプロフィールにモデルとなった銃の情報を載せている

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「千銃士:Rhodoknight」（以下、千銃士R）から、キャラプロフィール画面にモデルとなった銃の情報が掲載されていました！ キャラプロフィールにモデルとなる銃の情報が載ってる キャラプロフィール画面にキャラのモデルになった銃の情報が載っています。 「千銃士R」は銃の擬人化したタイプのゲームです。擬人化系のゲームであれば元ネタを知りたくなるのがオタクの習性です。 モデルとなった銃の情報は公式サイトにも掲載されていま…

2022/10/27 01:35

ゲームUIの画面ナレッジ

タイトル画面 © SQUARE ENIX CO., LTD. All Rights Reserved. 以下の要素で構成されている 背景 タイトルロゴ TAP TO STAR メニューボタン コピーライト バージョン ユーザーID 他ゲームへの導線 選択しているサーバー CRI WARE（ミドルウェア） BISHAMON（ミドルウェア） LINEアイコン Twitterアイコン それぞれのデザインについて記載する。 背景 画面の多くを占めるため、画面の印象を左右する情報 静止画、動画が採用される 開催中のイベント、周年などの大きな節目に合わせてデザインが更新されることがある ゲームのブランド、…

2022/10/26 01:46

「千銃士:Rhodoknight」パーティ名が○○小隊と表記され、ゲームの没入感を高めようとデザインされていた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「千銃士:Rhodoknight」（以下、千銃士R）から、世界観を加味したパーティの名称を紹介します！ デフォルトのパーティ名は○○小隊 「千銃士R」のパーティ画面を見ると、パーティ名が「○○小隊」と表記されていました。 ここの名称は「パーティ」「グループ」「ユニット」などが汎用例として用いられがちです。それらの名称でも問題なくユーザーに伝わると思いますが「千銃士R」の場合は世界観を加味した名称が採用されていました。…

2022/10/26 01:32

「千銃士:Rhodoknight」ボスのHPゲージがどれくらい残っているのか示すUIの紹介

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「千銃士:Rhodoknight」（以下、千銃士R）から、スワイプ操作で銃を手入れし、キャラクターと仲良くなるシステムを紹介します！ ボスのHPゲージが3本もある ゲージの数と色が対応しているプレビュー ボスのHPゲージが3本もある ボスのHPは一般の敵キャラより多い場合があります。1本のゲージにまとめず、複数のゲージに分割することで、HPが減少している様子が分かりやすくなります。また、複数のゲージに分割した分だけ大…

2022/10/24 23:25

「千銃士:Rhodoknight」手入れする操作とスワイプ操作のイメージが一貫するため、直感的に分かりやすいUI

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回「千銃士:Rhodoknight」（以下、千銃士R）から、スワイプ操作で銃を手入れし、キャラクターと仲良くなるシステムを紹介します！ スワイプ操作で銃を手入れすることを表現してるよ！ ゲージがあるから、あとどれくらいスワイプすれば良いのか分かる！ 指で隠れないようにアイコンは大きめだよ！ キャラクターによって銃のデザインも変えているよ！ スワイプ操作で銃を手入れすることを表現してるよ！ 銃を手入れするという設定で、画面…

2022/10/24 01:23

「千銃士:Rhodoknight」バラの花びらが散るタップエフェクトは世界観が表現されたデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回「千銃士:Rhodoknight」（以下、千銃士R）から、タップエフェクトのデザインを紹介します！ タップエフェクトがバラの花びら 「千銃士R」では画面をタップするとエフェクトが表示されます。タップエフェクトを表示しないゲームも多くありますが、画面内のどこをタップしたか分かるため、配信時などには分かりやすさには貢献していると考えます。 バラは「千銃士R」で象徴的なモチーフ 「千銃士R」ではタップエフェクトが表示されるだ…

2022/10/23 01:47

「千銃士:Rhodoknight」会話の選択肢を自動的に選んで進行するオプションの紹介

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回「千銃士:Rhodoknight」（以下、千銃士R）から、会話中の選択肢を自動で選ぶかどうかのオプションを紹介します！ ADVパートにオート時自動選択肢機能があるよ！ 「千銃士R」の会話パートにはいくつかの便利な機能が存在するのですが、今回はその中でも珍しい機能があったので紹介します。 こちらですね。画面上部の「オート時自動選択肢」という機能が表示されています。 デフォルトではオフですが、オンにするとこのように会話をオ…

2022/10/21 01:45

「千銃士:Rhodoknight」指先カーソルにバラのモチーフが採用され、世界観が強調されてた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回「千銃士:Rhodoknight」（以下、千銃士R）から、指先カーソルのデザインを紹介します！ 指先カーソルにバラがモチーフとして使われている ソシャゲにはしばしばタップする場所を示す指先カーソルが使われています。 役割としては矢印と同じです。ただ、矢印と指先カーソルを比較した時に、指先を用いることでタップすることがより伝わりやすくなると感じました。 指先カーソルが分かりやすいように、画像をトリミングしました。白い指先…

2022/10/20 00:01

「金色のコルダ スターライトオーケストラ」お知らせ画面の見出しが長い場合、文字が流れるアニメーション

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回「金色のコルダ スターライトオーケストラ」（以下、スタオケ）から、お知らせ画面のデザインの事例を紹介します！ 文字が入りきらない場合は文字がスクロールする 「スタオケ」のお知らせ画面の見出しは1行でレイアウトされていますが、しばしば枠に収まっておらず見切れています。 見出しが見切れる場合に考えられるレイアウトとしては… 行を増やすなどして表示スペースを増やす 文字サイズを小さくする 見切れることを許容する …など、いく…

2022/10/16 23:39

「アイドルマスター SideM GROWING STARS」ゲーム内の設定変更画面のプレビューがアニメーションしていた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター SideM GROWING STARS」（以下、サイスタ）から、ライブ設定のプレビューにアニメーションが使われていた事例を紹介します！ プレビューがアニメーションしている！ 「サイスタ」は音ゲーでライブ設定が可能なのですが、リズムアイコンの速度や大きさを変更した際、動画でプレビューができるデザインになっていました。 プレビューがあることで即時フィードバックが得られ、試行錯誤しやすいのですが、それだ…

2022/10/15 08:00

「アイドルマスター SideM GROWING STARS」エピソード詳細ダイアログを開くと、そのエピソードに登場するキャラが事前に分かる

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター SideM GROWING STARS」（以下、サイスタ）から、エピソードに登場するキャラクターを事前に確認できるデザインを紹介します！ エピソードに登場するアイドルが事前に確認できる ストーリー画面に遷移すると、各エピソードに登場するキャラクターが詳細ダイアログで確認することができます。これにより目当てのアイドルが登場するか事前に分かります。 アニメーションで見るとこんな感じです。エピソードの帯…

2022/10/14 01:10

「アイドルマスター SideM GROWING STARS」楽曲再開時にUIを非表示にして画面の状態を確認しやすくするデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター SideM GROWING STARS」（以下、サイスタ）から、画面遷移時のUIパーツのアニメーションのルールを紹介します！ ダイアログを非表示にしても再開ボタンが押せるデザイン 「サイスタ」の楽曲プレイ中に一時停止し、再開する時の方法が面白かったです。 一時停止から再開までのアニメーションはこんな感じです。最下位時に3・2・1とカウントダウンするのはよくある手法だとは思うのですが、今回はそこでは…

2022/10/13 02:15

「アイドルマスター SideM GROWING STARS」画面遷移する時に何が起きているのか分かりやすくするためのアニメーション

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター SideM GROWING STARS」（以下、サイスタ）から、画面遷移時のUIパーツのアニメーションのルールを紹介します！ UIパーツの左右移動によって先に進むように見せる演出 アニメーションのパターンは大きく分けて2パターンあります。まずはUIパーツが左右に移動することで先に進む、前に戻る印象を演出しているデザインです。 ストーリー画面では任意のストーリーを選択し、先に進むとUIパーツが画面右…

2022/10/10 18:09

「アイドルマスター SideM GROWING STARS」画面を傾けて端末っぽいデザインを表現

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター SideM GROWING STARS」（以下、サイスタ）から、アイドルとのトーク画面のデザインを紹介します！ 端末をナナメに傾ける見せ方 現実世界にあるチャットアプリを模したデザイン アイドル一人一人違うデザイン デザインはアドベンチャーパートにも使われている 端末をナナメに傾ける見せ方 「サイスタ」にはアイドルとトークを楽しめる機能が実装されています。 その画面に遷移した際、端末を斜めに傾けた…

2022/10/09 21:39

「アイドルマスター SideM GROWING STARS」ホーム画面だけではなくログインボーナスの背景にも時間差分が用意されている

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター SideM GROWING STARS」（以下、サイスタ）から、背景に時間差分のあるログインボーナスの画面を紹介します！ 確認した時間差分は朝昼夕夜の4種類 ログインボーナスの背景に4種類の時間差分がありました。ログインする時間帯とゲーム内の背景がどんな感じで対応しているのかまでは分からなかったのですが、体感としてそこまで大きく違和感を感じるデザインではない印象です。 こちらは昼の背景です。ブライ…

2022/10/09 02:13

「アイドルマスター SideM GROWING STARS」僅かなシャドウを付けてボタンの表現、強弱などをデザインしている

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター SideM GROWING STARS」（以下、サイスタ）から、フラット寄りのボタンデザインを紹介します！ シャドウを付けることで立体感を演出 こちらはパネルミッション画面です。 右側の枠はボタンです。僅かにシャドウを付け、立体感を表現しています。 このわずかな手掛かりでボタンであることが直感的に理解できるデザインになっています。 左側の枠はボタンではありません。シャドウが付いておらず、立体感が無…

2022/10/07 01:16

「アイドルマスター SideM GROWING STARS」情報の優劣をつけ、ボタンがたくさんあるにも関わらずきれいに見せるメニュー画面

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター SideM GROWING STARS」（以下、サイスタ）から、情報の優劣が付けられたメニューデザインを紹介します！ 情報の優劣はデザインをする上で基本的な考えのひとつだと思うのですが、ソシャゲのようにリリース後から要件が変更される場合、きれいにまとめるのは難しいことです。 そんな中でもサイスタのメニューはきれいにまとめられていると感じました。 情報の優劣がついたメニュー こちらがメニュー画面です…

2022/10/06 01:25

「アイドルマスター SideM GROWING STARS」想定外の文字数が表示されるキャラクターのプロフィール画面

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター SideM GROWING STARS」（以下、サイスタ）から、アイドルのプロフィールに柔軟に対応するデザインがありました！ レイアウトを考える時に最大文字数は考慮されますが、ソシャゲの場合はリリース後の更新やコラボなどの関係でかなりコントロールしづらいことが多いです。 そういった背景を踏まえた上で「サイスタ」のアイドルのプロフィール画面が面白かったので紹介します。 プロフィール画面はこちら 該当…

2022/10/04 02:17

「アイドルマスター SideM GROWING STARS」無料体験させることで商品購入のきっかけを作るデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター SideM GROWING STARS」（以下、サイスタ）から、お試しで購入できるアイテムがありました！ まずは体験させてみる サイスタのショップには色々な商品が販売されており、その中の1つが無料で試せるようになっていました。 具体的にはこちらの商品です。 プレミアムパック トライアル 効果としては「3日間STの回復速度が大きくアップ」です。STの回復時間を短くなるため、ゲームのプレイ時間を延ばす…

2022/10/03 00:42

クライアントから受けたデザインのオーダーをより要望に沿ったデザインに仕上げるためのポイントやコツを紹介「○×でわかる！ デザインが良くなる5つのポイント」

こんにちは、ちょこです！ 今回、私が購入した書籍の中から紹介する書籍はこちらです！ ○×でわかる！ デザインが良くなる5つのポイント はい、ちゃんと買っていますー 所感 グラフィックデザインを中心に紹介されている クライアントからのオーダーに対して、ビフォーアフターが載っている ビフォーアフターでシンプルに構成されているが、途中経過の解説はない アフターのデザインに疑問点がある場合、理解できないと納得できない 楽しみながら読んでみて！ 似たようなテーマや見せ方の書籍は他にもいくつかあります。人によってはアフターのデザインに物足りなさを感じるかもしれません。 ただ、この手の書籍はアフターのクオリ…

2022/10/01 02:52