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

画面ナレッジ

画面ナレッジ タイトル画面をデザインするときのコツ - ゲームアプリの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を共通化することで作業コストを抑える 世界観に沿った架空の文字 画像を共通にすることで…

「勝利の女神：NIKKE（ニケ）」

こんにちは！ちょこです！ このブログでは「ゲーム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で構成されがちです。この画面を作り込むことで世界観を訴求し、ゲームの没入感を高めるチャンスに繋がると感じています。 以下、主な特徴です！ サイトを模した名前入力画面 ボタンの中のテキストも専用の文言 【番外編】ゲーム開始後の名前変更画面のデザイン…

「404 GAME RE:SET-エラーゲームリセット-（エラゲ）」ロックされた情報を文字化けして読めなくするデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「404 GAME RE:SET-エラーゲームリセット-」（以降、エラゲ）からロックされた情報の見せ方の事例をご紹介します。 以下、主な特徴です！ ロックされた情報を文字化けで表現 読めない文字は薄く表示 ロックされた情報を文字化けで表現 ©SEGA 情報がロックされた画面の例はこちらのゲームヒストリー画面です。最初は情報がロックされていますが、指定された条件を達成していくと、徐々に過去のゲームの情報が閲覧できるよう…

「404 GAME RE:SET-エラーゲームリセット-（エラゲ）」画面タイトルの文字列が1fpsごとに切り替わる演出

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「404 GAME RE:SET-エラーゲームリセット-」（以降、エラゲ）から文字アニメーションの事例をご紹介します。デジタルな世界観を表現した特徴的な演出です！ 以下、主な特徴です！ 画面名の見出しに使われている 1fpsごとに文字が切り替わる 演出中は文字の数が変わることもある 馴染みのない文字、記号を利用 画面名の見出しに使われている 画面遷移時、左上の見出しが独特なアニメーションをしていました。画面名を表示す…

「麻雀一番街」BGMを視聴するUIにレコードプレーヤー採用されがち

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「麻雀一番街」からBGMを視聴するときのUIをご紹介します。レコードプレーヤーを模したデザインになっていました。 以下、主な特徴です！ サウンドテストはレコードプレーヤー 上からの見下ろし センターラベルは大きめ 番外：なぜかサムネイルはCD サウンドテストはレコードプレーヤー 中国で開発されたソシャゲで結構採用されている印象でしたが、まさか麻雀ゲーでも採用されているとは…。「麻雀一番街」は音ゲーなどと違ってサウンド…

「麻雀一番街」複数同時にマッチング申請が出来るのが便利、セーフエリアも必要

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「麻雀一番街」から同時に複数のマッチング申請ができるのが便利すぎたので事例をご紹介します。内部的にはどうなっているか分かってないですが、マッチング申請って基本的には同時に1つしか送れないと思っていたので、初めて見た時には衝撃でした。 以下、主な特徴です！ 複数の段位戦にマッチング申請できる タイマーを表示させるためのセーフエリアが必要 セーフエリアは完璧じゃなくてもOK 複数の段位戦にマッチング申請できる 複数のマッ…

「麻雀一番街」マッチング画面ってよく見たらスケルトンスクリーンを採用しているとも見れるかもしれない

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「麻雀一番街」からマッチング中のスケルトンスクリーンの事例をご紹介します。スケルトンスクリーンとは、ざっくり言うと「ロード中にいい感じに表示する画面デザイン」のようなものだと考えていただければと思います。 以下、主な特徴です！ マッチング中はキャラのシルエットを表示 シルエットは特定の誰かではない 画面を動かして読み込んでる感を表現 適材適所で使う マッチング中はキャラのシルエットを表示 「麻雀一番街」では特定の対局…

