アプリゲームUIデザイン

「アイドリッシュセブン」タイトル起動直後の注意喚起画面の3つの素敵ポイント

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドリッシュセブン」こと「アイナナ」から、世界観を取り入れたゲームプレイ前の注意喚起画面のデザインを紹介します！ 該当の画面はこちらです。いろいろ書いていますね。一般的に、この画面では未成年ユーザーに対してゲーム内課金をする際の注意点などが記載されています。 画面に書いてあるテキストは以下の通りです。 このアプリは最後まで無料で遊ぶことができますが、一部有料でアイテムを買うこともできます。 ■ 未成年の方々へ ■…

2022/08/31 23:05

「アイドリッシュセブン」キャラのイメージカラーをUIパーツに取り入れて、分かりやすく感じたところ

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドリッシュセブン」こと「アイナナ」から、キャラクターごとのイメージカラーをUIに取り入れたデザインを紹介します！ イメージカラーをUIに取り入れるデザインはアイドル系というか、キャラクターの魅力を前面に押し出すゲームではしばしば見かける気がします。 このデザインにより以下の特徴があると感じました。 名前とイメージカラーが結びつくことで、より直感的に理解できる 複数人が画面に登場している時に誰の台詞かが分かりやす…

2022/08/31 00:23

「アイドリッシュセブン」閉じるボタンの位置が色々あったので特徴を書いてみました

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドリッシュセブン」こと「アイナナ」から、ダイアログの閉じるボタンの配置パターンを紹介します！ ゲーム内ではあまりパターンが複数存在することはないのですが「アイナナ」は運用が長い影響もあるのか、いくつかの配置パターンがありました。 見た限りでは以下の3パターンです。 画面下部 画面右上 画面右中段 順に紹介します。 1：画面下部 画面下部に配置するパターンです。 左右どちらの指でも押しやすく、ゲームアプリでは一般…

2022/08/29 23:17

「アイドリッシュセブン」エンプティステートの紹介 Vol.27

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドリッシュセブン」通称「アイナナ」から、エンプティステートのデザイン事例をご紹介します。色んなゲームのエンプティステートを紹介して今回で第27回目です。 まず、「エンプティステート」とはどういうものか、簡単にお伝えいたします。 エンプティステートとは、表示する情報がない時にユーザーが見る画面のことだ。 見落とされがちな「エンプティステート」のUXデザインが、実際は一番重要なのかもしれない TechCrunc…

2022/08/29 00:39

「アイドリッシュセブン」カルーセルのインジケーターが星型になってて画面のキラキラ度が増す

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドリッシュセブン」から、世界観を取り入れたUIパーツのデザインを紹介します。 世界観を取り入れたUIパーツは色々ありますが、今回はカルーセル周りのパーツです。 該当の画面はこちらです。ホーム画面右下にカルーセルが表示されています。 見やすくするために大きくしてみます！ よく見ると、カルーセルの下にあるインジケーターがよくある丸いシルエットではなく星型になっています。 このように星が並んでいることで、キラキラした…

2022/08/27 22:27

「アイドリッシュセブン」明るいグレーと明るいピンクの組み合わせだと文字が読みにくく…

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドリッシュセブン」から、視認性が気になった配色がありました。 黒と赤、赤と緑などは割とメジャーですが、灰色とピンクの組み合わせはあまり見ないので知られてないのかも…？ 該当の画面はこちらです。画面上部の各リソースの数字に注目します。 注目したいのは画面右上のピンク色の数字です。見えやすいように該当の部分を大きくしますね。こちらはC型です。 他の見え方も確認します。こちらはPhotoshopでP型の見え方をシミュ…

2022/08/27 01:17

「アイドリッシュセブン」ストーリー画面が見やすいと感じた理由をまとめてみました

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドリッシュセブン」から、ストーリーを閲覧する画面を紹介します！ このデザインにより以下の特徴があると感じました。 ストーリーを読むための指の移動距離が短い（フィッツの法則） 読みたいストーリーを切り替えやすい（手数の省略） ストーリーサムネイルがない（ネタバレ防止？） 「読む」ボタンを表示する際にアニメーションしている（視線誘導） 該当の画面はこちらです。ストーリーが一覧で並んでいますね。 前後の画面の遷移をア…

2022/08/25 23:11

「アイドリッシュセブン」いつでもレビューできる導線設置と画面デザインの工夫

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドリッシュセブン」から、レビューの導線とデザインを紹介します！ ゲームをプレイしているとゲームのレビューを求められることがあります。 一度レビューのダイアログを閉じると、その後ゲーム内では表示されないことが多い気がしましたが、「アイドリッシュセブン」の場合はオプションからいつでもレビューすることができるデザインになっていました。 このデザインにより以下の特徴があると感じました。 いつでもアクセスできる（選択の自…

2022/08/24 23:12

