サンシャイン牧場スマートフォン版(webベース)、制作秘話

ミクシィ担当者 2011年6月10日 19:40

今回は、登録者数500万人以上のヒットmixiアプリ「サンシャイン牧場」を提供中のRekoo Japanの土居さんをお迎えし、サンシャイン牧場スマートフォン版の制作秘話をお送りします。HTML5を活用したスマートフォンならではの操作性をみごとに実装していますので、ぜひ参考にしてください。

―――――――――――――――――――――――――――――――――――――

はじめまして、Rekoo Japanの土居です。今回は、現在弊社が提供しているスマートフォン版「サンシャイン牧場」をリリースする上でのいくつかのポイント等をお話しできればと思います。

■サンシャイン牧場とは
サンシャイン牧場は、mixiで常に利用者数No.1の人気ソーシャルアプリです。
作物や花と家畜を育てる農場シミュレーションソーシャルアプリです。友達の農場を訪れて水やりを
手伝ったり、虫を入れていたずらをするなど、様々なコミュニケーションを友人同士で行うことができます。

■コミュニケーション要素の組み方のポイント
mixiアプリでヒットするには、「友人とのコミュニケーション要素」が必要不可欠です。
サンシャイン牧場での重要なコミュニケーション要素は友人の牧場での「水やり」「虫入れ」です。
これらをスマートフォン上でも簡単に実現すること。そこが重要と考え、畑をタッチする事により、
「水やり」「虫入れ」の動作ができるように調整しています。

「植物を植えたい畑を直接タッチする」という体験はフィーチャーフォンには無い新しい感覚です。
スマートフォンならではのタッチ感をうまく取り入れ、直感的にコミュニケーションが可能になるよう、注力しました。
また「友人が自分の牧場を訪れた」という情報もソーシャル要素として重要なものです。
これも「牧場ニュース」という形で常にホーム画面から確認できるようになっています。

牧場ニュース

■他のデバイスから移植する上でのUI設計
スマートフォンブラウザ版への移植ですが2つのパターンがあると思います。
1つめは、旧来のフィーチャーフォンのUIに近いもので構成するUIです。
移植の難易度としては少なく開発コスト、スピードを考えると分がある方法です。

2つめは、HTML5を利用しよりリッチな内容を表現するUIです。開発は複雑になりがちですが、
よりスマートフォンらしさを生かした操作感を体験することができます。

スマートフォン版を作成するにあたり、弊社は後者のHTML5版を選択し、よりリッチなUIを実装する事にしました。
リッチとはいえど、限られた画面内での表現となるので、極力文字での表示を避けアイコンでわかりやすい、
直感的なUIを表示する事としました。友人表示の描画範囲とゲーム要素の描画範囲の表示など
スペースを有効に使うUIが非常に難しく苦労しましたが、バランスを考え格納式の友人ボタンなど実装を
工夫しています。

また、リリース後もUIの改善には力を注いでいます。たとえばPC版にはない「収穫」のアイコンを、収穫できる作物に表示させ、ファーストビューで収穫できる分かりやすさを付け加えたり、ローディングに時間がかかる部分にホーム画面を追加することで体感時間を短縮したり、畑の横長のスクロール画面(畑)にボタンを付けることで次の画面への遷移を分かりやすくしたりして、ユーザビリティの向上に励んでいます。

収穫アイコン

■開発上の苦労話
スマートフォン版を世にリリースするあたり、HTML5がよいのか、ネイティブ版がよいのかAndroidがよいのかiPhoneがよいのか様々な議論が社内でなされました。皆さんも同様の箇所で一度は悩まれたことがあるかと思います。その中で最初のスマートフォンアプリを出すに当たり、一番対応範囲が広く、更新が簡単なブラウザ版を選ぶのは必然でした。いずれを選ぶにせよ、表示がPC、モバイルと異なる新デバイスなので、各アイテム等の書き直しなどやはりそれなりの工数が発生しましたが、ユーザーへスマートフォン版をより早く届けることを優先したため、実装する機能を一部に絞り、ベータ版として早期にリリースしました。リリースしてから運用していく中で、表示速度の改善などのユーザビリティ改善や、アイテムの拡充などを行い、ノウハウは日々蓄積されていっています。ベータでのリリースでしたが、日々の運用の成果か、利用者数も日々増えております。

まだPC版と比べると実装されていない機能もありますが、これからさらに多くの機能を実装し、友人同士のやりとりが発生しやすいよう、いつでもどのデバイスでもサンシャイン牧場が楽しめる環境を充実してゆきます。

最後にRekoo Japanでは一緒に"ソーシャルをより楽しくしたい"メンバーを募集しています。
一緒に世界を目指せるサービスを生み出しましょう!

募集内容詳細はこちら

―――――――――――――――――――――――――――――――――――――

以上、Rekoo Japanの土居さんからの制作秘話でした。
皆様からのスマートフォン版mixiアプリのご提供をお待ちしております。

« mixi API SDK for Android™でアプリを提供してみませんか? トップページ mixiアプリ for Android™デビュー »