「N-INNOCENCE-（エヌ・イノセンス）」リアルさではなく、リアルっぽい表現が特徴！ADVパートでのグリッチ表現事例紹介

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「N-INNOCENCE-（エヌ・イノセンス）」（以降、エヌイノ）からADVパートでのグリッチ表現の事例をご紹介します。今まで多くのグリッチ表現の事例を紹介してきましたが、似た表現はあるものの同じ表現はありません。多くの事例を知ることで、オリジナルをデザインする際の参考にしやすいのかな、と思っています。 以下、主な特徴です！ シアン系の色調で統一 細かく明滅している 時折大きく歪む 走査線の太さは不均一 シアン系の色…

ロゴの見た目を分析して、自分なりに応用してみよう「ロゴのつくりかたアイデア帖"いい感じ"に仕上げる65の引き出し」

こんにちは、ちょこです！今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「ロゴのつくりかたアイデア帖"いい感じ"に仕上げる65の引き出し」 ロゴを取り扱った本って意外と色々あって切り口も様々です。この書籍は、ロゴの見た目を分析し、自分なりに咀嚼してデザインに活かすサポートをしてくれそうな印象を持ちました。やや中級者向けかもしれません。主な感想は以下です。 概要紹介 ロゴの種類 ロゴのスタイル かたち・文字・色 ロゴ作りに役立つ知識、法則 ロゴ制作の流れ 使いやすいロゴにするために意識したいこと 実際の事例ではなく、パターンをもとにしたアイディア帖 概要紹…

「N-INNOCENCE-（エヌ・イノセンス）」キャラの向きとスキルカットイン中のキャラの向きが一致しているため、映像的な違和感が少ないデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「N-INNOCENCE-（エヌ・イノセンス）」（以降、エヌイノ）からキャラのスキルカットインのデザイン事例をご紹介します。キャラのスキルカットインは多くのゲームに見られるため、デザインの引き出しを増やしたい際の参考にしやすいのかな、と思いました。 以下、主な特徴です！ キャラクターの向きに合わせてカットインの向きも変わる デザインも反転する キャラクターの向きに合わせてカットインの向きも変わる 「エヌイノ」の場合、…

「N-INNOCENCE-（エヌ・イノセンス）」キャラのスキル一覧画面にキャラアニメーションを載せて画面が賑やかに！

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「N-INNOCENCE-（エヌ・イノセンス）」（以降、エヌイノ）からキャラのスキル一覧画面にて、スキルの動画プレビューを採用していた事例をご紹介します。ソシャゲにおいてテキストではなく動画でキャラのスキルの類を説明する見せ方は珍しいかも。 以下、主な特徴です！ こちらは「エヌイノ」のキャラクターのスキルを説明する画面です。画面左側にスキルのサムネイル、画面右側にスキルの効果、キャラクターのアニメーションなどが表示さ…

「N-INNOCENCE-（エヌ・イノセンス）」魅力的なスキルカットイン演出を見せつつ、バトルを周回させる機能

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「N-INNOCENCE-（エヌ・イノセンス）」（以降、エヌイノ）からクエスト周回サポート機能をご紹介します。クエストを通じて報酬を獲得し、キャラ育成をするタイプのソシャゲの場合、何度もクエストを周回する仕組みが採用されています。そのため、周回しやすいようにサポート機能が実装されていることが珍しくありません。 以下、主な特徴です！ 周回機能の基本的な流れ クリア済みなら周回できる 最大で現スタミナに応じた回数周回でき…

「麻雀一番街」推しの声だけ聴きたい人向け。キャラごとにボイスをオンオフが切り替えられる機能が実装されてる

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「麻雀一番街」からキャラクターごとにボイスのオンオフを切り替えられるオプションをご紹介します。ソシャゲではあまり見ないオプションかなと思います。需要が限られるため、そこにアプローチするのは稀だと考えます。稀な機能実装だからこそ、キャラを訴求したい熱量も感じられました。 以下、主な特徴です！ 引き算のデザインで推しの声だけ聴ける 引き算のデザインで推しの声だけ聴ける キャラのボイスのオンオフ設定は「麻雀一番街」のサウン…

