ゲームアプリのUIデザイン

プレイしたゲームアプリのUIデザインに関して書き残します。毎日頑張って更新!

011_画面別-お知らせ画面

「崩壊3rd」ユーザーのことを「艦長」と呼ぶことで世界観の没入感を高めている

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです! 今回は「崩壊3rd」から、世界観に合わせたユーザーの呼び方をご紹介します…

「崩壊3rd」画面遷移しないお知らせ画面のデザインの紹介

こんにちは!ちょこです! このブログでは「ゲームUIを見てみよう!」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです! 今回は「崩壊3rd」から、お知らせ画面のデザインをご紹介します。 該当の…

「エクリプスサーガ」キャラクターからのお知らせで手紙を模したデザインが採用されていた

こんにちは!ちょこです! このブログでは「ゲームのUIを見てみよう!」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです! 今回は「エクリプスサーガ」のお知らせがキャラクターからの手紙を模したデ…

「ソード&ブレイド」中国のソシャゲのメジャーなお知らせ画面のデザイン紹介

こんにちは!ちょこです! もう何度目かの紹介になるのですが、中国のソシャゲのお知らせ画面の画面設計を紹介します。今回取り上げるのは「ソード&ブレイド」です。 「ソード&ブレイド」のお知らせ画面デザインの特徴としては、お知らせの本文を見るまで…

「パニシング:グレイレイヴン」お知らせを読むための手数を減らす良いデザイン。もっと広まってほしい

こんにちは!ちょこです! 今回は「パニシング:グレイレイヴン」のお知らせ画面の画面設計を紹介します。画面の特徴としては、お知らせの本文を見るまでの手数が少ないことがあげられます。 UIの評価軸として、タスクを完了させるための手数が少ないことは…

「ブルーアーカイブ」お知らせを読むユーザーとはどういったユーザーなのかを意識したお知らせ画面

こんにちは、ちょこです。 「ブルーアーカイブ」のお知らせの画面デザインが洗練されていると感じたので紹介します。 該当の画面はこちらです。 同じようなフォーマットのデザインは過去にも見かけていますが、「ブルーアーカイブ」のデザインでかなり情報整…

「魂器学院」webビューで疑似シェーダーっぽい表現手法の事例紹介

こんにちは!ちょこです! 「魂器学院」のお知らせバナーが切り替わる演出がSFっぽい演出で、世界観を表現しているように感じました。 切り替え演出はこちらです。 ちっさい! 小さいので大きくしてみます。 最初はシェーダーかな?と思ったのですが、 これ…

「三国志名将伝」お知らせ画面のデザインが手数が少なくて済むデザインだった

こんにちは、ちょこです! 「三国志名将伝」のお知らせ画面が既存のメンタルモデルと異なっていたので紹介します。 該当の画面はこちらです。 動きで見るとこんな感じです。 上部のタブが大項目の切り替えになっています。 左側のタブが小項目の切り替えです…

「サクラ革命」お知らせ画面の見出しがIPっぽいテキストになっていた

こんにちは!ちょこです! 「サクラ革命」のお知らせ画面の見出しが『サクラ革命通信』となっていました。通常は『お知らせ』とかなのでIPを意識したライティングになっています。 該当の画面はこちらです。 こんな感じで見出しの部分が『サクラ革命通信』…

「食物語」最近よく見かけるお知らせ画面のデザイン

こんにちは、ちょこです! 「食物語」のお知らせ画面が最近よく見るデザインになってる…! 流行ってるの?知らない間にトレンドなのこれ…!? 該当の画面はこちらです! 何に戸惑っているかと言うと、メンタルモデルと違うデザインであることに対する違和感…

「ファイナルギア」お知らせ画面の新しいメンタルモデルが出来てきてる…?

こんにちは、ちょこです! 「ファイナルギア」のお知らせ画面と同じようなデザインのフォーマットを最近よく見るようになったので、もうちょっとちゃんと見ようかと思います。 「ファイナルギア」のお知らせ画面はこちらです。 大きな特徴としては… お知らせ…

