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

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

ブログ1年目を振り返って

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

おかげさまで去る2020/1/12をもちまして、ブログを1年継続できました。(気付いたら過ぎてました)
最初の1年目を振り返ってみます。

 

f:id:appgameui:20200113131931p:plain

▲プレイしたゲーム

 

 

ブログを始めてみて良かったこと

  1. 良し悪しの言語化
  2. 自身の弱点の把握
  3. 目的のあるインプット

 

メリットは主にこの3つです。

良し悪しの言語化は誰かと話す時に便利になると実感しています。それが間違っているにしろ浅慮であったにせよ、言語化できないと議論も相手に正されることもないので学習の費用対効果が悪いです。数をこなしていくと言語化できていない部分が必然的に明らかになってくるので、自身の弱点が知れます。

また、記事や書籍を読んだり調べたりする際も目的のあるインプットになるので有用に感じます。(よくyoutuberが「常にネタ探して暮らしてる」みたいなこと言ってるけどそんな感じに近いです) 

アウトプットするためにはインプットがその何倍も必要になってきます。でないとネタ切れします。そういった意味で大量かつ目的のあるインプットができるように意識するようになりました。

今後もその意識は心掛けたいと思います。

  1. 良し悪しの言語化
  2. 自身の弱点の把握
  3. 目的のあるインプット

以上が良かった点です。

 

このブログの目指すところ

2年目に入り、今後のこのブログの目標、目指すところですが

  1. 良いUIのアプリがリリースされること
  2. UIが業界の基礎教養となり、アンチパターンがリリースされないこと
  3. 結果的にUIデザイナーがいなくても素敵なUIが実装されること

 

このブログを継続する意図ですが、実験的な意味合いが強いです。

過去社内でこういったゲームレビューのような施策は実施してきましたが…

  1. 人材が流動的であり教育の費用対効果が悪い
  2. 興味が向いていおらず優先度の違いを感じた
  3. これから業界に入る学生さんに対してアプローチできないこと
  4. 社内からしか編集が出来ず効率が悪い

などからいつでも誰でも見れるブログを検討しました。

これによって社内に居ない方、まだ会ったことのない方のアプローチに繋がり、引いては良いUIがリリースされる確率があがるのではないか、と期待しています。

 

ゲームUIはスキルよりも知識が必要な割合が多いように感じるのですが、リリースされるタイトルがあまりに多く、結果的にインプット不足になりがちで、知見の共有も十分ではありません。

私の場合、一時期年間1000タイトル以上プレイしていましたが、それでも体感として半分もフォローしきれていなかったと感じています。

そこに加えて「UIが良い」「UIが悪い」という意見を耳にするのですが、前提として開発者のUIの定義が曖昧な上、ユーザーの良い悪いの定義もそれぞれなので、受け手側としては上手にFBが受けれない環境があります。(ラーメンで例えると美味い不味いしかFBが得られないので、結局受け手の推測と主観に頼りがちになる感じ)

なので、私自身の感想を発信してみて、少しでも知見の共有になれば良いな、と考えています。

見解や認識が合致するかどうかは重要視しておらず、それよりも、思案や議論の取っ掛かりとなったり、アンチパターンの存在を知ってくださったり、コストを掛けずに良いUIのゲームがリリースされれば嬉しい限りです。

 

やらなくても良いこと

この1年、ブログを継続する上でやらない方が良いことがいくつかあるように感じました。それが以下の6点です。

  1. 投稿時間を気にすること
  2. 1日に複数件投稿すること
  3. 多くの収益を得ようとすること
  4. 記事をリライトすること
  5. SEO対策
  6. 記事のクオリティにこだわること

これらはブログ1年目の初心者がやる必要はないと感じました。

やらなくて良いことにコストを払うのは無駄なので早々に切り上げて、他のことに注力したほうが良いという考えです。 

1年目は継続することだけに注力して、アクセス数や周囲の反応の薄さは気にせず、自分なりに上手に文章を書けているかどうかだけ気を付けると良いと思います。

 

投稿時間について

ブログを始めたばかりでは投稿時間を気にしてもそこまで大きな差はありません。