「麻雀一番街」言語切り替えしてもリソースダウンロードが走らない設計

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「麻雀一番街」から言語切り替え時の挙動をご紹介します。結論から言うと、言語を切り替えてもリソースのダウンロードが無く、タイトル画面に戻ることもありません。そのため、ゲームの進行を妨げることが無く快適にプレイができます。 以下、主な特徴です！ 遷移がないので快適 遷移がないので快適 冒頭でも紹介しましたが「麻雀一番街」にて言語切り替えを行う際、タイトル画面に戻らず言語が切り替えられます。遷移がないので気軽に切り替えられ…

「麻雀一番街」言語にあわせてプレビュー画像/動画を用意していて丁寧

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「麻雀一番街」から多言語対応時の説明画像の対応事例をご紹介します。説明画像を言語ごとに用意するのは大変ですが、避けられない作業でもあります。実例を通じて、対応のパターンを知れればと思います。 以下、対応事例です！ 言語ごとにプレビューが用意されていた 言語ごとにプレビューが用意されていた 「麻雀一番街」では日本語、英語、繁体字、簡体字、韓国語の5つの言語がサポートされています。 そして、バック画面から画像付きで商品説…

「麻雀一番街」商品のお得感を訴求する小さな工夫

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「麻雀一番街」から商品の訴求手法をご紹介します。ソシャゲのUIはゲーム内で商品も販売しないといけないので、商品訴求については割と大事な要素な気がしています。 以下、主な特徴です！ 目立つ色の採用 吹き出しを使って視線を留める 20％OFFと値引きの割合を表示 値引き前の値段を取消し線で消す 目立つ色の採用 ショップ画面を見ると、全体的に青いトーンで統一された画面にぽつんとオレンジ色の吹き出しがあることが分かります。 …

「麻雀一番街」グランプリと毎日大会とで似たような画像なのに翻訳対応が異なっている謎（未解決）

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「麻雀一番街」から翻訳された画像素材について紹介します。ちょっと不思議な実装になっていたのでなんでだろうな、と思った話です。特にオチは無いですが、UIデザイナーとしては気になった次第。 以下、主な特徴です！ グランプリと毎日大会とで翻訳対応に違いがある 翻訳漏れに見えてしまう？ グランプリと毎日大会とで翻訳対応に違いがある 「麻雀一番街」で大会戦の画面に入ると、グランプリと毎日大会で分かれています。 グランプリ 毎日…

「麻雀一番街」エンプティステートが使われている場所の紹介

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「麻雀一番街」からエンプティステートのデザインを紹介します。採用事例は結構少ないのですが、ゲームらしさが表現できるので個人的には好きなUIです。キャラクターが登場するようなゲームだと取り入れやすいかと思います。 以下、主な使用箇所です！ 表示する雀士がいないとき 表示するフレンドがいないとき 表示するメールがないとき 表示する牌譜がないとき キャラクタープロフィールの一部が準備中のとき 表示する雀士がいないとき まず…

「麻雀一番街」世界観を取り入れたカジュアルなタップエフェクト

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「麻雀一番街」からロード画面の進捗ゲージのデザインを紹介します。以下、主な特徴です！ タップエフェクトはナビキャラ タップエフェクトはナビキャラ 「麻雀一番街」をプレイしていると、特徴的なタップエフェクトが目に入ります。 見やすくするために、該当部分をトリミングしました。鳥のようなデフォルメキャラが色んなポーズで光っています。 比較的汎用的なタップエフェクトを見かけることが多いのですが、「麻雀一番街」のタップエフェク…

「麻雀一番街」進捗ゲージが麻雀牌になっていた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「麻雀一番街」からロード画面の進捗ゲージのデザインを紹介します。 以下、主な特徴です！ ロードゲージが麻雀牌 キャラ同士の関係性も表現したデザイン ロードゲージが麻雀牌 「麻雀一番街」をプレイ開始直後、リソースダウンロードの時に表示された進捗ゲージが麻雀牌を模したデザインになっていました。青いラインがあるだけで麻雀牌と分かるため、必要最小限の要素でデザインされていると感じました。 アニメーションで見るとこんな感じです…

