「ユーザー志向」のスマートフォン向けUI/UXの作り方

CodeZine / 2012年11月8日 14時0分

 近年、Webおよびアプリケーションの制作においてUI/UXという言葉が広く意識されるようになってきましたが、具体的にどのように取り組めばよいのでしょうか。本稿では、実際に運用しているスマートフォン向けソーシャルゲームを題材に、ユーザーにとって本当に「使いやすい」UI/UXデザインを行うポイントをいくつか紹介します。

■はじめに

 近年、Webおよびアプリケーションの制作においてUI(ユーザー・インターフェース)・UX(ユーザー・エクスペリエンス)という言葉をデザイナーだけではなく、企画者やエンジニアも使用し、意識するようになりました。中でもPCよりも画面サイズや通信スピードが劣るスマートフォンでは、UI/UXの必要性は高まり続けています。

 ではスマートフォン向けソーシャルゲームにおける良いUI/UXとはどのようなものでしょうか。ボタンサイズや位置、タップ領域の大きさ、画像容量など、スムーズに操作するためのルールが、その一つではあります。しかしこれらのルールを決めたからといって、すべてのユーザーにとって操作しやすいゲームができるわけではありません。

 一つ一つの細かいルールは結果的に「一見使いやすそうなもの」を作ることはできますが、ルールが守られていてもユーザーには使いにくいものになったりもします。

 どうすればユーザーにとって本当に「使いやすい」UI/UXデザインができるのか。当たり前のことですが、意識しないと見落としがちなポイントをいくつかご紹介します。

■対象読者

 スマートフォン向けサービスの企画、開発、デザイン、コーディングに携わっている方。

■大前提は「ユーザー中心設計」

 良いUI/UXデザインを作ろう、と流行り言葉のように使われていますが、良いUI/UXを作る前に、まず「ユーザーは誰で、どう使うのか」を明確にすることが大切です。

 ソーシャルゲームのユーザーは「ゲームをやりたいから」訪問してきています。その訪問目的を妨げないUI/UXが良いものであると言えます。そのためにまず考えるべきなのがユーザーストーリーです。

●ユーザーストーリーを考える

 どんなユーザーがどんな場面でそのページにアクセスするのかを考えるところから、必要なデザインが生まれます。

 「一日に何回、何分間遊ぶのか。その時何をして欲しいのか」。内容によってユーザーがソーシャルゲームで遊ぶストーリーはさまざまですが、まずはこれをはっきりさせることが大切です。

 ソーシャルゲームへアクセスする場面は、自宅でゆっくり腰を落ち着けてという場合もあれば、待ち合わせ時間や休憩時間、移動中の電車の中など、場所やプレイ時間が多岐に渡ります。例えば屋外でも遊べるアクセスしやすいゲームを作るのであれば、屋内と屋外といった光源が異なる環境でも見やすい配色にする必要があります。屋外で見えにくくなるようでは、そのゲームのユーザーストーリーに合致したデザインとはいえません。

 このようにユーザーストーリーを考えると、ほとんどのソーシャルゲームは一日に何度も細かくアクセスする必要があるため、ちょっとした時間に操作できるデザインであることが求められます。極端にいえば「歩きながらでも操作できる」くらいの気軽さで、ユーザーにゲームで遊んで欲しいわけです。では、どうすれば歩きながらでも操作できるデザインになるのでしょうか。

■歩きながらでも操作できるデザインにするために

●情報設計をする

 ソーシャルゲームを開発していると、ついついユーザーに「これも見せたい」「あれもさせたい」「この導線もあったほうがいい」と、ページに必要だと思われる情報が増えていきます。そして、押させたいリンクを目立たせるために情報が主張しあうデザインとなり、余計にユーザーを混乱させることになります。

 例えば女性には分かりやすいと思うのですが、バーゲン会場を思い浮かべてみてください。たくさんの商品が乱雑にあり、50%OFFを打ち出していたりします。いろいろな商品に目移りして、たとえ欲しいものがあったとしてもなかなか見つけられず、探しているうちに疲れてしまったり、本当に欲しい物が分からなくなって、結局何も買わずに帰ってしまう。あるいは、ふと見た次のシーズンの服が綺麗に陳列されており、そちらに目が行くことはないでしょうか。これはゲームでも同じことです。次のアクションの選択肢が多ければ多いほど、ユーザーはさまざまな情報に目が行き、自分が何をすればいいのか迷ってしまいます。そして、ゲームがやりたいという感情が薄れ、離れてしまうというわけです。

 ユーザーを離脱させないためには、いくつもの選択肢を差し出すのではなく、本当に必要な次のアクションを提供する導線作りが必要になります。

 その上でまず大切なのは、情報を整理すること。ユーザーにゲーム内で何をさせたいのか明確にし、情報に優先順位をつけます。「あったほうがいい」というレベルの詳細情報は入れずに、ユーザーを迷わせるノイズを徹底的に排除することも重要です。

 例えば弊社のブラウザソーシャルゲーム「夕暮れのバルキリーズ」で、情報が整理された状態を確認してみましょう。左が実際のバルキリーズの画面です。ユーザーがこの画面で「使うもの」、運営側が「見せたい情報」が優先順位をつけて配置された状態になっています。初めてこの場面を見た人でも直感的に操作できるように、情報を絞り込んだ上で、使いやすいようUIを設計し、次のアクションへ誘導しています。

 一方、同じゲームでも右の画面はよくありがちな、ファーストビューにいろいろな情報を押し込めた状態です(今回のために制作しています)。多くの要素が狭い画面の中で主張しあっているために、ユーザーにとって不必要な「ノイズ」が目立ってしまい、どこを押したら行きたいところへ行けるのか考える時間が必要となります。ソーシャルゲームはユーザーを急がせる仕様になっているものも多く、急いで操作したいユーザーに対して分かりにくい画面を提供した場合、相当なストレスになります。

 まずはユーザーにこの画面でどんな行動をさせたいのかを明確にすること。そして、見せるべき情報は何かを一つ一つ整理し、優先度を決め、検証を重ねていくこと抜きには使いやすい画面を作ることは困難です。

左:実際の画面(良い例)、右:本稿のためにダミーで制作した画面(悪い例)




■関連記事
スマートフォン向けWebサイトの表示速度 高速化手法
「ユーザー志向」のスマートフォン向けUI/UXの作り方
Adobe Proto 1.5バージョンアップの改良点
1日1億超のトラフィックをさばく広告配信システム「AdStir」を支える技術とエンジニアの実態を探る
Worklightを使用する: 第2回 構造化モジュールを開発してIBM Worklightの暗号化オフライン・キャッシュ機能を使用する

■記事全文へ

CodeZine

トピックスRSS

ランキング