アプリゲームUIデザイン

プレイしたアプリゲームのUIデザインに関して、書き残しておこうと思います。毎日24時に更新!

「永遠の七日」図鑑画面に遷移する時、手持ちのキャラのグラフィックが表示される

こんにちは、ちょこです。 「永遠の七日」の図鑑画面に遷移する演出が特徴的でしたのでご紹介させていただきます。 ここから遷移して… この画面が挿入され… 画面遷移が完了します。 流れで見るとこんな感じです。 イージングの詰めと、演出に奥行きがあると…

「永遠の七日」画面に表示される情報が洗練され、迷わないUIになっていた

こんにちは、ちょこです。 「永遠の七日」のホーム画面のUIがかなりシンプルで特徴的でしたのでご紹介させていただきます。 やることを絞っている 「永遠の七日」はかなり複雑なスキームを持っているゲームなのですが、表示する情報を絞っているので迷いま…

「永遠の七日」データダウンロード中にアンケート機能が利用できる実装でした

こんにちは、ちょこです。 「永遠の七日」でデータDL中にアンケート機能が表示されたので実装事例として紹介します。 手紙風でかわいいですね。フォントも丸くてかわいいくて開発者のこだわりが感じられます。 ユーザーの反応を知ることはより良いUIを作るた…

「仮面ライダー シティウォーズ」ブラウン管の歪みと走査線の表現がレトロ感を煽る

こんにちは、ちょこです。 「仮面ライダー シティウォーズ」TVのブラウン管っぽいデザインがかっこいいな、と思いました。 走査線とか比率とか、歪みとかがレトロ感あって良いですね。 よく見たら歪ませてなくて、上から黒い板乗せてるだけだったー。 とはい…

「仮面ライダー シティウォーズ」画面をかっこよくすることと、項目に英語を使うことは結び付けない方が良いです

こんにちは、ちょこです。 「仮面ライダー シティウォーズ」のメニューで英語が使われているのが気になりました。 むやみにメニュー内に英語を使わない方が良い 無闇に英語は使わない方が良いです。単純に読めないので。 「いや、読めるじゃん」って思う方が…

ブログ1年目を振り返って

こんにちは、ちょこです。 おかげさまで去る2020/1/12をもちまして、ブログを1年継続できました。(気付いたら過ぎてました)最初の1年目を振り返ってみます。 ▲プレイしたゲーム ブログを始めてみて良かったこと このブログの目指すところ やらなくても良い…

「仮面ライダー シティウォーズ」訴求画像が気になりました。小さい画像に情報詰め過ぎちゃう問題

こんにちは、ちょこです。 「仮面ライダー シティウォーズ」のホーム画面の訴求画像が本当に役割を果たせているのか気になりました。 訴求画像の役割を果たせているのか? 左上に訴求画像があるのですが、潰れて見えません… 拡大表示するとこんな感じです。 …

「仮面ライダー シティウォーズ」敵のアイコンがショッカーだった。IPを活かしたデザインだと感じました

こんにちは、ちょこです。 「仮面ライダー シティウォーズ」にてIPらしいデザインがあったので紹介します。 敵のマークがショッカー 敵の数を示すアイコンがショッカーをモチーフにデザインされていました。 ▲画面上部に表示されているアイコン アイコンはIP…

「仮面ライダー シティウォーズ」年齢確認画面が気になったので他タイトルと比較してみた。そしたら全部フォーマット違ってた。

こんにちは、ちょこです。 「仮面ライダー シティウォーズ」からバッドUIなデザインがあったのが気になりました。 どんなUIだったか 画面のデザインとしては以下のようなデザインでした。いわゆる課金画面の前に表示される年齢確認の画面です。 枠内に生年月…

「仮面ライダー シティウォーズ」プレゼントボタンと一括受け取りボタンが左側にあり、他のゲームの位置関係を調べてみました。

こんにちは、ちょこです。 「仮面ライダー シティウォーズ」のプレゼントの一括受け取りボタンが左側なのが気になりました。 ▲ひだりにある 理由としては、過去プレイしたゲームには右側にあるのが多くあったので、違和感を感じています。 左側に配置されて…