「麻雀一番街」ホーム画面のキャラの大きさや位置を極端に変えれる。カスタムできる部分を増やしたい意思を感じる

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「麻雀一番街」からホーム画面のカスタム機能を紹介します。ユーザビリティに貢献するような機能ではないと思うのですが、珍しかったので記事にしておこうかな、と…。 以下、主な特徴です！ ホーム画面でキャラの大きさ、位置が変えられる カスタマイズできるのが楽しいゲーム ホーム画面でキャラの大きさ、位置が変えられる 「麻雀一番街」ではホーム画面のキャラの大きさや位置を変えることができます。表示されるキャラを変更するデザインはし…

「麻雀一番街」配信画面にすることでリアクションが一辺倒でもあまり気にならない

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「麻雀一番街」から配信画面を模したデザインを紹介します。かなり特殊な画面だと思うので、こういう画面を実装する麻雀ゲームもあるんだなー、くらいで認識しておくのが良いかもしれません。 以下、主な特徴です！ 配信画面を模したデザイン 配信画面にすることでユーザー体験を変えるアイディア 配信画面を模したデザイン 「麻雀一番街」はその名の通り麻雀のゲームなのですが、水着を着た美少女が配信してる画面があります。ざっくり遊び方を説…

「麻雀一番街」キャラクターからのメッセージを保護できて助かる

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「麻雀一番街」からメール機能とメール保護機能の関係について紹介します。「麻雀一番街」にはメール機能があります。これはプレゼントとメッセージ機能を兼ねた機能です。メールの添付ファイルとしてプレゼントが届く、というデザインです。 以下、主な特徴です！ 通常と特殊でタブ分けされたメール機能 キャラクターからのメールは保護したい 通常と特殊でタブ分けされたメール機能 メール機能の中に通常と特殊でタブ分けされています。最初に見…

「麻雀一番街」言語によって公式アカウントを運用するプラットフォームを変えていた

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「麻雀一番街」から言語別に公式アカウントのプラットフォームを切り替えている例を紹介します。「麻雀一番街」には、公式アカウントをフォローすると報酬が貰えますよ、という機能があります。言語別にフォローする公式アカウントのプラットフォームを変えている、という話です。多言語対応をする際の参考になれば幸いです。 以下、主な特徴です！ 日本語版は「Twitter」 英語版は「Facebook」 繁体字版は「LINE」 簡体字版は…

「麻雀一番街」アンケートの回答報酬が限定称号で面白い

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「麻雀一番街」からアンケートの回答報酬が面白かったので紹介します。ソシャゲのUIデザイナーが報酬設計をすることは稀だと思いますが、ユーザー体験をデザインするという観点で見た時には関係があるのかな、という感じです。 以下、主な特徴です！ 報酬は限定称号 ユーザーの満足度も高そうな報酬 報酬は限定称号 「麻雀一番街」にはアンケートに答えて報酬獲得できる機能がありました。この機能自体はよくある機能だと思います。獲得できる報…

「麻雀一番街」お知らせ画面は色相やトーンが統一されて綺麗

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「麻雀一番街」からお知らせ画面のデザインの事例を紹介します。お知らせ画面のデザインをする際の参考になれば幸いです。 以下、主な特徴です！ 手数が少なく軽快な動作 タブに表示してる文字列と本文見出しの文字列を変えて一覧性を担保 イベントタブは訴求画像を大きく表示 お知らせタブには更新頻度が低くユーザーの目に留めたい情報を表示 同系色で統一した落ち着いたデザイン 手数が少なく軽快な動作 「麻雀一番街」のお知らせ画面はこの…