「シン・クロニクル」間取りでゲーム画面の階層を分析してみました

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 情報設計って難しい専門書しか見たことないので、今回は間取り風にして画面の階層を観察してみました。こうして見ると、情報設計というよりは間取りを考えてるみたいで、また印象も変わってくるのかな、と思いまして…。 クエスト画面をはじめとして、いくつか削っていますが、アウトゲームは大体こんな感じの規模感です。ざっくり150部屋以上あります。 主な画面を順番に紹介していきます。 タイトル画面 まず、タイトル画面です。タイトル画面から入…

2022/08/23 23:55

「シン・クロニクル」ハッシュタグを登録出来たり、SNSに投稿すると報酬が貰えるなど、SNSを使ってコンテンツを盛り上げようとする意図が感じられました

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「シン・クロニクル」から、SNSでゲームの画像をシェアする取り組みを紹介します！ 「シン・クロニクル」に限らずSNSでシェアを推奨するゲームはあります。ただ、そこからさらにもう一歩工夫があったのが特徴です。 該当の画面はこちらです。 ©SEGA いくつか特徴的な機能があるのでひとつずつ紹介します。 マイハッシュタグ ©SEGA 「シン・クロニクル」のプロフィール画面にはSNSに投稿するハッシュタグを予め登録しておく機…

2022/08/22 00:00

「シン・クロニクル」アドベンチャーパートの選択肢のアニメーションは感情に訴えかけるデザインに感じました

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「シン・クロニクル」から、アドベンチャーパートの選択肢のデザインを紹介します！ このデザインにより、以下の特徴があるように感じました。 選択肢を表示している時に不安定なアニメーションがある（悩んでいる様子を表現） 選ばれた選択肢だけではなく、選んでいない選択肢もアニメーションがある（選択することの重さを表現） 該当の画面はこちらです。 ©SEGA 選択肢を表示している時に不安定なアニメーションがある 選択肢が並んで表…

2022/08/19 00:00

「シン・クロニクル」UIアニメーションと引き算のデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「シン・クロニクル」から、アドベンチャーパートのメニューボタンのデザインを紹介します！ 通常時は薄く表示して情報の優先度を下げ、メニューを開いたときは濃く表示して情報の優先を上げています。 いわゆる引き算のデザインですね。 該当の画面はこちらです。 ©SEGA アニメーションで見るとこんな感じです。挙動としてはドロワーボタンなのかな。メニューが開閉しています。 ©SEGA 分かりやすいようにもう少し大きくしてみます。…

2022/08/18 00:00

「シン・クロニクル」スチルイラストを簡易編集でき、セリフもいじれる遊び心のある機能

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「シン・クロニクル」から、イベントのスチルイラストを簡易編集できる機能を紹介します！ どちらかというとソシャゲよりはコンシューマにありがちな機能という印象を受けました。 該当の画面はこちらです。プロフィール画面の中にあるマイフォトのタブを選択した状態から選択可能です。 ©SEGA 既に見たことのあるイベントシーンの中から任意のイラストが選択できます。遷移をアニメーションで見るとこんな感じですね。 ©SEGA 他にも簡…

2022/08/17 00:00

「シン・クロニクル」ホーム画面でボイスが流れるけど、字幕も表示されるのでより多くのユーザーに情報が伝わる

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「シン・クロニクル」から、ユニバーサルデザインの事例を紹介します！ 具体的には「音声が聞こえづらい方への配慮」が見られるデザインの紹介です。このデザインにより、以下のメリットがあると考えられます。 耳の不自由な方も情報を受け取れる 音を消してプレイする際も情報を受け取れる どういった漢字を使うのかなど、情報が補足できる 該当の画面はこちらです。 ©SEGA ホーム画面に表示されているキャラクターをタップすると、ボイス…

2022/08/16 00:00

「シン・クロニクル」オートバトルの設定ができるのはバトル中だけ

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「シン・クロニクル」から、オートバトルの設定項目を紹介します。 ソシャゲだとオートバトルは実装されて当たり前の機能になってきていますが、「シン・クロニクル」では倍速以外の設定も可能です。 該当の画面はこちらです。バトル中に一時停止するとバトルの項目が設定できます。 ©SEGA 色々設定できますね。 ©SEGA 設定可能な項目は以下の4項目です。 AUTO時ターゲット設定…複数の敵がいた場合、攻撃する敵の優先度を設定し…

2022/08/15 00:00

「シン・クロニクル」ユーザーのエラーを未然に防ぐダイアログ、戦力不足で挑戦しないように注意喚起する

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「シン・クロニクル」から、エラーを未然に防ぐデザインを紹介します。 人間の注意力には限界があるため、間違えにくいUIをデザインすることはストレスの無いUIに繋がると考えています。 該当の画面はこちらです。挑戦しようとしているクエストに対して、パーティの戦力が不足している時に注意喚起のメッセージが表示されます。 ©SEGA 推奨戦力を満たしていると特になにも表示されませんが… ©SEGA 戦力が不足していると注意喚起の…

2022/08/14 00:00

「シン・クロニクル」ジェムの利用履歴を確認できることでユーザーの不安を速やかに対処できるデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「シン・クロニクル」から、ユーザー自身が問題を解決し、お問い合わせの負担を減らす可能性があるデザインを紹介します。 該当の画面はこちらです。ジェムの利用履歴が確認できるダイアログです。 ©SEGA ダイアログの内容を見ると、いつ、どのような用途で消費、獲得したかが表になって見やすく表示されています。枠がゲームっぽいデザインになっていること以外、特にビジュアル面では特別なことをしていないように見えます。 興味深いのはシ…

