こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブレイクマイケース」（以下「ブレマイ」）からパズル画面のピースのデザインを紹介します。パズルゲームは色々ありますが、ピースのデザインはゲームの差別化のためにも重要視されがちなのかな、と考えています。 以下、目次です。 世界観を取り入れたデザイン 色だけではなくシルエットでも差別化されたデザイン 世界観を取り入れたデザイン 「ブレマイ」のピースのデザインはキャラクターの顔をデフォルメさせたような見た目になっています。キャラクターの顔をモチーフにすることで、「ブレマイ」ならではの世界観が取り入れられていると感じました。 ▲「ブレマイ」のパズルプレイ画面 色だけではなくシルエットでも差別化されたデザイン 「ブレマイ」

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）からリストを見切れさせることで続きがあるように見せるデザインをご紹介します。忘れないようにする意味でも、しばしば取り上げています。 以下、概要です。 見切れたリスト 見切れてないと終わり感 見切れたリスト 情報が画面内に収まりきらずスクロールさせる必要がある場合、スクロールバーを設けるだけでなく、情報を見切れさせることも重要な見せ方です。 例えば「ブルーロックPWC」のショップ画面の場合、このように情報を見切れさせていました。 分かりやすいように見切れている部分を抜粋します。 このように情報が見切れていることが分かります

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「ブルーロック Project: World Champion」（以下「ブルーロックPWC」）から通知マークのデザインをご紹介します。いわゆる赤い丸のマークでも良いのですが、ゲームの世界観にマッチしたデザインも良いですよね。 以下、概要です。 世界観に合わせたデザイン １：ゲーム起動直後のPV ２：ローディング中のアイコン ３：TIPSの行頭記号 ４：報酬獲得済みのマーク ５：課金アイテムのモチーフ ６：公式サイトにも採用 訴求を意識した配色 世界観に合わせたデザイン 「ブルーロックPWC」をプレイしていると、ホーム画面をはじめ、様々な画面で通知マークを見かけます。 ▲「ブルーロックPWC」のホーム画面 分かりや

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からキャラのイメージカラーをUIに反映したデザインをご紹介します。キャラクターを訴求するタイプのゲームだと、しばしば見かけることがあります。 以下、概要です。 ユニット単位ではなくアイドルごとにカラーを用意 一色に限定しない 髪の毛や瞳の色をサンプリングしている ユニットごとにトーンを揃えている キャライメージのカラー紹介 ユニット単位ではなくアイドルごとにカラーを用意 「シャニソン」はアイドルを育成するタイプのゲームですが、ユニット単位ではなくアイドルごとにイメージカラーが用意されていました。 ▲ユニット「イルミネーショ

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からログインボーナス画面のデザインの要素をご紹介します。ログインボーナス画面はユーザーが見る頻度が高い画面だからか、デザインにコストをかけるアプリをしばしば見かけます。 以下、概要です。 デザインバリエーションが豊富 圧迫感を軽減する透過ホワイトボードを採用 シームレスにホーム画面に遷移する ナビキャラの衣装が変わる デザインバリエーション紹介 デザインバリエーションが豊富 「シャニソン」のログインボーナス画面は事務所にあると便利なホワイトボードを活かしたデザインでした。 ホワイトボードにはデザインバリエーションが用意され

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からガシャ結果をシェアする機能をご紹介します。シェアする情報を選べるのが珍しいデザインでした。 以下、概要です。 シェアする情報を選択できる シェアする文言が変わる シェア可能なアイドルの上限数も変わる シェアする画像にはタイトルロゴとコピーライトが追加 シェアする情報を選択できる 「シャニソン」のガシャ結果画面ではガシャ結果をシェアできます。 結果をシェアできるゲームはしばしば見かけますが、シェアする情報が選択できるのは珍しいと感じました。 シェアする情報は以下の３つから選択できます。 アイドルのみをシェア アイドルとガ

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からレビュー誘導のダイアログのデザインをご紹介します。レビューの数や評価を高めたい開発者が多いのか、しばしば見かけるデザインです。 以下、概要です。 イラストには新ユニットが描かれている イラストにアイドルからのメッセージが書かれている イラストはボタンが埋もれないような配色 ダイアログを表示するタイミングはガチャを引いた直後 イラストには新ユニットが描かれている こちらが「シャニソン」のレビュー誘導ダイアログです。 アイドルが描かれた魅力的なイラストが目を引きます。 描かれているユニットがナビキャラではないのが意外でした

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

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ」（以下「シャニマス」）からＰ（プロデューサー）デスク画面のアイドルタブの画面をご紹介します。 一見して情報量が多く余白の少ない画面ですが、実は見やすくするための工夫がいくつも施された画面でした。 以下、概要です。 表示されている情報量は多い 色とレイアウトでグルーピングされている マスキングテープの柄を利用し色弱対策も アイドルの名前の可読性を担保 表示されている情報量は多い この画面で表示されているアイドルは全員で26名です。使われている色数も多く、サムネイルも傾き、整列もされていないレイアウトです。 このような特徴から、賑やかで情報量の多い画面である印象を受けます。 で

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ（シャニマス）」（以下「シャニマス」）から４コマ画面の便利なフィルタ機能をご紹介します。 ４コマは、本編では描かれていないアイドルたちの側面にスポットを当てることができるなど、アイドルたちの魅力をさらに伝えることに貢献しているかと思います。 以下、概要です。 ソート機能で任意のアイドルの登場回のみ抽出できる フィルタのアイコンはデフォルメキャラを採用 ユニット単位で抽出できる アイドル以外も抽出可能 今読んでるエピソードからフィルタ設定ができる 「未読のみ」にチェックすることで漏れなく把握できる ソート機能で任意のアイドルの登場回のみ抽出できる 「シャニマス」の４コマにはフィ

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ（シャニマス）」（以下「シャニマス」）から攻略動画を用意して、新規ユーザーをサポートする事例をご紹介します。 チュートリアルのデザインの参考になれば幸いです。 以下、概要です。 リリースから約3年8か月経った後に動画を公開 お知らせ画面から遷移できる プロデュース選択画面からも遷移できる リリースから約3年8か月経った後に動画を公開 「シャニマス」はYouTubeで攻略動画を公開しています。 お知らせを見る限り対象ユーザーについては以下のように書かれています。 プロデュースをはじめたばかりのプロデューサーさん必見！ ゲームをどう進めたらいいかお悩みの初心者プロデューサーさんに

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「リバース：1999」のアイテム詳細画面から、そのアイテムが入手可能な場所に遷移できる導線をご紹介します。 ショートカットがあると手数の省略にもなり大変重宝しています。「リバース：1999」のようなキャラ育成があるゲームスキームの場合、もはやリリース時点で必須機能ではないでしょうか。 以下、概要です。 アイテム詳細から導線が繋がっている 学習コストと手数が抑えられる アイテム詳細から導線が繋がっている こちらはアイテムの詳細ダイアログです。 より正確に伝えるなら、キャラの強化に必要なアイテムの詳細ダイアログです。 アイテムの説明文などはなく、所持数と入手先など必要最小限の情報が表示され、整理された印象を受けます。

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「リバース：1999」から多言語のタイトルロゴをご紹介します。 「リバース：1999」では５つ言語に対応しており、且つそれぞれの言語ごとにタイトルロゴのデザインが分かれていました。 主に以下の２点が言語別タイトルロゴのデザインの違いだと感じました。 文字に合わせて斜線の角度を変えている 文字組みを変えている 以下、各言語のロゴデザインと簡単な特徴です。 1：日本語 2：簡体字 3：繁体字 4：英語 5：韓国語 1：日本語 通常、プレイしていて最もよく見かけるデザイン 文字に掛かっている斜線が雨のようにも見えます REVERSEの文字は小さく控えめ 2：簡体字 タイトル名は「重返未来：1999」 1999が「重返未

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「リバース：1999」からショップ画面の表示アニメーションの事例をご紹介します。 「リバース：1999」ではショップ画面で商品が表示される際、商品が左右あるいは上下にアニメーションして表示されていました。これにより、ユーザーは自然と商品をスクロールできる方向が理解できます。 以下、概要です。 スライドインさせて動かせる方向を仄めかす アニメーションがあるとより分かりやすい スライドインさせて動かせる方向を仄めかす 「リバース：1999」ではショップ画面に遷移したときに、商品がスライドインするアニメーションが用意されています。 「受付マシン」では画面左から右に若干スライドインさせつつ、左から段階的にフェードインさせ

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「リバース：1999」からヘッドホン・イヤホンの使用を推奨するメッセージと画面デザインをご紹介します。 「リバース：1999」ではゲーム開始直後、一度だけヘッドホン・イヤホンの使用を推奨する画面が表示されました。 ゲームの没入感を重視するタイトルで極稀に見かける画面です。 以下、概要です。 ヘッドホン・イヤホンの使用を推奨するメッセージ 世界観を表現する文章が添えられている 音あるいは小雨を表現するようなアニメーション ヘッドホン・イヤホンの使用を推奨するメッセージ 「リバース：1999」ではゲーム開始直後、一度だけヘッドホン・イヤホンの使用を推奨する画面が表示されました。 表示されるタイミングとしては、初回リソ