ゲームアプリのUIデザイン

プレイしたゲームアプリのUIデザインに関して書き残します。毎日頑張って更新!

017_アニメーション-UIアニメーション

「未定事件簿」UIアニメーションの実装事例の紹介

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです! 今回は「未定事件簿」から、UIアニメーションの事例をご紹介します。 最近…

「僕のヒーローアカデミア ULTRA IMPACT」ロード中を示すアニメーションにデザインのバリエーションが用意されていた。単純接触効果に繋がるのかもしれない

こんにちは!ちょこです! このブログでは「ゲームのUIを見てみよう!」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「僕のヒーローアカデミア ULTRA IMPACT」、通称「ヒロトラ」のロード…

「僕のヒーローアカデミア ULTRA IMPACT」特殊なUIパーツのアニメーションの実装事例

こんにちは!ちょこです! このブログでは「ゲームのUIを見てみよう!」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「僕のヒーローアカデミア ULTRA IMPACT」、通称「ヒロトラ」の特徴的…

「ブラック・サージナイト」ショップ画面で演出を付与することで、商品を魅力的に見せるだけではなく、新奇性を感じられるデザインの事例紹介

こんにちは!ちょこです! このブログでは「ゲームのUIを見てみよう!」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「ブラック・サージナイト」の商品紹介の画面デザインを紹介します! …

「IDOLY PRIDE アイドリープライド」見出しのUIアニメーションが小気味良かったので紹介!

こんにちは!ちょこです! このブログでは「ゲームのUIを見てみよう!」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「IDOLY PRIDE アイドリープライド」の見出しのテキストのアニメーシ…

「逆転オセロニア」アニメーションを利用して情報を目立たせるデザインの紹介

こんにちは、ちょこです。 このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。 今回は「逆転オセロニア」の駒獲得時の演出を紹介します。 アイテムを獲得…

「アッシュアームズ-灰燼戦線-」背景の見せ方やUIアニメーションを使った情報設計

こんにちは、ちょこです! 「アッシュアームズ-灰燼戦線-」のバトル中の情報整理について特徴的な場面を紹介します。 該当の画面はこちらです。 空と地面が一望できるデザイン 「アッシュアームズ-灰燼戦線-」の戦闘中の画面では地上で戦闘するキャラクター…

「ドールズフロントライン」ADVパートで没入感を高めるためのちょっとした工夫

こんにちは、ちょこです。 「ドールズフロントライン」のADVパートの会話ログのUIアニメーションが、ゲームの没入感の維持に配慮された演出になっていると感じました。 具体的にどういった部分なのか紹介します! こちらは会話ログのウィンドウです。 そして…

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

こんにちは!ちょこです! 「プロジェクトセカイ カラフルステージ! feat.初音ミク」のマルチプレイの結果画面にて、UIアニメーションを使って上手に視線誘導されている箇所がありました! デザインとして、凄く良いと感じたので紹介します! 場面としては…

「ウイニングイレブン クラブマネージャー」お知らせ画面のデザインとアニメーションがとても凝っていた!

こんにちは!ちょこです! 「ウイニングイレブン クラブマネージャー」のお知らせ画面のデザインと、次のお知らせに遷移するときのアニメーションが手が込んでいました!紹介します! どん! 見ての通り、封書っぽいデザインになっています。 次のお知らせに…

「ココッパドール(ココドル)」衣装を獲得したら、時間差でボタンが表示され視線が向くように工夫されている

こんにちは、ちょこです! 「ココッパドール(ココドル)」で時間差でボタンが表示され、視線が向くように仕向けられている場面がありました! 画面右下にある「GO」のボタンが時間差で表示されます。 ▲こちらのボタン 表示されるタイミングに関してはこちら。…

「GOLF CRASH -ゴルフクラッシュ-」ストレスのかかる場面でこそ遊び心が大切。操作に合わせて鍵が動くアニメーションについて

こんにちは、ちょこです。 「GOLF CRASH -ゴルフクラッシュ-」にて鍵の表現が面白かったので紹介します。 こんな感じでプレーできないコースには鍵が掛けられているのですが… その鍵が操作に合わせて動くようになっています。 ▲動きます! 細かっ! どうして…

「GOLF CRASH -ゴルフクラッシュ-」お知らせ画面の挙動がシームレス。軽い操作感を実現されていました

