はてなブックマーク

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）から分かりやすいダイアログのデザインをご紹介します。 以下、概要です。 視線が誘導されやすい配色 押させたい選択肢は右に配置し視線を誘導 ２択に絞って迷わせない 本文を読まずに選択肢だけ読んでも判断できるテキスト 視線が誘導されやすい配色 「シャニソン」のダイアログの選択肢は無彩色と有彩色で分けられています。 ダイアログが全体的に無彩色で構成されていることもあり、有彩色のボタンに視線が誘導されやすくなっています。 Appleの「ヒューマンインターフェイスガイドライン」のボタンについて書かれたページには以下のように書かれてい

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

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）から赤文字の使い方をご紹介します。 赤文字を使っても強調されるかどうかは、下地の色や周囲の情報に埋もれないかなど、他の要素との兼ね合いもあります。ただ、一般的に赤は誘目性の高い色なので、強調色として使いやすいと感じるのかもしれませんね。 以下、概要です。 シャニソンでの赤文字の使われどころを分類してみた 1：注意文言 2：ステータス 3：減少する数字 4：開発者が訴求したい情報 5：ユーザーの行動を誘導したいとき 頻繁に使わないから伝わる シャニソンでの赤文字の使われどころを分類してみた 「シャニソン」の画面を見ていると、

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

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）から会話パートのスキップ機能をご紹介します。ほとんどのソシャゲには会話シーンをスキップする機能があるので今更かもしれませんが、ちょっと変わっていたので事例として紹介します。 以下、概要です。 画面長押しで会話スキップ ゲージの中央にスキップと書かれているのは指に被らないから どれくらい長押しすれば良いのか分かる 倍速やオートは無い 画面長押しで会話スキップ 「シャニソン」ではプロデュースなどの会話イベント中、画面長押しで会話をスキップできます。 アニメーションで見るとこんな感じです。 操作していないとちょっと気付きにくいか

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ（シャニマス）」（以下「シャニマス」）からアプリのデータサイズが少ない件に触れたいと思います。 アプリのデータサイズが大きいと端末の空き容量を圧迫してアンインストール候補になりがちです。データサイズが少ないとアンインストールの可能性が少し減る気がしているので気になりました。 以下、概要です。 データサイズは40MB以下 ダウンロードデータは…ある！ もしかするとブラウザのキャッシュ？ データサイズは40MB以下 こちらはiOSの設定画面から確認した「シャニマス」のデータサイズです。ものすごく少ないです。 iOS版の場合、アプリのデータサイズは以下の通りです。 Appのサイズ　

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

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ（シャニマス）」（以下「シャニマス」）からＰ（プロデューサー）デスク画面の中にあるホワイトボード画面をご紹介します。 機能としてはチュートリアル、各種ミッションをサポートするような画面で、ゲームに対する没入感を高めつつ、分かりやすさが両立している画面に感じました。 以下、概要です。 何から進めたら良いのか分かりやすいデザイン 余白に小物やアイドルの手書きコメントなどが描かれている グレーの矢印が両立のポイント 何から進めたら良いのか分かりやすいデザイン Ｐデスク画面のホワイトボードはこんな感じです。 白地の上にいくつかアイコンが並んでいますね。 ぱっと見て視線が向くのはホワイ

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ（シャニマス）」（以下「シャニマス」）から効率的に周回を行うためのサポート機能をご紹介します。 大体のソシャゲはクエストを周回し、キャラを育成することが多いため、何かしら周回しやすくなるような機能が実装されています。便利機能を検討する際の参考になれば幸いです。 以下、概要です。 ADVパートは４倍速まで可能（リリースから約１か月後） フェスは３倍速まで可能（リリースから約９か月後） フェスは５枚まとめて参加権が使える（リリースから約９か月後） プロデュースではスタミナを３倍まで使える（リリースから約４年半後） 時短を取り入れやすい場面は演出と周回要素関連 ADVパートは４倍速

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

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ はてなブログに投稿しました #はてなブログ 今回は「アイドルマスター シャイニーカラーズ（シャニマス）」（以下「シャニマス」）からオーディションを受ける前に注意喚起のTIPSを表示するデザインをご紹介します。チュートリアルをデザインする際の参考になるかなと思います。 以下、概要です。 オーディション前に注意喚起をポップアップ オーディションの成功率を高めるためのTIPSも表示 TIPSにはナビキャラを使う オーディション前に注意喚起をポップアップ ゲームを進めていると、進行をフォローしてくれるTIPSがポップアップすることがあります。「シャニマス」のゲームの流れと合わせて説明すると以下の流れでTIPSが表示されました。

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「アイドルマスター シャイニーカラーズ（シャニマス）」（以下「シャニマス」）からアイドルの情報をフィルタする画面のデザインをご紹介します。 名前だけではなく、顔グラフィックがあるとより直感的に分かりやすくなるのかも、と感じました。 以下、概要です。 顔アイコンが表示され直感的に分かりやすい アイドルたちの名前を覚える前のユーザーにとって分かりやすい 顔アイコンが表示され直感的に分かりやすい 「シャニマス」のアイドルたちのフィルタ画面は、アイドルたちの名前だけではなく顔アイコンも表示されており、分かりやすくする工夫がされていると感じました。 また、顔アイコンだけではなく、キャラクターのイメージカラー、ユニットのモチ

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「リバース：1999」のUIアニメーションをご紹介します。 以下主な事例です。 「リバース：1999」のココがすごい３点 １：情報量のコントロールが絶妙 ２：引き算のデザイン 事例 01：メニュー ラインが伸びるアニメーション 02：ログインボーナス 動かす方向を対比させることで際立つ情報 03：プロフィール プレイヤーの経験値ゲージが伸びる 若干タイミングをずらして表示するパーツたち 格子状のマスクを利用してキャラを表示 04：イベントページ イベントの世界観を表現するアニメーション 05：ほえほえジュークボックス（シーズンパス） 進捗ゲージがオーディオスペクトラム風 名前もゆっくり動いてる ディスクが回ってい

こんにちは！ちょこです！ このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！ 今回は「リバース：1999」のホーム画面のキャラが周囲の光の影響を受けている表現をご紹介します。 プレイしている感じあからさまに色処理しているようには見えず、何度か画面を切り替えて違和感に気付きました。僅かに色味や陰影に差を出しているさりげなさが好きです。 以下、概要です。 2Dのキャラが周囲の光源の影響を受けている 自然に見せることで世界観の没入感を高めている 2Dのキャラが周囲の光源の影響を受けている 「リバース：1999」はしばしばホーム画面の背景が変わります。 背景によってキャラの色味も若干変えています。いくつかバリエーションを紹介します。 1：日中晴れ 2：夕方晴れ 3：荒天（夜？） 若干キャラの色が変わって