「仮面ライダー シティウォーズ」ドロワーのUIを採用する時に注意したいこと

こんにちは、ちょこです。 「仮面ライダー シティウォーズ」のホーム画面にある、メニューボタンのデザインと挙動が気になりました。 注意したいこととしては 挙動が(ある程度)推測できる見た目にする です。以下、詳細と解決案の提案を書いてみます。 どん…

「ガール・カフェ・ガン」フィルタ機能のデザインがとても分かりやすかった。色覚多様性にも対応できているデザインは珍しい

こんにちは、ちょこです。 「ガール・カフェ・ガン」のフィルタ機能が良かったので紹介させてください。 色覚多様性対応もバッチリ どこが良かったのか、ですが「色覚多様性への配慮が出来ている」という部分です。属性の色だけでなく文字が書いてあるデザイ…

「ガール・カフェ・ガン」会話シーンのホログラムの表現に差分があった。新しいUXに繋がるヒントかも

こんにちは、ちょこです。 「ガール・カフェ・ガン」にてアドベンチャーパートの演出が凝っていました。 ホログラムの演出に差異が… 以下の二つを比べると、ホログラムの乱れに差があることが分かるかと思います。 こんな感じ。 乱れ方が全然違いますよね。 …

「ガール・カフェ・ガン」数字は進んでいるのにロード画面のプログレスバーが全然進まなくてイライラしてた話

こんにちは、ちょこです。 「ガール・カフェ・ガン」のデータダウンロード画面ですが数字とゲージを合ってないように見えるんですよね… 進捗率を計算してみた 数字をベースに進捗率を計算してみました。 進捗を計算すると12.3%くらいでした。 10等分してみ…

「ガール・カフェ・ガン」年末にかけてホーム画面やガチャ演出のデザインが変わっていた

こんにちは、ちょこです。 「ガール・カフェ・ガン」のデザインですが、ホーム画面だけでなくガチャ演出にも季節感が取り入れられていました。 ホーム画面 ▲通常時 ▲年末デザイン 年末の方は雪の結晶や星の装飾などが追加されていますね。 サンタ帽子とか、 …

「ガール・カフェ・ガン」今まで紹介してきたゲームのエンプティステートと一緒に紹介してみます。

こんにちは、ちょこです。 「ガール・カフェ・ガン」でエンプティステートがあったので紹介してみます。 (エンプティステートとは情報が空であることを示すUIです) ▲フレンドがいないことを示す画面 ▲ブロックしている人がいないことを示す画面 ▲友達申請し…

「ガール・カフェ・ガン」見落とされがちがサムネイルのデザイン。ガルカフェのデザインはスッキリしている

こんにちは、ちょこです。 「ガール・カフェ・ガン」のキャラクターのサムネイルのデザインと種類について考えてみました。 リストに使われるサムネイル こちらはキャラ一覧などのリストに使われている画像です。見た限り一番小さいサムネイルです。 1枚のサ…

「ガール・カフェ・ガン」戦闘敗北時、強くなるための導線が用意されている。ユーザーを回遊させるための導線を設置する工夫

こんにちは、ちょこです。 「ガール・カフェ・ガン」にて戦闘敗北した時の導線を紹介します。 敗北の導線が丁寧 戦闘に敗北した時にいくつか導線が表示されるのですが、表示される導線が「クリアするために出来ること」という導線ばかりでとても親切だと感じ…

「ガール・カフェ・ガン」バトル中のボタンの位置やサイズが変えられる機能の紹介。ボタンサイズの可変機能は音ゲーのノーツサイズを調整する機能に流用できそう。

こんにちは、ちょこです。 「ガール・カフェ・ガン」でUIのレイアウトをカスタムする機能を見かけました。 この機能、久々に見ました。ドールズオーダー以来? 「ドールズオーダー」あまり見ないレイアウトカスタム機能について語る どういうものかというと…

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

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

「ガール・カフェ・ガン」ホーム画面にアンケート機能が配置されている衝撃のレイアウト

