「アストラルパーティー」多くの人に遊んでもらえるように、キャラクターの露出を調整するナイーブエンジェル機能の紹介

#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アストラルパーティー」（以下「アスパ」）からキャラクターの露出の程度を変更できるナイーブエンジェルモードをご紹介します。 キャラクターの露出はUIデザイナーが直接コントロールできる部分ではないかもしれませんが、根底には「より多くの人に楽しんでもらいたい」という意思が含まれています。この意思は良いUIを作る際にも重要…

書籍レビュー「ゲームUI 作り方講座 Photoshop＆After Effectsで学ぶ、UIデザインとアニメーションの基本」

こんにちは、ちょこです！今回、私が購入した書籍の中からUIのアニメーションに興味がある方向けに紹介します。書籍でUIアニメーションが紹介されているのは結構珍しいかも…？ 「ゲームUI 作り方講座 Photoshop＆After Effectsで学ぶ、UIデザインとアニメーションの基本」 本書によると、想定読者は「就職して間もない新卒から入社3年目ほどの方」を想定している、とのこと。購入するとPhotoshopやAfter Effectsのファイルもダウンロードできるので、割と現場寄りの構成。 これらのことから、おそらく学生や非デザイナーに対しては書かれていないかもしれません。 また、モバイル端…

「クロノトリガー」プラットフォームやデバイスによってUIの見た目や挙動にどのような違いがあるか比較しました

#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「クロノトリガー」のSteam版とiOS版の画面を比較したのでご紹介します。結論から述べると、今までのマルチプラットフォームとは違っていたり、移植を繰り返してきたタイトルであるため、ある程度前提情報が必要になると感じました。まずはマルチプラットフォーム対応の影響以外の要素を紹介します。 以下、目次です。 前提の話 除…

「星の翼」プラットフォームやデバイスによってUIの見た目や挙動にどのような違いがあるか比較しました

#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「星の翼」のSteam版とiOS版の画面を比較したのでご紹介します。結論から述べると、主にバトル画面とオプション項目に違いが見られました。なんとなくの印象ですが、バトル周りはSteam版準拠で作りつつ、バトル以外のメニューなどのUIはスマホを少し意識しているのかな、という印象を受けました。 以下、目次です。 1：バト…

「inZOI」の主な画面のリンク集

「inZOI」の主な画面 タイトル名 inZOI タイトル画面 〇 〇 アバター作成 〇 アバター_年齢層 〇 アバター_気質 〇 アバター_人生 〇 アバター_プリセット 〇 アバター_表情変更 〇 アバター_ポーズ変更 〇 アバター_背景変更 〇 アバター_顔プリセット 〇 アバター_髪型 〇 アバター_肌 〇 アバター_顔の特徴 〇 アバター_目元 〇 アバター_化粧 〇 アバター_身体 〇 アバター_衣装 〇 〇 アバター_アクセサリー 〇 家族作成 〇 〇 ADV 〇 都市選択 〇 都市編集 〇 〇 〇 〇 〇 〇 〇 都市編集_にゃんストア 〇 都市の状態を調整 〇 魂の管理レポー…

「魔法少女まどか☆マギカ Magia Exedra（まどドラ）」の主な画面のリンク集

「魔法少女まどか☆マギカ 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に興味を持ってくれる方が増えると嬉しいです！ 今回は「レスレリアーナのアトリエ ～忘れられた錬金術と極夜の解放者～」（以下「レスレリ」）から世界観を取り入れたスタミナ回復アイテム配布機能のデザインの事例をご紹介します。 文字にすると分かりにくいですね…。とても素敵なデザインなので、今回はひとまずゲーム画面を見ていただければ！ 以下、目次です。 スタミナ回復をパイに置き…

「レスレリアーナのアトリエ ～忘れられた錬金術と極夜の解放者～（レスレリ）」プレイヤーIDはタイトル画面だけではなくプレイヤー情報画面でも隠すデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「レスレリアーナのアトリエ ～忘れられた錬金術と極夜の解放者～」（以下「レスレリ」）からタイトル画面などでのプレイヤーIDの取り扱いついてご紹介します。何度か紹介しているので簡単に。 以下、目次です。 タイトル画面ではタップして表示する形式が増えてきた タイトル画面での表示位置は誤タップしない位置がオススメ ゲーム内でも配慮をしている タイトル画面ではタップして表示する形式が増えてきた ゲームの規模感やジャンルにもよ…