「麻雀一番街」言語切り替えによるロゴの切り替えとタイトル画面のデザインの変化

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「麻雀一番街」からローカライズ対応におけるタイトルロゴ、タイトル画面のデザイン対応事例を紹介します。ローカライズする際の影響範囲の参考になれば幸いです。 以下、主な特徴です！ アジア言語と英語とでロゴを出し分けている ゲーム開始の文言は国によっては意味が変わっていた 韓国語版だけレーティング表示がある 「麻雀一番街」では多言語対応していました。言語はゲーム内で切り替えることができます。 対応言語は以下の5言語です。 …

【UE5】For Each Loopノードが見つからない【解決】

こんにちは、ちょこです。 ここではUE5を学習する中で得た知見を書き残しておきます。同じくUE5を学習したいUIデザイナーさんの参考になれば幸いです。 今回はFor Each Loopが見つからない時の解決方法を紹介します。 これめっちゃ困りました…！調べようと思って動画見ても特殊な条件があるように見えないし…。 ▲「foreach loop」では見つからない… ▲「loop」では色々ヒットするけど「For Each Loop」は見つからず… 結論！ コンテンツフォルダの表示設定の中にある「エンジンのコンテンツを表示」にチェックを入れた後、ブループリントエディタを起動したら「For Each …

【UE5】サウンドをループさせる方法【UMG】

こんにちは、ちょこです。 ここではUE5を学習する中で得た知見を書き残しておきます。同じくUE5を学習したいUIデザイナーさんの参考になれば幸いです。 今回はBGMをループさせる方法を紹介します。 UIデザイナーがサウンドを管理することは稀だと思いますが、例えばモックを作って見せる際、BGMやSEがあった方がモック段階でもゲームの雰囲気がより伝わりやすくなるのかなとも思います。簡単な設定なので知っていて損ではないはず。 ◆作業時間目安：5分程度 最終的な処理はこんな感じです。結構シンプルに見えるかなと思います。 以下、ダイジェストです。 BGMを登録しよう キューを作成しよう ループ設定しよう…

【UE5】ボタンの作り方_遷移編【UMG】

こんにちは、ちょこです。 ここではUE5を学習する中で得た知見を書き残しておきます。同じくUE5を学習したいUIデザイナーさんの参考になれば幸いです。 今回はボタンの作り方（遷移編）を紹介します。 遷移の仕方は様々ありますが、今回は別のレベルに遷移するという基本的な挙動を紹介いたします。 ダイジェストはこちらです。 ボタンの作り方おさらい 遷移させるだけの場合 SEも鳴らしたい場合 ボタンの作り方おさらい このページを見ている方がUE5学習初日かもしれないため、ボタンの作り方について、以下のページに記載しました。もし、ボタンの作り方が分からないという方はご参考になさってください。 appgam…

「麻雀一番街」見切れさせることで続きがあるのが伝わるデザイン

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「麻雀一番街」からスクロールできることが伝わるデザイン紹介します。リストを作成する際の参考になれば幸いです。 以下、主な特徴です！ 続きがあるのが伝わる スクロールバーはない 続きがあるのが伝わる こちらはキャラクターのリストです。リストの下の方をよく見ると、途中でサムネイルが見切れているのが分かります。 このようにサムネイルを見切れさせることで、リストが下に続いているのが伝わります。 ただ見切れさせれば十分というこ…

【UE5】ボタンの作り方_見た目編【UMG】

こんにちは、ちょこです。 ここではUE5を学習する中で得た知見を書き残しておきます。同じくUE5を学習したいUIデザイナーさんの参考になれば幸いです。 今回はボタンの作り方（見た目編）を紹介します。 UIデザインにはボタンは必須です。でも、UE5ではどこからボタンが作れるのか分からない！といった方の参考になれば幸いです。 また、今回このページで扱うのは最低限の見た目の部分だけです。ボタンを押した際の挙動（遷移、アニメーション、音を鳴らす）などは別のページで扱うようにします。 ダイジェストはこちらです。 ウィジェットブループリントを作成 Canvas Panelを作成 Buttonを配置 Tex…