こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、UIアニメーションの事例をご紹介します。 最近はUIにアニメーションを付けるゲームも増えてきた印象があります。「未定事件簿」ではUIアニメーションが多く採用されていました。 数が多いので、ユーザーが操作する際に再生されるUIアニメーションを「インタラクション系」、ユーザーが操作しないところで再生されるUIアニメーションを「演出系」としてみました。 目次です。 インタラクション系 1：トグルボタ…
「未定事件簿」ストーリーを読み終わると自動的に次のストーリーに遷移するデザインのメリットなど
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、時限式で画面遷移するデザインの事例をご紹介します。 該当の画面はこちらです。 ストーリーを読み終わると約5秒ほどかけて、自動的に次の画面に遷移します。 遷移するタイミングをユーザーに伝える手段としてはリングゲージが採用されていました。 「未定事件簿」の中ではあまり見られない、独自なUIパーツであるように感じました。 このような自動的に次の画面に遷移するデザインのメリット・デメリットを整理してみ…
アイデアしりとりって知っていますか？「∞（むげん）アイデアのつくり方」
こんにちは、ちょこです。 今日はゲームUIの紹介はお休みして、書籍紹介をします。 読み終わった書籍の感想も残しておきたいなー…と思ってはいるのですが、ついついサボりがちになってしまいます。 今回ご紹介させていただくのは「∞（むげん）アイデアのつくり方」という書籍です。 ∞（むげん）アイデアのつくり方／高橋晋平【1000円以上送料無料】 価格:1,100円(2022/1/28 00:38時点) 内容的には発想法です。むげんプチプチを開発した著者が考えた「アイデアしりとり」による発想法の紹介が主な内容です。 概要としては以下の通りです。 自己紹介 「アイデアしりとり」とはなにか？ なぜこの発想法が…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、エンプティステートをご紹介します。色んなゲームのエンプティステートを紹介して今回で第22回目です。 まず、「エンプティステート」とはどういうものか、簡単にお伝えいたします。 エンプティステートとは、表示する情報がない時にユーザーが見る画面のことだ。 見落とされがちな「エンプティステート」のUXデザインが、実際は一番重要なのかもしれない TechCrunch Japan 情報が空（エンプティ…
「未定事件簿」弁論敗北時の導線は問題解決、アプリの売り上げ貢献、ユーザーの離脱防止などに役立てられそう
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、弁論失敗時の導線をご紹介します。 該当の画面はこちらです。この「弁論失敗」とは、所謂バトルの敗北です。 弁論失敗すると以下の文章と導線が表示されています。 惜しい！編成を見直して再挑戦しましょう！ 思い出強化（キャラクターの強化） 女神の影（ガチャ） ショップ（アイテム販売） また、アイコンのグラフィックをよく見ると、遷移する導線であることを矢印マークで仄めかしていることが分かります。細かい工…
「未定事件簿」メッセージ枠が画面中央付近にあるので、キャラの表情を見ながら状況が把握しやすいデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、会話シーンのメッセージ枠の位置をご紹介します。 該当の画面はこちらです。 このようにメッセージ枠が画面中央付近に配置されています。 以前は画面下部に配置することが多かったのですが、最近は端末が縦長になっている傾向があるため、やや上に配置する流れが作られつつあるように感じます。 メッセージ枠が画面下部にあると以下のデメリットが考えられます。 指でテキストが隠れる 顔とテキストの距離が離れることで…
「未定事件簿」ババ抜きをさせてキャラクターと双方向のコミュニケーションを取るデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、キャラクターと遊べるミニゲームをご紹介します。「未定事件簿」ではキャラクターとババ抜きが遊ぶことができます。 あまり見かけない仕様かなと思います。 該当の画面はこちらです。 アニメーションで見るとこんな感じです（約23秒あります）。 タッチして親愛度を高めるゲームはよく見かけます。「未定事件簿」でもそのような仕組みも取り入れられています。 その上でこのようなミニゲームを用意する意図は双方向のコ…
「未定事件簿」あえてデザインの原則に逆らうことで分かりづらくし、発見を楽しむデザイン！
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、会話パートの選択肢の配置をご紹介します。 該当の画面はこちらです。早速ですが動画でご覧ください。 画面端、キャラクターの顔付近に選択肢が表示されています。こういった選択肢は、視線の移動が少なく、テキストが読みやすい画面中央付近に表示されているゲームが多い気がします。 「未定事件簿」の場合、選択肢を選ぶと新たな選択肢が生まれることがあります。例えば「泣きわめく子供」の選択肢を選んだ後は「薬物アレ…
「未定事件簿」誕生日を過ぎたらカレから寂しがってる手紙が届いた…！ごめん！
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、プレイヤーの誕生日のお祝い機能をご紹介します。 該当の画面はこちらです。こんな感じでカレからプレイヤーに対して誕生日プレゼントが贈られます！ 誕生日機能はよくある機能じゃないかな、と思われるかもしれませんが「未定事件簿」はもう少しだけ手が込んでいました。 こちらの手紙の文面をよく見て欲しいです… ちょこ、誕生日おめでとう。本当は今日の為にいろんな計画があったんだけど、忙しくて忘れてるとは思わな…
「未定事件簿」選択肢をゲージが一体となったデザイン、ちょっと変わったバトル画面の事例紹介
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、選択肢とゲージが一体となったUIパーツをご紹介します。 該当の画面はこちらです。 状況としては相手に攻撃し、ダメージを与えてHPを減らす、という所謂バトル画面です。 アニメーションで見るとこんな感じの挙動をします。白いゲージが徐々に減少していくのが分かるかと思います。 バトルシステムを少し説明します。HPは画面右上に表示されていますが、選択肢の中にあるゲージはWAVEの中でのHPというデザイン…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、ちょっと変わったタイトル画面をご紹介します。 該当の画面はこちらです。 どうでしょう…。便宜上タイトル画面と呼んだのですが、タイトルの表記がありません。ゲームのキャラクターもいません。 もしかしたらゲームが進行するとデザインも変わっていくタイプのタイトル画面なのかもしれないのですが、ゲームを始めて間もなくはこのような画面デザインです。 では、タイトルはどこで行われるかと言うと、スプラッシュスク…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、ゲーム内にあるアンケート機能をご紹介します。 該当の画面はこちらです。 ちなみに画像の中の文章は以下の内容が書かれています。 親愛なる弁護士様：ゲーム品質向上の為に初代より『未定事件簿』体験アンケート（報酬付き）を作成しました！アンケートにお答え頂いた弁護士様には、「女神の涙×1」を差し上げます！アンケートの報酬は、アンケートを回答し、提出に成功した後、自動的にメールボックスに送付されます。 …
「未定事件簿」キャラクターごとにボイスの言語切り替え機能が実装されていたので、なぜこの実装になったのか理由を推測してみた
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、キャラクター毎にボイスの言語設定が出来るオプションをご紹介します。 ソシャゲではかなり珍しい部類のオプションかなと思います。 該当の画面はこちらです。 こちらの項目ですね。画面左側のボタンをタップすると言語を切り替えることができます。 言語は全部で以下の4か国語です。 簡体字中国語 日本語 韓国語 繁体字中国語 このようにキャラクター別にボイスの言語を切り替えることが可能です。 キャラクター全…
「未定事件簿」画面内のボタンをタップすることでイケメンがこちらを向くからドキッとするデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、画面遷移時のキャラクターのリアクションをご紹介します。キャラクターをタップするとリアクションするゲームはいくつもありますが、画面遷移時にキャラクターがリアクションするケースは珍しいと感じました。 該当の演出がある画面はこちらです。 こちらの画面はキャラクターのストーリーを閲覧したり、好感度を高めたり、ミニゲームをすることができる画面です。 何が良いかと言うと、画面下部の「個人ストーリー」「交流…
「未定事件簿」ユーザーのことを世界観に合わせた呼び方をしている事例の紹介
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、世界観に寄せたユーザーの呼び方のデザインをご紹介します。 このブログではしばしば紹介しているのですが、いくつかのゲームでは、ユーザーのことをゲームの世界観にあわせて呼んでいることがあります。 該当の画面はこちらです。 お知らせなど、フォーマルな場面では「親愛なる弁護士様」と呼んでいます。 「未定事件簿」のデザインで面白い点はイベントでは別の呼び方も用意されている点です。 このデザインは初めて見…
「未定事件簿」ショップ画面で用いられやすいアンカリング効果の事例紹介
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、ショップ画面で使われているアンカリング効果の事例をご紹介します。 アンカリング効果とは… アンカリング効果とは、先に与えられた数字や情報(アンカー)によって、その後の判断や行動に影響が及ぼされるという現象を表す心理学用語です。具体的には、判断がアンカーに近くなる傾向があります。 アンカリング効果は、人間が先に知っている情報を基準として、その後の判断を歪めてしまうという心理的な行動です。 アンカ…
「未定事件簿」2Dイラストが動く会話シーンって新しい表現だなと感じた事例紹介
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、会話画面のデザインをご紹介します。 該当の画面はこちらです。 この会話シーン…動きます！ 補足すると、動くのは一部のシーンです。多くのシーンでは立ち絵が採用されています。 国内のゲームでここまで動いているソシャゲは見たことが無いのですが、「ブルーアーカイブ」では一部のレアリティの高いキャラクターイラストは動いていました。 中国のゲームではトレンドなのかもしれませんね。 UIの評価軸に当てはまる…
「未定事件簿」ヒント機能があることでユーザーの離脱を防ぐことにも繋がってるのかな
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、ヒント機能のデザインをご紹介します。 該当の画面はこちらです。 挙動としては、マップを調べるパートにて、画面左の虫眼鏡のアイコンをタップすると、調べれば良い箇所が光る挙動になっています。 アニメーションで見るとこんな感じです。左から右にかけてスキャニングする演出が表示されます。 調べると重要な情報を得られる箇所はこのようにアウトラインが光ります。画面全体が暗くなるため、光っている箇所がより分か…
「未定事件簿」ゲーム内の専用端末に6Gって表示されていて、近未来感を表現していると感じた話
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、世界観を表現した端末のデザインをご紹介します。 最近の中国のアプリは近未来のSFをモチーフとした世界観のアプリが多く、その世界における専用の端末もよく登場しています。「未定事件簿」にも専用の端末が登場するのですが、ちょっと面白い工夫がありました。 該当の画面はこちらです。 ぱっと見て、バッテリーの残量や現実世界の日時が画面にも反映されているのが分かるかと思います。これはよくあるデザインのひとつ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「未定事件簿」から、オプションの初期値をご紹介します。このブログでは何度か紹介しているのですが、適切な初期値が設定されていないとユーザーに手数をかけたり、ストレスを与える可能性があります。 逆に言えば、適切な初期値はユーザーの利便性に繋がります。初期値はUIデザイナーにとっては重要度の高い要素であると考えている為、たまに紹介しています。 該当の画面はこちらです。いわゆるオプション画面ですね。 具体的に紹介するのは…
「ポケモンユナイト」ネットワークアイコンをタップするとPing値が表示されるデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ポケモンユナイト」から、ネットワークを示すアイコンをタップすると、ゲームサーバーからの応答速度（Ping値）が表示されるデザインをご紹介します。 あまり見たことが無かったのですが、Ping値の表示方法の参考になれば幸いです。 該当の画面はこちらです。 こちらはホーム画面ですが、画面右上にネットワークを示すWifiのようなアイコンが表示されています。普段はアイコンのみですが、このアイコンをタップすると、大まかなP…
「ポケモンユナイト」ゲーム設定に色覚多様性対応があった、オンにすると自キャラのHPゲージが目立ちやすくなる
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ポケモンユナイト」から、ゲーム設定の中に色覚サポートがある事例をご紹介します。 該当の設定はこちらです。 このようにゲームのシステム設定の中に「色覚サポート」の項目があります。 色を調整し、バトル中に相手チームと味方チームを見分けやすくします。 実際に設定のオンオフを比較して見てみます。 こちらは「色覚サポート・オフ」です。 こちらが「色覚サポート・オン」です。 PhotohopのP型フィルタをかけるとこんな感…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ポケモンユナイト」から、IPらしいデザインを取り入れたUIパーツの事例をご紹介します。 該当のUIパーツはこちらです。 画面下部にあるこちらの丸いパーツ群です。よーく見ると画面左端だけポケモンボールになっています。 さりげない！ 隠れミッキーのような趣のあるデザインですが、これくらいのさりげなさが大切だと感じています。 例えば、この画面ではUIパーツ自体を見せたいわけではありません。 この画面での目的は「ユーザ…
「ポケモンユナイト」アバター作成画面の流れと4つの特徴に注目してみた
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ポケモンユナイト」から、アバター作成の流れの事例をご紹介します。 特に編集パーツごとのキャラクターとカメラの位置、キャラクターのポーズ、シームレスな画面遷移など3Dを使ったデザインなどに注目してみます。 該当の画面はこちらです。 大きく分けて以下の5つの段階でアバターを作成していきます。 みため かお ヘアスタイル ヘアカラー ファッション まずは「みため」です。 「性別」と表現せず「みため」と表現している点に…
「ポケモンユナイト」快適なマッチング環境を用意することもUIの一部だと思うのと、見た目の工夫を3点あげてみた
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ポケモンユナイト」から、フェアプレイポイントを表示している画面を紹介します。この「フェアプレイポイント」とは、オンライン対戦においてのインセンティブ、あるいはペナルティを管理するポイントです。 ポイントが高ければマッチングしやすく報酬も得られますが、ポイントが低ければマッチングに制限が課せられ、報酬も得られません。 該当の画面はこちらです。 画面のビジュアルデザインに注目してみます。ユーザーの認知、行動に影響す…
「ポケモンユナイト」ロードの進捗状況に合わせて、プログレスバーの上にいるピカチュウも進んでいくエンタメ感あるデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ポケモンユナイト」から、プログレスバーのデザインを紹介します。 ここで言うところの「プログレスバー」とはゲーム起動時のロード中に表示されるゲージを指します。 該当の画面はこちらです。 画面下部にプログレスバーが表示されているのが分かるかと思います。主に以下の5つの要素で構成されています。 進捗状況がわかるゲージ 進捗状況がわかる数字（30％） 状況が分かるテキスト（更新データをダウンロード中） 通信速度（速度5…
「ポケモンユナイト」季節感を背景に取り入れるだけではなく、ミッションの進捗状況に応じてツリーにライトが点く演出もあるデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ポケモンユナイト」から、季節感あふれるホーム画面のデザインを紹介します。ソシャゲの運用において季節感は重要視されがちです。 例えば、以下のような特徴があるのかな、と考えます。 デザインが変わることで話題作りになる 現実の世界観と陸続きにさせたい 該当の画面はこちらです。 ホーム画面の背景がクリスマスシーズンのデザインになっていました。 注目したいのは画面左側に表示されているツリーです。電飾が消えているので寂しい…
「ガーディアンテイルズ」クリスマスっぽいホーム画面のデザイン紹介
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ガーディアンテイルズ」通称「ガデテル」から、季節感あふれるホーム画面のデザインを紹介します。ソシャゲの運用において季節感は重要視されがちです。 例えば、以下のような特徴があるのかな、と考えます。 デザインが変わることで話題作りになる 現実の世界観と陸続きにさせたい 該当の画面はこちらです。 このようにクリスマス風に飾り付けがされています。 夜になるとライトアップもされます。 1月に入ってもこのままだったので、お…
「ブログリーダー」を活用して、appgameuiさんをフォローしませんか？
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「トライブナイン」のマップ機能をご紹介します。グラフィティという探索要素をサポートしてくれる機能が実装されています。 探索が楽になるデザイン！やったー！ 以下、目次です。 グラフィティは探索要素 グラフィティの情報が表示されるのが便利 どこにいても確認できるのが便利 段階的開示が利用されてて見やすい 情報の優先度にしたがった配色 グラフィティは探索要素 「トライブナイン」のグラフィティは探索要素のひとつです。発見した…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「トライブナイン」のバトルスキップの機能をご紹介します。雑魚敵のバトルをスキップできる便利な機能です！結果的にユーザー体験のデザインに寄ったので、ゲームUIとは少し外れるかも？ 以下、目次です。 時短になる ストレスの軽減にもなる バトルスキップ時に世界観を含めたメッセージが表示される ユーザーがバトルシステムを理解しづらくなるかも？ 時短になる TAKE DAWN機能はキャラクターと敵との戦力差があるとフィールド上…
こんにちは、ちょこです！ 今回は「バイブコーディング」という単語を知ったので、試しにやってみました。 そろそろ夏休みに入りますし、自由研究にいかがでしょうか？ 以下、ざっくりしたステップと所要時間です。慣れてる方なら1分かからないかもしれません。 1時間目：バイブコーディングって何？（0:01） 2時間目：まったくの初学者に向けたバイブコーディングの適切な進め方を教えて？（0:02） 3時間目：最初の指示出し（0:03） 4時間目：仕様の追加（0:05） 5時間目：修正指示（0:06） 6時間目：一旦完了（0:07） 1時間目：バイブコーディングって何？（0:01） まず、言葉の意味を知らない…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「トライブナイン」のエレベーターの操作パネルのUIをご紹介します。現実のデザインを丁寧に取り入れ没入感を高めつつ、不必要な情報を省いたデザインです。 ひとつひとつ丁寧に作られててすごい！ 以下、目次です。 没入感を高めるデザイン 1：ボタン配置が自然 2：読まれない文字も丁寧に扱う 3：階数がドットフォント フィクションのデザイン 没入感を高めるデザイン 「トライブナイン」ではエレベーターを操作する際、操作盤を模した…
#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「トライブナイン」のバトル敗北時に難易度を下げる救済措置をご紹介します。以下、目次です。 1：より多くのユーザーが楽しめる設計 2：敗北が無駄ではないと感じる 3：わかりやすいメッセージ 4：モチベーションを維持するラベリングとメッセージ 4-1：キャラクターからの応援メッセージ 4-2：キャラクターを「強化」と表現…
#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「トライブナイン」のSteam版とiOS版の画面を比較したのでご紹介します。以下、目次です。 プラットフォーム 1：Steam版はゲーム開始直後にキーコンフィグ設定がある 2：データ連携時に使用する外部サービスが違う デバイス 1：カーソルが用意されている 2：探索のレイアウトが違う 2-1：キャラクターのHPの位置…
#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アストラルパーティー」のSteam版とiOS版の画面を比較したのでご紹介します。 Steam版とiOS版とで運営が異なっており、今のところサーバーも分かれています。コントローラーは非対応。対応デバイスはマウスのみです。 以下、目次です。 運営違いのため除外する要素 1：企業ロゴが違う 2：問い合わせ先のメールアドレ…
こんにちは、ちょこです。 ここではゲームUIデザイナー向けに、ソシャゲのガチャ画面などで見かける「特定商取引法に基づく表示」と「資金決済法に基づく表示」について記載します。 「法律で決まっているので表示する」という認識でも実務上は恐らく困らないと思うのですが、表示漏れの防止や表示の必要性を質問された際に回答できるように、もう少し詳しく知っておきたいな、と思ったため疑問に感じていることをGeminiを使って出力しました。 厳密な正確性まで担保できませんが、概ね納得できる内容かと感じました。もし疑問に感じたことがあれば各々調べてみてください。 以下、目次とGeminiの回答です。存在しないリンク先…
#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アストラルパーティー」（以下「アスパ」）からキャラクターの露出の程度を変更できるナイーブエンジェルモードをご紹介します。 キャラクターの露出はUIデザイナーが直接コントロールできる部分ではないかもしれませんが、根底には「より多くの人に楽しんでもらいたい」という意思が含まれています。この意思は良いUIを作る際にも重要…
こんにちは、ちょこです！今回、私が購入した書籍の中からUIのアニメーションに興味がある方向けに紹介します。書籍でUIアニメーションが紹介されているのは結構珍しいかも…？ 「ゲームUI 作り方講座 Photoshop＆After Effectsで学ぶ、UIデザインとアニメーションの基本」 本書によると、想定読者は「就職して間もない新卒から入社3年目ほどの方」を想定している、とのこと。購入するとPhotoshopやAfter Effectsのファイルもダウンロードできるので、割と現場寄りの構成。 これらのことから、おそらく学生や非デザイナーに対しては書かれていないかもしれません。 また、モバイル端…
#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「クロノトリガー」のSteam版とiOS版の画面を比較したのでご紹介します。結論から述べると、今までのマルチプラットフォームとは違っていたり、移植を繰り返してきたタイトルであるため、ある程度前提情報が必要になると感じました。まずはマルチプラットフォーム対応の影響以外の要素を紹介します。 以下、目次です。 前提の話 除…
#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「星の翼」のSteam版とiOS版の画面を比較したのでご紹介します。結論から述べると、主にバトル画面とオプション項目に違いが見られました。なんとなくの印象ですが、バトル周りはSteam版準拠で作りつつ、バトル以外のメニューなどのUIはスマホを少し意識しているのかな、という印象を受けました。 以下、目次です。 1：バト…
「inZOI」の主な画面 タイトル名 inZOI タイトル画面 〇 〇 アバター作成 〇 アバター_年齢層 〇 アバター_気質 〇 アバター_人生 〇 アバター_プリセット 〇 アバター_表情変更 〇 アバター_ポーズ変更 〇 アバター_背景変更 〇 アバター_顔プリセット 〇 アバター_髪型 〇 アバター_肌 〇 アバター_顔の特徴 〇 アバター_目元 〇 アバター_化粧 〇 アバター_身体 〇 アバター_衣装 〇 〇 アバター_アクセサリー 〇 家族作成 〇 〇 ADV 〇 都市選択 〇 都市編集 〇 〇 〇 〇 〇 〇 〇 都市編集_にゃんストア 〇 都市の状態を調整 〇 魂の管理レポー…
「魔法少女まどか☆マギカ Magia Exedra（まどドラ）」の主な画面 タイトル名 魔法少女まどか☆マギカ Magia Exedra タイトル画面 〇 OPアニメ 〇 お知らせ画面 〇 ホーム画面 〇 〇 〇 ガチャ画面 〇 〇 ガチャ演出 〇 ガチャ結果 〇 交換所 〇 〇 プレゼント画面 〇 〇 パーティ画面 〇 パーティ編成_編成コピー 〇 ロード画面 〇 キャラ獲得 〇 限界突破 〇 キャラ編成 〇 〇 キャラ強化 〇 〇 キャラ一覧 〇 〇 キャラ詳細 〇 〇 キャラ_スキル 〇 〇 クエスト 〇 メインクエスト_トップ 〇 〇 メインクエスト_リスト 〇 メインクエスト_道中 …
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「レスレリアーナのアトリエ ～忘れられた錬金術と極夜の解放者～」（以下「レスレリ」）からメニューのデザインをご紹介します。 ビジュアルに特徴のあるメニューだったので、見せ方を模索したいときのアイディアの参考になれば幸いです。 以下、目次です。 放射状に配置したボタン 強調された調合ボタン フィッツの法則と視線誘導を考慮したレイアウト 放射状に配置したボタン 「レスレリ」のメニューの特徴として、各メニューアイコンが放射…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「レスレリアーナのアトリエ ～忘れられた錬金術と極夜の解放者～」（以下「レスレリ」）からクエストのスキップ機能をご紹介します。 このブログでも何度か紹介していますが、クエストのスキップ機能はスタミナ制を採用しているソシャゲにはほぼ確実に実装されている印象です。 以下、目次です。 クエストの周回に便利なスキップ機能 最大値のボタンも便利 クエストの周回に便利なスキップ機能 「レスレリ」にはクエストスキップ機能があります…
#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「レスレリアーナのアトリエ ～忘れられた錬金術と極夜の解放者～」（以下「レスレリ」）からストーリーの進行に合わせてデザインが変化するホーム画面のデザインをご紹介します。 日本のソシャゲはホーム画面のデザインを重視する傾向があると感じていたのですが、「レスレリ」のホーム画面の見た目は非常にリッチで、この時代のひとつの到…
#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「レスレリアーナのアトリエ ～忘れられた錬金術と極夜の解放者～」（以下「レスレリ」）から世界観を取り入れたスタミナ回復アイテム配布機能のデザインの事例をご紹介します。 文字にすると分かりにくいですね…。とても素敵なデザインなので、今回はひとまずゲーム画面を見ていただければ！ 以下、目次です。 スタミナ回復をパイに置き…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「レスレリアーナのアトリエ ～忘れられた錬金術と極夜の解放者～」（以下「レスレリ」）からタイトル画面などでのプレイヤーIDの取り扱いついてご紹介します。何度か紹介しているので簡単に。 以下、目次です。 タイトル画面ではタップして表示する形式が増えてきた タイトル画面での表示位置は誤タップしない位置がオススメ ゲーム内でも配慮をしている タイトル画面ではタップして表示する形式が増えてきた ゲームの規模感やジャンルにもよ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「レスレリアーナのアトリエ ～忘れられた錬金術と極夜の解放者～」（以下「レスレリ」）からキャラクターの情報をフィルタする画面のデザインを紹介します。 色々なフィルタ画面を見ましたが、登場キャラクターの数が多く、キャラを訴求したいゲームは大体このような見た目のフィルタ画面に落ち着いている印象を受けます。 以下概要です。 顔サムネイルが表示され直感的に伝わりやすい 表情を付けたサムネイルが採用 属性情報が表示されている …
こんにちは、ちょこです。 このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回はゲーム起動直後のロード画面で表示される、世界観が含まれたローディングメッセージの事例を紹介します。 「本コンテンツは、『星になれ ヴェーダの騎士たち』のために公式に作成されたものではなく、使用された情報又はデータの一部は開発会社の商標又は著作物です」 以下、目次です。 1：ゲーム内用語を用いる 2：時系列に沿って文章を順番に表示する 3：読めるだけの時間確保も必要 1：ゲーム内用語を用いる ロード中に表示されるメッセ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「星になれ ヴェーダの騎士たち」（以下「星になれ」）からゲーム起動時に表示される、ローディング中を表すメッセージを紹介します。久々の紹介。海外で開発されるタイトルに多く見られる印象です。 ▲「星になれ」のロード画面です 以下、目次です。 1：メッセージは2種類用意されている 2：メッセージには世界観を含めた言葉が使われている 3：時系列に沿った順番でメッセージが表示されている 1：メッセージは2種類用意されている 表…
こんにちは、ちょこです。 このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ ここでは過去プレイしたゲームをもとに、レビューに誘導するダイアログをデザインする際に参考になりそうな要素をまとめました。レビューに誘導するダイアログをデザインする際の参考になれば幸いです。 以下、目次です。 1：キャラグラフィックを表示 専用グラフィックを表示 汎用的な立ち絵を表示 2：レビューボタンを目立たせる 3：ボタンには分かりやすいテキストを入れる 4：レビューを促すメッセージを表示 5：手書き風メッセージで世界観…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「星になれ ヴェーダの騎士たち」（以下「星になれ」）から。レビューを促すダイアログのデザインを紹介します。▲「星になれ ヴェーダの騎士たち」評価ダイアログ 以下、目次です。 1：専用のダイアログを用意 2：ナビキャラを表示 3：星を5つ並べて高評価を訴求 4：特に訴求したい要素は文字色を変えて訴求 5：ダイアログの枠の外にボタンを配置し目立たせている 1：専用のダイアログを用意 他のアプリにも見られる傾向ですが、レビ…
こんにちは、ちょこです。 このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ ここでは過去プレイしたゲームをもとに、サーバー選択画面のUIについてまとめました。サーバー選択画面をデザインする際の参考になれば幸いです。 以下、目次です。 設計 1：おすすめサーバーを表示する 2：デフォルトでおすすめサーバーを選択しておく 3：おすすめサーバーで始めるとインセンティブが獲得できる 4：サーバーの状態を表示する 5：サーバーの応答速度を表示する 6：サーバーが統合された場合の見せ方 7：サーバー内のキャラ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からアカウント削除をする際の手順や見せ方のデザインをご紹介します。誤操作を防ぐために複雑な操作になっていると感じました。 以下、目次です。 アカウントを削除するためには文字列を入力する必要がある 強めの警告文でアカウント削除の意思を確認 例文がキーボードのUI隠れない アカウントを削除するためには文字列を入力する必要がある 「ブレマイ」ではアカウント削除時の方法はやや複雑な手…
こんにちは、ちょこです。 このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ ここでは過去プレイしたゲームをもとに、ユーザーIDの表示方法についてまとめました。「配信者が安心してゲームを配信できるようにするために、ユーザーIDはどう取り扱うのが良いのかな…」と悩んでいる方の参考になれば幸いです。 以下、概要です。 1：タイトル画面ではタップして表示する形式が増えてきた 2：ゲーム内でユーザーIDを取り扱う場合、事前に表示を仄めかす場合もある 3：フレンド申請にはユーザーIDを使わない 4：タイトル画…
こんにちは、ちょこです。今回は「ブレマイ」のホーム画面に表示されているキャラの変更方法を紹介します。ミッションクリアのために操作が必要な方の参考になれば幸いです。 ホーム画面のキャラ変更方法は以下の手順で行えます。 【キャラ変更方法】 1：ホーム画面に遷移 2：画面右上の人型のアイコンをタップ 3：変更元のキャラを指定 4：変更後のキャラを指定 流れをアニメーションで見るとこんな感じです。 ▲ホーム画面に表示するキャラを変更する際の流れ アニメーションだと速すぎて分かりにくいかもしれません。一手ずつ説明します。 1：ホーム画面に遷移 まずホーム画面に移動します。 ▲「ブレマイ」のホーム画面 2…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からホーム画面でバッテリーの残量やwifiの接続状況が表示されているデザインをご紹介します。ゲームシステムにもよりますが、たまに見かけるデザインです。 以下、目次です。 ホーム画面でバッテリー残量とwifiの接続が確認できる 充電中と平常時の差分がある バッテリー残量がわずかになっても特に警告は表示されない ホーム画面でバッテリー残量とwifiの接続が確認できる 「ブレマイ」…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からADVパートでのルビの使い方をご紹介します。ルビを採用する際の使いどころ、ルビの設計思想の参考になれば幸いです。 以下、目次です。 キャラの名前にだけルビを振っている 読みにくい場所にルビが振られていると助かる 配信時の誤読防止にもつながる キャラの名前にだけルビを振っている 「ブレマイ」のADVパートでは、見た限りキャラの名前のみルビが振られていました。また、メッセージ…
こんにちは、ちょこです。 ここではUE5を学習する中で得た知見を書き残しておきます。同じくUE5を学習したいUIデザイナーさんの参考になれば幸いです。 久々にUE起動したら見慣れないレイアウトでした…。以前のレイアウトに戻す方法あるかなー…、とメニューを見てみたらありました。良かった。 ▲UIたちはどこへ… 以下の手順で以前のレイアウトに戻せました。 上部メニューから「ウィンドウ」を選択 「レイアウトをロード」を選択 「UEクラシック レイアウト」を選択 UE4のレイアウトに変更されたらOK ▲メニューから簡単に変更できます ▲UEクラッシック レイアウトを選択 見慣れたレイアウトだ！ ▲UE…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からメインコマンドにアクセスしやすいメニューのデザインをご紹介します。メインコマンドに対するアクセシビリティが高いデザインだと感じました。 以下、目次です。 メインコマンドにアクセスしやすいメニュー レイアウトが同じだから分かりやすい ボタンの色や形状で情報の優劣をつける 右端に寄せているから片手で操作しやすい 背景をぼかしてメニューが際立っている メインコマンドにアクセスし…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からユーザーIDについてご紹介します。体感だと2020〜2021年頃から扱いが変わってきた印象です。ユーザーIDの性質や取り扱いについて考えるきっかけになれば幸いです。 以下、目次です。 タイトル画面ではユーザーIDの表示・非表示が切り替えられる ゲームの中に入ったら非表示切り替え機能はない フレンド申請時にはフレンドNo.を使う タイトル画面ではユーザーIDの表示・非表示が…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からリザルト画面の特徴を紹介します。各パーツのアニメーションを利用して、視線の誘導をしつつ、何が起きているのか分かりやすく見せる工夫などがされていると感じました。 以下、目次です。 左上から右下に視線誘導するデザイン 情報の優先度に沿った、文字の大きさと表示する順番 ゲームを進めるために必要なボタンは目立つ上に押しやすい配置 左上から右下に視線誘導するデザイン 「ブレマイ」の…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からパズル部分に視線が集中される仕組みを紹介します。視線の誘導って割と自然にデザインされているので、意識して見てみると要素分解が難しい部分だと感じました。 以下、目次です。 周囲と比較して彩度が高い パズル部分がよく動く 面積が広い 「引き算のデザイン」を利用 角丸と角の使い分け 周囲と比較して彩度が高い 人は一般的に無彩色より有彩色、低コントラストよりハイコントラストのもの…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からスタミナを効率的に消費できる便利機能を紹介します。 以下、目次です。 豊富な便利機能 1:スタミナ一括消費機能 2:オート周回機能 3:スキップチケット 豊富な便利機能 「ブレマイ」には効率的にスタミナを消費する便利機能がいくつか実装されていました。ここでは以下の3点をあげます。 スタミナ一括消費機能 オート周回機能 スキップチケット それぞれ詳細を紹介します。 1:スタ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からパズル画面のピースのデザインを紹介します。パズルゲームは色々ありますが、ピースのデザインはゲームの差別化のためにも重要視されがちなのかな、と考えています。 以下、目次です。 世界観を取り入れたデザイン 色だけではなくシルエットでも差別化されたデザイン 世界観を取り入れたデザイン 「ブレマイ」のピースのデザインはキャラクターの顔をデフォルメさせたような見た目になっています。…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）からトグルボタンのデザインをご紹介します。トグルボタンは多くのゲームに採用されることが多いUIコンポーネントのひとつです。汎用性の高いUIだと思うので、デザインする上で参考にしやすいかと考えます。 以下、目次です。 色と文字を使ってオンオフが分かりやすいデザイン 色と文字を使ってオンオフが分かりやすいデザイン 「ブルーロック…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）から使用されているフォントを紹介します。「ブルーロックPWC」ではいくつかのフォントが使われていますが、今回は『数字』に注目してみました。 以下、目次です。 世界観を伝えるフォントを採用 事例1：ゴールスコアは原作やアニメと同じ7セグメントフォント 事例2：戦力の数字はユニフォームの数字と似たフォント 余談（ユニフォームに使…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）から動きのあるホーム画面のデザインをご紹介します。ゲームの世界観やジャンルにもよりますが、個人的にはゲーム画面は常に何かしら動いていて欲しいので、画面が動いているのは好きです。 以下、概要です。 動く背景に隠された工夫がいっぱい レアリティの低いキャラでも動きが出せる 動きのない推しをホーム画面に設定しても寂しくない 動く背…