何も期待せずに自分の好きな時間に投稿すると良いです。私の場合は必ず00時に投稿していますが、これはアクセス数が集まるといった合理的な理由は一切なく、はてなブログの予約投稿のデフォルト値です。変更するのも面倒なのでそのままにしています。

継続していれば「00時に更新されるブログである」という認知になるのではないかな、と考えています。

 

更新頻度について

私の場合、1日に複数件投稿してもあまりアクセス数には変化ありませんでした。

一時、日に2件投稿していましたが、これはストックがあまりに増えすぎて消化しきれなくなったので投稿していたものです。アクセス数の増加を目的として記事の更新頻度を2件/日にしても費用対効果は良くないと推測します。

もしかすると1件/日でも十分すぎるかもしれませんが、隔日更新より毎日更新の方が習慣として分かりやすいのでしばらくこのままにしていこうと思います。

 

収益について

ブログ単体での収益化は私のような素人には難しいと感じました。1万/月程度であればそこまでハードルは高くないと思いますが、生活費を稼ぐほどの収益を目的とするならyoutubeを始めた方が良いです。

いずれにしろ大変ですがyoutubeの方が収入の上限が高いので、同じ努力や時間を掛けるのであればそちらの方がメリットが大きいのかなと思います。

 

記事のリライトについて

記事をリライトすることはしていません。誤情報、誤字脱字は別として、過去の拙さを振り返るのも重要なことだと考えるので残したままにしています。

これに関しては、このブログが日記に近い属性があるため一概に他のブログと同じには言えないかもしれません。

 

SEO対策について

SEO対策はどうなんでしょう…。

SEO界隈はしばしば仕組みが変わるようなので、せっせと対策してもいつリセットが起きてしまうのか分かりません。

企業サイトやプロブロガーならまだしも、個人の趣味ブログでそこに支払うコストはかなり優先度が低いと感じています。少なくともブログ初めて1年目のユーザーがやるような領分ではないな、と感じました。

もうちょっと言うと、私はエゴが強いらしく「どうしてSEOを気にしながら記事を書かなければいけないのか。SEOがこちらに合わせて欲しい」というスタンスなので、google検索エンジン担当者と気が合うまでは近づかなさそうです。

 

記事のクオリティに関して

1年目は記事のクオリティは基本的に無視しました。「リライトしない」という選択肢とほぼ同じ考えでいるのですが、ライティングスキルだけでなく知識も不足している状態で自身の納得感を高めても後になって必ずクオリティが低いと感じます。

であれば今は一旦優先度を下げて、継続できる範囲でのクオリティにしようと考えました。

 

今後やりたいこと

  1. 書籍レビュー

今後やってみたいこととしては、書籍レビュー。いわゆる書評記事があります。

しばしば「UIデザイナーにオススメの書籍」的な記事を見かけますが、そもそも本を読む人はすでに読んでいるし、読まない人は薦めても読まないなぁ、という経験があります。

また、初心者にいきなり専門書をすすめてもハードル高いと感じるでしょうし、ベテランデザイナーなら入門書以外も読んで欲しいです。

なので、この本にはどういったことが書かれていて、こういった方にお勧めします。という軸で紹介していければ良いな、と思います。

個人的にはそのジャンルの書籍をとりあえず20冊ほど読んでほしいけど、ソシャゲのゲームUIに関しては広範囲かつ体系化されておらず、20冊どころか200冊読んでもしんどいので、ある程度選別する基準が必要だと感じています。

 

さいごに 

私以外にもゲームUIのレビューブログを書いてくれる人が増えることを期待しています。

私の場合はゲームアプリ専門で、コンシューマやアーケード、アナログボードゲームなどのUIに関する記事は書いていないので、そういった側面での切り口や、シナリオやキャラクターデザイン、音楽などのUXという専門ブログも読んでみたいです。

日々の目標に困っているようであれば、試してみてはいかがでしょうか。

「仮面ライダー シティウォーズ」訴求画像が気になりました。小さい画像に情報詰め過ぎちゃう問題

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

 

仮面ライダー シティウォーズ」のホーム画面の訴求画像が本当に役割を果たせているのか気になりました。

 

