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

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

019_アニメーション

「麻雀一番街」世界観を取り入れたカジュアルなタップエフェクト

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです! 今回は「麻雀一番街」からタップエフェクトのデザインを紹介します。以下、主…

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

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです! 今回「千銃士:Rhodoknight」(以下、千銃士R)から、タップエフェクトのデザイ…

「NieR Re[in]carnation / ニーア リィンカーネーション」世界観を構成するUIパーツのデザイン事例。幾何学の紋様を利用することで無機質でソリッドな印象

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです! 今回は「NieR Re[in]carnation / ニーア リィンカーネーション」、通称「リィ…

「NieR Re[in]carnation / ニーア リィンカーネーション」TAP TO STARTのアニメーションにも世界観を取り入れたデザイン

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです! 今回は「NieR Re[in]carnation / ニーア リィンカーネーション」、通称「リィ…

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

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

「ドラゴンクエストけしケシ!」アイコンやタップエフェクトにスライムが採用されていて、世界観の表現と没入感を高める工夫だと感じました

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです! 今回は「ドラゴンクエストけしケシ!」通称「DQけしケシ」のアイコン類で…

「オクトパストラベラー 大陸の覇者」選択した武器を装備した場合、パラメーターがアップするかどうかキャラクターのポーズで簡易的に分かるようにしているデザイン

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「オクトパストラベラー 大陸の覇者」通称「オクトラ大陸の覇者」の…

「キャットバスターズ - collections -」肉球は3本指か、4本指か?生物学的な正しさは4本指だけど、どちらも記号の役割は果たしている

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。 今回は「キャットバスターズ - collections -」、通称「キャトコレ」にて…

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

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

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

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

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

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

「ブラック・サージナイト」OPで流れるMVの文字演出がかっこ良かったので紹介です!

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

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

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

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

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

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

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

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

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

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

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

「レッド:プライドオブエデン」猫モチーフのデザインがあちこちに。UIパーツに遊び心を取り入れたい際の参考に

こんにちは!ちょこです! 「レッド:プライドオブエデン」では【猫】がキーワードのタイトルです。したがって猫がモチーフのUIパーツが多く見られます。 世界観に寄せたデザインの作り込みの事例として、いくつか紹介します。 1:タップを促す指のマーク 2…

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

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

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

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

「魔界ウォーズ」ガチャ画面でじっとしてると店員が歌いだす!イースターエッグみたいで楽しい遊び心

こんにちは、ちょこです! 「魔界ウォーズ」でガチャ画面でしばらくしていると店員が色々とアニメーションをしてくれます! ざっと見た感じは以下の3パターンでした。 ▲おじぎ ▲歌う ▲あくび 以上です。 ショップ店員がいる画面で待機しているとキャラクター…

「ビーナスイレブンびびっど!」キャラアニメーションが良いとキャラの魅力も伝わり没入感も阻害されない

こんにちは、ちょこです! 「ビーナスイレブンびびっど!」のSDキャラのモーションが丁寧に作られていたのが良かったです! 具体的には試合準備の直前の画面での待機モーションです。 動きとしてはこんな感じです。 ▲ぴょーん シンプルに可愛い! ▲足元の影…

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

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

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

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

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

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

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

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

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

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

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

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

「リボルバーズエイト」サービスが終了してリーゼルがいなくなってしまう前に彼女の役割と功績を紹介しておきたい

こんにちは、ちょこです。 今回は「リボルバーズエイト」にて、ショップ店員(リーゼル)のアニメーションにバリエーションがあったので、「なぜバリエーションが用意されているのか」「なぜこのようなアニメーションがあるのか」を通じて、リーゼルのデザイン…

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

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