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

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

クライアントから受けたデザインのオーダーをより要望に沿ったデザインに仕上げるためのポイントやコツを紹介「○×でわかる! デザインが良くなる5つのポイント」

こんにちは、ちょこです!

今回、私が購入した書籍の中から紹介する書籍はこちらです!

○×でわかる! デザインが良くなる5つのポイント

 

はい、ちゃんと買っていますー

amazonの商品ページのキャプチャです。2019/3/9にこの書籍を購入しています

所感

 

楽しみながら読んでみて!

似たようなテーマや見せ方の書籍は他にもいくつかあります。
人によってはアフターのデザインに物足りなさを感じるかもしれません。

ただ、この手の書籍はアフターのクオリティに納得するかどうかは本筋では無いというか…クオリティを求めるなら作品集を手に取る方が適切だと考えます。

この書籍から学び取るのであれば、

  • どのような課題を定義するか
  • どのようなアプローチを試みているか
  • その結果、どのようなデザインを提案するか

などの仮定の話を楽しみながら読むことかなと思います。

 

面白いと感じたのは、非デザイナーの方が読んだ場合は難度が低い一方で、デザイナーの方が実用レベルで運用つもりで読もうと思ったら相当難しいかもしれません。

これは例えるなら写真集のようなもので、言葉での説明が少なく、非言語の情報が多いため、その情報を読み取るための経験や知識が必要になっているように感じました。

 

デザインを構築する際の考え方は参考になると思います。

 

他の書籍も以下にまとめています。良かったらご覧ください

appgameui.hatenablog.com

 

ここまでご覧下さりありがとうございました!

 

「アイドルマスター SideM GROWING STARS」文字のみで構成された画面のお手本デザイン

こんにちは!ちょこです!

このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです!

今回は「アイドルマスター SideM GROWING STARS」(サイスタ)から、文字のみで構成された画面デザインを紹介します!

 

文字の見やすさをコントロールする

f:id:appgameui:20220929212122p:image

これはガシャの説明画面です。
登場するアイドル、開催期間や条件などが書かれています。

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

ここで注目したいのは文字のみで構成されている画面の中で、情報の優劣がしっかりとデザインされている点です。

 

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

アイドルの文字は大きく読みやすいデザインです。

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

補足事項は色を薄くして、目立たせたい情報の邪魔をしないようなデザインです。
また、周囲に十分な余白を設け、目立たない文字でも余白によって目に留まるデザインが取り入れられています。

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

注意事項は見出しを目立たせ視線を誘導し、本文は文字サイズを小さくし可読性が下がった分、ざぶとんを敷いて可読性を高めています。

 

ソシャゲでは賑やかな画面が求められがちですが、このように文字中心の画面もあります。

ビジュアル的にはシンプルな画面ですが、情報の優劣をしっかりとつけ、引き算のデザインも取り入れられています。
基本的な要素で構築されているため、お手本にしやすいと感じました。

 

以上です。

文字のみで構成された画面をデザインする際の参考になれば幸いです

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。

他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

アイドルマスター SideM GROWING STARS」のガイドラインを確認したところ、公式HPにて、ゲーム実況が許諾されている旨の記載がありました。

ガイドラインによると、ゲーム実況とは静止画をインターネット上で共有することも含まれています。

当社では、ゲーム実況を、「ご自身がゲームを遊んだ動画や静止画をファンコミュニティ等とインターネット上でご共有いただくもの」と捉えています。

ゲーム実況ポリシー | バンダイナムコエンターテインメント公式サイト

アイドルマスター SideM GROWING STARS(サイスタ)の配信元であるバンダイナムコエンターテインメントのゲーム実況ポリシーです。2022年1月26日制定版です

 

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

 

お問い合わせ

「夢職人と忘れじの黒い妖精」操作に応じたリアクションをするスキンシップ画面

こんにちは!ちょこです!

このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです!

 

今回は「夢職人と忘れじの黒い妖精」(ゆめくろ)から、操作に応じてスキンシップの取り方を変化させているデザインを紹介します!

 

 

操作とスキンシップの取り方が関連付けされている

f:id:appgameui:20220913095716p:image

該当の画面はこちらです。

このダイアログはキャラクターと行えるスキンシップの一覧です。
どのような操作を行うとキャラクターが反応するか、一覧表にまとめられています。

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

分かりやすくするために大きくしました。

最近工作したものを聞く > タップ
毛を触りたいと頼む   > ドラッグ
じっと見つめる     > 長押し

 

表にある通り、色んなスキンシップが取れることが分かります。
操作方法とスキンシップの取り方が関連付けされていることにも注目です。

例えば、ドラッグ操作はキャラクターを撫でるアクションと関連付いているように感じられます。

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

また、長押し操作の一点に集中する様子と、じっと見つめる様子もニュアンスが伝わります。

 

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

画面上の操作とゲーム内のキャラクターの動作が関連付けられることで、ユーザーの没入感、主観的満足度を高めることに貢献しているように感じました。

 

 

