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

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

デザインの見方、捉え方、考え方の本質をつかむ一冊「鬼フィードバック デザインのチカラは“ダメ出し”で育つ」

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

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

「鬼フィードバック デザインのチカラは“ダメ出し”で育つ」

そのデザインに何が足りないか?

 

では、さっそく紹介します!

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

 

所感

まずは所感です!

  • デザイナー間でのフィードバック事例が書かれている
  • フィードバックを通じた、コミュニケーションラリーに焦点を当てている
  • デザイナー歴1年目の方は特に実感を持って読めそう
  • 非デザイナーの片が読むならデザイナーが何を考えてデザインしているかが知れて面白いかも
  • フィードバックを始めて返す人にとっても勉強になりそう
  • 個人的には「どのような言葉を使うか」、「どのような順番でデザインを詰めていくか」、「どの程度の要求をするか」など興味深く読めた

 

こんな人にオススメ!

書籍内では厳密に紹介されていませんが、Amazonの販売ページには以下の方を対象にしている旨が書かれていました。

  • デザインを見る力・捉える力・考える力を養いたい方
  • フィードバックの方法論を学びたいディレクター・発注者の方
  • デザインができていく過程を体感したい初学者の方

ちなみにここで言うところの「デザイン」とは主にグラフィックデザインのことを指していると解釈しても差し支えなさそうです。

 

感想

感想まとめです!

「鬼フィードバック デザインのチカラは“ダメ出し”で育つ」はフィードバックを通じて、デザイナー間でどのようなやり取りされているのか知れる最適の1冊だと感じました。

フィードバックを通じてデザインの正誤を紹介する書籍もありますが、この書籍の場合は「どのように相手に伝えているか」という点が非常に面白いです。

特に、デザイン経験、得意不得意を考慮した上で、どのような言葉、手順でフィードバックを返しているのか見れるのは面白いです。また、フィードバックを受けた側の認識も書かれているので、お互いの思考が分かる点も他の書籍には無い特徴の一つかと思います。

 

書籍で紹介されている事例は「バナー」「名刺」「チラシ」「サムネイル」「プレゼン資料」「POP」「ポスター」「企業ロゴ」と全部で8つの例が紹介されていましたが、その中でも特に面白く感じたのは「名刺」と「POP」でした。

 

名刺は文字サイズ、用紙のサイズが決まっている上に情報もシンプルです。
だからこそ誤魔化しが利かない洗練されたデザインが求められていると感じました。

 

POPは書籍紹介のPOPですが、書籍が販売されてしばらくした場合、どのようなアプローチをするのが良いか、という戦略的な部分を基本として、デザインの目的を構築している点が面白いと感じました。

 

 

以上です。

デザインのフィードバックに悩んでいる方は一度是非読んでみて欲しいです。

 

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

appgameui.hatenablog.com

 

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

 

# バナー
# 名刺
# チラシ
# サムネイル
# プレゼン資料
# POP
# ポスター
# 企業ロゴ

「夢職人と忘れじの黒い妖精」キャラクターとチャットする画面でじわ~っと表示される文字演出

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

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

 

今回は「夢職人と忘れじの黒い妖精」(ゆめくろ)から、キャラクターとのチャット画面のデザインを紹介します!

 

現代や近未来SFなどを舞台にしたゲームでは、しばしばチャットアプリを模したデザインが登場しますが、中世ファンタジーを舞台にしたゲームでは珍しいかもしれません。

 

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

画像

https://twitter.com/yumekuro_info/status/1473957183176179714/photo/1

 

画面左側にやりとりができるキャラクターのリスト、右側にはメッセージの内容が表示されるUIです。

 

ファンタジーらしい装飾

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

この画面専用のUIパーツで構成されており、世界観に寄せた装飾が特徴の画面になっています。

この画面でやることが限定されており、情報量も多くないため、グラフィックの情報量を増やしても画面がごちゃごちゃしていないのが素敵です。

 

 

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

ちなみにこの画面は正式には「キーパーズボード」と呼ばれるガジェットの見た目になっています。ファンタジーにありがちな、不思議な力を原動力として動作する謎ガジェット。

 

ファンタジーらしい文字演出

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

一連の流れをアニメーションで見るとこんな感じです。
装飾だけではなく、文字の表示の仕方にも特徴があります。

 

 

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

分かりやすいように一部を拡大しました。

文字がじわっと浮かび上がるような演出になっています。

こういう文字の表示のさせ方は現実世界のツールでは見かけないため、非現実感がファンタジーらしさを感じます。

ファンタジーらしさを演出する他の例として、石板や本が光ったりする演出が挙げられますが、あれも非現実的な演出です。

 

まとめ

チャット機能は明らかに現代のものですが、装飾やアニメーションなどでファンタジーな要素を付け加えられることを再認識しました。

 

 

以上です。

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

 

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

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

 


権利者さまへ

 

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

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

 

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

 

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

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

1. 画像及び動画

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

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

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

 

お問い合わせ

「夢職人と忘れじの黒い妖精」無料で商品を購入できる機能を実装する際に、考慮している点を考察してみた

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

 

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

 

