ゲームのUIデザインを紹介しています。ゲームUIに興味を持つ方が増えるといいな。
「ライドカメンズ」でゲーム開始日を『エージェント就任日』と表記し、ゲームの没入感を高める事例
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ライドカメンズ」（以下「カメンズ」）のゲームの没入感を高めるテキストライティングの事例をご紹介します。UIデザイナーが文言を決めることは稀だと思いますが、テキストはゲームの没入感を考慮する上で重要な要素だと考えています。 以下、目次です。 「ゲーム開始日」を「エージェント就任日」と表記 デザインを取り入れる場合の懸念点も考えてみた ローカライズする際に微妙な機微が必要になる可能性がある 正確性に欠ける表現のため、ユ…
「星になれ ヴェーダの騎士たち」コントローラーパッド対応のスマホゲームのオプション項目の事例
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「星になれ ヴェーダの騎士たち」（以下「星になれ」）のオプション画面のゲームパッドの項目について紹介します。 「星になれ」はベルトアクションのようなゲーム性であり、オートでもプレイ可能なので、昨今流行している3Dアクションと比較してそこまでシビアなタイミングやプレイヤースキルが求められないとは思いますが、コントローラーにも対応しているのは興味深いです。 以下、目次です。 ゲームパッド項目が一番上にある ゲームパッドを…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「星になれ ヴェーダの騎士たち」（以下「星になれ」）のフォントの使い分けについて考えてみました。 実際のルールがどうなっているのか分かりませんが、少なくとも複数のルールで運用されているように見えたため、ここでは可読性、意匠性、設計に分けました。 以下、目次です。 可読性 1-1：レイアウトの都合で文字が小さく表示される箇所で可読性を高めたい場合はゴシック体 1-2：可読性の差を利用し、重要な情報を強調する 意匠性 2…
「星になれ ヴェーダの騎士たち」 プレゼントを受け取る前と後でサムネイルのデザインが変わるのでわかりやすい
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「星になれ ヴェーダの騎士たち」（以下「星になれ」）のプレゼントを受け取る画面のデザインを紹介します。この画面をどう呼ぶかはゲームによって変わりますが、「星になれ」ではポストという名前で呼ばれていました。 ▲「星になれ」のポスト画面 以下、目次です。 1：報酬内容が分かりやすい 2：内容の区別ができる 3：開封前後が分かりやすい 1：サムネイルが記号的な見た目に変化 2：文字やグラフィックが無彩色に変化 4：受け取れ…
【TIPS：ローディング画面】世界観を取り入れたローディングメッセージの事例や要点まとめ
こんにちは、ちょこです。 このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回はゲーム起動直後のロード画面で表示される、世界観が含まれたローディングメッセージの事例を紹介します。 「本コンテンツは、『星になれ ヴェーダの騎士たち』のために公式に作成されたものではなく、使用された情報又はデータの一部は開発会社の商標又は著作物です」 以下、目次です。 1：ゲーム内用語を用いる 2：時系列に沿って文章を順番に表示する 3：読めるだけの時間確保も必要 1：ゲーム内用語を用いる ロード中に表示されるメッセ…
「星になれ ヴェーダの騎士たち」ゲーム起動時のロード中に表示される世界観溢れるメッセージ
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「星になれ ヴェーダの騎士たち」（以下「星になれ」）からゲーム起動時に表示される、ローディング中を表すメッセージを紹介します。久々の紹介。海外で開発されるタイトルに多く見られる印象です。 ▲「星になれ」のロード画面です 以下、目次です。 1：メッセージは2種類用意されている 2：メッセージには世界観を含めた言葉が使われている 3：時系列に沿った順番でメッセージが表示されている 1：メッセージは2種類用意されている 表…
【TIPS】レビュー誘導のダイアログをデザインする際の参考要素まとめ
こんにちは、ちょこです。 このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ ここでは過去プレイしたゲームをもとに、レビューに誘導するダイアログをデザインする際に参考になりそうな要素をまとめました。レビューに誘導するダイアログをデザインする際の参考になれば幸いです。 以下、目次です。 1：キャラグラフィックを表示 専用グラフィックを表示 汎用的な立ち絵を表示 2：レビューボタンを目立たせる 3：ボタンには分かりやすいテキストを入れる 4：レビューを促すメッセージを表示 5：手書き風メッセージで世界観…
「星になれ ヴェーダの騎士たち」評価ダイアログのデザインの工夫まとめ
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「星になれ ヴェーダの騎士たち」（以下「星になれ」）から。レビューを促すダイアログのデザインを紹介します。▲「星になれ ヴェーダの騎士たち」評価ダイアログ 以下、目次です。 1：専用のダイアログを用意 2：ナビキャラを表示 3：星を5つ並べて高評価を訴求 4：特に訴求したい要素は文字色を変えて訴求 5：ダイアログの枠の外にボタンを配置し目立たせている 1：専用のダイアログを用意 他のアプリにも見られる傾向ですが、レビ…
【TIPS：サーバー選択画面】サーバー選択画面をデザインする時に気を付けたいことまとめ
こんにちは、ちょこです。 このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ ここでは過去プレイしたゲームをもとに、サーバー選択画面のUIについてまとめました。サーバー選択画面をデザインする際の参考になれば幸いです。 以下、目次です。 設計 1：おすすめサーバーを表示する 2：デフォルトでおすすめサーバーを選択しておく 3：おすすめサーバーで始めるとインセンティブが獲得できる 4：サーバーの状態を表示する 5：サーバーの応答速度を表示する 6：サーバーが統合された場合の見せ方 7：サーバー内のキャラ…
「ブレイクマイケース」アカウント削除する時に誤操作を徹底的に防ぐために長めの文字列を入力させるデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からアカウント削除をする際の手順や見せ方のデザインをご紹介します。誤操作を防ぐために複雑な操作になっていると感じました。 以下、目次です。 アカウントを削除するためには文字列を入力する必要がある 強めの警告文でアカウント削除の意思を確認 例文がキーボードのUI隠れない アカウントを削除するためには文字列を入力する必要がある 「ブレマイ」ではアカウント削除時の方法はやや複雑な手…
【TIPS：ユーザーID】ユーザーIDを誤って配信に乗せないための工夫
こんにちは、ちょこです。 このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ ここでは過去プレイしたゲームをもとに、ユーザーIDの表示方法についてまとめました。「配信者が安心してゲームを配信できるようにするために、ユーザーIDはどう取り扱うのが良いのかな…」と悩んでいる方の参考になれば幸いです。 以下、概要です。 1：タイトル画面ではタップして表示する形式が増えてきた 2：ゲーム内でユーザーIDを取り扱う場合、事前に表示を仄めかす場合もある 3：フレンド申請にはユーザーIDを使わない 4：タイトル画…
こんにちは、ちょこです。今回は「ブレマイ」のホーム画面に表示されているキャラの変更方法を紹介します。ミッションクリアのために操作が必要な方の参考になれば幸いです。 ホーム画面のキャラ変更方法は以下の手順で行えます。 【キャラ変更方法】 1：ホーム画面に遷移 2：画面右上の人型のアイコンをタップ 3：変更元のキャラを指定 4：変更後のキャラを指定 流れをアニメーションで見るとこんな感じです。 ▲ホーム画面に表示するキャラを変更する際の流れ アニメーションだと速すぎて分かりにくいかもしれません。一手ずつ説明します。 1：ホーム画面に遷移 まずホーム画面に移動します。 ▲「ブレマイ」のホーム画面 2…
「ブレイクマイケース」ゲーム内からバッテリー残量やwifiの接続状況が確認できるデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からホーム画面でバッテリーの残量やwifiの接続状況が表示されているデザインをご紹介します。ゲームシステムにもよりますが、たまに見かけるデザインです。 以下、目次です。 ホーム画面でバッテリー残量とwifiの接続が確認できる 充電中と平常時の差分がある バッテリー残量がわずかになっても特に警告は表示されない ホーム画面でバッテリー残量とwifiの接続が確認できる 「ブレマイ」…
「ブレイクマイケース」名前だけにルビを振るデザインだった 初見で誤読を防げるので配信者も安心
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からADVパートでのルビの使い方をご紹介します。ルビを採用する際の使いどころ、ルビの設計思想の参考になれば幸いです。 以下、目次です。 キャラの名前にだけルビを振っている 読みにくい場所にルビが振られていると助かる 配信時の誤読防止にもつながる キャラの名前にだけルビを振っている 「ブレマイ」のADVパートでは、見た限りキャラの名前のみルビが振られていました。また、メッセージ…
こんにちは、ちょこです。 ここではUE5を学習する中で得た知見を書き残しておきます。同じくUE5を学習したいUIデザイナーさんの参考になれば幸いです。 久々にUE起動したら見慣れないレイアウトでした…。以前のレイアウトに戻す方法あるかなー…、とメニューを見てみたらありました。良かった。 ▲UIたちはどこへ… 以下の手順で以前のレイアウトに戻せました。 上部メニューから「ウィンドウ」を選択 「レイアウトをロード」を選択 「UEクラシック レイアウト」を選択 UE4のレイアウトに変更されたらOK ▲メニューから簡単に変更できます ▲UEクラッシック レイアウトを選択 見慣れたレイアウトだ！ ▲UE…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からメインコマンドにアクセスしやすいメニューのデザインをご紹介します。メインコマンドに対するアクセシビリティが高いデザインだと感じました。 以下、目次です。 メインコマンドにアクセスしやすいメニュー レイアウトが同じだから分かりやすい ボタンの色や形状で情報の優劣をつける 右端に寄せているから片手で操作しやすい 背景をぼかしてメニューが際立っている メインコマンドにアクセスし…
「ブレイクマイケース」フレンド申請にはフレンドNoを使い、ユーザーIDが誤って表示されるリスクを減らすデザイン
こんにちは！ちょこです！ このブログでは「ゲーム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に興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からパズル画面のピースのデザインを紹介します。パズルゲームは色々ありますが、ピースのデザインはゲームの差別化のためにも重要視されがちなのかな、と考えています。 以下、目次です。 世界観を取り入れたデザイン 色だけではなくシルエットでも差別化されたデザイン 世界観を取り入れたデザイン 「ブレマイ」のピースのデザインはキャラクターの顔をデフォルメさせたような見た目になっています。…
「ブルーロック Project: World Champion」色や文字えを使ったトグルボタンが分かりやすいと思ったので紹介！
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）からトグルボタンのデザインをご紹介します。トグルボタンは多くのゲームに採用されることが多いUIコンポーネントのひとつです。汎用性の高いUIだと思うので、デザインする上で参考にしやすいかと考えます。 以下、目次です。 色と文字を使ってオンオフが分かりやすいデザイン 色と文字を使ってオンオフが分かりやすいデザイン 「ブルーロック…
「ブルーロック Project: World Champion」使っているデザインフォントは原作やアニメを意識したフォントかもしれない
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）から使用されているフォントを紹介します。「ブルーロックPWC」ではいくつかのフォントが使われていますが、今回は『数字』に注目してみました。 以下、目次です。 世界観を伝えるフォントを採用 事例1：ゴールスコアは原作やアニメと同じ7セグメントフォント 事例2：戦力の数字はユニフォームの数字と似たフォント 余談（ユニフォームに使…
「ブルーロック Project: World Champion」ホーム画面の背景の文字が動いてるのでレアリティが低く動かないイラストを設定しても画面には動きが生まれるのは上手いデザインだと思った
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）から動きのあるホーム画面のデザインをご紹介します。ゲームの世界観やジャンルにもよりますが、個人的にはゲーム画面は常に何かしら動いていて欲しいので、画面が動いているのは好きです。 以下、概要です。 動く背景に隠された工夫がいっぱい レアリティの低いキャラでも動きが出せる 動きのない推しをホーム画面に設定しても寂しくない 動く背…
「ブルーロック Project: World Champion」キャラのイメージカラーを背景に反映させたデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）からキャラクターのイメージカラーを採用したUIをご紹介します。最近色んなアプリで見かける気がします。体感ですが、2020年頃から徐々に見かける印象…流行りなのでしょうか…？ 以下、概要です。 キャラごとにUIの色が変わっている イメージカラーがグラデーションのキャラもいる 反映しない箇所もある キャラごとにUIの色が変わって…
「ブルーロック Project: World Champion」文字や画像を見切れさせるとスクロールできることが伝わりやすくなるデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）からリストを見切れさせることで続きがあるように見せるデザインをご紹介します。忘れないようにする意味でも、しばしば取り上げています。 以下、概要です。 見切れたリスト 見切れてないと終わり感 見切れたリスト 情報が画面内に収まりきらずスクロールさせる必要がある場合、スクロールバーを設けるだけでなく、情報を見切れさせることも重要…
「ブルーロック Project: World Champion」通知マークがマゼンタの五角形！訴求と世界観の要素が含まれたデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）から通知マークのデザインをご紹介します。いわゆる赤い丸のマークでも良いのですが、ゲームの世界観にマッチしたデザインも良いですよね。 以下、概要です。 世界観に合わせたデザイン 1：ゲーム起動直後のPV 2：ローディング中のアイコン 3：TIPSの行頭記号 4：報酬獲得済みのマーク 5：課金アイテムのモチーフ 6：公式サイトに…
「ブルーロック Project: World Champion」ブルーロックらしい背景を使った注意喚起画面のデザイン紹介
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）から注意喚起画面のデザインをご紹介します。日本のソシャゲにはゲームをプレイする前に注意喚起を表示することがあります。どのような要素をどのように表示しているか紹介します。 以下、概要です。 世界観のある画面デザイン 文字を見やすく 世界観のある画面デザイン 「ブルーロックPWC」のゲームプレイ前の注意喚起画面はIPの世界観を取…
「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」オプション画面とユニバーサルデザインの話
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からライブ設定の項目をご紹介します。音ゲーのライブ設定はユニバーサルデザインを取り入れていることが多いので、個人的には注目しています。 以下、概要です。 視覚過敏対応を意識した設定項目 視線を集中させる意図を感じる設定項目 端末の負荷を考慮した設定項目 主観的満足度も大事 プレビューがあって分かりやすい 任意のタイミングでサウ…
「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」シャニソンコンボ演出
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からコンボ演出のデザインをご紹介します。音ゲーに限らずコンボは表示は幅広いジャンルに採用される要素のひとつなので、応用もしやすいのかなと思います。 以下、概要です。 特定のコンボ数時にタイトルならではの特殊演出がある 283（ツバサ）COMBO：283プロダクションロゴ 412（シャイニー）COMBO：スワンマーク コンボする…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からキャラのイメージカラーをUIに反映したデザインをご紹介します。キャラクターを訴求するタイプのゲームだと、しばしば見かけることがあります。 以下、概要です。 ユニット単位ではなくアイドルごとにカラーを用意 一色に限定しない 髪の毛や瞳の色をサンプリングしている ユニットごとにトーンを揃えている キャライメージのカラー紹介 ユ…
「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」わかりやすいダイアログのデザインをAppleのヒューマンインターフェイスガイドラインを交えて紹介
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）から分かりやすいダイアログのデザインをご紹介します。 以下、概要です。 視線が誘導されやすい配色 押させたい選択肢は右に配置し視線を誘導 2択に絞って迷わせない 本文を読まずに選択肢だけ読んでも判断できるテキスト 視線が誘導されやすい配色 「シャニソン」のダイアログの選択肢は無彩色と有彩色で分けられています。ダイアログが全体的…
「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」ログインボーナスからホーム画面までシームレスに遷移し、没入感を阻害しないデザインが好き
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からログインボーナス画面のデザインの要素をご紹介します。ログインボーナス画面はユーザーが見る頻度が高い画面だからか、デザインにコストをかけるアプリをしばしば見かけます。 以下、概要です。 デザインバリエーションが豊富 圧迫感を軽減する透過ホワイトボードを採用 シームレスにホーム画面に遷移する ナビキャラの衣装が変わる デザイン…
「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」スタミナ一括消費機能を実装する際に報酬の倍率もあるとお得感も増しそう
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からライブにおけるスタミナの一括消費機能の利便性についてご紹介します。 以下、概要です。 スタミナ一括消費機能の説明 時間短縮につながる 継続的なエンゲージメント 一括消費するスタミナの量をユーザーが調節できる 常に最大値のスタミナを消費するオプションが便利 獲得できる報酬が倍数で書かれている スタミナ一括消費機能の説明 「シ…
「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」ガシャ履歴画面をデザインしたい貴方へ 必要な情報を簡潔にまとめたデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からガシャ履歴画面をご紹介します。これはガシャの購入履歴が確認できる機能ですね。理由は分かりませんが、比較的見かけるようになった印象です。 以下、概要です。 階層を分けて表示してる ガシャ履歴が確認できるとエラーが出たときに便利 ユーザー間のコミュニケーションにも利用される 階層を分けて表示してる こちらは「シャニソン」のガシ…
「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」赤文字の使い方をまとめてみました
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）から赤文字の使い方をご紹介します。赤文字を使っても強調されるかどうかは、下地の色や周囲の情報に埋もれないかなど、他の要素との兼ね合いもあります。ただ、一般的に赤は誘目性の高い色なので、強調色として使いやすいと感じるのかもしれませんね。 以下、概要です。 シャニソンでの赤文字の使われどころを分類してみた 1：注意文言 2：ステー…
「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」ガシャ結果画面を見たらシェアする情報が3パターンもあった！細かな差分にも注目！
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からガシャ結果をシェアする機能をご紹介します。シェアする情報を選べるのが珍しいデザインでした。 以下、概要です。 シェアする情報を選択できる シェアする文言が変わる シェア可能なアイドルの上限数も変わる シェアする情報を選択できる 「シャニソン」のガシャ結果画面ではガシャ結果をシェアできます。結果をシェアできるゲームはしばしば…
「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」レビューに誘導するイラストが新ユニットのコメティックだった
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からレビュー誘導のダイアログのデザインをご紹介します。レビューの数や評価を高めたい開発者が多いのか、しばしば見かけるデザインです。 以下、概要です。 イラストには新ユニットが描かれている イラストにアイドルからのメッセージが書かれている イラストはボタンが埋もれないような配色 ダイアログを表示するタイミングはガチャを引いた直後…
「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」チェックボックスよりも顔アイコンが目立つフィルタ画面 『シャニマス』から引き算をしたデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からアイドルの情報をフィルタする画面のデザインをご紹介します。名前だけではなく、顔アイコンがあるとより直感的に分かりやすくなるのかも、と感じました。何度か同じようなデザインを紹介しているので、興味があったら他のタイトルのデザインも見ていただければと思います。 以下、概要です。 顔アイコンが表示され直感的に分かりやすい アイドル…
「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」『出勤日数』や『初出勤日』という表現でアイマスの世界観への没入感をさらに高めるテキストライティング
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からゲームの没入感を高めるテキストライティングの事例をご紹介します。UIデザイナーが文言を決めることは稀だと思いますが、テキストはゲームの没入感を考慮する上で重要な要素だと考えています。 以下、概要です。 世界観に合ったテキストライティングで没入感アップ 世界観に合ったテキストライティングで没入感アップ 「シャニソン」では世界…
「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」視聴条件のハードルは高いけど、ユーザーを楽しませようとする工夫が取り入れられている【OurSTREAM】
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からYouTubeを利用したアイドルたちの実在感を高める取り組みをご紹介します。 UIというよりUX寄りの視点です。「シャニソン」の世界観に対する没入感を高めるデザインの中に、アイドルの実在感を高めるアプローチがある、と解釈しています。 以下、概要です。 YouTubeに動画を残して実在感を高めている YouTubeでアーカイ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からシステム設定でも目立たせたい項目の見せ方をご紹介します。タイトル画面の有無や運用方針ってゲームによって様々ですね。 以下、概要です。 品質設定の項目に「おすすめ」の表示がある グラフィックで表示されているからパッと見て分かりやすい グラフィックで表示している 「おすすめ」と表示している 品質設定の項目に「おすすめ」の表示が…
「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」モバイル端末を模したメニューのナビゲーションを考えるのって難しそう
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からモバイル端末とその中に含まれている機能のビジュアルデザインをご紹介します。ここ数年、モバイル端末を模したメニューは頻繁に見かける印象です。実装したい機能と世界観を含めたビジュアルとの相性が良いのかな… 以下、概要です。 モバイル端末を模した画面デザイン 起動演出があると実在感を感じる 各アプリの作り込みを紹介 Twesta…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からタイトル画面でのプレイヤーIDの表示・非表示の切り替えをご紹介します。情報の性質や取り扱いについて考えるきっかけになれば。 以下、概要です。 タイトル画面ではプレイヤーIDの表示・非表示が切り替えられる ゲームの中に入ったら非表示切り替え機能はない 自ら共有するケースは配慮外なのかも タイトル画面ではプレイヤーIDの表示・…
「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」ホーム画面では天気、季節、時間帯、イベント、ユニットごとのバリエーションが用意され賑やかなデザインだった
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からホーム画面にデザインのバリエーションを持たせている例をご紹介します。ホーム画面は頻繁に訪れる画面なので、何かしら画面に変化を持たせたいと考える開発者やユーザーからの需要があったりするのかな…。 以下、概要です。 ホーム画面のデザインにバリエーションがある アイドルの専用ボイスも用意 稀にユニットのやりとりが見れる デザイン…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）から会話パートのスキップ機能をご紹介します。ほとんどのソシャゲには会話シーンをスキップする機能があるので今更かもしれませんが、ちょっと変わっていたので事例として紹介します。 以下、概要です。 画面長押しで会話スキップ ゲージの中央にスキップと書かれているのは指に被らないから どれくらい長押しすれば良いのか分かる 倍速やオートは…
「アイドルマスター シャイニーカラーズ（シャニマス）」タイトル画面で開催中のキャンペーンをお知らせしてた、ユーザーが滞留するタイミングを少しでも有効利用しようと試みているのかな
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ（シャニマス）」（以下「シャニマス」）からタイトル画面に開催中のキャンペーンを表示するデザインなどをご紹介します。タイトル画面の有無や運用方針ってゲームによって様々ですね。 以下、概要です。 タイトル画面でキャンペーンを告知 背景イラストを更新 タイトル画面でキャンペーンを告知 「シャニマス」では、タイトル画面左下隅に開催中のキャンペーンの画像を小さく表示していました。例えば添付…
「アイドルマスター シャイニーカラーズ（シャニマス）」アプリのデータサイズが40MBもないので、端末の容量を空ける際のアンインストール候補には挙がりにくそうだと感じた
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ（シャニマス）」（以下「シャニマス」）からアプリのデータサイズが少ない件に触れたいと思います。アプリのデータサイズが大きいと端末の空き容量を圧迫してアンインストール候補になりがちです。データサイズが少ないとアンインストールの可能性が少し減る気がしているので気になりました。 以下、概要です。 データサイズは40MB以下 ダウンロードデータは…ある！ もしかするとブラウザのキャッシュ…
「アイドルマスター シャイニーカラーズ（シャニマス）」情報量の多い画面をどのように見やすくまとめているか観察してみたらデザインの原則に忠実だった
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ」（以下「シャニマス」）からP（プロデューサー）デスク画面のアイドルタブの画面をご紹介します。一見して情報量が多く余白の少ない画面ですが、実は見やすくするための工夫がいくつも施された画面でした。 以下、概要です。 表示されている情報量は多い 色とレイアウトでグルーピングされている マスキングテープの柄を利用し色弱対策も アイドルの名前の可読性を担保 表示されている情報量は多い こ…
こんにちは、ちょこです。普段はUIデザインについて記事を書いています。 ここでは見た映画とそのきっかけを記載します。おすすめがあったらコメント欄で教えていただければ、物理的に観れる作品は観ます。 シティーハンター THE MOVIE 史上最香のミッション シティーハンター THE MOVIE 史上最香のミッション 経緯不明ですが、Xで称賛されていたためAmazon Primeで観ました。確かに面白いし、何より作り方が上手いと感じました。（観た日：2024/1/27） (function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject=a; b[a]=b[a] …
「アイドルマスター シャイニーカラーズ（シャニマス）」ホワイトボードで世界観を表現しつつ、ゲームの進め方も分かりやすく伝わる画面デザイン！グレーのマーカーがポイント
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ（シャニマス）」（以下「シャニマス」）からP（プロデューサー）デスク画面の中にあるホワイトボード画面をご紹介します。機能としてはチュートリアル、各種ミッションをサポートするような画面で、ゲームに対する没入感を高めつつ、分かりやすさが両立している画面に感じました。 以下、概要です。 何から進めたら良いのか分かりやすいデザイン 余白に小物やアイドルの手書きコメントなどが描かれている …
目の不自由な方がどういったことで困っていて、どう対処しているのかまとめ（随時更新）
こんにちは、ちょこです。今回は、目の不自由な方が困っていることをまとめました。 ゲームUIを取り扱うと目の不自由な方への対処も検討する必要があります。そこで業界に限らず意見を列挙してみました。内容は随時更新します。新しい発見やデザインでの解決につながることを期待します。 （更新：2024/1/16） 鉄道 目的の自由席の車両にたどり着きにくい 時間に制限がある中での乗り換え 目的地の最短ルートを目指したいが、どの出口から出るのが最適か分からない 買い物 商品陳列棚のレイアウトが変わる セルフレジが使えない 役所 書類の記入がしにくい 料理 IHが操作しにくい IHの現在の火力（弱火か強火かなど…
「アイドルマスター シャイニーカラーズ（シャニマス）」倍速機能やスタミナ一括消費機能があるから周回が効率的にできて助かる
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ（シャニマス）」（以下「シャニマス」）から効率的に周回を行うためのサポート機能をご紹介します。大体のソシャゲはクエストを周回し、キャラを育成することが多いため、何かしら周回しやすくなるような機能が実装されています。便利機能を検討する際の参考になれば幸いです。 以下、概要です。 ADVパートは4倍速まで可能（リリースから約1か月後） フェスは3倍速まで可能（リリースから約9か月後）…
「アイドルマスター シャイニーカラーズ（シャニマス）」オプション画面を見たら、どこの確認ダイアログを非表示にするか項目の横にサムネイルが表示されていて分かりやすかった
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ（シャニマス）」（以下「シャニマス」）からオプション画面のデザインをご紹介します。オプション画面は多くのゲームで採用されている機能のため、参考になる機会も多いのかなと思います。 以下、概要です。 サムネイルがあって分かりやすい 確認ダイアログの表示、非表示が細かく設定できる 初期設定は初心者向け サムネイルがあって分かりやすい 「シャニマス」では各オプション項目にサムネイルが用意…
「アイドルマスター シャイニーカラーズ（シャニマス）」4コマ漫画のフィルタ機能の紹介、効率的に推しが登場するエピソードや未読エピソードが読める！アイコンデザインも個別に用意して手が込んでる
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ（シャニマス）」（以下「シャニマス」）から4コマ画面の便利なフィルタ機能をご紹介します。4コマは、本編では描かれていないアイドルたちの側面にスポットを当てることができるなど、アイドルたちの魅力をさらに伝えることに貢献しているかと思います。 以下、概要です。 ソート機能で任意のアイドルの登場回のみ抽出できる フィルタのアイコンはデフォルメキャラを採用 ユニット単位で抽出できる アイ…
「アイドルマスター シャイニーカラーズ（シャニマス）」リリースから3年8か月後に初心者向けの攻略動画を用意してライトユーザーに手厚いサポート、学習コンテンツの事例紹介
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ（シャニマス）」（以下「シャニマス」）から攻略動画を用意して、新規ユーザーをサポートする事例をご紹介します。チュートリアルのデザインの参考になれば幸いです。 以下、概要です。 リリースから約3年8か月経った後に動画を公開 お知らせ画面から遷移できる プロデュース選択画面からも遷移できる リリースから約3年8か月経った後に動画を公開 「シャニマス」はYouTubeで攻略動画を公開し…
「アイドルマスター シャイニーカラーズ（シャニマス）」オーディションを受ける前にファン人数が足りてなかったらTIPSを表示してユーザーの行動を誘導するチュートリアルデザインの事例紹介
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ はてなブログに投稿しました #はてなブログ今回は「アイドルマスター シャイニーカラーズ（シャニマス）」（以下「シャニマス」）からオーディションを受ける前に注意喚起のTIPSを表示するデザインをご紹介します。チュートリアルをデザインする際の参考になるかなと思います。 以下、概要です。 オーディション前に注意喚起をポップアップ オーディションの成功率を高めるためのTIPSも表示 TIPSにはナビキャラを使う オーディション前に…
「アイドルマスター シャイニーカラーズ（シャニマス）」アイドルたちのグラフィックが表示されているので名前を憶えてなくても操作できるフィルタ画面のデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ（シャニマス）」（以下「シャニマス」）からアイドルの情報をフィルタする画面のデザインをご紹介します。名前だけではなく、顔グラフィックがあるとより直感的に分かりやすくなるのかも、と感じました。 以下、概要です。 顔アイコンが表示され直感的に分かりやすい アイドルたちの名前を覚える前のユーザーにとって分かりやすい 顔アイコンが表示され直感的に分かりやすい 「シャニマス」のアイドルたち…
「アイドルマスター シャイニーカラーズ（シャニマス）」ナビキャラがいると注意文言も無意識に肯定的に受け入れやすくなっている気がする
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ（シャニマス）」（以下「シャニマス」）からタイトル画面に遷移する際に表示される、ゲームに関する注意喚起画面をご紹介します。文字だけを表示するゲームが多い中でゲームの世界観を取り入れる例は少ないため、事例として紹介させていただければと思います。 以下、概要です。 画面の向きに言及し、ユーザーに配慮 リングノートのような枠のデザインで学生感を表現 専用のキャラグラフィックを用意し世界…
「リバース：1999」UIアニメーションが心地良いだけではなく、視線誘導・情報の優先度付け・世界観の表現などクオリティの高い実装事例まとめ
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「リバース：1999」のUIアニメーションをご紹介します。以下主な事例です。 「リバース：1999」のココがすごい3点 1：情報量のコントロールが絶妙 2：引き算のデザイン 事例 01：メニュー ラインが伸びるアニメーション 02：ログインボーナス 動かす方向を対比させることで際立つ情報 03：プロフィール プレイヤーの経験値ゲージが伸びる 若干タイミングをずらして表示するパーツたち 格子状のマスクを利用してキャラを…
「リバース：1999」ホーム画面にて背景の光に合わせてキャラの色も変えている/2Dだと珍しい表現かも
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「リバース：1999」のホーム画面のキャラが周囲の光の影響を受けている表現をご紹介します。プレイしている感じあからさまに色処理しているようには見えず、何度か画面を切り替えて違和感に気付きました。僅かに色味や陰影に差を出しているさりげなさが好きです。 以下、概要です。 2Dのキャラが周囲の光源の影響を受けている 自然に見せることで世界観の没入感を高めている 2Dのキャラが周囲の光源の影響を受けている 「リバース：199…
「リバース：1999」呪文詠唱時に文字が輝き、炎にあわせてセリフが揺れる！アドベンチャーパートのカッコイイUI演出
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「リバース：1999」のADVパートの中でカッコイイ演出をご紹介します。見た限り「リバース：1999」はADVパートに注力しており、フルボイス、キャラがよく動く、スチル絵も豊富でクオリティが高いなどなど、見所がたくさんあります。そのこだわりはキャラに留まらず、UIにも及んでいました。 以下、概要です。 炎のエフェクトと一緒に文字も揺れている 呪文詠唱時に文字が輝く 炎のエフェクトと一緒に文字も揺れている こちらは周囲…
「リバース：1999」アイテムが入手できる場所の導線/ゲーム始めたばかりのユーザーからベテランまで便利に使える機能
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「リバース：1999」のアイテム詳細画面から、そのアイテムが入手可能な場所に遷移できる導線をご紹介します。ショートカットがあると手数の省略にもなり大変重宝しています。「リバース：1999」のようなキャラ育成があるゲームスキームの場合、もはやリリース時点で必須機能ではないでしょうか。 以下、概要です。 アイテム詳細から導線が繋がっている 学習コストと手数が抑えられる アイテム詳細から導線が繋がっている こちらはアイテム…
「リバース：1999」キャラのサインのデザイン事例/文字だけではなくロゴマークもサインの範疇か
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「リバース：1999」からキャラプロフィール画面に表示されるキャラのサインのデザインをご紹介します。キャラのサインってアイドル系のゲーム以外だと結構珍しいかも？「リバース：1999」でもキャラ別にデザインされており、興味深く感じました。 以下、概要です。 キャラ名とサインの表記を一致させないデザイン 肉球を押したデザイン ロゴマークのようなサインもある キャラ名とサインの表記を一致させないデザイン 「リバース：199…
「リバース：1999」映画のチャプターを選ぶようなストーリー画面
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「リバース：1999」からストーリー画面のデザインをご紹介します。「リバース：1999」のストーリー画面は映画のチャプターを選ぶようなデザインだと感じました。 以下、概要です。 駒を配置しジオラマのようにシーンを表現 ストーリーが進むほど右方向に進む 見やすい配色のボタン 詩的な表現でストーリーの輪郭を表現 リストから詳細に切り替える時の操作が軽い 一覧性は低いが大きなストレスは無い 駒を配置しジオラマのようにシーン…
「リバース：1999」言語別にタイトルロゴが用意されていた/斜線の角度や文字組みなど微調整され丁寧さを感じた
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「リバース：1999」から多言語のタイトルロゴをご紹介します。「リバース：1999」では5つ言語に対応しており、且つそれぞれの言語ごとにタイトルロゴのデザインが分かれていました。 主に以下の2点が言語別タイトルロゴのデザインの違いだと感じました。 文字に合わせて斜線の角度を変えている 文字組みを変えている 以下、各言語のロゴデザインと簡単な特徴です。 1：日本語 2：簡体字 3：繁体字 4：英語 5：韓国語 1：日本…
「リバース：1999」神秘術のアイコンはエフェクトや演出をもとにした分かりやすいデザイン/配色や構図も整理されている
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「リバース：1999」から神秘術のアイコンデザインの工夫をご紹介します。「リバース：1999」では神秘術という攻撃方法があります。アイコンでデザインの差別化がされていたため、様々な攻撃方法や効果が直感的に伝えられていると感じました。 以下、概要です。 エフェクトを基にしてそれぞれ区別しやすいデザイン 長押しで効果が確認できる 合成するときはアニメーションをさせて目立たせる 有利不利を表示して分かりやすく 必殺技はシル…
「リバース：1999」絶対に読まれない場所でも世界観に沿った文章だった/作り込みが丁寧
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「リバース：1999」から名前入力画面のデザインをご紹介します。 「リバース：1999」の名前入力画面は他の多くのゲーム同様、素敵なデザインで世界観を表現されていました。以下、概要です。 読まれない場所の文章まで丁寧に作り込まれてた キャラの顔を表示して誰の名前を入力するのか分かりやすく 読まれない場所の文章まで丁寧に作り込まれてた 「リバース：1999」の名前入力画面はこんな感じです。背景に書類、フロッピーディスク…
「リバース：1999」報酬を受け取るボタンが無く画面遷移時に自動で受け取れる挙動/意外と違和感なかった
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「リバース：1999」からミッション画面の受け取りボタンが省略されてる例をご紹介します。「リバース：1999」では、味方が倒されないでクリアするなど、一定条件を満たしてクエストをクリアするとポイントが付与され、付与された累計ポイントによって報酬が得られる機能があります。最近のソシャゲでクエストがあるタイプなら比較的見かける仕様かな、と思います。 その報酬を受け取る画面に遷移する際に受け取る操作が不要な実装になっていま…
ストーリーの流れで 漫画の流れで名前を聞かれる 「カウンター・アームズ -終焉武装少女-」漫画の展開の中でプレイヤーの名前を聞くので没入感が高かった - ゲームアプリのUIデザイン ビジュアルで表現 世界観を表現するケース 「404 GAME RE:SET-エラーゲームリセット-（エラゲ）」ゲーム開始直後のプレイヤー名入力画面が採用サイトを模したデザインになっていた - ゲームアプリのUIデザイン 背景の文字もしっかり 「ドールズフロントライン」名前入力画面を凝ると初頭効果でゲームの世界観を印象付けることができるかも - ゲームアプリのUIデザイン 委任状風 「食物語」チュートリアルの中に『プ…
「リバース：1999」スクリーンショット共有機能が実装！キャプチャするとXへの導線などが表示される/設定からオフにできるのも便利
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「リバース：1999」からスクショを撮影した後の画面デザインをご紹介します。「リバース：1999」では端末の機能をつかってスクショを撮影した場合、専用の画面に切り替わり、SNSなどへの導線が表示される作りになっていました。 以下、概要です。 画像をシェアする機能が実装 設定からシェア機能を無効にできる 画像にタイトルロゴの透かしが入る 透かしは言語別に用意 拡散するための導線は全言語で同じ 言語が変わっても拡散先候補…
012_機能-画面撮影機能 カテゴリーの記事一覧 - ゲームアプリのUIデザイン スクショを撮った時、撮影モードが用意されている時 ・アプリ内で加工可能 ・Twitterに投稿を誘導する導線 「食物語」スクショを撮るとTwitterに投稿を促す機能がある - ゲームアプリのUIデザイン 「Ink,Mountains and Mystery」スクショを加工できる仕様が凄い。ここまで世界観に寄せたUIが作れるのか… - ゲームアプリのUIデザイン 「Chess Rush」シェア機能を入れるだけではシェアされない？ユーザーに相応のメリットを与える必要がある - ゲームアプリのUIデザイン ◆まとめペ…
画面ナレッジ タイトル画面をデザインするときのコツ - ゲームアプリのUIデザイン 画面撮影機能 - ゲームアプリのUIデザイン
「リバース：1999」アニメーションする方向でリストがスクロールする方向も分かる/アニメーションって重要
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「リバース：1999」からショップ画面の表示アニメーションの事例をご紹介します。 「リバース：1999」ではショップ画面で商品が表示される際、商品が左右あるいは上下にアニメーションして表示されていました。これにより、ユーザーは自然と商品をスクロールできる方向が理解できます。以下、概要です。 スライドインさせて動かせる方向を仄めかす アニメーションがあるとより分かりやすい スライドインさせて動かせる方向を仄めかす 「リ…
「リバース：1999」ヘッドホン・イヤホンを使うように促す画面って地味に演出凝ってる気がする/やっぱりゲーム始めて最初に表示される画面って作り込みが求められるのかな
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「リバース：1999」からヘッドホン・イヤホンの使用を推奨するメッセージと画面デザインをご紹介します。「リバース：1999」ではゲーム開始直後、一度だけヘッドホン・イヤホンの使用を推奨する画面が表示されました。ゲームの没入感を重視するタイトルで極稀に見かける画面です。 以下、概要です。 ヘッドホン・イヤホンの使用を推奨するメッセージ 世界観を表現する文章が添えられている 音あるいは小雨を表現するようなアニメーション …
「リバース：1999」UTTU閲覧ガイドに書かれている人物のサイン演出がすごかった/Pandora Wilson(パンドラ ウィルソン)って誰さ？
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「リバース：1999」からこだわりの文字アニメーションの事例をご紹介します。 UTTU閲覧ガイドページの中に不思議な文章があり、それを丁寧に読んでいると不意にアニメーションが表示されました。以下、概要です。 じっくり読ませる文章と不意を衝くアニメーションの組み合わせ サインのアニメーションが凝っている 書かれている文章の紹介[参考資料] じっくり読ませる文章と不意を衝くアニメーションの組み合わせ 「リバース：1999…
「リバース：1999」世界観を表現する独特なテキストライティング/香調って項目は初めて見た
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「リバース：1999」から独特なテキストライティングの事例をご紹介します。 世界観をビジュアルで表現する際、どのようなテキストを表示するかも重要な要素のひとつと考えています。デザイナーが文言を指定するケースは限られると思いますが、ゲームUIに関係する要素としてご紹介します。以下、概要です。 ユーザープロフィールでの事例 キャラプロフィールでの事例 お知らせの文章での事例 ユーザープロフィールでの事例 まずはユーザープ…
「リバース：1999」差出人によって切手のデザインを変える！工夫に満ちたメール画面
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「リバース：1999」からメール機能のビジュアル面の作り込みをご紹介します。 「リバース：1999」のUIは世界観をビジュアルで表現している点でユーザーの心を掴んでいます。メール機能を例に具体的なデザインを紹介します。以下、概要です。 差出人によって切手のデザインを変えている デザインは今のところ3種類 差出人によって切手のデザインを変えている 「リバース：1999」のメール画面は手紙を模したデザインになっています。…
「リバース：1999」クエストクリア失敗時にパーティ編成について具体的なアドバイスをくれるので改善点が分かりやすい
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「リバース：1999」からクエストクリア失敗時のユーザーへのアドバイスの表現をご紹介します。 ソシャゲではクエストクリアに失敗した時、ガチャやキャラ強化画面などに誘導するような表現や導線が表示されていることが多いです。ガラケーのソシャゲからあるためレガシーな仕様ですが、時代を経て細かく変化しています。以下、詳細です。 相性が不利なキャラを指摘 戦力不足の場合、達成度を表示 改善点をひとつに絞っている 相性が不利なキャ…
「リバース：1999」架空の文字を使ってTIPSを用意することで多言語対応のコストを下げる事例
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「リバース：1999」から多言語対応を考慮した効率的なTIPS画像の制作事例をご紹介します。 多言語対応する場合、TIPS画像を用意するのはとても大変です。「リバース：1999」では架空の文字を表示し、画像を共通化していました。これにより効率的にTIPS画像を用意できることが期待できます。 以下、詳細です。 対応言語は5つ TIPSを共通化することで作業コストを抑える 世界観に沿った架空の文字 画像を共通にすることで…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「勝利の女神：NIKKE」（以降、ニケ）から縦横画面の実装事例をご紹介します。 ニケはデフォルトでは縦画面でプレイするのですが、設定から横画面に切り替えることもできます。横画面にするとボタンや文字が小さくなるため操作性、視認性は非常に悪くなりますが、画面に表示される情報量は増えるので、情報の一覧性が高まります。 以下、縦横対応の一例と所感です。 まずは画面の事例を紹介します。 縦画面 横画面 バトル ホーム 基地 コ…
「勝利の女神：NIKKE（ニケ）」キャラクターのイメージカラーをUIにも反映。ビジュアルだけではなく視認性、可読性にも考慮が必要そう
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「勝利の女神：NIKKE」（以降、ニケ）からキャラのイメージカラーを設定し、UIにも反映させている例をご紹介します。 ニケではキャラごと、衣装ごとにイメージカラーが用意されています。イメージカラーを一部UIにも反映させることで、キャラにフォーカスした画面作りをされているように感じました。 以下、イメージカラーについての所感です。 キャラを訴求したい場面で使われている キャラごと、衣装ごとにイメージカラーが用意されてい…
「勝利の女神：NIKKE（ニケ）」画面遷移演出かっこいいから見て欲しい【11選】
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「勝利の女神：NIKKE」（以降、ニケ）から画面遷移演出(トランジション)の事例をご紹介します。 ニケでは画面遷移時のアニメーションのバリエーションが豊富に用意され、各画面のデザインに合わせて丁寧に作り込まれている印象を受けました。 以下、画面遷移演出についての所感です。 演出で世界観の没入感を高めている 1：情報を段階的に見せることで、ユーザーが場面を理解しやすくする演出 2：画面の世界観をビジュアル面で訴求する演…
【2023年11月更新】ゲームUIデザイナーにおすすめ書籍：レイアウト編【7選】
こんにちは、ちょこです！ このページでは、自分が購入した書籍の中で【レイアウト】に関する書籍を紹介します。ゲームUIデザイナーさんが書籍を選ぶ際の参考になれば幸いです。 レイアウト系の書籍の特徴 レイアウトに関する書籍は広告やバナーといったグラフィックデザインに視点を置いた書籍が多く、webやゲームはあまり扱われていません。 そのため、見た目や伝わりやすさなどは担保できると思いますが、GUIの特性、操作性などに関しては別のインプットで担保する必要があります。 例外として、中国開発っぽいゲームUIを作りたい場合は参考になるかもしれません（あれは操作性よりもビジュアルを重視するのが特徴なので） お…
実例をもとにレイアウトの構成要素を分析！「［デザイン技法図鑑］ひと目でわかるレイアウトの基本。」
こんにちは、ちょこです！今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「［デザイン技法図鑑］ひと目でわかるレイアウトの基本。」 表でまとめるとこんな感じです。 レイアウト 文字配色 配色 図版 実例 索引 ○ ○ ○ ○ 78例 なし 書籍の概要としては、実例とパターン化したサンプルを基に、図や文字などレイアウトの関連する要素を分析、解説している感じです。 以下、主な感想です。 理論ではなくパターン分析の勉強に レイアウトに関わる配色や文字などの要素にも触れている 実例が掲載されているのでクオリティが高い 理論ではなくパターン分析の勉強に 全体的な構成…
「勝利の女神：NIKKE（ニケ）」ニーアコラボのUIデザインのクオリティが高かった
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「勝利の女神：NIKKE」（以降、ニケ）からニーアコラボにおけるUIのデザイン変更をご紹介します。 非常に…！非常に！力の入った熱量の高いコラボでした。ちょっとIPを借りる、という程度を超え、圧倒的なクオリティだと感じました。ソシャゲでこのクオリティのコラボは一つの到達点じゃないかと思いました。 この記事ではグラフィックに絞って紹介しますが、実際のゲームでは音楽もコラボに合わせて実装されているので、没入感の高まりも想…
「麻雀一番街」対戦相手の名前を非表示にする方法！加工の手間が省けて便利！
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「麻雀一番街」から他プレイヤーの名前を匿名に置き換える設定をご紹介します。この設定により、ゲーム画面のキャプチャをSNSなどにアップする際に加工の手間を省くことができます。 以下、主な特徴です！ 過去の対戦ログ画面で他プレイヤーの名前を匿名にできる 対局中以外の場面でも匿名表示のまま 過去の対戦ログ画面で他プレイヤーの名前を匿名にできる 最近他の人がアップしている画像を見て気付いたのですが、「麻雀一番街」では対戦相手…
「勝利の女神：NIKKE（ニケ）」画面がかっこいいので、使われているフォントを調べてみました
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「勝利の女神：NIKKE」（以降、ニケ）でのフォントの使われ方をご紹介します。「ニケ」はスタイリッシュな画面作りを心掛けているように見えました。その中でもフォントが果たしている役割が多いように感じたため紹介します。以下、主な特徴です。 サンセリフ体の大文字が中心 長体が多く使われている 「ミリタリー×SF×女性」で分類&使用フォント ミリタリー：Spaceeland Eight SF：Industry 女性：Azon…
「勝利の女神：NIKKE（ニケ）」お知らせの見出しと本文のヘッダーをアニメーションで繋げ、直感的に状況が理解しやすいUI
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「勝利の女神：NIKKE」（以降、ニケ）からシームレスなお知らせ画面のUIをご紹介します。「ニケ」のお知らせ画面はアニメーションを利用し、ユーザーが状況を理解しやすいデザインになっていると感じました。使いやすいと感じた縦画面のお知らせ画面は久々かもしれません。 以下、主な特徴です。 見出しがヘッダーに変化し、状況が理解しやすい タブ切り替えもアニメーションしている 見出しがヘッダーに変化し、状況が理解しやすい 「ニケ…
「勝利の女神：NIKKE（ニケ）」銃の残弾数を表すゲージUIが銃のアイコンと統合され、情報が整理されていた
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「勝利の女神：NIKKE」（以降、ニケ）から銃の残弾数を表すUIをご紹介します。銃の残弾数って数字やゲージ類で表現するイメージだったのですが、「ニケ」のUIはビジュアル面の要素を加えたUIになっていました。 以下、主な特徴です。 ゲージの形状が銃になっている 数字はデジタル管理、ゲージはアナログ管理 ゲージの形状が銃になっている 「ニケ」では銃の残弾数を表すゲージが銃のかたちをしていました。 こちらが「ニケ」のバトル…
「勝利の女神：NIKKE（ニケ）」メンテナンスに入る前に予告UIが表示されてた
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「勝利の女神：NIKKE」（以降、ニケ）からメンテナンス直前予告のUIをご紹介します。MMORPG系のソシャゲだとアナウンス結構強めに表示する印象がありますが、「ニケ」のようなソシャゲでメンテナンスの予告を表示するのは珍しいかも？何にせよ遭遇率が低いUIなので、事例として共有いたします。 以下、主な特徴です。 最前面に表示 ホーム画面で表示 文字を流して表示 インゲーム画面に遷移しても表示 しばらく遊んでいると再表示…
「勝利の女神：NIKKE（ニケ）」パララックス表現を取り入れた奥行き感のあるガチャ画面
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「勝利の女神：NIKKE」（以降、ニケ）からパララックス表現を取り入れたガチャ画面をご紹介します。パララックスを用いてるのは「アークナイツ」以来かも…？ 以下、主な特徴です。 パララックスで奥行きのある画面に 奥行きは3～4段階に分かれている 横幅が短いので移動量は控えめ パララックスで奥行きのある画面に 縦横の2次元よりも奥行きを加えた3次元の方が情報量が多くなる。パッと見て情報量は多いが、奥行き感を取り入れること…
「404 GAME RE:SET-エラーゲームリセット-（エラゲ）」特定操作でミニゲームが遊べる裏技を仕込んでいる遊び心が素敵
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「404 GAME RE:SET-エラーゲームリセット-」（以降、エラゲ）からミニゲームが遊べるようになるサプライズな取り組みをご紹介します。 以下、主な特徴です。 特定操作でミニゲームが解放 演出でヒントを与える 公式X（旧Twitter）でもヒント与える 解放した後はメニューに追加される 特定操作でミニゲームが解放 「エラゲ」ではゲーム内で特定の操作をするとミニゲームができる仕組みを仕込んでいました。この規模の裏…
「404 GAME RE:SET-エラーゲームリセット-（エラゲ）」パカパカ(ハーディング)は画面の輝度を抑えることで対処している
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「404 GAME RE:SET-エラーゲームリセット-」（以降、エラゲ）からスキルカットインの最中などに発生しがちなパカパカの対応をご紹介します。 以下、主な特徴です。 スキルカットイン中は輝度を抑える ゲーム起動直後に警告表示 スキルカットイン中は輝度を抑える 「エラゲ」に限った話ではありませんが、キャラのスキルカットインでは派手な演出が採用されがちです。いくつか例をあげてみます。 ©SEGA 頻繁にカットが切り…
「404 GAME RE:SET-エラーゲームリセット-（エラゲ）」現在いる画面のメニューアイコンを明滅させるナビゲーションデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「404 GAME RE:SET-エラーゲームリセット-」（以降、エラゲ）からナビゲーションのデザインをご紹介します。ソシャゲはコンシューマと比較して画面数が多かったり、機能を横断する導線が増える傾向があるため、特にゲームに慣れていない内は自分が今どこにいるのか見失うことが珍しくありません。そういう意味ではナビゲーションを意識することはソシャゲのUIにとって重要な要素のひとつなのかもしれません。 以下、主な特徴です。…
「404 GAME RE:SET-エラーゲームリセット-（エラゲ）」単語とゲージを組み合わせたUIが斬新すぎる
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「404 GAME RE:SET-エラーゲームリセット-」（以降、エラゲ）から単語とゲージを組み合わせたUIをご紹介します。独創的！ 以下、主な特徴です！ 単語とゲージの組み合わせ 解析コードという見せ方 単語の長さによってゲージの長さも変わる 単語とゲージの組み合わせ ©SEGA 独創的なデザインが多い「エラゲ」の中でも特に異彩を放っているのが、キャラの記憶解放画面のゲージだと思います。 画面と演出は上で紹介してい…
「404 GAME RE:SET-エラーゲームリセット-（エラゲ）」幾何学を取り入れた属性アイコンが世界観に馴染んでいると感じました
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「404 GAME RE:SET-エラーゲームリセット-」（以降、エラゲ）から属性アイコンのデザインをご紹介します。個人的には、属性アイコンのデザインはある程度出尽くした感があったのですが「エラゲ」ではかなり尖ったデザインが採用されていました。 文字とグラフィックの狭間 ©SEGA こちらが「エラゲ」の属性アイコンです。幾何学的なデザインになっています。世界観的に幾何学である必然性もあるため、世界観に馴染んだデザイン…
「404 GAME RE:SET-エラーゲームリセット-（エラゲ）」架空の端末を取り入れたゲームならではのスキューモーフィズムなデザイン
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「404 GAME RE:SET-エラーゲームリセット-」（以降、エラゲ）からADVパートのUIデザインをご紹介します。ゲームならではのスキューモーフィズムを感じました。 以下、主な特徴です！ チャットアプリを模したデザイン ログが見えるデザイン 架空の端末感 端末が透けている 側面の物理ボタンが無い チャットアプリを模したデザイン ©SEGA 「エラゲ」のADVパートのデザインはLINEなどのチャットアプリを模した…
「404 GAME RE:SET-エラーゲームリセット-（エラゲ）」キャラストーリーごとにADVのUIを変えてるのすごい
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「404 GAME RE:SET-エラーゲームリセット-」（以降、エラゲ）からキャラごとにADVパートのUIデザインを変えていたのでご紹介します。やってみたいなと思うことはあるけど、やったことはないんですよね…。実際にやっているゲーム初めて見たかも。 以下、主な特徴です！ キャラごとにUIやフォントを変えている いくつか事例紹介 ファンシー ゴシック ナチュラル 終末感 サイバー 和風 研究所 車 キャラごとにUIや…
「404 GAME RE:SET-エラーゲームリセット-（エラゲ）」ゲーム開始直後のプレイヤー名入力画面が採用サイトを模したデザインになっていた
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「404 GAME RE:SET-エラーゲームリセット-」（以降、エラゲ）からプレイヤーの名前を入力する画面のデザインをご紹介します。ゲーム開始直後の名前入力画面は専用のUIで構成されがちです。この画面を作り込むことで世界観を訴求し、ゲームの没入感を高めるチャンスに繋がると感じています。 以下、主な特徴です！ サイトを模した名前入力画面 ボタンの中のテキストも専用の文言 【番外編】ゲーム開始後の名前変更画面のデザイン…
「ブログリーダー」を活用して、appgameuiさんをフォローしませんか？
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ライドカメンズ」（以下「カメンズ」）のゲームの没入感を高めるテキストライティングの事例をご紹介します。UIデザイナーが文言を決めることは稀だと思いますが、テキストはゲームの没入感を考慮する上で重要な要素だと考えています。 以下、目次です。 「ゲーム開始日」を「エージェント就任日」と表記 デザインを取り入れる場合の懸念点も考えてみた ローカライズする際に微妙な機微が必要になる可能性がある 正確性に欠ける表現のため、ユ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「星になれ ヴェーダの騎士たち」（以下「星になれ」）のオプション画面のゲームパッドの項目について紹介します。 「星になれ」はベルトアクションのようなゲーム性であり、オートでもプレイ可能なので、昨今流行している3Dアクションと比較してそこまでシビアなタイミングやプレイヤースキルが求められないとは思いますが、コントローラーにも対応しているのは興味深いです。 以下、目次です。 ゲームパッド項目が一番上にある ゲームパッドを…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「星になれ ヴェーダの騎士たち」（以下「星になれ」）のフォントの使い分けについて考えてみました。 実際のルールがどうなっているのか分かりませんが、少なくとも複数のルールで運用されているように見えたため、ここでは可読性、意匠性、設計に分けました。 以下、目次です。 可読性 1-1：レイアウトの都合で文字が小さく表示される箇所で可読性を高めたい場合はゴシック体 1-2：可読性の差を利用し、重要な情報を強調する 意匠性 2…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「星になれ ヴェーダの騎士たち」（以下「星になれ」）のプレゼントを受け取る画面のデザインを紹介します。この画面をどう呼ぶかはゲームによって変わりますが、「星になれ」ではポストという名前で呼ばれていました。 ▲「星になれ」のポスト画面 以下、目次です。 1：報酬内容が分かりやすい 2：内容の区別ができる 3：開封前後が分かりやすい 1：サムネイルが記号的な見た目に変化 2：文字やグラフィックが無彩色に変化 4：受け取れ…
こんにちは、ちょこです。 このブログでは「ゲーム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に興味を持ってくれる方が増えると嬉しいです！ 今回は「404 GAME RE:SET-エラーゲームリセット-」（以降、エラゲ）からミニゲームが遊べるようになるサプライズな取り組みをご紹介します。 以下、主な特徴です。 特定操作でミニゲームが解放 演出でヒントを与える 公式X（旧Twitter）でもヒント与える 解放した後はメニューに追加される 特定操作でミニゲームが解放 「エラゲ」ではゲーム内で特定の操作をするとミニゲームができる仕組みを仕込んでいました。この規模の裏…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「404 GAME RE:SET-エラーゲームリセット-」（以降、エラゲ）からスキルカットインの最中などに発生しがちなパカパカの対応をご紹介します。 以下、主な特徴です。 スキルカットイン中は輝度を抑える ゲーム起動直後に警告表示 スキルカットイン中は輝度を抑える 「エラゲ」に限った話ではありませんが、キャラのスキルカットインでは派手な演出が採用されがちです。いくつか例をあげてみます。 ©SEGA 頻繁にカットが切り…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「404 GAME RE:SET-エラーゲームリセット-」（以降、エラゲ）からナビゲーションのデザインをご紹介します。ソシャゲはコンシューマと比較して画面数が多かったり、機能を横断する導線が増える傾向があるため、特にゲームに慣れていない内は自分が今どこにいるのか見失うことが珍しくありません。そういう意味ではナビゲーションを意識することはソシャゲのUIにとって重要な要素のひとつなのかもしれません。 以下、主な特徴です。…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「404 GAME RE:SET-エラーゲームリセット-」（以降、エラゲ）から単語とゲージを組み合わせたUIをご紹介します。独創的！ 以下、主な特徴です！ 単語とゲージの組み合わせ 解析コードという見せ方 単語の長さによってゲージの長さも変わる 単語とゲージの組み合わせ ©SEGA 独創的なデザインが多い「エラゲ」の中でも特に異彩を放っているのが、キャラの記憶解放画面のゲージだと思います。 画面と演出は上で紹介してい…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「404 GAME RE:SET-エラーゲームリセット-」（以降、エラゲ）から属性アイコンのデザインをご紹介します。個人的には、属性アイコンのデザインはある程度出尽くした感があったのですが「エラゲ」ではかなり尖ったデザインが採用されていました。 文字とグラフィックの狭間 ©SEGA こちらが「エラゲ」の属性アイコンです。幾何学的なデザインになっています。世界観的に幾何学である必然性もあるため、世界観に馴染んだデザイン…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「404 GAME RE:SET-エラーゲームリセット-」（以降、エラゲ）からADVパートのUIデザインをご紹介します。ゲームならではのスキューモーフィズムを感じました。 以下、主な特徴です！ チャットアプリを模したデザイン ログが見えるデザイン 架空の端末感 端末が透けている 側面の物理ボタンが無い チャットアプリを模したデザイン ©SEGA 「エラゲ」のADVパートのデザインはLINEなどのチャットアプリを模した…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「404 GAME RE:SET-エラーゲームリセット-」（以降、エラゲ）からキャラごとにADVパートのUIデザインを変えていたのでご紹介します。やってみたいなと思うことはあるけど、やったことはないんですよね…。実際にやっているゲーム初めて見たかも。 以下、主な特徴です！ キャラごとにUIやフォントを変えている いくつか事例紹介 ファンシー ゴシック ナチュラル 終末感 サイバー 和風 研究所 車 キャラごとにUIや…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「404 GAME RE:SET-エラーゲームリセット-」（以降、エラゲ）からプレイヤーの名前を入力する画面のデザインをご紹介します。ゲーム開始直後の名前入力画面は専用のUIで構成されがちです。この画面を作り込むことで世界観を訴求し、ゲームの没入感を高めるチャンスに繋がると感じています。 以下、主な特徴です！ サイトを模した名前入力画面 ボタンの中のテキストも専用の文言 【番外編】ゲーム開始後の名前変更画面のデザイン…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「404 GAME RE:SET-エラーゲームリセット-」（以降、エラゲ）からロックされた情報の見せ方の事例をご紹介します。 以下、主な特徴です！ ロックされた情報を文字化けで表現 読めない文字は薄く表示 ロックされた情報を文字化けで表現 ©SEGA 情報がロックされた画面の例はこちらのゲームヒストリー画面です。最初は情報がロックされていますが、指定された条件を達成していくと、徐々に過去のゲームの情報が閲覧できるよう…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「404 GAME RE:SET-エラーゲームリセット-」（以降、エラゲ）から文字アニメーションの事例をご紹介します。デジタルな世界観を表現した特徴的な演出です！ 以下、主な特徴です！ 画面名の見出しに使われている 1fpsごとに文字が切り替わる 演出中は文字の数が変わることもある 馴染みのない文字、記号を利用 画面名の見出しに使われている 画面遷移時、左上の見出しが独特なアニメーションをしていました。画面名を表示す…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「麻雀一番街」からBGMを視聴するときのUIをご紹介します。レコードプレーヤーを模したデザインになっていました。 以下、主な特徴です！ サウンドテストはレコードプレーヤー 上からの見下ろし センターラベルは大きめ 番外：なぜかサムネイルはCD サウンドテストはレコードプレーヤー 中国で開発されたソシャゲで結構採用されている印象でしたが、まさか麻雀ゲーでも採用されているとは…。「麻雀一番街」は音ゲーなどと違ってサウンド…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「麻雀一番街」から同時に複数のマッチング申請ができるのが便利すぎたので事例をご紹介します。内部的にはどうなっているか分かってないですが、マッチング申請って基本的には同時に1つしか送れないと思っていたので、初めて見た時には衝撃でした。 以下、主な特徴です！ 複数の段位戦にマッチング申請できる タイマーを表示させるためのセーフエリアが必要 セーフエリアは完璧じゃなくてもOK 複数の段位戦にマッチング申請できる 複数のマッ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「麻雀一番街」からマッチング中のスケルトンスクリーンの事例をご紹介します。スケルトンスクリーンとは、ざっくり言うと「ロード中にいい感じに表示する画面デザイン」のようなものだと考えていただければと思います。 以下、主な特徴です！ マッチング中はキャラのシルエットを表示 シルエットは特定の誰かではない 画面を動かして読み込んでる感を表現 適材適所で使う マッチング中はキャラのシルエットを表示 「麻雀一番街」では特定の対局…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「N-INNOCENCE-（エヌ・イノセンス）」（以降、エヌイノ）からADVパートでのグリッチ表現の事例をご紹介します。今まで多くのグリッチ表現の事例を紹介してきましたが、似た表現はあるものの同じ表現はありません。多くの事例を知ることで、オリジナルをデザインする際の参考にしやすいのかな、と思っています。 以下、主な特徴です！ シアン系の色調で統一 細かく明滅している 時折大きく歪む 走査線の太さは不均一 シアン系の色…
こんにちは、ちょこです！今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「ロゴのつくりかたアイデア帖"いい感じ"に仕上げる65の引き出し」 ロゴを取り扱った本って意外と色々あって切り口も様々です。この書籍は、ロゴの見た目を分析し、自分なりに咀嚼してデザインに活かすサポートをしてくれそうな印象を持ちました。やや中級者向けかもしれません。主な感想は以下です。 概要紹介 ロゴの種類 ロゴのスタイル かたち・文字・色 ロゴ作りに役立つ知識、法則 ロゴ制作の流れ 使いやすいロゴにするために意識したいこと 実際の事例ではなく、パターンをもとにしたアイディア帖 概要紹…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「N-INNOCENCE-（エヌ・イノセンス）」（以降、エヌイノ）からキャラのスキルカットインのデザイン事例をご紹介します。キャラのスキルカットインは多くのゲームに見られるため、デザインの引き出しを増やしたい際の参考にしやすいのかな、と思いました。 以下、主な特徴です！ キャラクターの向きに合わせてカットインの向きも変わる デザインも反転する キャラクターの向きに合わせてカットインの向きも変わる 「エヌイノ」の場合、…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「N-INNOCENCE-（エヌ・イノセンス）」（以降、エヌイノ）からキャラのスキル一覧画面にて、スキルの動画プレビューを採用していた事例をご紹介します。ソシャゲにおいてテキストではなく動画でキャラのスキルの類を説明する見せ方は珍しいかも。 以下、主な特徴です！ こちらは「エヌイノ」のキャラクターのスキルを説明する画面です。画面左側にスキルのサムネイル、画面右側にスキルの効果、キャラクターのアニメーションなどが表示さ…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「N-INNOCENCE-（エヌ・イノセンス）」（以降、エヌイノ）からクエスト周回サポート機能をご紹介します。クエストを通じて報酬を獲得し、キャラ育成をするタイプのソシャゲの場合、何度もクエストを周回する仕組みが採用されています。そのため、周回しやすいようにサポート機能が実装されていることが珍しくありません。 以下、主な特徴です！ 周回機能の基本的な流れ クリア済みなら周回できる 最大で現スタミナに応じた回数周回でき…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「麻雀一番街」からキャラクターごとにボイスのオンオフを切り替えられるオプションをご紹介します。ソシャゲではあまり見ないオプションかなと思います。需要が限られるため、そこにアプローチするのは稀だと考えます。稀な機能実装だからこそ、キャラを訴求したい熱量も感じられました。 以下、主な特徴です！ 引き算のデザインで推しの声だけ聴ける 引き算のデザインで推しの声だけ聴ける キャラのボイスのオンオフ設定は「麻雀一番街」のサウン…
こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「麻雀一番街」から言語切り替え時の挙動をご紹介します。結論から言うと、言語を切り替えてもリソースのダウンロードが無く、タイトル画面に戻ることもありません。そのため、ゲームの進行を妨げることが無く快適にプレイができます。 以下、主な特徴です！ 遷移がないので快適 遷移がないので快適 冒頭でも紹介しましたが「麻雀一番街」にて言語切り替えを行う際、タイトル画面に戻らず言語が切り替えられます。遷移がないので気軽に切り替えられ…
