星ドラから学ぶ ユーザーインターフェース

『星のドラゴンクエスト』は1,800万ダウンロードを超える人気のスマホゲーです。 ゲームは楽しい内容なことが最も大事ですが、「遊びやすいしくみ」も非常に重要です。 操作しにくい、よくわからない、などのネガティブな要素でプレイ人数を落としてしまうことも…

この人気ゲームを実際にプレイしてみて、スマートフォン操作が前提でのインターフェースの作りを見てみました。

【01】ホーム画面のボタンの分かりやすさ

画像を見ていただく、各ボタンの意味が分かりやすくなっています。 イメージしやすいアイコンがボタンになっており、パッと見で押した後何が起こるのか予想がつきます。

例1）郵便受けのアイコンの部分 　　てがみとテキストもありますが、郵便受けの画像だけで何らかのメッセージはここに届くということがわかります。

例2）マルチというアイコンの部分 　　複数の人がつながっているイメージです。誰かと遊ぶことができることを連想させます。 　　さらに、イベント開催中というマイクロコピーも付いていて押させる仕組みになっています。

上記のように、「わかりやすいイメージ」「端的なテキスト」「キャッチーなコピー」この組み合わせにより ただのボタンも使いやすさのための工夫が仕込まれています。

【02】わかりやすいタブ式メニュー

地図　イベント　ストーリー　サブクエスト　と4つの項目があります。 タブで並列に表記することで、何ができるのかが一目瞭然になります。 さらに、今どのタブを選んでいるか？をわかりやすくするために、表示しているタブを若干大きくしています。

ボタン部分も、選んでいるものは凹んでいて何を選んでいるか、見ているかが一目瞭然です。

【03】わかりやすいコマンド

戦闘ゲームなので戦うことが主なプレイとなります。 なので戦闘がカンタンであることは重要度が高い項目です。 キャラクターを並列に配置し、それぞれが行うことができるコマンドをリール上にして選べるようにしています。 また、リールであることを意識させるために、矢印を上下に加えて操作方法の説明書を読まなくてもわかりやすくしています。

その他のコマンドも使えるモノには色がついていたり、使えないものには色が消えていたりと、視認しただけで内容が分かる仕組みというものを入れています。

【04】次の操作を限定してユーザーに行動を促す

上記の画像のように、「なにをしたらいいのか？」を限定して促しています。 画面に「タッチ！」と大きくでています。 画面を触ればよいということがストレートに伝わり、操作に悩む必要がなくなります。

たった4枚の画像からも、あらゆるボタンの工夫が見て取れます。

どうやったらユーザーが使いやすいか？

UX（ユーザーエクスペリエンス）を叶えるための一つの手法がUI（ユーザーインターフェース）ですが、そのよい例になっていると思います。

これはホームページなどのWebコンテンツも同じです。

スマートフォンを使い、アクセスしてくださったお客様に使いやすく設計することは

内容の充実度と同じくらい大事なことです。

Webサイトの使いやすさの向上方法として『マイクロコピーを使う』という方法がります。

詳しくは下記の記事をご覧ください。

2018.03.27　マイクロコピー