はてなブックマーク

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです! 今回は「トライブナイン」のエレベーターの操作パネルのUIをご紹介します。現実のデザインを丁寧に取り入れ没入感を高めつつ、不必要な情報を省いたデザインです。 ひとつひとつ丁寧に作られててすごい! 以下、目次です。 没入感を高めるデザイン 1:ボタン配置が自然 2:読まれない文字も丁寧に扱う 3:階数がドットフォント フィクションのデザイン 没入感を高めるデザイン 「トライブナイン」ではエレベーターを操作する際、操作盤を模した専用のUIが表示されます。 UIの汎用性は低いと思われますが、序盤は頻繁に見る画面なので、没入感を高めるためにデザインの優先度が高いと判断されたのかもしれません。 ▲さんかくエレベーター操作時の画面 具体的に

こんにちは、ちょこです! 今回、私が購入した書籍の中からUIのアニメーションに興味がある方向けに紹介します。書籍でUIアニメーションが紹介されているのは結構珍しいかも...? 「ゲームUI 作り方講座 Photoshop&After Effectsで学ぶ、UIデザインとアニメーションの基本」 本書によると、想定読者は「就職して間もない新卒から入社3年目ほどの方」を想定している、とのこと。購入するとPhotoshopやAfter Effectsのファイルもダウンロードできるので、割と現場寄りの構成。 これらのことから、おそらく学生や非デザイナーに対しては書かれていないかもしれません。 また、モバイル端末を想定したデザインで書かれています。PCやコンシューマーとは設計思想が異なる部分あると思うので、デザインの意図を理解しつつ読み進めると良いかもしれません。 内容や難易度などの目安のご参考までに。

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです! 今回は「星の翼」のSteam版とiOS版の画面を比較したのでご紹介します。 結論から述べると、主にバトル画面とオプション項目に違いが見られました。なんとなくの印象ですが、バトル周りはSteam版準拠で作りつつ、バトル以外のメニューなどのUIはスマホを少し意識しているのかな、という印象を受けました。 以下、目次です。 1:バトル中はメインのコマンドのみ違いが見られた 2:バトル中のオプション項目の差分紹介 2-1:Steam版は120fpsまで設定できる 2-2:グラフィック項目はプラットフォームによって違いがあった 2-3:iOS版にはボタン配置のカスタム機能あり 2-4:Steam版にはクリック無効化のオプションあり

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

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです! 今回は「星になれ ヴェーダの騎士たち」(以下「星になれ」)のプレゼントを受け取る画面のデザインを紹介します。この画面をどう呼ぶかはゲームによって変わりますが、「星になれ」ではポストという名前で呼ばれていました。 ▲さんかく「星になれ」のポスト画面 以下、目次です。 1:報酬内容が分かりやすい 2:内容の区別ができる 3:開封前後が分かりやすい 1:サムネイルが記号的な見た目に変化 2:文字やグラフィックが無彩色に変化 4:受け取れるアイテムの有無が分かりやすい 1:報酬内容が分かりやすい 「星になれ」のポスト画面では、各メールに添付されている報酬が一種類だけアイコンで表示されていました。 ▲さんかく報酬の一部がアイコンで表示されている

こんにちは、ちょこです。 このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです! 今回はゲーム起動直後のロード画面で表示される、世界観が含まれたローディングメッセージの事例を紹介します。 「本コンテンツは、『星になれ ヴェーダの騎士たち』のために公式に作成されたものではなく、使用された情報又はデータの一部は開発会社の商標又は著作物です」 以下、目次です。 1:ゲーム内用語を用いる 2:時系列に沿って文章を順番に表示する 3:読めるだけの時間確保も必要 1:ゲーム内用語を用いる ロード中に表示されるメッセージの中にはゲーム内の用語が用いられがちです。ゲーム内用語を用いることで、ゲームの世界観を強調し、ゲームに対する没入感を高められると推測します。 以下にタイトルとメッセージの事例を紹介します。 「星に

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

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

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

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

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

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

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

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

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

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

こんにちは、ちょこです。 今回は、目の不自由な方が困っていることをまとめました。 ゲームUIを取り扱うと目の不自由な方への対処も検討する必要があります。 そこで業界に限らず意見を列挙してみました。内容は随時更新します。 新しい発見やデザインでの解決につながることを期待します。 (更新:2024年1月16日) 鉄道 目的の自由席の車両にたどり着きにくい 時間に制限がある中での乗り換え 目的地の最短ルートを目指したいが、どの出口から出るのが最適か分からない 買い物 商品陳列棚のレイアウトが変わる セルフレジが使えない 役所 書類の記入がしにくい 料理 IHが操作しにくい IHの現在の火力(弱火か強火かなど)の調整ができない IHを操作中、鍋が真ん中にないと言われてしまう 冷蔵庫の中に何がどのように入っているのか分からない 沸騰したお湯にうどんを入れられない 台所の調味料棚を開けてみたものの、どれ

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

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

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

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

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

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

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

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです! 今回は「リバース:1999」から名前入力画面のデザインをご紹介します。 「リバース:1999」の名前入力画面は他の多くのゲーム同様、素敵なデザインで世界観を表現されていました。 以下、概要です。 読まれない場所の文章まで丁寧に作り込まれてた キャラの顔を表示して誰の名前を入力するのか分かりやすく 読まれない場所の文章まで丁寧に作り込まれてた 「リバース:1999」の名前入力画面はこんな感じです。 背景に書類、フロッピーディスクなどが配置された空間です。 このフロッピーディスクはゲームの中では、「テレポート」の術をこめた携帯式ディスク、という扱いでした。 アニメーションで見るとこんな感じの画面です。 書類が4枚とフロッピ