訴求画像の役割を果たせているのか?

f:id:appgameui:20191231051518p:image

左上に訴求画像があるのですが、潰れて見えません…

 

拡大表示するとこんな感じです。

f:id:appgameui:20200112100423p:plain

情報がたくさん含まれています。

画面全体で見たときに色々な情報がある中で、この訴求画像に目が行くとはちょっと思えないです。

というのも、情報が過密すぎて何が書いてあるかわからず、ユーザーにとっても重要なことと認識されないので目に入らないのではないかな、と推測したためです。

 

訴求画像は情報過多になりがち

ガチャ画面で見るとこんな感じになります。

f:id:appgameui:20191231091156p:image

慣れてくると重要な情報かどうか判断できるようになってくるのかな…。
画像単体で見ると「☆5」の文字の情報量が一番多いので、それを推したい気持ちはギリ分からなくもないけど…

 

ルーセルは訴求になっているのか

そもそもカルーセルは訴求になっていないのではないか、という意見も出ています。

カルーセルUIは使いやすい?デザインの観点から影響を考察してみました | SEM JOURNAL

 

どこで何を訴求するのか、ということも大事なことです。

面積が小さい画像に関しては訴求できることも少ないので、縮小表示ではなく、情報を整理しないと結局は訴求したいことが届かないのではないかな、と思います。

情報を間引くことが難しければ、情報量に合わせて画像を大きく表示するなどが必要になるのかもしれません。

 

一見すると手間にはなるのですが、正しく伝わらなければ商品の企画にかけた時間が無駄になってしまうので必要な手間だと考えます。

 

「仮面ライダー シティウォーズ」敵のアイコンがショッカーだった。IPを活かしたデザインだと感じました

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

 

仮面ライダー シティウォーズ」にてIPらしいデザインがあったので紹介します。

敵のマークがショッカー

f:id:appgameui:20200111235602p:plain

敵の数を示すアイコンがショッカーをモチーフにデザインされていました。

 

f:id:appgameui:20200111235919p:plain

▲画面上部に表示されているアイコン

 

アイコンはIPモチーフにしやすいところがあるのですが、敵のアイコンにIPらしさを使える例は少ないかも。

 

IPらしさがあると良いよね

f:id:appgameui:20200112000017p:plain

よく見たら画面右側のターゲット切り替えボタンにもショッカーのシルエットが採用されていました。

敵のマークがアイコン化できそうな例はかなり限られそうです。自分の知る限りドラクエのスライムくらいかな…。 

 

IPを大事にしたい

IPにはそのIPごとにブランドイメージがあります。ブランドイメージはそのIPが長く愛され、作り手たちの努力と奇跡の上に成り立っています。

ですので、そういった武器が使えることは大きなメリット。

そして使う以上は敬意を払ってデザインに活かしたいと思います。

 

以前紹介した妖怪ウォッチシリーズもブランドイメージをもってアイコンのデザインにIPらしさを取り入れていたので紹介しておきます。

f:id:appgameui:20191005140711p:plain

appgameui.hatenablog.com

「仮面ライダー シティウォーズ」年齢確認画面が気になったので他タイトルと比較してみた。そしたら全部フォーマット違ってた。

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

 

仮面ライダー シティウォーズ」からバッドUIなデザインがあったのが気になりました。

 

どんなUIだったか

画面のデザインとしては以下のようなデザインでした。いわゆる課金画面の前に表示される年齢確認の画面です

f:id:appgameui:20191230163954p:plain

枠内に生年月日を入力するデザインです。

 

f:id:appgameui:20191230165011g:plain

このような形式で生年月日を入力します。

 

どこが良くなかったか

この画面のどこが良くなかったかですが、

  1. 入力する値のフォーマットが分からない
  2. 不安に感じつつ、数字を入力する必要がある
  3. 一度間違えないとフォーマットが示されない

 

などです。ひとつずつ補足します。

1:入力する値のフォーマットが分からない

f:id:appgameui:20200109222823p:plain

これに関しては、フォームが年月日で区切られておらず、自由入力と同じフォーマットなので数字を入れる、ということが直感的に分かりません。

 

 

2:不安に感じつつ、数字を入力する必要がある