「三国 -IKUSA-」既存のメンタルモデルと違うお知らせ画面のデザインがされていました

こんにちは!ちょこです! 「三国 -IKUSA-」のお知らせ画面のデザインが興味深かったので紹介です。 挙動としてはこんな感じです。 左側のタブのような場所をタップすると、右側に本文がプレビューされます。 この挙動をするお知らせ画面は初めて見ました。 …

「ヒプノシスマイク-A.R.B-」黒背景に赤文字は絶対に避けて欲しい理由

こんにちは!ちょこです! 今回のテーマは「視認性が良くない色の組み合わせについて」です。 過去何度か「色覚多様性」については書いているのですが、黒赤のNGパターンを結構見かけます。ちょっと色を変えるだけでぐっと読みやすくなるので忘れないでいて…

「この素晴らしい世界に祝福を!ファンタスティックデイズ」お知らせ画面に公式Twitterが連携されていました。デザインの参考までに

こんにちは!ちょこです! お知らせ画面のカテゴリで「Twitter」が使用されていました。お知らせで何を伝えるかの事例の参考までにご紹介します。 タイトルは前回に続き「この素晴らしい世界に祝福を!ファンタスティックデイズ」です。 このように「更新情…

「ウイニングイレブン クラブマネージャー」お知らせ画面のデザインとアニメーションがとても凝っていた!

こんにちは!ちょこです! 「ウイニングイレブン クラブマネージャー」のお知らせ画面のデザインと、次のお知らせに遷移するときのアニメーションが手が込んでいました!紹介します! どん! 見ての通り、封書っぽいデザインになっています。 次のお知らせに…

「スタートリガー」今日は、黒背景に赤文字の組み合わせはNGということだけ覚えて帰って欲しい

こんにちは!ちょこです! 「スタートリガー」の色覚多様性対応が気になりました…! お知らせ画面!文字が赤い…!! PhotoshopのP型フィルタで見るとこんな感じです。 文字は結構見づらい感じです…。赤字が悪いわけではないのですが、背面が暗い時に赤い文字…

「VOEZ」繁体字の句読点は中央にあるんだよ、という話

こんにちは!ちょこです! 「VOEZ」のお知らせ画面の書体が一部繁体字なのが気になりました。 どういう意味かと言うと… こちらの部分です。 ▲句読点が中央にある 漢字やひらがな等の句読点以外は日本語書体なのですが、句読点だけ繁体字のままでした。 繁体…

「GOLF CRASH -ゴルフクラッシュ-」お知らせ画面の挙動がシームレス。軽い操作感を実現されていました

こんにちは、ちょこです。 「GOLF CRASH -ゴルフクラッシュ-」のお知らせ画面が良い操作性でした。 どんなところかと言うと… ▲シームレスで開閉 ▲アニメーションするバナーもある これ、どういう運用と実装なのかな。多くのゲームはwebでの実装に見えるけど…

「KING OF PRISM プリズムラッシュ!LIVE」色数を絞ることは情報を整理するために必要な要素だと感じました。

こんにちは、ちょこです。 「KING OF PRISM プリズムラッシュ!LIVE」のUIデザインの色数が絞られているのが好きです。 ▲基本的には絞ってる。レインボーもあるけど。 たくさんの色を使って賑やかに見せる手法もあります。 しかし、多くのソシャゲの場合は登…

「エピックセブン」画像を潰して表示するとゲームが面白さに関わらずクオリティが低く見えてしまいがち…

こんにちは、ちょこです。 「エピックセブン」で一番最初に気になったのはお知らせ画面の画像が潰れていることです。 ▲潰さないでー 私の表示環境のせいもあるのかな…。画像が横に潰れてしまっています。 ずっと見てるとよくわからなくなってきた…。 正しい…

「Chess Rush」シェア機能を入れるだけではシェアされない?ユーザーに相応のメリットを与える必要がある