こんにちは、ちょこです。 「GOLF CRASH -ゴルフクラッシュ-」のお知らせ画面が良い操作性でした。 どんなところかと言うと… ▲シームレスで開閉 ▲アニメーションするバナーもある これ、どういう運用と実装なのかな。多くのゲームはwebでの実装に見えるけど…

「Ink,Mountains and Mystery」筆文字の出方のアニメーションの紹介

こんにちは、ちょこです。 引き続き「Ink,Mountains and Mystery」ですが、タイトルの文字の出方がカッコいい! 動かすとこんな感じです。 かっこ良い…手法わかりませんが、簡単にやるならアルファ値を参照してアニメーションつけるとかかな…。 微妙に煙もあ…

「アークナイツ」その作り込みがゲームをもっと面白くする

こんにちは、ちょこです。 購買部のカテゴリのアイコンのアニメーションが素敵だったので紹介です。 こんな感じでタブを切り替えるんですが… アップ! 非アクティブだと28°くらい?傾いていて、アクティブになるとそれが正位置になるアニメーション。ついで…

「アークナイツ」ステータスの詳細のアニメーションが小気味良い。こういったUIの演出が触り心地に繋がります。

こんにちは、ちょこです。 「アークナイツ」のキャラのステータスの詳細を展開する際のUIのアニメーションが良かったので紹介します。 あ、だめだ小さい。 この部分です。 この動きの小気味良さが素敵です! 具体的には「HP」などの文字の出方や、黒い枠が左…

「ガール・カフェ・ガン」バナーの切り替わり演出がSFっぽい。コマ送りで見てみました。

こんにちは、ちょこです。 「ガール・カフェ・ガン」ですが、ホーム画面に配置されているバナーが切り替わる時の演出が世界観に合っていると感じました。 こちらの演出です。 ▲ノイズが掛かったような演出 細部にこだわる姿勢があっていいな、と思います。 …

「リボルバーズエイト」世界観を活かした上でビジュアル面で斬新なUIデザインの事例共有。例えサービス終了が案内されたとしても。

こんにちは、ちょこです。 リボルバーズエイトのUIは本をモチーフにしたデザインを中心に構成されています。 理由としてはおとぎ話、童話という世界観のため、親和性が高いためだと考えられます。 ポップアップのデザイン。オレンジのラインが本を開いたよう…

「妖怪ウォッチぷにぷに」お知らせバナーが動いてた。デザインのパターンの参考までに。

こんにちは、ちょこです。 「妖怪ウォッチぷにぷに」のお知らせ画面のバナーが動いてた! 動いてる グラクロ以外で初めて見たかも。 ある程度テンプレ化すれば基本的には素材の置き換えでいけると思うので、コストとしては静止画とそんなに変わらないかも? …

「妖怪ウォッチぷにぷに」テンポが良い、という事例紹介。演出を入れる情報と入れない情報を偏らせないことによってメリハリを付けている。

こんにちは、ちょこです。 「妖怪ウォッチぷにぷに」のリザルト画面は情報が多いのですが、順番に情報を表示させることにより、処理する情報が絞られ、画面で何が起きているのか理解しやすくなっています。 全体の情報量を見るとこんな感じでした。 多くのソ…

「妖怪ウォッチ ゲラポリズム」メニューの開閉アニメーションが凝っていて可愛かったので紹介します

こんにちは、ちょこきなこです。 「妖怪ウォッチ ゲラポリズム」のメニューの開閉演出が凝っていたので紹介させてください。 アニメーション全体としては、こんな感じで回転しながら表示されています。 かわいい。 演出の理由を考えた時に、メニュー項目のロ…

「妖怪三国志 国盗りウォーズ」画面が楽しく見えるので、細かい演出こそ大切にしたい

こんにちは、ちょこきなこです。 「妖怪三国志 国盗りウォーズ」のUIパーツに巻物や木簡があるのですが、それに丁寧なアニメーションが実装されていました。 巻物 巻物の部分が動いています。模様が入っており、アニメーションしていることが分かりやすい 木…

「七つの大罪 光と闇の交戦 : グラクロ」イベントバナーのデザインがカッコいい!アニメーションするという発想が斬新!

こんにちは、ちょこきなこです。 「グラクロ 」のイベントバナーのデザインが斬新だったので紹介します。 こんな感じでいくつかバリエーションがあります。ほんとにこのタイトル、バリエーション作るの好きだな…。 ▼gif (デフォルト待機ver) ▼gif (エリザベ…