あえて一手間かけるデザイン

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

長押しやドラッグ操作に対応している点は良いとして、操作を誘導するアフォーダンスなどは無いため、気付かれにくい可能性があります。

これについては…

  • 頻繁に行う操作ではない
  • やらなくてもユーザーにデメリットはない
  • 1日に行える回数が決まっている
  • 効率より特別な体験を優先した
  • 仮に面倒であればタップ操作でも問題ない。選択肢は与えられている

…など、そこまで操作性が求められている場面でもなく、むしろ手間を掛けさせることで付加価値を高めようとしている意図が感じられます。

 

 

以上です。

キャラクターとコミュニケーションを取る画面の操作を検討する際の参考になれば幸いです

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。

他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

「夢職人と忘れじの黒い妖精」のガイドラインを確認したところ、公式HPにて、ゲーム画像をブログに投稿することは許諾されている旨の記載がありました。

 

コンテンツガイドライン | 夢職人と忘れじの黒い妖精 | ジークレスト

 

主な参照箇所を抜粋します。

2. 本サービス内の素材利用について

1. 画像及び動画

本サービスのスクリーンショットやプレイ動画などは、過度なネタバレを含まない内容であれば、インターネット上やSNSなどで公開していただいて構いません。例えば、覚醒イラスト、バトル、ガチャ結果などは公開していただけます。ストーリーは未読のお客様にご配慮をお願いいたします。ストーリー中に登場するイラストについてはご遠慮ください。

夢職人と忘れじの黒い妖精のコンテンツ利用ガイドラインです。2022年9月15日に確認したものです

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

 

お問い合わせ

「夢職人と忘れじの黒い妖精」推しと出掛ける時専用の画面遷移演出があり、開発者のこだわりを感じた

こんにちは!ちょこです!

このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです!

 

今回は「夢職人と忘れじの黒い妖精」(ゆめくろ)から、画面遷移演出のデザインの事例を紹介します!

 

ゲームは映像で伝えている情報が多いため、画面内で何が起きているのか伝えることが重要だと考えています。

現実では今いる場所が瞬間的に切り替わることはありませんが、ゲームでは瞬間移動することもあります。

急に場面が移動するとユーザーは何が起きたのか理解できなくなる懸念があります。
そのため、画面同士を繋ぎ、何が起きているのかユーザーに伝えることは重要です。

 

では、実際の演出を紹介します。

 

家から出る演出

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

これはおでかけコマンドを実行した直後の画面遷移演出です。
汎用のロード画面を表示するだけでも機能面では困りませんが、扉を開ける演出を挟むことで、外に出掛けるという状況が伝わります。

また、画面がゆっくり上下に揺れることで、歩いている感じが表現されているのも没入感を高めている要素のひとつかと思います。

 

家に帰る時の画面遷移演出には時間差分がある

f:id:appgameui:20220916100050p:image外から家に戻る時にも演出があります。
また、プレイする時間帯によって空の色も変わっていました。

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

これは日中に出かけた時の演出です。
日中なのに星がたくさん見えており、どこか幻想的な空気感が表現されています。

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

これは夕方に出掛けた時の空です。日中と雲の形が若干変わっています。
抜けるような空ではなく、やや雲の量が多くなっています。

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

夜に出掛けると満月が出ています。月光によって雲が明るく照らされています。
雲の形も月が引き立つようなバランスに変わっています。

 

 

没入感を高める画面遷移演出

このように専用の画面遷移演出を用意しており、開発者のこだわりが感じられるデザインになっていました。

個人的に素敵だと感じたことは以下です。

  • ゲームの世界観を表現されている(満足度・没入感)
  • ユーザーが外に出掛けることが伝わる(ユーザーが混乱しない)
  • シーンが連続している(没入感が途切れない)

特に、キャラクターが外に出るシーンが描かれていないけど、外に出掛けることが伝わる演出になっているのは面白いと感じました。
(もしかすると「モンタージュ理論」が関係しているのかも?)

 

 

以上です。

ファンタジー感を演出する際の参考になれば幸いです

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。

他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 


権利者さまへ

 

以下はコンテンツ利用に関する認識の説明です。

「夢職人と忘れじの黒い妖精」のガイドラインを確認したところ、公式HPにて、ゲーム画像をブログに投稿することは許諾されている旨の記載がありました。

 

コンテンツガイドライン | 夢職人と忘れじの黒い妖精 | ジークレスト

 

主な参照箇所を抜粋します。

2. 本サービス内の素材利用について

1. 画像及び動画

本サービスのスクリーンショットやプレイ動画などは、過度なネタバレを含まない内容であれば、インターネット上やSNSなどで公開していただいて構いません。例えば、覚醒イラスト、バトル、ガチャ結果などは公開していただけます。ストーリーは未読のお客様にご配慮をお願いいたします。ストーリー中に登場するイラストについてはご遠慮ください。

夢職人と忘れじの黒い妖精のコンテンツ利用ガイドラインです。2022年9月15日に確認したものです

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

 

お問い合わせ