こんにちは、ちょこです。 「Chess Rush」スクショ撮ったらシェア訴求するUIが表示されました。 ▲画面下部に外部SNSの導線が表示される スクショの撮影をトリガーにした仕様って結構珍しい。 ▲スクショを撮ると画面にメッセージが表示されます Chess Rushの…

「アークナイツ」UIパーツの一貫性や統一性に関して再認識した話。見た目が不統一でも世界観が破綻していないのが凄い

こんにちは、ちょこです。 「アークナイツ」のタブデザインですが、かなり多種多様。UIが不統一というより各々の画面で好きに作っている感じが凄い。 しかしながら、混沌とならずに全体でのデザインや世界観は壊していないように見えます。 その点を中心に紹…

「Auto Chess」お知らせ画面。文字が小さいっ!

こんにちは、ちょこです。 「Auto Chess」のお知らせ画面に情報がなく見づらく感じました。どのような画面かというと、以下のような画面です。 ▲お知らせ画面 絵が大きいっ! ここでユーザーの判断や行動の手掛かりになる情報はこの部分だけです。 ▲ここだけ…

「Auto Chess」お知らせに簡体字仕様のフォントが使われているので、ぜひ日本語仕様のフォントを…

こんにちは、ちょこです。 「Auto Chess」のお知らせに簡体字が使われているのが気になりました。 ▲お知らせ画面 簡体字は多くの中国語圏で使われている基本的な文字です。 日本語圏に対してこの「簡体字」のフォントが使われています。読みづらさはあります…

「妖怪ウォッチぷにぷに」お知らせバナーが動いてた。デザインのパターンの参考までに。

こんにちは、ちょこです。 「妖怪ウォッチぷにぷに」のお知らせ画面のバナーが動いてた! 動いてる グラクロ以外で初めて見たかも。 ある程度テンプレ化すれば基本的には素材の置き換えでいけると思うので、コストとしては静止画とそんなに変わらないかも? …

「Stormfall: Rise of Balur」お知らせはフォーマルな文面でないといけない?世界観を加味した例の紹介

こんにちは、ちょこきなこです。 「Stormfall: Rise of Balur」のテキストが世界観に寄り添う形で書かれており、没入感を意識されていたので紹介します。 「新たな挑戦の始まりです。勇士経験値を獲得し、豪華報酬を手にしましょう。個人勇士経験値トーナメ…

「きららファンタジア」UI改修の事前告知をするのは素敵な運営

こんにちは、ちょこきなこです。 「きららファンタジア」から改修予定の箇所を事前に案内してくれるお知らせに感動しました!改修予定箇所を事前告知してくれる運営っていたかな…。内容を見てもまぁまぁ丁寧。 UI改修あるあるですが…、 ・大型改修やりたがる…

「コルヌ・コピア」お知らせもUXの一部なのでちゃんと読もう!

こんにちは、ちょこきなこです。 コルヌ・コピアでの何気ないお知らせ画面ですが、気になる一文が… こちら。 「※当ゲームは一部ルートに恋愛要素を含みますが、キャラクターとの恋愛を目的としたものではございません。」 …なるほど。 ゲームサービスに係る…

「三国ロマンス」お知らせ画面で文字が被る。そうならないようにデザイナーが注意すること。

こんにちは、ちょこきなこです。 「三国ロマンス」のお知らせ画面。 見出しと日付部分が被っているのがよろしくない…。 ここ。 単純に視認性が良くないです。 ふつーに被ってる。 お知らせ本文が読める画面でも… 被ってます。 タイトル画面からお知らせ画面…

「三国覇王戦記」お知らせ画面の挙動が予想できなかった

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。 「三国覇王戦記」お知らせ画面の挙動が斬新すぎて全く予想できなかったのでみんなの見解を伺いたいです。 この画面。 下の方に「お知らせ」「お知らせ」「メンテナンス」「お知らせ」とあるんで…