2022/08/13 15:35

「陰陽神鬼」三日月をモチーフにした進行ゲージ

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「陰陽神鬼」から、三日月をモチーフをにしたゲージデザインをご紹介します。 ゲージのデザインは様々ありますが、三日月というのは興味深いです。三日月の良し悪しと言うより、発想としての汎用性が高そうなのでご紹介します。 該当の画面はこちらです。三日月の光っている部分が進捗状況を示しています。 この画面は、ログインしている時間の長さに応じて、都度報酬が獲得できることを示す画面です。「陰陽神鬼」内ではオンラインギフトと呼ばれて…

2022/08/11 16:05

「陰陽神鬼」何気なくデザインされているサーバー選択画面のUIデザインを分析

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「陰陽神鬼」から、何気なくデザインされているサーバー選択画面のUIデザインをご紹介します。 よくあるサーバー選択画面ですが、世界観やユーザービリティが考慮されたデザインです。見落とされがちなところにスポットを当ててみたいと思います。 「陰陽神鬼」のサーバー選択画面には以下の特徴があるように感じました。 サーバー名が妖怪の名前（世界観の訴求） アイコンが陰陽師っぽい（世界観の訴求） どのサーバーが良いのか提案している（…

2022/08/09 00:00

「陰陽神鬼」カルーセルのUIパーツに陰陽師っぽい要素を取り込んだ事例

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「陰陽神鬼」から、ゲームの世界観を取り入れたUIパーツのデザイン事例をご紹介します。 ゲームなのでUIパーツに世界観を取り入れるのは珍しくはないのですが、今回紹介するのはカルーセルの事例です。あまり見ない事例でしたので紹介させてください 該当の画面はこちらです。新機能か新イベントの紹介がされている画像がカルーセルで切り替えられるようになっています。 アニメーションで見るとこんな感じです。全部で4枚ありますね。 画像に…

2022/08/08 00:00

そのデザイン、顧客の信頼を失っていませんか？「ザ・ダークパターン ユーザーの心や行動をあざむくデザイン」

こんにちは、ちょこです！ 今回、私が購入した書籍の中から紹介する書籍はこちらです！ 「ザ・ダークパターン ユーザーの心や行動をあざむくデザイン」 ダークパターンをセールステクニックとして扱う時代は、もう終わりです。 購入しました！ざっくり紹介します！ 所感 ダークパターンの事例や分類分けだけではなく、成り立ちや生まれる背景、どうしていくのが良いかなど、包括的、体系的に書かれているのは嬉しい 「ホームスケイプ」という最近のソシャゲの事例も載っていて身近に感じる ダークパターンを採用する企業側のデメリットが紹介されており、実装を依頼され困った時の説得として使えそう こんな人にオススメ！ 書籍内では…

2022/08/07 08:01

「陰陽神鬼」動画広告を見せるために報酬への期待値を高めるダイアログのデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「陰陽神鬼」から、動画広告を見せるために報酬への期待値を高めるダイアログのデザインをご紹介します。 動画広告を見ると報酬が貰えるゲームは今までもありましたが、ちょっと変わったアプローチでした。 該当の画面はこちらです。 のし袋！！ 「招福の御守」と書いていますね。かなり豪華なデザインです。のし袋が表示されているのは分かりますが、ぱっと見、何をする画面か全然分かりません。のし袋が何を示すか分かるユーザーにとっては、のし…

2022/08/06 10:01

ゲームUIデザイナー向け用語集

こんにちは、ちょこです。ゲームUIデザイナーの方が知っておいた方が良さそうな用語集をまとめてみます。 基礎 デザイン4大原則 グラフィック 配色 レイアウト グリッドデザイン フォント 心理学 画像優位性効果 単純接触効果 アンカリング効果 基礎 デザイン4大原則 グラフィック 配色 レイアウト グリッドデザイン フォント 心理学 画像優位性効果 文字のみによる学習よりも、画像を含んだ学習の方が内容を想起しやすく記憶に残りやすい現象 画像優位性効果 UX TIMES ゲームUI 040_心理学-画像優位性効果 カテゴリーの記事一覧 - ゲームアプリのUIデザイン 単純接触効果 無意識であっ…

2022/08/01 23:02

「陰陽神鬼」サムネイルが円形なのでHPゲージも円形にしたデザインのメリット

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「陰陽神鬼」から、丸いHPゲージをご紹介します。 HPゲージってなんとなく長方形のイメージがあったのですが、円形にする考え方もあるのだな、と感じました。 このデザインによって以下の特徴があるように感じました。 見た目がスッキリする 複数のゲージにも対応できる 乱戦時でも誰のゲージか分からなくなり辛い 残りHPの割合が分かりやすい 該当の画面はこちらです。バトル中の画面ですね。 アニメーションで見るとこんな感じです。サ…

2022/08/01 22:57