アプリ制作の技術者から学ぶ当連載や、中村洋基氏をはじめとするクリエイターが登壇するセミナー、中国・上海のWeb制作会社訪問ツアーなどの豪華賞品が当たるアプリアワードを行う「TapApp(タップ＊アップ)プロジェクト」と連動した連載第2回は、前回に引き続き、ゲームUIデザイナー3人が登場。1日に数億PVを処理する大手SAP(ソーシャル・アプリケーション・プロバイダ)のソーシャルゲーム開発現場で活躍するデザイナーの知見となる。ぜひ参考にしてみてほしい。

Session B　Ajaxを使って画面遷移させないダイアログUI

河合拓也　Ameba事業本部ソーシャルゲームDiv.デザイナー。前職はコンシューマーゲームのデザイナー。

スマートフォンの限られた性能と通信環境で、リッチなグラフィック表現が必要な場合にどうすればいいのか？　ここではレーシングゲーム「ULTIMATE RACER」でのAjaxによる動的なUI実装を紹介する。忙しく、気が散りやすいユーザーの隙間時間でプレイされることが多いスマートフォンのアプリでは、待機時間は当然、嫌われる。しかし、ネイティブアプリと違い、Webアプリである本作では画像読み込み時間がどうしても発生するので、Ajaxによる動的なUIを採用して画面遷移を減らし、ユーザーのストレスを軽減する努力をした。

画面遷移を極力抑えた設定ダイアログ。車体をクリックして横にスクロールさせると、マシンの現在のスペックが表示され、そこからマシンの変更や強化、進化、売却などのメニューが選べるようになっている

頻繁にアクセスされるレースマシンの設定画面でも同様のUIを実装し、ユーザーがゲームの雰囲気に没入できるよう配慮している。また、レースシーンで3D画像をグリグリ動かすことはできないので画像の連続表示で表現したが、ナローな通信環境でも極力プレイ可能なように、画像の容量の節約などに細心の注意を払っている。(河合拓也)

3Dモデリングから2Dにレンダリングした20枚の画像を用意し、レースシーンを表現。読み込み時間を節約するため画像枚数を絞り込んだり動きを表現する画像を工夫したり、そして減色による容量の節約を徹底した

Session C　限られたスペースに大量の情報を表示するジョグダイヤルUI

筒井豊　Ameba事業本部ソーシャルゲームDiv.デザイナー。前職で、B2CとB2BのWeb制作を数多く経験。

ファーストビューの情報が多い場合、1つのパーツに複数の機能を持たせる解決法がある。ここでは47の都道府県に分かれて対戦する戦国ゲーム「天下統一クロニクル」の実験的なUIを紹介。47チームが常時戦闘を行い、ランキングが入れ替わる本作では、戦闘ステータスとランキングを常にファーストビューで視認させる必要があった。そこで縦型のジョグダイヤルメニューを採用。複数の機能を1つのパーツで兼用し、結果としてスマートフォンならではの操作感となった。

ジョグダイヤルは、各県の順位、状態を初見で把握でき、ナビゲーションとしても機能する。また対戦モードに遷移すると表示が変化。ここでは対戦意欲をできるだけ喚起できるような、情報表示やデザインを心がけた

また背景画像と「県合戦」や「ガチャ」など重要な機能へユーザーを導くボタンも配置するため、ジョグダイヤルの横幅は慎重に設計。

画面とジョグダイヤルの横幅のバランスは1ピクセル単位で何度もテストを繰り返し、現在の寸法に落ち着いた。ただこの幅も絶対のものではなく、リリース後のユーザーの反応次第で変更するか、メニュー自体を開閉式に変える可能性もある

SNS要素も取り入れるため、掲示板機能も実装。「初心者質問＆回答」「戦友募集板」「雑談・地元トーク」など、複数のスレッドをあらかじめ用意し、ユーザーが書き込みしやすくすると同時に管理が煩雑にならないようにしている。(筒井豊)

Session D　デバイスの持ち方を促し押し間違いを極限まで減らすUI

神谷尚志　Ameba 事業本部ソーシャルゲームDiv. デザイナー。CA 社内では、広報IR部署での制作も経験している。

UI／UXデザインではユーザーの使用状況を想定する必要があるが、デバイスの持ち方一つとっても想定は難しい。ここではカードゲーム「天空のクリスタリア」のUIデザインにおいて、どのように最適解を求めたのかを解説したい。まずUI設計の際に、かならず議論されるのがデバイスの持ち方のこと。左右どちらの手で持っているのか、または両手持ちか。まだまだスマートフォンの普及期にあると言える現在では、ユーザーの年代によってもかなりバラつきがあると思われるし、Android端末にいたってはデバイスの大きさもさまざまで、メインの持ち方を想定するのが難しい。となると間をとって中央にボタンを配置することになるが、それでは領域を使用しすぎるため、非常に画面上の情報が多い本作のようなアプリでは採用は難しい。そこでユーザーにデバイスの持ち方を促すUIを考えた。

画面の情報は膨大になるため、ユーザーに持ち方を右手片方に促すことで、押し間違いを減らし、操作しながら通知領域を確認することができるようにした。もちろん、パーツのレイヤーでカードグラフィックを隠さないように配慮

まず右手の片手持ちを想定。そうすると操作は親指で行うので、画面下部が操作領域となる。あとは左右の選択だが、iOSのホットゾーン(タップしやすい領域)とされる左下に配置すると親指の根本で画面の下半分が隠れてしまうので右下に配置した。既存の優良アプリではYES／NO選択画面で右にYESがあるケースが多かったし、目が追いやすいZ形にパーツを配置するというセオリーにおいても合理的という理由もあった。結果としては押し間違いが減り、優良なUIになったと思っている。

またAndroid、iOSの両対応でゲームを開発する場合、注意すべきは反応領域。iOSは設定通りに反応するが、Androidの場合はどうしてもズレる(感覚的には少し上になる)。そこで、ボタン(反応領域)を大きめにデザインし、この差違を吸収できるようにした。(神谷尚志)

画面要素を目で追いやすいZ形に。終点に最もタップされる操作ボタン(黄色)を配置している。表示する文字数は極力7文字以内(いわゆるマジックナンバー7)に収めた。操作ボタンをこれだけ大きくしておけば、AndroidとiOSの感知領域差違はかなり吸収できる

次回はサイバーエージェントのWebアプリ開発に携わるディベロッパーに、すぐに使えるjavaScriptの高速化テクニックついて解説してもらう予定だ。

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

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

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