今回は「夢職人と忘れじの黒い妖精」(ゆめくろ)のショップ画面において無料アイテムを販売している施策について紹介します!

 

過去にも何度か紹介していく中で、このデザインの目的は主に以下の2点に絞られると考えています。

  1. ショップへの導線強化
  2. 売り上げ増加の期待(単純接触効果)

 

仮に、ショップ画面が有料の商品のみ販売するのであれば、多くのユーザーにとって遷移する動機は生まれません。
しかし、一部の商品を無料で販売することで、購買意欲のないユーザーもショップ画面に遷移する動機が生まれます。

 

UIの中でもマーケティングやプロモーションの分野に活かされている事例でしょうか。

 

 

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

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

いくつかタブで分かれていますが、デフォルトのタブは石を購入する画面です。

 

 

無料をアピール!

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

画面左端、リストの並び順的には最上位に無料アテムが表示されています。
他の商品と比べて「無料」という情報を積極的にアピールしています。
こうすることでユーザーは安心して購入ボタンをタップできます

同時に、ショップ画面に遷移して購入ボタンをタップすることを学習させる効果も期待できます。

 

通知バッジを活用し、ユーザーの行動を誘導!

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

画面右上にタブが並んでいますが、そのタブの近くに通知バッジも表示されています。
この通知バッジは無料の商品を購入するまで消えません。

他の画面では通知バッジはタスクが残っていることを表わしています。

 

例えば、ミッションのアイコン付いている通知バッジは「受け取れる報酬の件数」を表わしています。

 

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

通知バッジを消すとスッキリするため、タブに通知バッジを付け、商品の購入をさらに促しているように感じます。

 

 

商品を購入するとデイリーミッションが達成!

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

ユーザーの行動を誘導する工夫は他にもあります。

デイリーミッションのひとつに「グランドショップで買い物をしよう」というミッションがあります。すごく簡単なミッションです。

この結果、ショップでアイテムが無料で購入でき、さらにミッションの達成報酬が獲得できるようになっています。

 

一連の流れ

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

一連の流れを見るとこんな感じです。

機能として特殊なことはしていませんが、簡潔に操作が完了するシンプルな導線になっています。

 

まとめ

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

まとめると、ショップ画面に遷移する理由は以下の2点だと考えました。

  1. デイリーミッション報酬が獲得できるから
  2. 無料アイテムが獲得できるから

 

また、「夢職人と忘れじの黒い妖精」の無料で商品が購入できる点において、以下の5点がデザインする際に考慮されていると感じました。

  1. 無料プレゼントをファーストビューに配置
  2. 複数個所に「無料」と表記し、お得感をアピールしている
  3. 毎日ショップに遷移することで単純接触効果が見込める
  4. ショップに遷移することで他の商品を知ってもらう
  5. 通知バッジを付けてタスクを消したくなるようにしている

他にも気付いた点があればコメントにて教えてください。

 

以上です。
ショップ画面への導線を強化したいときの参考になれば幸いです。

 

 

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

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

 


権利者さまへ

 

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

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

 

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

 

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

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

1. 画像及び動画

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

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

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

 

お問い合わせ

「夢職人と忘れじの黒い妖精」きれいに配置せずに敢えて見切れさせることで、スクロールできると気付かせるデザイン

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

 

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

 

今回は「夢職人と忘れじの黒い妖精」(ゆめくろ)のイベントストーリー画面においてスクロールできることが伝わるデザインについて紹介します!

 

色んなアプリで何度か紹介していますが、リスト表示が表示されている画面で、スクロールできそうに見えるかどうかは割と重要なデザインです。

デザインをしている最中はついついバランス良くレイアウトを組みがちなので、意外と見落としやすい点だったりします。

 

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

f:id:appgameui:20220913102224p:image

短冊のような縦長のバナーが横に並んでいます。
今は制限がかかっているのかプレイできない状態ですが、ここで見て欲しいのはスクロールできるように見えるかどうかです。

 

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

画面右端のバナーを見ると右の1/4程度欠けていることが分かります。

このように中途半端に見切れていると、人間の脳は違和感を感じ、続きがあるように認識します。

その結果、スクロールできる可能性に気付くことに繋がります。

 

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

また、メインストーリーの画面もスクロールするのですが、こちらはやや気付きにくいデザインかもしれません。

 

 

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

比較して見ると、バナーの隠れ具合に違いがあります。
イベントストーリー画面同様にバナーは欠けているのですが、欠けている面積が小さく、見落としやすいデザインです。

私の場合は、バナーが欠けていることに気付く前に画面を操作して、スクロールできることに気付きました。

体感ですが、一部を隠すというよりは、多くを隠して一部を表示させるくらいの方がスクロールできることに気付きやすいように感じます。

 

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

別の画面の例も紹介します。
こちらはお出かけ相手を選ぶ時に表示されるキャラクターのリストです。


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

この画面のキャラクターのサムネイルは下半分が見切れています。
このようにサムネイルが見切れることで、下に情報が隠されていることが直感的に伝わります。

 

以上です。
リストを表示する画面をデザインする際の参考になれば幸いです。

 

 

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

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

 


権利者さまへ

 

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

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

 

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

 

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

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

1. 画像及び動画

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

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

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

 

お問い合わせ