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

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

2021-05-01から1ヶ月間の記事一覧

「ソード&ブレイド」ゲームの画質設定は言葉ではなく画像で伝えてもらえると分かりやすいという発見

こんにちは、ちょこです。 このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。 今回は5xgamesからリリースされている「ソード&ブレイド」のゲーム設定の画質に関する項目が分かりやすい見せ方だったので紹介します。 早…

「ソード&ブレイド」はやくゲームを開始してもらいたいので、アバター作成画面では選択肢を絞るデザイン

こんにちは!ちょこです! このブログでは「ゲームのUIを見てみましょう」というテーマでゲームを紹介しています。 今回は5xgamesからリリースされている「ソード&ブレイド」のアバター作成機能を紹介します。 「ソード&ブレイド」はジャンル的にはMMORPG…

「ソード&ブレイド」より世界観の没入感を楽しんで欲しい、イヤホン使用を推奨する画面に込められた思いを勝手に想像してみた

こんにちは、ちょこです! 今回は「ソード&ブレイド」のイヤホンの装着を推奨される画面を紹介します。 該当の画面はこちらです。ゲーム開始前に表示されます。 昔のiPod CMみたいです。イヤホン部分だけが白く抜かれているため、自然と視線も集まりやすく…

「ソード&ブレイド」ゲーム序盤の画面は多くのユーザーが観るため、凝っておくと目を引きやすく、実況や記事などで紹介される確率が高まるのではないだろうか