「レスレリアーナのアトリエ ～忘れられた錬金術と極夜の解放者～（レスレリ）」キャラクターのサムネイルが表示されて直感的に伝わりやすいフィルタ画面のデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「レスレリアーナのアトリエ ～忘れられた錬金術と極夜の解放者～」（以下「レスレリ」）からキャラクターの情報をフィルタする画面のデザインを紹介します。 色々なフィルタ画面を見ましたが、登場キャラクターの数が多く、キャラを訴求したいゲームは大体このような見た目のフィルタ画面に落ち着いている印象を受けます。 以下概要です。 顔サムネイルが表示され直感的に伝わりやすい 表情を付けたサムネイルが採用 属性情報が表示されている …

「レスレリアーナのアトリエ ～忘れられた錬金術と極夜の解放者～（レスレリ）」プラットフォームやデバイスによってUIの見た目や挙動にどのような違いがあるか比較しました

#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「レスレリアーナのアトリエ ～忘れられた錬金術と極夜の解放者～」（以下「レスレリ」）からプラットフォームやデバイスによって、UIにどのような違いがあるか気付いた範囲でまとめてみました。 「レスレリ」は今まで記事にしてきたゲームの中でもかなりシンプルな対応でした。複数のプラットフォームでリリースする際、優先的に対応する…

「ヘブンバーンズレッド(ヘブバン)」プラットフォームやデバイスによってUIの見た目や挙動にどのような違いがあるか比較しました

#container { width: 100%; } #box2 { float: right } こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「 ヘブンバーンズレッド」（以下「ヘブバン」）からプラットフォームやデバイスによって、UIにどのような違いがあるか気付いた範囲でまとめてみました。デザインの対応方針などの参考になれば幸いです。 以下、目次です。 プラットフォーム対応 1：プラットフォーム独自の機能、導線を設置する 1-1：Steam版では、タイトル画…

マンガと図解でわかりやすい「教えて！からあげ先生 はじめての生成AI」

こんにちは、ちょこです！今回、私が購入した書籍の中から生成AIに興味がある方向けに紹介する書籍はこちらです！ 「教えて！からあげ先生 はじめての生成AI」 生成AIは今後、各種ツールに組み込まれ利用することも増えてくると思うので、デザイナーだけではなく社会人に必要な知識のひとつだと考えています。 以下、主な感想です。 ChatGPTを使ったことがない人向けに書かれている ChatGPTで何ができるかイメージしやすい マンガがあってとっつきやすい もっと知りたくなった方の案内もある ChatGPTを使ったことがない人向けに書かれている タイトルに「はじめての生成AI」とある通り、この書籍は主に生…

【小テスト】UIデザイナー向け ヒューマンインターフェイスガイドライン -アクセシビリティ編-【全5問】

こんにちは、ちょこです。Appleの『ヒューマンインターフェイスガイドライン』を元に振り返り用の小テストを作成しました。知識の棚卸の参考になれば幸いです。今回は「アクセシビリティ編」です。全5問です。 Q1：ヒューマンインターフェイスガイドラインでは、およそ何人に1人の割合で日常生活やデバイスの操作方法に何らかの影響を与えるような障がいを抱えているとされている？ Q2：ヒューマンインターフェイスガイドラインでは、タッチスクリーンデバイスにおいてヒットターゲットの大きさはどの程度必要だと書かれている？ Q3：ヒューマンインターフェイスガイドラインでは、アクセシビリティを考慮する場合、リンクにはカ…

【小テスト】UIデザイナー向け ヒューマンインターフェイスガイドライン -アプリアイコン編-【全5問】

こんにちは、ちょこです。Appleの『ヒューマンインターフェイスガイドライン』を元に振り返り用の小テストを作成しました。知識の棚卸の参考になれば幸いです。今回は「アプリアイコン編」です。全5問です。 Q1：ヒューマンインターフェイスガイドラインでは、アプリアイコンをデザインする際に何を重視している？ Q2：アプリアイコンをデザインする際、何を目指すと良いとされている？ Q3：テキストをアイコンに含めても良い時はどんな時？ Q4：アイコンに写真を使わない方が良い理由は何ですか？ Q5：プラットフォームごとに考慮する要素はない？ Q1：ヒューマンインターフェイスガイドラインでは、アプリアイコンをデ…

「ドラゴンクエストモンスターズ3 魔族の王子とエルフの旅」プラットフォームやデバイスによってUIの見た目や挙動にどのような違いがあるか比較しました

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ドラゴンクエストモンスターズ3 魔族の王子とエルフの旅」（以下「DQM3」）からプラットフォームやデバイスによって、UIにどのような違いがあるか気付いた範囲でまとめてみました。デザインの対応方針などの参考になれば幸いです。 以下、目次です。 プラットフォーム対応 1：プラットフォーム独自の画面を用意する 1-1：起動時の注意喚起画面を用意する 2：プラットフォーム独自の機能、導線を設置する 2-1：iOS版のタイト…

