メインカテゴリーを選択しなおす
「ヴァンガード ZERO」カードの所持率を可視化することによるポジティブな3つの作用
こんにちは、ちょこです。 「ヴァンガードzero」にて、お手本となるデッキのレシピに対して、自分がどれくらい所持しているかが割合で表示されています。 このデザインは便利だなと感じました。 どういうこと?と思うかもですが、画面を見ていただくと分かりやすいかもです。 ▲デッキを構成するために必要なカードをどれほど所持しているか割合で表示されています このゲームはデッキ作成にいくつか方法があります。大別すると… ・ゼロから自分で作る ・自動作成機能を利用する ・既にあるデッキレシピを利用する ・既にあるデッキレシピを編集する が、あります。 今回紹介したのは「既にあるデッキレシピを利用する」です。 …
「ヴァンガード ZERO」バトル画面のUIが気になりました。具体的にどこが気になったのか考察してみました
こんにちは、ちょこです。 「ヴァンガード ZERO」ですが、バトル中の画面デザインが気になりました。どこが気になったか具体的に挙げてみます。 ▲「ヴァンガードZERO」のバトル中の画面 1:配信で映えない 2:演出の解像度が足りていない 3:縦画面なので配信の際のレイアウトに使いづらい 1:配信で映えない パッと見た時のデザインですが、配信に映えないデザインかな、と感じました。 配信に映える映えない、というのは主観的な印象ですが、配信時間は長くなるので、動きが感じられるデザインの方が画面の変化量が多く、見ていて飽きません。 例えば、 ・カードが揃いすぎている・情報の見せ方にメリハリがない こう…
「ヴァンガード ZERO」そんなオプションの項目で大丈夫か!?
こんにちは、ちょこです。 「ヴァンガード ZERO」のオプションの項目が少ないので驚きました。 サウンドはほぼ何も考えずに入れるとして、あとは通知だけ…?これだけで足りるのかな。 ちなみに前日紹介したゼノンザードはこんな感じでした。 このように色々と確認フェーズの省略などがあります。 例えば軽量版など、端末の負荷を抑えた機能や、テンポよくバトルを進めるための演出の省略などはあっても良いのかなと思いました。 というのも、マッチングするためには出来るだけ多くのユーザーがいた方が良いです。 多くのユーザーに遊んでもらうためには対応端末を増やすのが良いです。 なので、端末の負荷を減らして快適に遊べるよ…
「ヴァンガード ZERO」デッキ画面のUIが良くないと聞いたので、具体的な箇所がどこなのか考えてみました
こんにちは、ちょこです。 「ヴァンガード ZERO」のデッキのUIが良くない、という意見を見かけたので何が原因か考えてみました。 ▲デッキ画面のデザインはこちら.。 デジタルカードゲームのUIの不満は大体デッキ編集画面の使いづらさに対する不満とバトルテンポに集約されがちです。 逆に言えば「バトルのテンポ」「デッキ編集画面の使い勝手」が良ければ、大体大丈夫。 では早速見ていきます。 1:カードを置く場所が分からない 2:どうやってデッキに入れるか分からない 3:カードをスワイプすることが分かりづらい 4:スクロールの向きが分からない 1:カードを置く場所が分からない これはアフォーダンスが不十分…
「ヴァンガード ZERO」デッキの順番を手動で並べられる機能ってアプリで初めて見たかも…
こんにちは、ちょこです。 「ヴァンガード ZERO」のデッキ一覧画面で手動でデッキの並び替えが出来るのは便利!ただ、ソート機能も欲しいです、という話です。 こんな感じで並び変えられます。PCと同じ操作感。 手動で並び替えられるのは面白い機能だな、と感じます。ただ、作成するデッキはほぼ無限(保存できる上限ではなく、作成した延べ数)なのと、仕様頻度の高いものは上の方に手動で並べることになるので、それはそれで不便に感じそう。 プリセットのフィルタとは別にカスタム設定があると良いのかも。 ▲保存できるデッキは30種類まで 手動で順番変える仕様は時々欲しくなりますが「開発側がきちんとユーザーのニーズを把…
「ゴエティアクロス」ストレスを極力抑えたキャラクター画面のデザインが凄く良い。あとOOUIってこういうことなのかな、と思った。
こんにちは、ちょこです。 「ゴエティアクロス」のキャラクター画面の設計について書いてみます。 このデザイン、いわゆるOOUIと呼ばれるデザインです。 OOUI…すみません…よくわかっていません。先日twitterのタイムラインで流れてきたのでちょっと使ってみたかっただけです。 ソシオメディア OOUI – オブジェクトベースのUIモデリング 私の浅い理解ですが、簡単に言うと、ホーム画面に「キャラ」のラベルを置くかって考えた時に「強化」のラベルを先に持ってくる考え方です。 また遷移がほぼないのも特徴的なデザインです。言葉を借りるならモードレスに近いのかな…。 キャラクターに対してアクションを…
「ゴエティアクロス」今後はwave表示がないのが当たり前?バトルが自動化されるのが前提のソシャゲではwaveの演出の意味は無いのかもしれない
こんにちは、ちょこです。 「ゴエティアクロス」のバトルですが、いわゆるwave演出というものが無くテンポが良いです。 ここでいうwave演出とは以下のような演出です。 ▲ダンメモ ▲とある ▲ジャンプチ waveは元々はタワーディフェンスの仕様だと思うのですが、なぜかソシャゲでも採用されることが多いです。 そういった演出が挿入されないので、その分敵の数に対してバトルのテンポが良いです。 ▲内部的にグループが存在し、そのグループを全て倒すと次のグループに移る、という実装に見えます そういえば御城プロジェクトもwave表示こそあるものの、実際のところwaveの間のようなタイミングがない時もあるので…
「ゴエティアクロス」会話シーンは視線移動を抑えたデザインになっている。シナリオを読ませる為のデザインか
こんにちは、ちょこです。 「ゴエティアクロス」の会話シーンのデザインですが、画面の中央にテキストを集中させているデザインになっていました。 ▲2段組だとこんな感じ ▲1段組だとこんな感じ デザインの特徴としては視線が集中し、文字が読みやすいです。キャラクターの腰から上、小さいキャラクターに至っては全身が表示されるタイトルが多い中 ▲ダンメモ ▲きららファンタジア ▲ドールズオーダー ▲刀使ノ巫女 ▲リボハチキャラが大きすぎると2人以上同時に表示することができないこともあるのか… ▲キャプ翼。これよく考えるとユニフォームの文字のせいでキャラ反転できないのか。 ▲ミリシタ ▲テニラビこのタイプのデ…
「ゴエティアクロス」バトルに入る前のロード画面に表示する内容はそのバトルと関連ある内容だった
こんにちは、ちょこです。 「ゴエティアクロス」のロード画面ですが、グラクロ同様にロード画面がデザインされていました。というかリリース時期を考えるとグラクロよりゴエクロの方が先なんですね。 どういったデザインかと言うとロード画面に表示されるテキストやグラフィックが、ロードが終わった後の画面の内容と関連している。 というものです。これによりゲームへの没入感を阻害しない、という効果があります。 ▲ボス前のロード画面。バトル画面では分からない設定や背景などが語られる。 ▲戦う時にもその設定に思い馳せられる プレイしていて、割と没入感に強い影響を及ぼしている気がするので、今後はこういったデザインになるの…
「ゴエティアクロス」バトル中の一時停止ボタンの位置が独特な理由を考えてみた。右端中央ってどういうことなんだろう…。
こんにちは、ちょこです。 「ゴエティアクロス」のバトル画面ですが、一時停止などのボタンの位置が独特なのに気づくかと思います。 このボタン群。 このボタン群は他のゲームだと画面の上部に配置されていることがほとんどです。 いくつか紹介してみます。 ▲きららファンタジア ▲とある ▲ネギマテ ▲キングスレイド ▲刀使ノ巫女 ▲アルケミアストーリー ▲最果てのバベル 数は多くありませんが、傾向だけでも分かっていただければ…。 アルケミアストーリーとバベルは下なのか…。 他は上に配置されるデザインが多いみたいです。アルケミアストーリーの方は正直よく覚えていないのだけど、バベルの方は誤タップしまくってた記…
「ゴエティアクロス」背景のトーンが控えめなのでバトル中のキャラクターが見やすい。UIの範囲外かもしれないけど気になるところ。
こんにちは、ちょこです。 「ゴエティアクロス」のバトル背景ですが、キャラクターのトーンと比較して暗いので、結果的にキャラクターが浮き出ているように見えます。 同じようなことを「東京コンセプション」でも書いた気がします。 東京コンセプションの場合はアクションゲームなので敵や自キャラを見失うとストレスにるので結構重要だなと感じていました。 とはいえ必ずしも暗い背景だけではありません。明るい背景もあります。 若干コントラストを落とした方が良かったかもですが、とはいえキャラクターは派手に動いているので判別することにストレスはあまり感じません。 直接的なUIではないのですが、こういった部分でユーザーのス…
「ゴエティアクロス」クエストと強化のシナジーを強化する導線がとても素敵
こんにちは、ちょこです。 「ゴエティアクロス」の導線ですが 強化したいキャラ選択⇒強化に必要な素材が足りない⇒入手できるクエスト一覧で確認⇒クエストに遷移⇒クエストを終了してキャラクター画面に戻ってくる という遷移がとてもきれいだったので紹介したいです。 素材が手に入るクエストを選択して、バトル画面に遷移します… バトルを終了させるとキャラクターの強化画面に戻ってきます このように導線がきちんとしていてストレスがないのが素晴らしいな、と感じました。 アイテムを選択し、入手可能なクエストのリストを表示させる導線までは珍しくないですが、クエストが終わってキャラクターの画面に戻ってくるところまでちゃ…
「ガール・カフェ・ガン」キャラクターとのチャットルームの名前が変えられる!ニッチな仕様の紹介
こんにちは、ちょこです。 「ガール・カフェ・ガン」において、キャラクターと擬似的なチャットのやりとりが出来るのですが、チャットルームの名前が変えられる仕様が斬新だと感じました。 ▲これがチャット一覧。いわゆるLINEと同じものです。 ▲ここから名前が変えられます 正直、丁寧というか、ここの名前が変えられるメリットって無いというか、ここやるくらいならもっと他にやることあるんじゃないかと思えなくも無いけど、この実装の心意気を!買います! 先程、変えられるメリットが無い、と書きましたが目的や意図は感じられます。 名前が変えられるのは没入感のためだと考えられます。 リアルのチャットツールにある機能なの…
「ガール・カフェ・ガン」世界観が表現されている着替え演出。他タイトルとの比較をしつつご紹介。
こんにちは、ちょこです。 「ガール・カフェ・ガン」の着替え演出が攻めすぎという話です。 演出としてはこんな感じです。 いや、この着替え演出攻めすぎじゃなかろうか。 カーテンが表示される演出だったり… 瞬間的に置き換わる演出が主なのですが、 この演出もアリなのか…。魔法少女系のアニメの演出では見かけるけど…ストア的に大丈夫なんかな…。 着替え演出とUI関係なくない?と思うかもですが、 今回の場合は衣装が再構成される世界観が表現されています。 ▲丁寧な演出だとこんな感じ。 この世界観ではよくある「カーテンの向こうで着替える演出」では表現できまん。 ですので、世界観が表現されているという意味で没入感…
「ガール・カフェ・ガン」ホーム画面にアンケート機能が配置されている衝撃のレイアウト
こんにちは、ちょこです。 「ガール・カフェ・ガン」ホーム画面にアンケートボタンがあるのですが、びっくりしました。 アンケート機能自体あまり見かけないのですが、ホーム画面にこれ配置するのか…。ちょっと予想外過ぎました…。 ちなみにどんなアンケートかと言うと… こんな感じです。 アンケートの項目に12月が無いから正しいフィードバックが受けれない気がするんだけどいいのかな…。 歌マクロスでもアンケート機能がありましたが、あれはデータダウンロード中でした。 ▲「歌マクロス スマホDeカルチャー」データダウンロード画面の表示中にゲームに関するアンケートがあった ゲーム中の、しかもホーム画面にボタンを配置…
「ガール・カフェ・ガン」バナーの切り替わり演出の作り込みがすごい。コマ送りで見てみました。
こんにちは、ちょこです。 「ガール・カフェ・ガン」ですが、ホーム画面に配置されているバナーが切り替わる時の演出が世界観に合っていると感じました。 こちらの演出です。 ▲ノイズが掛かったような演出 細部にこだわる姿勢があっていいな、と思います。 どういう処理をしているのか分かりづらかったので、アップにしてスローで見てみます。 てっきり汎用的で無機質的な変形しているのかと思ったら、割と有機的な変形してますね。 何かしらのシェーダーを使っているのかな。 切り替え時にはパッと切り替わるのがポイントっぽいですね。 伸びたゴムが元の大きさに戻るかの如く、最大限まで変形したら一瞬で元に戻しています。あと、変…
「ガール・カフェ・ガン」バトル中のボタンの位置やサイズが変えられる機能の紹介。ボタンサイズの可変機能は音ゲーのノーツサイズを調整する機能に流用できそう。
こんにちは、ちょこです。 「ガール・カフェ・ガン」でUIのレイアウトをカスタムする機能を見かけました。 この機能、久々に見ました。ドールズオーダー以来? 「ドールズオーダー」あまり見ないレイアウトカスタム機能について語る どういうものかというと、ボタンの位置、大きさをユーザーの自由に配置させることができる機能です。 比較的コアな機能なので、 アクション性が高くプレイヤースキルや細かな操作性が必要なゲームであること。 そういったニーズを求めるユーザーがメインターゲットであること。 この2つの条件が重なった時に重要度が増すと考えられます。ライト層は基本的にオート放置するので、この機能が活躍するケー…
「ガール・カフェ・ガン」戦闘敗北時、強くなるための導線が用意されている。ユーザーを回遊させるための導線を設置する工夫
こんにちは、ちょこです。 「ガール・カフェ・ガン」にて戦闘敗北した時の導線を紹介します。 敗北の導線が丁寧 戦闘に敗北した時にいくつか導線が表示されるのですが、表示される導線が「クリアするために出来ること」という導線ばかりでとても親切だと感じました。 こういった導線はガラケーアプリが流行った頃頃によく見た記憶があります。 古い仕様という意味ではなく、導線としては回遊型の導線なので、当時のwebブラウザゲームの開発に多かった、という意味です。 最近ではグラクロでも似たような実装がなされていました。 ▲導線だけでなく、ヘルプも表示するデザイン 「アップデート可」という表示 また、ただ導線を表示する…
「ガール・カフェ・ガン」見落とされがちがサムネイルのデザイン。ガルカフェのデザインはスッキリしている
こんにちは、ちょこです。 「ガール・カフェ・ガン」のキャラクターのサムネイルのデザインと種類について考えてみました。 リストに使われるサムネイル こちらはキャラ一覧などのリストに使われている画像です。見た限り一番小さいサムネイルです。 1枚のサムネイルの中に「顔グラフィック」「レアリティ」「武器種」「属性」「役割」「レベル」 場面によっては「編成しているか」「編成可能か」「保護しているか」などが分かるように情報が詰まっています。 特徴的なデザイン ガルカフェのキャラサムネイルのデザインは多くのゲームでは枠のデザインになっています。 枠タイプ 「枠タイプ」最も伝統的な形状です。ガラケーの頃からあ…
「ガール・カフェ・ガン」今まで紹介してきたゲームのエンプティステートと一緒に紹介してみます。
こんにちは、ちょこです。 「ガール・カフェ・ガン」でエンプティステートがあったので紹介してみます。 (エンプティステートとは情報が空であることを示すUIです) ▲フレンドがいないことを示す画面 ▲ブロックしている人がいないことを示す画面 ▲友達申請している人がいないことを示す画面 ▲強化素材が無いことを示す画面 ここまでテキストが薄いデザインは初めて見たかも。 エンプティステートの役割って? エンプティステートの役割としては 世界観を損なわずにメッセージを伝えること エラーである状態を自然と解決したくなるように仕向ける などだと考えられます。 そう考えると、文字の可読性が低くても困らないのかも…
「ガール・カフェ・ガン」年末にかけてホーム画面やガチャ演出のデザインが変わっていた
こんにちは、ちょこです。 「ガール・カフェ・ガン」のデザインですが、ホーム画面だけでなくガチャ演出にも季節感が取り入れられていました。 ホーム画面 ▲通常時 ▲年末デザイン 年末の方は雪の結晶や星の装飾などが追加されていますね。 サンタ帽子とか、 トナカイの角なんかが分かりやすいですね。 UIの改修と季節感の実装同時にやってるのかな?UIパーツの変更だけではなく、左側に配置されているボタンもちょっと小さくなっています。 ▲通常時/年末演出時 ガチャ演出の比較 ガチャの演出も差分がありました。通常時と年末時での演出を並べて比較してみました。 ▲通常時 ▲年末演出 ▲通常時 ▲年末演出 ▲通常時 …
「ガール・カフェ・ガン」数字は進んでいるのにロード画面のプログレスバーが全然進まなくてイライラしてた話
こんにちは、ちょこです。 「ガール・カフェ・ガン」のデータダウンロード画面ですが数字とゲージを合ってないように見えるんですよね… 進捗率を計算してみた 数字をベースに進捗率を計算してみました。 進捗を計算すると12.3%くらいでした。 10等分してみた感じ、明らかに20%超えているみたい。21%~22%くらいなのかな…? 数字とプログレスバーとどちらを信じたら良いのか分からない この実装がバグかどうか分かりませんが、ユーザーにとっては表示されているものが全てです。 正誤が分からないので、この表示だとゲージが正しいのか数字が正しいのか分かりません。 数字は進んでいるけど、ゲージは進んでいない。 …
「ガール・カフェ・ガン」会話シーンのホログラムの表現に差分があった。新しいUXに繋がるヒントかも
こんにちは、ちょこです。 「ガール・カフェ・ガン」にてアドベンチャーパートの演出が凝っていました。 ホログラムの演出に差異が… 以下の二つを比べると、ホログラムの乱れに差があることが分かるかと思います。 こんな感じ。 乱れ方が全然違いますよね。 よく見ると更に違いがあるのですが、GIFが劣化してて分かりづらかったので拡大してみました。 こんな感じです。 この違いにどういった効果があるのか ノイズの走り方に変化を持たせることにどんな変化があるのかと考えたのですが、通信状況の差が表現できています。 それは緊迫感であったり、時間の経過の表現に繋がっています。 ホログラムである、という表現から一歩先を…
「COUNTER: SIDE(カウンターサイド)」育成中のキャラクターを抽出するのに便利なフィルタ機能
こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです! 今回は「COUNTER: SIDE(カウンターサイド)」から、育成中のキャラクターを抽出するフィルタ項目をご紹介します。 育成中のキャラクターを抽出できることで効率的に育成パーティを組むことが出来ると考えられます。 該当の画面はこちらです。 画面左側にパーティが表示され、画面右側にはフィルタ項目が並んでいます。上から順に以下の項目になっています。 レア度(SSR、SR、R、N) コスト(1~10) レベル(レベル1、育成中…
「COUNTER: SIDE(カウンターサイド)」キャラ台詞の字幕表示の切り替え設定があることで、ユーザーのニーズに柔軟に応えられると感じました
こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです! 今回は「COUNTER: SIDE(カウンターサイド)」から、音声を再生する際に字幕を表示するかどうか切り替えられる設定をご紹介します。 該当の画面はこちらです。 ゲーム設定の中に字幕の表示を切りかえる設定があります。 会話字幕:ロビーおよび台詞ウィンドウにユニット台詞字幕が表示されます。 デフォルトはオンですね。 オンの状態だといくつかの画面で、キャラクターの台詞に字幕が表示されます。例えばロビー画面の場合は以下の見た目…
「ガール・カフェ・ガン」フィルタ機能のデザインがとても分かりやすかった。色覚多様性にも対応できているデザインは珍しい
こんにちは、ちょこです。 「ガール・カフェ・ガン」のフィルタ機能が良かったので紹介させてください。 色覚多様性対応もバッチリ どこが良かったのか、ですが「色覚多様性への配慮が出来ている」という部分です。属性の色だけでなく文字が書いてあるデザインです。かなり珍しい…! PhotoshopのP型(1型)のフィルタを掛けた見た目だと以下のような見た目でした。 より分かりやすくするために部分的に拡大してみます。 属性マークの下に文字が書いてあるのですごく分かりやすいデザインです。 アイコンだけだと分かりづらいので文字を併記することをオススメしていますが、実装されている例はあまり見かけません。 ガルカフ…
「仮面ライダー シティウォーズ」ドロワーのUIを採用する時に注意したいこと
こんにちは、ちょこです。 「仮面ライダー シティウォーズ」のホーム画面にある、メニューボタンのデザインと挙動が気になりました。 注意したいこととしては 挙動が(ある程度)推測できる見た目にする です。以下、詳細と解決案の提案を書いてみます。 どんなデザインだったのか まず、どのようなデザインなのかを紹介します。ホーム画面全体は以下のようになっていました。 メニューボタンは左上のこちらのデザインです。 ▲グラフィックにも「MENU」って書いてあるのか… 挙動としては、以下のようにな挙動でした。画面端から開閉するUIです。 ボタン…というかアイコンをタップすると画面端からメニューが表示されます。い…
「仮面ライダー シティウォーズ」プレゼントボタンと一括受け取りボタンが左側にあり、他のゲームの位置関係を調べてみました。
こんにちは、ちょこです。 「仮面ライダー シティウォーズ」のプレゼントの一括受け取りボタンが左側なのが気になりました。 ▲ひだりにある 理由としては、過去プレイしたゲームには右側にあるのが多くあったので、違和感を感じています。 左側に配置されている理由 一括受け取りボタンが左側に配置されている理由ですが、おそらく… 「プレゼントボタンが左側に配置されているため、画面遷移の前後で指の位置を変えたくないという意図があったのかな」 と推測します。 ▲画面の左側に配置されるプレゼントボタン。 他のタイトルを見てみる では、「一括受け取り」はどの位置にあるのか他のタイトルを見てみます。 リボルバーズエイ…
「仮面ライダー シティウォーズ」年齢確認画面が気になったので他タイトルと比較してみた。そしたら全部フォーマット違ってた。
こんにちは、ちょこです。 「仮面ライダー シティウォーズ」からバッドUIなデザインがあったのが気になりました。 どんなUIだったか 画面のデザインとしては以下のようなデザインでした。いわゆる課金画面の前に表示される年齢確認の画面です。 枠内に生年月日を入力するデザインです。 このような形式で生年月日を入力します。 どこが良くなかったか この画面のどこが良くなかったかですが、 入力する値のフォーマットが分からない 不安に感じつつ、数字を入力する必要がある 一度間違えないとフォーマットが示されない などです。ひとつずつ補足します。 1:入力する値のフォーマットが分からない これに関しては、フォーム…
「仮面ライダー シティウォーズ」敵のアイコンがショッカーだった。IPを活かしたデザインだと感じました
こんにちは、ちょこです。 「仮面ライダー シティウォーズ」にてIPらしいデザインがあったので紹介します。 敵のマークがショッカー 敵の数を示すアイコンがショッカーをモチーフにデザインされていました。 ▲画面上部に表示されているアイコン アイコンはIPモチーフにしやすいところがあるのですが、敵のアイコンにIPらしさを使える例は少ないかも。 IPらしさがあると良いよね よく見たら画面右側のターゲット切り替えボタンにもショッカーのシルエットが採用されていました。 敵のマークがアイコン化できそうな例はかなり限られそうです。自分の知る限りドラクエのスライムくらいかな…。 IPを大事にしたい IPにはその…
「仮面ライダー シティウォーズ」訴求画像が気になりました。小さい画像に情報詰め過ぎちゃう問題
こんにちは、ちょこです。 「仮面ライダー シティウォーズ」のホーム画面の訴求画像が本当に役割を果たせているのか気になりました。 訴求画像の役割を果たせているのか? 左上に訴求画像があるのですが、潰れて見えません… 拡大表示するとこんな感じです。 情報がたくさん含まれています。 画面全体で見たときに色々な情報がある中で、この訴求画像に目が行くとはちょっと思えないです。 というのも、情報が過密すぎて何が書いてあるかわからず、ユーザーにとっても重要なことと認識されないので目に入らないのではないかな、と推測したためです。 訴求画像は情報過多になりがち ガチャ画面で見るとこんな感じになります。 慣れてく…
「仮面ライダー シティウォーズ」画面をかっこよくすることと、項目に英語を使うことは結び付けない方が良いです
こんにちは、ちょこです。 「仮面ライダー シティウォーズ」のメニューで英語が使われているのが気になりました。 むやみにメニュー内に英語を使わない方が良い 無闇に英語は使わない方が良いです。単純に読めないので。 「いや、読めるじゃん」って思う方がいるかもですが、英語ネイティブでもない限り瞬間的に読めないです。そして多くの方は日本語ネイティブです。漢字と言う便利なツールがあるのでそっちを使う方が効率的です。 矛盾が発生しがち 英語だけですべての項目を賄うことは難しいです。他の画面ではアルファベットが無く、日本語で書かれている場所があります。 プレゼント画面でも、受け取り、一括受け取りが同じ「REC…
「仮面ライダー シティウォーズ」ブラウン管の歪みと走査線の表現がレトロ感を煽る
こんにちは、ちょこです。 「仮面ライダー シティウォーズ」TVのブラウン管っぽいデザインがかっこいいな、と思いました。 走査線とか比率とか、歪みとかがレトロ感あって良いですね。 よく見たら歪ませてなくて、上から黒い板乗せてるだけだったー。 とはいえ、流れで見てぱっと見分かんないし、真面目にやろうとしたらグラフィックの方が大きく歪んじゃうのでそんなに気にならないか…。こういう表現って他にあるのかな…。
「永遠の七日」データダウンロード中にアンケート機能が利用できる実装でした
こんにちは、ちょこです。 「永遠の七日」でデータDL中にアンケート機能が表示されたので実装事例として紹介します。 手紙風でかわいいですね。フォントも丸くてかわいいくて開発者のこだわりが感じられます。 ユーザーの反応を知ることはより良いUIを作るために不可欠なので、こういった試みをもってユーザーのペルソナを知ろうとするのは興味深いかもしれません。 得られる数字や寄せられる感想、ネットの書き込みを参考にするだけでなく、色んな方法でユーザーの声をあつめ、開発に活かそうとする姿勢はとても良いな、と感じます。 なんとなくですが、今後こういった動きは加速するように感じます。アンケート機能が流行るということ…
「永遠の七日」画面に表示される情報が洗練され、迷わないUIになっていた
こんにちは、ちょこです。 「永遠の七日」のホーム画面のUIがかなりシンプルで特徴的でしたのでご紹介させていただきます。 やることを絞っている 「永遠の七日」はかなり複雑なスキームを持っているゲームなのですが、表示する情報を絞っているので迷いません。 通常、表示されがちなプレイヤーのLvや名前も表示されていません。ここまで情報が絞れるのは凄いと感じます。 基本的にいずれかの建物を選択してクエストを実行すると話が進みます。 ここからシナリオを進めるか、建物を建ててバフ効果を得るかなど行います。(建物が急に暗くなっているのは時間経過によるものです) ▲こんな感じでシームレスに遷移します メニュー項目…
「永遠の七日」図鑑画面に遷移する時、手持ちのキャラのグラフィックが表示される
こんにちは、ちょこです。 「永遠の七日」の図鑑画面に遷移する演出が特徴的でしたのでご紹介させていただきます。 ここから遷移して… この画面が挿入され… 画面遷移が完了します。 流れで見るとこんな感じです。 イージングの詰めと、演出に奥行きがあると更に良くなりそうですが、実に独特な演出だと感じました。 徐々に仲間が増えていくと、思い入れのような感情を抱いたり、全員のグラフィックを見ることになるので手持ちのキャラクターの把握に繋がります。 こういった遊び心に類する実装は必然性が乏しいことが多いのですが、ゲームにおいてはとても大事なUI/UXだと思うので積極的に紹介したいな、と思います。
「永遠の七日」その選択肢が選ばれている割合を表示する機能の紹介
こんにちは、ちょこです。 「永遠の七日」で他のユーザー達が選択した選択肢が見れる仕様になっていたのが興味深かったです。 こんな感じで選択肢が表示され、 右上にある「ヒント」のボタンを選ぶと… このように他のユーザーが選んだ選択肢の割合が表示されます。 流れで見るとこんな感じです。 メインシナリオを周回するのがこのゲームの大きな特徴なのですが、こういった仕様があることによって、1度目は王道のシナリオ、2回目は少数派といったこともできます。 多くのソシャゲのストーリーはスキップ機能があり、周回する必然性もないのでスキップされがちですが、こういった選択肢を用意統計を取ることによって、いつもと違ったユ…
「Auto Chess」色覚対応が必要に感じる理由をC型(多数派の色の見え方)の人にも実感してほしい事例を集めてみました
こんにちは、ちょこです。 「Auto Chess」に色覚対応のオプション設定が入っていたので、そういったリテラシーがあるのかと期待したのですが残念ながらそんなことなかった…。 一部ですが、文字がめっちゃ読みづらかったです… 1:ユニット詳細画面での事例 上の画面はいわゆるキャラ図鑑の中のユニットの詳細画面ですが、かなり見落としやすい実装があります。 こちら。 この「Rare」という文字です。背景色とほぼ同色の文字色は流石に見落とします。 探そうと思えば見落とさないかもしれませんが、画面を切り替える中でふいに登場するので他に注意が向けられていると見落としがちです。 2:フィルタ画面での事例 次に…
「Auto Chess」アンチパターンがあるとアプリに対する信頼性が下がる気がするのは私だけ?
こんにちは、ちょこです。 「Auto Chess」でフィルタのレイアウトで気になるところがありました。 グルーピングが出来ていない 気になるところですが、大きなところで言うとグルーピングです。 この個別のフィルタは以下のようなグループになっているのですが、一見してそれが理解できませんでした。 この画面に必要な意識は「近接の法則」と呼ばれるものです。 例えば上のように枠囲うなり、背景に色を乗せるなどしてもよいですし、余白を設けて、罫線を引くだけでも十分グルーピングになりえます ちょっとやるだけで直感的に分かりやすくなるので、この手間は惜しんで欲しくないな、と思います。 見出しが中央からズレている…
「Auto Chess」自動進行機能の波がついにオートチェスにまで…アクティブユーザーを増やす意図があるのかな
こんにちは、ちょこです。 「Auto Chess」のバトル画面のUIが大きく変わっていました。その中で自動戦闘の機能が追加されていたのに気づきました。 改修前後の比較 最初に改修前を紹介します。 ▲変更前 茶系で暗いトーンですね。中国系のファンタジーの世界観だと一般的な色の使い方だと思います。 続いて改修後はこんな画面です。 ▲変更後 ベースカラーの変更に加え、全体的に明るくフラットなデザインになっています。 ここまで大きく変えてしまうと世界観が変わっているように見えるので、大胆な改修を行ったように見えます。運用するにつれ、ファンタジーの世界観だと無理が出てきたのかな…。機械とか出てくるし。 …
「Auto Chess」お知らせに簡体字仕様のフォントが使われているので、ぜひ日本語仕様のフォントを…
こんにちは、ちょこです。 「Auto Chess」のお知らせに簡体字が使われているのが気になりました。 ▲お知らせ画面 簡体字は多くの中国語圏で使われている基本的な文字です。 日本語圏に対してこの「簡体字」のフォントが使われています。読みづらさはありますが、共通する部分もあるので読めなくもありません。 ▲出だしからしんどい これに関しては、ローカライズ担当者か開発責任者が「漢字」という括りで見ており、簡体字、繁体字、日本語の区別が付いていないか、選べるフォントがなく無理矢理使っているか、という可能性が推測されます。 基本的には簡体字と日本の漢字とは異なる字体をしているので誤字と区別が付きづらい…
こんにちは、ちょこです。 「Auto Chess」のお知らせ画面に情報がなく見づらく感じました。どのような画面かというと、以下のような画面です。 ▲お知らせ画面 絵が大きいっ! ここでユーザーの判断や行動の手掛かりになる情報はこの部分だけです。 ▲ここだけ 文字が小さいっ! 画面の面積に対してあまりにも小さすぎます… もしかすると画像の中に文字を入れる予定だったのかな…。 基本的にユーザーはお知らせを読みません。自分に関心のある情報かどうか、見出しを見て判断します。 それゆえにライターは見出しに何の情報を載せるか一生懸命考えます。 しかし、ここまで文字が小さいとそもそも読もうと思う動機が得づら…
「Auto Chess」三択のトグルボタンって初めて見たけどアリなのか…?
こんにちは、ちょこです。 「Auto Chess」のUIで変わったトグルが使われてたので紹介してみます。 三択トグル…? 設定画面にある… …このUI。このデザインを見て瞬間的にトグルであると認識したのですが、よくよく考えて三択のトグルって見たことないんだけど…アリなのか? アリなのかな、三択トグルボタン…。いや…事実としてここにはあるけども…。 これはアンチパターンなのか? これはアンチパターンなのか考えていたのですが、正直分からないです…。 「トグルってスイッチが発端だから三択なんてありえない」「いや、なしでしょ」 とは言えるのですが、前者は事前知識が必要だったり、後者はそもそも思考停止し…
「アークナイツ」既存のメンタルモデルをリセットし、世界観を前面に出した図鑑画面
こんにちは、ちょこです。 「アークナイツ」の図鑑画面のデザインが気になりました。 まず「図鑑画面」と聞いてどういった画面を想像しますか? キャラクターの情報が五十音順に並ぶリストのようなデザインでしょうか?それともアルバムのようにサムネイルが並ぶデザインでしょうか? アークナイツの図鑑画面のデザインはこちらです。 どん! 動きを紹介するとこんな感じです。全方位にスクロール可能です。 キャラ詳細の遷移もシームレスに行えます。 如何でしょうか? おそらく想像していた図鑑画面とは違うんじゃないかな、と思います。 多くの方が想像する図鑑画面ではなく、いわゆる組織図や相関図に近いデザインになっているのが…
「アークナイツ」会話シーンの尖がった仕様は世界観の没入の為?気になったので考察してみました
こんにちは、ちょこです。 「アークナイツ」の会話シーンのUIが気になったので、特徴を書いてみます。 1:ログが見れない 超意外…!なんでこの機能がないんだろう…。 ここまで会話シーンが凝られていてログが見れないゲームってちょっと記憶にないです。 意図的な仕様だと思いますが、ログ機能を「実装しない」という選択が良い、とされる理由って何だろう…。 ちょっとタップしすぎちゃった、という時に遡れないとストレスに感じてしまうんですよね…。そう感じる頻度はそれほど多くもないけど。 肯定するのであれは、ログが見れないとわかったら、ユーザーはテキストに集中する、って結果でもあるのかな。日常会話やテレビ番組なん…
こんにちは、ちょこです。 「アークナイツ」のバトル中の画面ですが、キャラの顔に情報が被るのが気になりました。 ▲目線が入っているみたいで気になる 同じタワーディフェンスの城プロはこんな感じ。 ん~…正直ビジュアル的にはめっちゃ気になるけど、実際ゲームプレイしてたらリソース管理の方が重要だし、周回してるときはゲーム画面見てないし…。 いいのかな…。 少しだけビジュアルを優先するのであれば…自動操作の時はリソース管理する必要がありません。なので、時間経過でHPゲージを非表示にして、画面タップしたらHPゲージの表示をする、というデザインでも良いのかも。 情報の見せ方って難しいな、と感じました。
「アークナイツ」オプションにあるUI調整って何のための機能?やっぱり配信を意識している?
こんにちは、ちょこです。 「アークナイツ」のオプション画面でUI調整という変わった項目がありました。 このオプションを変更すると、こんな感じで横幅が狭くなり、一部のUIの位置が変わります。 ▲ぐいーんと変わります ゲーム中の画面を比較してみましたので、紹介します。 ホーム画面 プロファイル画面 メール画面 ショップ画面 お知らせ画面 オプション画面 キャラ詳細画面 ファッション画面 キャラ詳細画面 ヘッダーメニュー ガチャ画面 公開求人画面 章選択画面 クエスト選択画面 パーティ編成画面 クエスト中画面 クエスト中の会話シーン クエストリザルト画面 「UI調整」を実装する意義 クエスト周りだけ…
「アークナイツ」UIパーツの一貫性や統一性に関して再認識した話。見た目が不統一でも世界観が破綻していないのが凄い
こんにちは、ちょこです。 「アークナイツ」のタブデザインですが、かなり多種多様。UIが不統一というより各々の画面で好きに作っている感じが凄い。 しかしながら、混沌とならずに全体でのデザインや世界観は壊していないように見えます。 その点を中心に紹介していきます。 こちらは「プロフィール画面」のタブです。 「ゲームオプション」 上の二つは同じ規則性でデザインされていますね。 「基地の加工所」アイテムの交換を行う画面です。 こっちは上のものと比較して情報量が増えています。アイコンに色が加えられたり、ディティールが加えられたりしています。 「ショップ画面のおすすめ商品タブ」こっちは上部タブと左タブが存…
「アークナイツ」誤タップが怖い!ボタンが指で隠れないように気を付けて!
こんにちは、ちょこです。 「アークナイツ」でボタンの配置が良くなく、指でボタンを隠してしまう画面がありました。 フレンド申請を承認するかどうかの画面右側にある「承認する」か「申請を拒否する」のボタンです。 これです。 ▲上下に並んでるぞ! 指を被せるとこんなイメージです。 ▲右側のオレンジ色の部分が親指のイメージ 「OK」を押そうとすると、その下にある「キャンセル」のボタンが指で隠れちゃうんですよね。 なので、誤タップしないようにボタンを押すときに慎重になります。また、もし間違ってキャンセルの方を押してしまった場合もその取り消しが出来ません。 そういった意味でも ボタンを配置する時は「指でボタ…
「アークナイツ」ステータスの詳細のアニメーションが小気味良い。こういったUIの演出が触り心地に繋がります。
こんにちは、ちょこです。 「アークナイツ」のキャラのステータスの詳細を展開する際のUIのアニメーションが良かったので紹介します。 あ、だめだ小さい。 この部分です。 この動きの小気味良さが素敵です! 具体的には「HP」などの文字の出方や、黒い枠が左側に若干伸びている点で質感的に柔らかさが感じられます。 もしかしたら単純にミスというか、元々意図していなかったけど試行錯誤している間に偶然できちゃった系のデザインかもしれませんが、結果的には良い感じではないかなと思って見ています。 こういった「触り心地の良さ」は主観的であり定量化できないので、なかなか評価もされずお目にかかれないのですが、個人的にはこ…