デザイン・クリエイティブ目線で語るソーシャルアプリ制作の裏側　第6回「Mobageチャット」（1/2）

デザイン・クリエイティブ目線で語る

ソーシャルアプリ制作の裏側

第6回　株式会社ディー・エヌ・エー「Mobageチャット」（1/2）

ディー・エヌ・エー（以下、DeNA）は、2012年12月12日に「Mobage」内のミニメール機能をリニューアルし、スマートフォンへの対応とコミュニケーションの活性化を図っている。今回のリニューアルは、どのような目的で行われ、デザイン面やプログラミングでどのような工夫が施されているのだろうか。ソーシャルプラットフォーム事業本部の小田氏と胡氏に話をうかがった。

リニューアルされた「Mobageチャット」とは

従来のフィーチャーフォンに最適化されたデザインをスマートフォンに最適化し、ユーザインターフェイスを“チャット形式”に変更することで、メッセージを時系列に一覧しやすくし、グループでのメッセージ送受信を可能としている。また、ゲームでおなじみのキャラクターなどのスタンプを実装。活発なコミュニケーションが行えるような仕組みに生まれ変わっている。
URL http://mbga.jp/

 Interview 1/2 

スマートフォンに最適化し
コミュニケーションを活性化させる

ソーシャルプラットフォーム事業本部システム部の胡華氏（左）とUXデザイン部の小田厚志氏（右）

「Mobage」では、2012年1月にプラットフォームのリニューアルを行い、スマートフォンへの対応を進めている。しかし、「Mobage」内でメッセージを送受信できる「ミニメール」機能は、フィーチャーフォン用のインタフェイスのままであったため、2012年8月からリニューアル企画が開始され、スマートフォンへの最適化が行われた。

「スマートフォン用に最適化されたコミュニケーションツールを提供する必要があったほか、ソーシャル性の高いゲームが増えてくる中で、コミュニケーションを活性化させることも目的のひとつでした。プラットフォームにチャット機能を統合させることによって、ゲームに行かなければ感じることのできなかった温度感を、プラットフォームにいても感じられるようにしたいと考えました」とソーシャルプラットフォーム事業本部UXデザイン部の小田厚志氏は話し、ゲームとプラットフォームを行き来しながら、バトルの待ち合わせやゲームの話で盛り上がってほしいと考えていたことを明かす。

株式会社ディー・エヌ・エー ソーシャルプラットフォーム事業本部 UXデザイン部 小田 厚志氏

Webアプリで「チャット形式のミニメール機能」を提供することを目指して開発をはじめたが、もっとも苦労したのはAndroidデバイスのタッチ感度の問題だったと小田氏は当時を振り返る。「これまではネイティブアプリの制作がほとんどだったのですが、Webだとこんなにデバイスによって感度が違うのか、とビックリしました。たとえば、座標の取り方も、iPhoneはタッチして離したところですが、Androidはタッチしたところと大きく異なります。そのため、ボタンを大きくしたり、リストのグラデーションなども見やすく微調整していきました」（小田氏）

「グローバルメニューのボタンを大きくするなど、自分たちが考える以上にユーザーフレンドリーなUI設計にした結果、誤タップが減り、視認性もよくなった」と話す小田氏に対し、フロント側のエンジニアであるソーシャルプラットフォーム事業本部システム部の胡華氏も「Androidのハードウエアへの対応は、試行錯誤しながら解決していきました」と話す。さらに、動きやアニメーションをネイティブアプリと遜色のないようにすることを目標にしていた開発チームでは、操作を高速に行えるようにさまざまな工夫を行っていると胡氏は話を続ける。「今回のAPIは、不要なHTMLタグが入らないようにするために、JSON（JavaScript Object Notation）形式で高速化しました。また、毎回サーバと通信するのではなく、ローカルのキャッシュを使うようにもしています。これらを行うことで、体感で速度が2倍になっているのではないでしょうか」（胡氏）

株式会社ディー・エヌ・エー ソーシャルプラットフォーム事業本部 システム部 胡 華氏

企画の立ち上げ時には4名のメンバーで開始されたリニューアルのプロジェクトも、次第にメンバーが増えることで、より品質を高めていった。「最初は少人数で、エンジニアもサーバ側とフロント側のふたりだけでした」と話す胡氏。リリースの1～2カ月前には、社内のJavaScriptのスペシャリスト数名をメンバーに入れることで、Android上のWebアプリでも動きがスムーズでわかりやすくなるように苦労してつくり上げていったという。

リリース時には1種類だったMobageチャットに、運営からのお知らせや複数のゲームチャット（グループチャット）を統合することで、UIも大幅に変更する必要があったと小田氏は話す。「情報量が増えると、メニュー内での分類が必要になります。もともとはグローバルフッターでタブメニューによる分類をしていましたが、スライドメニューにすることでユーザーが迷うことなく目的のメニューに行けるように考慮しました。また、ゲームからダイレクトにチャットのゲーム部屋に行くことも考え、そこからチャットのトップにすぐに行けるようにするためにもスライドメニューを採用しました」（小田氏）

チャット形式を採用したことにより
ゲームのアクティブユーザーが増加

リニューアルされた「ミニメール」は、チャット形式になり、グループトークが行え、スタンプ機能が追加されている。もちろん、ゲームのキャラクターのスタンプも順次制作され、提供されている。また、ゲームごとのチャットルームを順次導入しており、2013年2月現在で2つのゲームのチャットが提供されているという。

スタンプといえば「comm」などの無料通話アプリの印象が強いが、小田氏は「commとMobageチャットではユーザー層がまったく違いますね」と話し、「commではスタンプだけで会話するような場合もありますが、 Mobageチャットではそこまで頻繁に見受けられません。たとえば、バトルで使われるような言葉が入っているスタンプや、チラっと覗き見するようなスタンプが好評です」と説明してくれた。とはいえ、ゲームに関する話だけでなく、しりとりを行うためのチャットルームができたり、運営側でお題を決めるイベントチャットでサッカーの代表戦にあわせたチャットルームを提供したり、さまざまな楽しみも広がっているようだ。

今回のリニューアルによって、書き込みがミニメールの頃と比べて1.5倍に増えていると話す小田氏。数値化してはいないものの、「Mobageチャット」のリニューアル後にゲームチャットを用意しているゲームのアクティブユーザーが目に見えて増えていることを小田氏は明かし、リニューアルの効果を実感しているようだ。

リニューアル前の「ミニメール」（左）とリニューアル後の「Mobageチャット」（右）。チャット形式でコミュニケーションできるほか、ボタンの大きさやメニューにさまざまな工夫が施されている。（クリックで拡大）

ユーザー同士でコミュニケーションできるグループチャットのほか、ゲームごとの話題で盛り上がれるチャットも順次提供されている。（クリックで拡大）

（取材・文・撮影：野本幹彦）




>>> 後編に続く