こんにちは!ちょこです! 今回は「ソード&ブレイド」のキャラ選択の演出を紹介します。画面をデザインする際の参考になれば幸いです。 該当の画面はこちらです。 キャラクターは全部で以下の属性に分類されます。 華山(かざん) 無相(むそう) 恒山(こ…

「ソード&ブレイド」強いアイテムを入手したら装備するか確認するダイアログ、手数が少なく済むので便利

こんにちは!ちょこです! 今回は「ソード&ブレイド」の便利機能を紹介します。 該当の機能はこちらです。 ステータスアップができる装備アイテムを入手した際に、装備するかどうかを確認するダイアログが表示されます。 挙動としてはこのようになります。 …

「ソード&ブレイド」江湖侠士たちへ、ユーザーの呼び方を世界観に合わせた呼び方にデザインした事例

こんにちは!ちょこです! 今回は「ソード&ブレイド」からユーザーの呼び方について紹介します。 カテゴリに当てはめるとしたら、UXライティングとかマイクロコピーに該当するものかと思います。 ゲーム内のテキストを扱う際の参考になれば幸いです。 以下…

「ソード&ブレイド」キャラクターの名前をランダム生成する機能を示すアイコンのメンタルモデルについて

こんにちは、ちょこです! 今回は「ソード&ブレイド」をもとに、名前をランダム生成する機能のアイコンのメンタルモデルについて考えてみました。 プレイヤーやキャラクターの名前をランダムに決めたい機能を実装する際のデザインの参考になれば幸いです。 …

「ソード&ブレイド」スタンプに233と書いてあったので意味を確認してみました

こんにちは、ちょこです。 今回は「ソード&ブレイド」のチャットスタンプの名前に関する話です。 該当の画面はこちらです。 このように「ソード&ブレイド」では文字以外にもさまざまなスタンプを送ることができます。 その中に見慣れない名前のスタンプが…

「ソード&ブレイド」ありふれた自動移動と自動戦闘機能だけど、ユニバーサルデザインの視点で見たら便利なだけではなかった

こんにちは!ちょこです! 今回は「ソード&ブレイド」をプレイしていて、ユニバーサルデザインの観点で考えてみると改めて自動移動と自動戦闘の機能が便利だと感じたので紹介。 該当の画面はこちらです。 自動戦闘しているシーンはこちらです。多人数を相手…

「パニシング:グレイレイヴン」バトル中のボタン配置やサイズをカスタムできる機能が便利

こんにちは!ちょこです! 今回は「パニシング:グレイレイヴン」から戦闘中のUIパーツの位置調整ができる機能を紹介します。 「パニシング:グレイレイヴン」アクション性が高いゲームです。一律的なUIの配置だと、細かやかな操作を行う際にストレスに感じ…

「ソード&ブレイド」選択肢とキャラクターが被らないようにするデザインの紹介

こんにちは!ちょこです! 今回は「ソード&ブレイド」のアドベンチャーパートを事例に、選択肢が表示される位置について紹介します。 アドベンチャーパートのデザインを検討する際に参考になれば幸いです。 こちらが「ソード&ブレイド」のアドベンチャーパ…

「パニシング:グレイレイヴン(パニグレ)」ゲーム設定の画質にある各種項目についてまとめました

こんにちは!ちょこです! 今回は「パニシング:グレイレイヴン」、通称「パニグレ」はどんなゲーム設定があるのか、画質に絞って紹介します。 UIデザイナーが積極的に関与するような場所ではないかもしれませんが、ユーザーごとの評価軸に沿えるような項目…

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

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

「パニシング:グレイレイヴン」敵のHPゲージを重ねるデザインは画面に動きが出るのでアクション系のゲームに向いてると思う

こんにちは!ちょこです! 今回は「パニシング:グレイレイヴン」の敵HPゲージのデザインについて考えてみました。 敵のHPゲージのデザインを検討する際の参考になれば幸いです。 該当の画面は以下です。 分かりやすいようにHPゲージを拡大してみます。HPゲ…

「パニシング:グレイレイヴン」自動周回機能をシステムっぽくせずに上手く世界観に馴染ませるコツ

こんにちは!ちょこです! 今回は「パニシング:グレイレイヴン」のクエストの自動周回機能に関して紹介します。 クエストの自動周回機能は他のゲームでもしばしば見かけます。 「パニシング:グレイレイヴン」の周回機能の特徴は複数のクエストを自動で周回…

「パニシング:グレイレイヴン」初心者の方が次に何をしたら良いのか迷わないようにデザインされているホーム画面の紹介

こんにちは!ちょこです! 今回は「パニシング:グレイレイヴン」のホーム画面から、ユーザーの行動を誘導するデザインの事例を紹介させていただきます。 ゲーム初心者の方や「パニシング:グレイレイヴン」をプレイし始めた方が助かるようなデザインである…

「パニシング:グレイレイヴン」バッテリー残量が少ないとホーム画面が暗くなるデザインの分析

こんにちは!ちょこです! 今回は端末のバッテリー残量が少なくなった時の「パニシング:グレイレイヴン」のホーム画面の挙動を紹介します! 端末のバッテリー残量といった現実世界の情報を参照することにより、ゲームの中の世界とリンクしたような感覚が得…

「パニシング:グレイレイヴン」サンプルボイスなどの音声が流れるシーンでは字幕があると良い!

こんにちは!ちょこです! 今回は「パニシング:グレイレイヴン」にて、ユニバーサルデザインの事例を紹介します! 具体的には「音声が聞こえづらい方への配慮」が見られるデザインの紹介です。 該当の画面はこちらのホーム画面です。 ホーム画面でキャラを…

「パニシング:グレイレイヴン」封書が開いたアイコンを使うことによって、既読状態であることがより分かりやすく!

こんにちは!ちょこです! 今回は「パニシング:グレイレイヴン」からアイコンの変化について紹介します。 該当の画面はこちらです。画面左側にメールの件名、右側にメールの本文が表示されています。 上から順に 開封済み(報酬受け取り済み) 開封済み(報…

「パニシング:グレイレイヴン」横組みのフォントを縦組みに使わないで

こんにちは!ちょこです! 今回はアンチパターンの紹介です。 「パニシング:グレイレイヴン」で横組み用のフォントを縦組みで使ってしまったと思われる箇所がありました。 該当の画面はこちらです。この画面はキャラクターの育成画面です。キャラクターの左…

「パニシング:グレイレイヴン」プロフィール欄は世界観を伝えるために使える場所

こんにちは!ちょこです! 今回は「パニシング:グレイレイヴン」のキャラプロフィール画面から、世界観を表したテキストがあったので紹介します。 世界観を表現するテキストを考える際の参考になれば幸いです。 該当の画面はこちらです。 画面左側に3Dの…

「パニシング:グレイレイヴン」文字が被ってしまうのは良くないデザイン

こんにちは!ちょこです! 今回は「パニシング:グレイレイヴン」からアンチパターンの紹介をします。 アンチパターンの意味については以下を引用します。 デザインパターン(デザパタ)とは - IT用語辞典 e-Words アンチパターンという用語が広まるに連れて…

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

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

「パニシング:グレイレイヴン」ユーザーに対してゲーム内独自の二人称をデザインする話

こんにちは、ちょこです! 今回は「パニシング:グレイレイヴン」のプレゼント配布時にユーザーのことをどう呼んでいるか紹介します。 テキストライティングを利用して、ゲームへの没入感を高めるための参考になれば幸いです。 該当の画面はこちらです!こち…

「パニシング:グレイレイヴン」テキストはUIの評価を決める上で重要な構成要素のひとつです

こんにちは!ちょこです! 今回は「パニシング:グレイレイヴン」から、商品購入処理の間に表示されるテキストについて紹介します。 ゲームUIにおけるUXライティングの表現に興味のある方の参考になれば幸いです。 該当の画面はこちらです。ショップで商品の…

「パニシング:グレイレイヴン」世界観を表現するグリッチ表現を取り入れるとユーザーの満足度につながるかも

こんにちは!ちょこです! 何度目かですがグリッチ表現の事例紹介です。今回は「パニシング:グレイレイヴン」から紹介します。 今回は3つの画面での採用事例を紹介します。まず最初の画面はこちらです!アドベンチャーパートの画面です。 静止画で見ても分…

「パニシング:グレイレイヴン」HPが少なくなったら画面が赤くなる。結果ユーザーの行動を変えることができるデザイン

こんにちは!ちょこです! 今回は「パニシング:グレイレイヴン」にて、バトル中にキャラクターのHPが少なくなってきた時の画面演出を紹介します。 ユーザーに緊張感を与えたかったり、ユーザーの行動をデザインさせたい際の参考になれば幸いです。 該当の画…

「パニシング:グレイレイヴン」単純接触効果を利用したデザイン事例

こんにちは!ちょこです! 今回は「パニシング:グレイレイヴン」から、ショップ画面でアイテムが無料で購入できる機能を紹介します! 主に「無料で購入できる」ことと「無料で配布する」ことの違いに注目して書いてみます。 サービスの売り上げに対して何か…

「パニシング:グレイレイヴン」アドベンチャーパートで選択肢が右側に配置されるデザインのメリットとデメリット

こんにちは!ちょこです! 今回は「パニシング:グレイレイヴン」のアドベンチャーパートのデザインについて紹介します! 「パニシング:グレイレイヴン」のアドベンチャーパートでは選択肢が右側に表示されます。 アドベンチャーパートの役割は文字を読ませ…

ポスターやポストカード未経験の方におすすめ「っぽくなるデザイン 誰でもできるかっこいいレイアウト集」の感想

こんにちは!ちょこです!今回は書籍紹介です!紹介する書籍はこちらです! ▼「っぽくなるデザイン 誰でもできるかっこいいレイアウト集」 (function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject=a; b[a]=b[a]||function(){arguments.currentScript=c.currentS…