既存アプリのUIデザインを紐解こう〜ポケモンGO編〜

Mie Kwon
7 min readAug 24, 2016

リリースされてそろそろ1ヶ月が経ちますが、皆様ポケモンGO楽しんでいますか?
いっときの盛り上がりは落ち着いてきてもう飽きたと言う方もいると思いますが、普段あまりゲームをしない私はなんとかレベル17まで上げて懲りずに頑張っています。

楽しむ中で、やはりデザイナーとしてはUIは気になるものです。
世界中で社会現象を起こすほどに素晴らしいアプリのUIはどうなのか、誠に勝手ながらポケモンGOアプリのUIデザインについて、「ポケモンGOのここがすごい!、ここが惜しい!」をそれぞれあげて、紐解いてみたいと思います。

※この記事ではゲーム自体の体験については言及しないこととします。

ここがすごいよポケモンGO

  1. ポケモンGOはすっきりおしゃれなゲームアプリ!

一般的にゲームアプリというと、過度な装飾が施されたボタンがひしめき合い、グラデーションやドロップシャドウを多用しているため、ごちゃごちゃしている印象が強いです。

例えば、ほかゲームアプリのホーム画面。
いろんなボタンがあって、押してほしいはずのお知らせバッジも目立ちません。。

それに比べてポケモンGOのホーム画面は、なんとすっきり。

美しいグラデーションと少しのドロップシャドウ、適度なブラーが施されたセミフラットなUIに、心地よいアニメーションがプラスされて、なんとモダンなアプリなんだと初見はまず驚いたものでした。

-ここがポイント
押してもらいたい、目立たせたいを表現しようとすると「装飾」が増える方向になりがちですが、要素を削って大事なものだけを最低限の要素だけで引き立たせるという「デザインの引き算」がポケモンGOでは見事に実現できていると思います。

2.基本的な操作ボタンが画面下部に集中している

ゲーム慣れしていないユーザーにとっては、上下左右にボタンが多数配置されていると何を押していいか戸惑ってしまいます。

どこを押せばいいのやら…

ポケモンGOはシンプルなゲームということもありますが、ボタンの数も少なく、しかも基本的な操作は画面下部で操作できるという点で優れたUIだと思いました。

メニュー関連が画面下部に集中しているので押しやすい

AndroidのFloating Action Buttonのようにメニューボタンから項目が飛び出す仕様は、手が小さい女性や子供でも操作しやすく、項目が隠れていても、そのボタンを押せば操作できることが理解できます。

-ここがポイント
わかりやすさを突き詰めると、「最初から全て見せる」という手段を使いがちですが、逆に要素が増えすぎて戸惑ってしまいます。
ポケモンGOでは、少ないボタンでかつ、手が届きやすい範囲に配置されているため、操作する上で負荷が少なく、ライトユーザーにとっても馴染みやすいUIになっています。

3.「ある程度は教えるけどあとは自分で調べてね」な最低限のチュートリアル

どのアプリでもありますが、最初の突破口であるチュートリアルやウォークスルーでのUser Onboardingは、ユーザーがこのアプリを使ってくれるかどうかの最大の分かれ道です。
ゲームを始めるときのチュートリアルは、実際操作しながらではあるもののとても長い印象。しかし、ポケモンGOの場合最初のポケモンを捕まえてポケストップを訪れたら、あとは博士からのカンタンな説明で終了です。

だいたいこれで終わり

正直ジムバトルなどは、あの説明だけでは全くもって理解できなかったのですが、やってみるとだんだんわかってくるもので、最初は普通にモンスターを捕まえているだけでも楽しいため、導入に時間がかかって疲れるよりもよっぽど楽しめたと思います。

-ここがポイント
User Onboardingでは、伝えたいことはたくさんあっても、長い導入は離脱を生むだけなので最初に全て伝える必要はありません。ユーザーが最低限楽しめる情報を厳選して伝えておけば、あとはユーザー自身で学んで行きます。

ここが惜しい…!ポケモンGO

前回のアップデートでもかなり改善されたところもありましたが、現時点で気になるところと改善方法を一部提案したいと思います。

  1. ニックネーム入力のエラー表示タイミングがストレス

上にあげた通り、チュートリアルは短いものの最初の登録は結構厄介なものでした。特にユーザー名登録は地味にストレスで、ここで断念したという知人もいたほどです。

最大のストレスの原因は、ニックネームの重複回避がなされていないことで、何度も入力を求められることでした。

-これを回避するには
すでに、入力時に文字の制限はエラーメッセージで出ているので、それと同じタイミングで重複している場合はエラーを表示し、他案を提示してあげるとストレスなくユーザーは登録できるでしょう。

2.ポケモンとアメを交換するためには1匹ずつ博士に送らないといけない

ポケモンを進化させるにはアメがたくさん必要で、大量に手に入れる為には地道に博士に送ってアメと交換しなければいけないのですが、1匹ずつしか操作できない為その作業がとても面倒です。。

-これを回避するには
写真アプリのように複数選択してまとめて博士に送ることができれば、無駄にポケモンをためることなく効率よくアメと交換していけるでしょう。

3.ポケモンを捕まえるときの道具選びが大変

ポケモンを捕まえる時は逃げられる可能性もあるし時間が勝負。
レベルが上がってくるとスーパーボールが選択できる中、いつまでもデフォルトがモンスターボールのままなので、毎回道具を選びなおすのが大変です。

-これを回避するには
「捕まえる時に必要なものがすぐに取り出せる状態にする」を目的とし、以下の改善を考えてみました。
・フリック操作でボールの切り替え
・最後に使ったボールをデフォルトで引き継ぐ
・滅多に使わないカメラではなくズリのみを画面に出す

以上、ポケモンGOアプリのUIデザインについて、「ポケモンGOのここがすごい!、ここが惜しい!」をそれぞれあげてみました。

アップデートで、博士に送るのUIが変更になったり、近くにいるポケモン機能がなくなったりなど、大胆で素早い改善がなされていることは、同じアプリ開発に携わるものとして感心するところが多いです。また、普段はゲームUIに関わることはないですが、ユーザー目線で改めて細かいところまでアプリを観察するととても興味深かったです。

デザイン力を上げるためにも、デザインの良し悪しを判断する力はとても大事なので、既存アプリを分析することはとても勉強になりおすすめです。また今後、別のアプリの分析もしてみたいと思います。

VASILYではデザイナー・学生インターンを募集しています。アプリのUIデザインに興味のある方大歓迎です! ご応募お待ちしております。
http://bit.ly/1TNRGPd

--

--