「フェスティバトル」バッテリー残量が表示されるのは回線切断時のペナルティのリスクを抑えられるからだろうか

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「フェスティバトル」（以下「フェスバ」）からバッテリー残量と回線状況を示すUIついてご紹介します。以下、目次です。 切断ペナルティがあるためバッテリー残量や回線状況のUIがあると便利 ユーザーの目に留まるような工夫 それではそれぞれ詳細を記載します。 切断ペナルティがあるためバッテリー残量や回線状況のUIがあると便利 「フェスバ」では基本的に、常にバッテリー残量と回線状況のUIが画面端に小さく表示されています。これら…

「フェスティバトル」縦画面において左右フリックでタブを切り替えられるのが便利

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「フェスティバトル」（以下「フェスバ」）から左右フリックでタブを切り替えられるUIついてご紹介します。縦画面のゲームならぜひ採用して欲しいくらい好きなUIです。以下、目次です。 左右フリックでタブ切り替えが便利 お知らせ画面は例外 それではそれぞれ詳細を記載します。 左右フリックでタブ切り替えが便利 「フェスバ」では左右フリックでタブを切り替えられます。左右フリックでタブが切り替えられることで以下のメリットがあると考…

「フェスティバトル」背景をぼかして彩度をさげ、アイコンに視線が誘導されやすいデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「フェスティバトル」（以下「フェスバ」）からアイコンの優先度付けと見せ方についてご紹介します。情報の優先度付けは画面内の情報量が増え、関係性が複雑化しても意識したい点です。 以下、目次です。 フォントを利用する グラフィックによる差別化 優先度の低い情報の情報量を下げる それではそれぞれ詳細を記載します。 フォントを利用する 「フェスバ」のホーム画面では、フォントの特性を生かして情報の優先度付けに利用していると感じま…

「フェスティバトル」配信画面のトグルボタンのUIが斬新で分かりやすい

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「フェスティバトル」（以下「フェスバ」）から配信&視聴機能のUIついてご紹介します。前回の記事（リンク）が長くなったので分割しました。 以下、目次です。 起動直後に配信に関する注意事項が表示される 楽しそうな印象を受ける配信画面 配信するためのステップが少ない 配信オプションのトグルUIが分かりやすい それではそれぞれ詳細を記載します。 起動直後に配信に関する注意事項が表示される 「フェスバ」ではゲーム起動直後の画面…

「フェスティバトル」配信＆視聴機能の紹介とユーザーの反応紹介

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「フェスティバトル」（以下「フェスバ」）から配信&視聴機能ついてご紹介します。 以下、目次です。 結論 機能概要 配信機能について説明 視聴機能について説明 1：トップページ 2：視聴画面 3：おすそ分け報酬 4：ギフトスタンプ 5：チョイス 配信&視聴機能に対するユーザーからの評価 インタビュー記事の紹介 ユーザーレビューからの意見 1：キャラに関する意見 2：配信機能や環境に関する意見 3：視聴報酬の設計に関する…

「フェスティバトル」タッチ操作とコントローラー操作に対応しているUIの事例紹介

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「フェスティバトル」（以下「フェスバ」）から操作するデバイスごとのUIの違いについてご紹介します。最近はコントローラーでも遊べるスマホゲームが増えてきた印象があります。ゲームによって対応の方法はさまざまなので気になり、調べています。 以下、目次です。今回は長いので、目次だけでも大まかな情報は得られるようにしています。気になった項目だけ参照するのが効率的かと考えます。 対戦中のUIは重点的に対応 対戦中は通常攻撃ボタン…

「ライドカメンズ」ユーザーIDは縁取りして可読性を担保すると良さそう

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ライドカメンズ」（以下「カメンズ」）からタイトル画面でのユーザーIDの取り扱いついてご紹介します。何度か紹介しているので簡単に。 以下、目次です。 タイトル画面ではタップして表示する形式が増えてきた タイトル画面での表示位置は誤タップしない位置がオススメ 文字を縁取り可読性を担保 タイトル画面ではタップして表示する形式が増えてきた ゲームの規模感やジャンルにもよりますが、2024年現在では画面内の一部をタップしてユ…

