スマートフォンUX固有の課題と解決策
ただ実際のスマートフォンへの移植では、いくつかの問題も発生している。まず「onClick delay」。WebKitのonClickイベントは、ダブルタップに備えるため、実際に実行されるまで300ミリ秒程度の遅延がある。そこですぐに反応するonTouchStartとonTouchEndに変えた。
ただ、すべてを完全に置き換えることには問題がある。例えばボタンクリックでハイライトし、スクロールする場合。指が外れたらハイライトを消したいのだが、スクロールが終了するまで画面が更新されないため、それまでハイライトが残ってしまう。ただ、それ以上にonClickイベントの遅れ感の方がユーザーには快適ではないため、優先使用している状態だ。
もう一つの問題はTimeline Context。例えばSNSアプリで友達の一覧があり、縦にスクロールして見つけた1人のプロフィールを見て、戻るボタンで一覧に戻ると、スクロール位置が先頭に戻ってしまう（図2）。これはHTMLで、Ajaxベースで作成していることに起因する問題なのだが、ここは普通にHTMLでキャッシュなどを効かせれば、元のスクロール位置に戻れる。
面白い例としてグリーが買収したOpenFeint社Game Channelというアプリは、ネイティブアプリの機能でスライドアニメーションをしている。ホーム画面のHTMLから次のHTMLを読み込み、前のコンテキストを維持し、別の画面へのアニメーションも出すことで、切り替わりをアピールする仕組みとなっている。ネイティブの機能を使いながらUXを上げようという取り組みの一つだ。
3つ目の問題はオフラインだ。モバイル機器なので、常にネットワーク環境が整った場所で使われるとは限らない。そのため、オフラインモードで使われたときに、ユーザー体験に非常に大きな影響を与える。そこで例えばグリーのSNSアプリでは画面が全面的に切り替わり「ページを読み込めませんでした。通信を確認して再度アクセスしてください」という表示が出てしまう。確かにSNSでは、他の人の情報取得が必須のために仕方がない面もあるが、別のゲームアプリではコンテキストは維持したまま、アラートを出す仕組みになっている。これは例えば地下鉄の駅の間で通信が途切れたときに休み、通信が回復したら続きをやればいいのでまだベターだと言える。
Pathというアプリは、フライトモードにしても写真投稿の操作ができる。実際はオンラインになったときにデータが送られるのだが、ごく自然にオフラインの状態を回避し、ユーザーが期待した操作を止めないようになっている。「スマホではネットワークが切れることがあるという前提で、ユーザーはその際に何をしたいのかを考え、アプリを設計する必要がある」（米川氏）。
グリーがUXを重視する背景には、ソーシャルゲームで主流になっているゲームスタイルがある。それは「あるアクションをしたら、ある程度時間が経過してから次のアクションが可能になる」というものだ。そこで重要になるのは、「継続してプレイしてもらうこと」になる。もちろんゲームのおもしろさが必要だが、インターフェースのデザインに不備があり、ユーザーが不満を感じてしまうと離れてしまう。コミュニケーションのインフラであるSNSも同様、操作上に障壁を作ってしまうとサービスが育たない。
米川氏が最後に挙げた課題は「クロスプラットフォームとOSの文化の壁」だ。最近ではiPhoneとAndroid端末に同じUXを提供する動きが一般的になっている。典型的な例がFacebookで、両OSの画面はほとんど変わらない。
逆の例はEvernoteになる。iPhone版はノート管理が主眼でメニュー一覧が縦に並ぶ「機能ベース」という雰囲気の画面になっている。Android版ではサービスのアイコンが並んでいる。Androidはあるアプリから別のアプリにいきなり飛んで連携させることも多い。米川氏は「クロスプラットフォームは神話」という意見に賛意を示す。すべてのアプリをまったく別々に作成するのは大変なため、クロスプラットフォームで開発する価値はもちろんあるが、あくまでユーザーの文脈を壊さないことが前提だ。
ユーザーはそれぞれのOSに最適なインターフェース、機能を持つアプリを求めている。例えばAndroidユーザーは、Androidの文脈の中でアプリケーションを使う。その中でiPhone風のインターフェースがいきなり紛れ込んでくると、戸惑ってしまう。文脈に沿わないUXを作ってしまうと、次にそのアプリケーションを立ち上げようというモチベーションを削ぐことになる。スマートフォンのUXでは、OSの文化をきちんと理解してデザインすることがポイントになる。
GREE Engineers' Blog
グリー株式会社
東京都港区六本木6-10-1 六本木ヒルズ森タワー