こんにちは、ちょこです。 「ガール・カフェ・ガン」ホーム画面にアンケートボタンがあるのですが、びっくりしました。 アンケート機能自体あまり見かけないのですが、ホーム画面にこれ配置するのか…。ちょっと予想外過ぎました…。 ちなみにどんなアンケート…

「ガール・カフェ・ガン」世界観が表現されている着替え演出。他タイトルとの比較をしつつご紹介。

こんにちは、ちょこです。 「ガール・カフェ・ガン」の着替え演出が攻めすぎという話です。 演出としてはこんな感じです。 いや、この着替え演出攻めすぎじゃなかろうか。 カーテンが表示される演出だったり… 瞬間的に置き換わる演出が主なのですが、 この演…

「ガール・カフェ・ガン」キャラクターとのチャットルームの名前が変えられる!ニッチな仕様の紹介

こんにちは、ちょこです。 「ガール・カフェ・ガン」において、キャラクターと擬似的なチャットのやりとりが出来るのですが、チャットルームの名前が変えられる仕様が斬新だと感じました。 ▲これがチャット一覧。いわゆるLINEと同じものです。 ▲ここから名前…

「ゴエティアクロス」クエストと強化のシナジーを強化する導線がとても素敵

こんにちは、ちょこです。 「ゴエティアクロス」の導線ですが 強化したいキャラ選択⇒強化に必要な素材が足りない⇒入手できるクエスト一覧で確認⇒クエストに遷移⇒クエストを終了してキャラクター画面に戻ってくる という遷移がとてもきれいだったので紹介した…

「ゴエティアクロス」背景のトーンが控えめなのでバトル中のキャラクターが見やすい。UIの範囲外かもしれないけど気になるところ。

こんにちは、ちょこです。 「ゴエティアクロス」のバトル背景ですが、キャラクターのトーンと比較して暗いので、結果的にキャラクターが浮き出ているように見えます。 同じようなことを「東京コンセプション」でも書いた気がします。 東京コンセプションの場…

「ゴエティアクロス」バトル中の一時停止ボタンの位置が独特な理由を考えてみた。右端中央ってどういうことなんだろう…。

こんにちは、ちょこです。 「ゴエティアクロス」のバトル画面ですが、一時停止などのボタンの位置が独特なのに気づくかと思います。 このボタン群。 このボタン群は他のゲームだと画面の上部に配置されていることがほとんどです。 いくつか紹介してみます。 …

「ゴエティアクロス」バトルに入る前のロード画面に表示する内容はそのバトルと関連ある内容だった

こんにちは、ちょこです。 「ゴエティアクロス」のロード画面ですが、グラクロ同様にロード画面がデザインされていました。というかリリース時期を考えるとグラクロよりゴエクロの方が先なんですね。 どういったデザインかと言うとロード画面に表示されるテ…

「ゴエティアクロス」会話シーンは視線移動を抑えたデザインになっている。シナリオを読ませる為のデザインか

こんにちは、ちょこです。 「ゴエティアクロス」の会話シーンのデザインですが、画面の中央にテキストを集中させているデザインになっていました。 視線が中央に集まるデザイン ▲2段組だとこんな感じ ▲1段組だとこんな感じ このように画面中央に視線が集中し…

「ゴエティアクロス」今後はwave表示がないのが当たり前?バトルが自動化されるのが前提のソシャゲではwaveの演出の意味は無いのかもしれない

こんにちは、ちょこです。 「ゴエティアクロス」のバトルですが、いわゆるwave演出というものが無くテンポが良いです。 ここでいうwave演出とは以下のような演出です。 ▲ダンメモ ▲とある ▲ジャンプチ waveは元々はタワーディフェンスの仕様だと思うのですが…

「ゴエティアクロス」ストレスを極力抑えたキャラクター画面のデザインが凄く良い。あとOOUIってこういうことなのかな、と思った。

こんにちは、ちょこです。 「ゴエティアクロス」のキャラクター画面の設計について書いてみます。 このデザイン、いわゆるOOUIと呼ばれるデザインです。 OOUI…すみません…よくわかっていません。先日twitterのタイムラインで流れてきたのでちょっと使ってみ…