世にスマートフォンアプリが溢れ、入力デバイスがマウス、キーボードから指先に変わった今、UI/UX はどのように変化していくのか？　雑誌Web Designingでは、アプリ制作の技術者から学ぶ当連載や、中村洋基氏をはじめとするクリエイターが登壇するセミナー、中国・上海のWeb制作会社訪問ツアーなどの豪華賞品が当たるアプリアワードを行う「 TapApp(タップ＊アップ)プロジェクト」をスタートする。連載第一回では、サイバーエージェントのゲームUIデザイナー櫻井瑶子が登場する。

スマホアプリ制作の最前線でUIデザイナーに求められるもの

Web制作の延長で、スマートフォン向けサイトやWebアプリ、あるいはネイティブアプリの制作にかかわる機会が増えている。昨今では、Webキャンペーンにおいて、スマートフォンからのアクセスを考えないことのほうが珍しい。

言うまでもなくスマートフォンとPCではデバイスの仕様、利用スタイルなどUI設計に関わる要件が大きく違うので、UI設計にも独自のものが求められる。例えば以下のようなものがある。

  • タップしたオブジェクトは必ず反応させる
  • 画面遷移アニメーションを設定する
  • ローディング中にも画面操作ができるようにする

しかし、いくつかの方法論は語られているものの、スマートフォンが登場してからまだ日が浅いこともあり、定式化できるノウハウはまだ少ない。

座して画面を眺めるスタイルが主たるPCと比較すると、忙しく動き回るユーザーの数分の空き時間に利用されることが多いアプリ。デバイスの持ち方もさまざまだし、指で操作することによるUXはPCとはまったく違ったものになる

そんな中、先行してノウハウを蓄積しつつあるのがソーシャルゲームの開発現場だ。1日に数億PVを処理し、ビジネス規模もどんどんと大きくなっている。大手SAP(ソーシャル・アプリケーション・プロバイダ)では、100人以上の技術者が、ユーザーを夢中にさせるアプリの開発に携わっている。今回は、前後編に分けて「Ameba」を運営するサイバーエージェント(以下、CA)のゲームUIデザイナー4人に、ユーザーを夢中にさせる有用なスマートフォンUIデザインについて解説してもらった。

Session A　より直感的に画面を触るようにしたタッチUI

櫻井瑶子　Ameba事業本部ソーシャルゲームDiv.デザイナー。学生時代からフリーのイラストレーターとして活躍。

ここではスマートフォンの特性を活かし、UI/UXデザインを最適化した例として、「アメーバピグ」の世界観をスマホに移植したペット育成ゲーム「あそんで♪HuggPet」を紹介する。自分のアバターを操作してチャットなどを楽しむWebサービス「アメーバピグ」の世界観を活かしたペット育成ゲームである本作のUIにおいてまず心がけたのは、アメーバピグの世界観を正しく踏襲すること。そして次に考えたのがスマートフォン用にUIを再構築することだった。具体的には、グラフィックに関して、アメーバピグのしっかりとしたガイドラインがあったので、それに準拠しながらの制作を進めた。

クオータービューで展開されるアメーバピグには、色彩設計、実物との縮尺率、デフォルメ設計などに細かいガイドラインがある。今回の開発では、下図のようにこれをクリアしながら、ユーザーがほしくなるアイテムを数多く考案した

また、移植しただけのUI/UXではユーザーが迷ってしまう懸念があった。Webサービスでは雑多な機能を並べてもユーザーが自分で選択して進んでいけるが、ゲームではある程度ユーザーの行動をガイドする必要がある。そこで画面占有率はあがってしまうが、ナビゲーションに大小の差をつけ、文字ではなく女性ユーザーがタップしたくなるイラストに変更した。

当初の画面(左)ではピクトグラムを使用していたが、理解はできてもタップしたいモチベーションにつながらない。そこで、大きくUIを変更(右)。また、ペットと遊びたいというユーザーの優先度を意識して、ビジネス上非常に重要な「ガチャ」ボタンもファーストビューから外した

そして、タッチデバイスの優位性をもっと活かそうと考えた結果、～「ブラシ」ボタンで登場したブラシでなでる(タップする)とペットが目を閉じて喜ぶ～などのタップによって展開される「ペットが好きな人がキュンと来るような仕掛け」をたくさん実装した。

「ごはん」ボタンでエサが登場し(左上)、そこをさらにタップしてペットが食事をする(右上)。ユーザーアクションを増やしたが、これは「育成感」につながるのでストレスにはならないと考えた。また、メール受信など通知動作のアニメーション化なども実装(下段2画面)。ユーザーのモチベーションアップに寄与している

今回のように移植、移行というミッションだと、元になるサービスをそのままもってくることに注力しがちだが、作品カテゴリ(Webサービス→ゲーム)、コアになる展開プラットフォーム(PC→スマートフォン)などが変われば、ユーザーメリットや使用環境は、まったく変わってくる。時にはたくさんの情報が詰め込まれたUIや、ユーザーアクションが少ないUXが最適解ではない場合もある。(櫻井瑶子)

次回は3人のデザイナーに、大量の情報を整理して画面をレイアウトするテクニックなどについて解説してもらう予定だ。

※サービス開発運用状況によって、仕様に変更が入る可能性がありますのでご了承ください。
※当記事は、株式会社マイナビ刊行のWeb Designing2012年10月号掲載の記事を加筆、修正したものです。

雑誌「Web Designing」では、今、Webクリエイターが知っておくべきスマートフォンUI のデザイン、開発のアイデアを学べるセミナーを開催します。基調講演の中村洋基氏をはじめとする、最前線で活躍するたくさんのデザイナー、開発者が登壇するセミナーになりますので、ぜひ参加をいただければと思います。また来場された方には、マイナビ発行の最新の開発者向け書籍一冊をもれなく差し上げます。

詳細はTapApp(タップ＊アップ)プロジェクト公式サイトまで。現在、申し込みも行なっている。