f:id:appgameui:20200109223611p:plain

フォーマットが分からないので、ユーザーは不安に感じつつ生年月日を入力することになります。

このUIの場合、数字を入力することは分かりますが、半角での指定が無いので全角での入力でも良いのか迷います。

ある程度リテラシーがあるユーザーであれば半角にしますが、今度は1月1日を1/1と表記するか01/01と表記するかで迷います。

 

このように、ユーザーは様々な推測をし迷います。

その結果、どれが正解なのか間違いなのか、不安に感じながらも生年月日を入力します。

 

 

3:一度間違えないとフォーマットが示されない

では正しいフォーマットは何か?

それはエラー画面に表示されています。間違ったフォーマットで値が入力されたのであれば、正しいフォーマットを示すのは当然ですが、未然にエラーを防ぐ姿勢も必要です。

 

f:id:appgameui:20191230170608g:plain

▲入力するフォーマットを間違えると正しいフォーマットが表示される

 

間違えると正しいフォーマットが表示されるのはありがたいのですが、それ以前にユーザーがミスをしないようなUIであることも大事だと思いました。(大事なので2回言う)

f:id:appgameui:20200109224432p:plain

 

どうすれば良いのか

では、どうすれば良いのか、ですが

例えば入力する枠を年月日で分けても良いですし、ドラムロールのUIを採用すれば、誤った値が入力されるというエラーが発生する余地もありません。

もし枠をそのままにしたいのであれば、入力するフォーマットを枠内に薄く表示しておくだけでも分かりやすくなります。

 

他のタイトルではこのようなデザインになっていることがあります。ご参考までに紹介致します。

1:自由入力型

f:id:appgameui:20200109225126p:plain

アイドルマスター ミリオンライブ! シアターデイズ。

ベースは今回紹介した仮面ライダーと同じUIですが、入力フォーマットが枠内に示されているため、ユーザーが迷う確率は減ると思われます。

 

 

f:id:appgameui:20200109231401p:plain

とある魔術の禁書目録 幻想収束。

生年月までの管理です。日までは管理していません。この場合も入力フォーマットが枠内に示されています。

 

f:id:appgameui:20200109231038p:plain

ダンまち〜メモリア・フレーゼ〜。

枠が年月日ごとに分かれており、さらに枠外に「年」「月」「日」が表示されています。さらに全角か半角かを迷わせないように、使用できるキーボードを指定しています。

直感的な理解とエラーを防ぐデザインに、なっていると感じました。

 

2:ドラムロール型

f:id:appgameui:20200109235912p:image

▲cue。

入力できる値を制限するUIです。これなら不正な値が入力される余地はありません。

 

f:id:appgameui:20200109234213p:plain

▲アニドルカラーズ

同じくドラムロールのUIが採用されていました。ゲーム中でもここ専用のUIになりがちかもしれません。

 

f:id:appgameui:20200109232143p:plain

▲新テニスの王子様 ライジングビート

これはプルダウンからのドラムロールかな…。上で紹介したドラムロールと比較すると下三角のボタンを押したり数字を確定するための手数が増えるのでこのタイプのUIを実装するのであれば、上のタイプのデザインと比較検討した上で判断するのが良いかと思います。

 

3:年齢区分型

年齢区分で分けるUIもあります。ユーザーの年齢が変わった場合の管理や対応ってどうしてるのかな、と疑問に感じてはいます。

 

f:id:appgameui:20200109232810p:plain

▲パレットパレード。

これまで紹介したUIと比較して

  1. 手数が少ない
  2. ユーザーに確認していることシンプルである
  3. 表示されている情報がシンプルである

という特徴があります。

横に並べると指で情報が隠れないので、その点も配慮があるのかな、と思いました。

f:id:appgameui:20200109230740p:plain
ゴエティアクロス

パレパレと同じですがボタンが縦に並んでいます。

 

 

以上です。

意外とデザインフォーマットが被ることがなくて驚きました。正直もっと偏ると思っていました。

生年月日を入力するUIはゲームに限らず利用されるUIなので、他のゲームやサービスを見てメンタルモデルを利用するのが良いのかな、と思いました。