「ライドカメンズ」スタミナ一括消費、スタミナ消費回数分だけ報酬獲得の抽選が行われる

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！今回は「ライドカメンズ」（以下「カメンズ」）のスタミナ一括消費機能を紹介します。スタミナ制のソシャゲだとよく見られる便利機能かと思います。以下、目次です。 消費スタミナに応じて複数回抽選が行われる あたりまえ機能だからこそ注目したい 採用するかはゲーム次第 消費スタミナに応じて複数回抽選が行われる 「カメンズ」のスタミナ一括消費は「まとめて挑戦」で消費スタミナを指定し、それに応じた回数分だけ戦闘を行い、報酬が獲得できる挙動で…

「ライドカメンズ」SNSでの公開を想定し、プロフィール情報の一部を隠せるデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ライドカメンズ」（以下「カメンズ」）にて、自分のプロフィール情報を一部隠す機能を紹介します。第三者に見られたくない情報が隠せると、SNSなどに投稿するハードルが下がるのかな、と感じました。 以下、目次です。ざっくり把握する際の参考になれば。 プロフィール画面で情報が隠せる 非表示機能は個人情報保護にも繋がる デフォルトでは表示状態 ヘルプでもSNS公開時を想定する記載がある プロフィール画面で情報が隠せる 「カメン…

「ライドカメンズ」一人称が私と僕で選べる

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ライドカメンズ」（以下「カメンズ」）の一人称を設定できる事例をご紹介します。ADVメインのゲームだと主人公の呼び名を設定できることがあるため、その延長線のような設定でしょうか。ゲームの没入感を高めるデザインだと感じました。以下、目次です。 設定できる一人称は「私」と「僕」 一人称が設定でき、自由度が増す ローカライズ対応時には注意が必要 設定できる一人称は「私」と「僕」 「カメンズ」で設定できる一人称は今のところ以…

「ライドカメンズ」でゲーム開始日を『エージェント就任日』と表記し、ゲームの没入感を高める事例

こんにちは！ちょこです！ このブログでは「ゲーム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】UE4のデフォルトレイアウトに戻したい【解決】

こんにちは、ちょこです。 ここでは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：スワンマーク コンボする…

「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」ユニットごとではなく、アイドルごとにイメージカラーを設定しても被らないようにするためには『ユニット』という情報を利用し、文脈を生み出しているからかも

こんにちは！ちょこです！ このブログでは「ゲーム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でアーカイ…

「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」品質設定の項目の中にパフォーマンス優先に対してのみ「おすすめ」ってある！最上段の項目な上、グラフィックで表示しているので目に留まりやすい！やっぱりパフォーマンス優先のがおすすめなのか

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からシステム設定でも目立たせたい項目の見せ方をご紹介します。タイトル画面の有無や運用方針ってゲームによって様々ですね。 以下、概要です。 品質設定の項目に「おすすめ」の表示がある グラフィックで表示されているからパッと見て分かりやすい グラフィックで表示している 「おすすめ」と表示している 品質設定の項目に「おすすめ」の表示が…

「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」モバイル端末を模したメニューのナビゲーションを考えるのって難しそう

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からモバイル端末とその中に含まれている機能のビジュアルデザインをご紹介します。ここ数年、モバイル端末を模したメニューは頻繁に見かける印象です。実装したい機能と世界観を含めたビジュアルとの相性が良いのかな… 以下、概要です。 モバイル端末を模した画面デザイン 起動演出があると実在感を感じる 各アプリの作り込みを紹介 Twesta…

「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」タイトル画面ではプレイヤーIDの表示・非表示が切り替えられるけど、ゲーム内では切り替え機能がなく、表示されたままなのってなんでだろう

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からタイトル画面でのプレイヤーIDの表示・非表示の切り替えをご紹介します。情報の性質や取り扱いについて考えるきっかけになれば。 以下、概要です。 タイトル画面ではプレイヤーIDの表示・非表示が切り替えられる ゲームの中に入ったら非表示切り替え機能はない 自ら共有するケースは配慮外なのかも タイトル画面ではプレイヤーIDの表示・…

「アイドルマスター シャイニーカラーズ Song for Prism（シャニソン）」ホーム画面では天気、季節、時間帯、イベント、ユニットごとのバリエーションが用意され賑やかなデザインだった

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からホーム画面にデザインのバリエーションを持たせている例をご紹介します。ホーム画面は頻繁に訪れる画面なので、何かしら画面に変化を持たせたいと考える開発者やユーザーからの需要があったりするのかな…。 以下、概要です。 ホーム画面のデザインにバリエーションがある アイドルの専用ボイスも用意 稀にユニットのやりとりが見れる デザイン…

「アイドルマスター シャイニーカラーズ 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デザイン ◆まとめペ…