世界100カ国のユーザーが参加した無印のソーシャルゲームも採用!PC/モバイルをHTML5ワンソースで実装するハイブリッド開発とは?

このエントリーをはてなブックマークに追加

100以上の国々から4万人を超えるユーザー、プレイ回数は約460万回

HTML5ワンソースで実装された「MUJI to GO WORLD TOUR SOCIAL GAME」

無印良品を運営する良品計画が7月6日にスタートしたキャンペーンサイト「MUJI to GO WORLD TOUR SOCIAL GAME」が非常に好調です。

MUJI to GO WORLD TOUR SOCIAL GAMEの利用状況(2012/07/26時点)

現在、100以上の国々から4万人を超えるユーザーに利用されています。プレイ回数も約460万回にも及んでいます。これは同社が昨年末に開設した「MUJI 福 CURRY スゴロク」を超える結果となっています(「MUJI 福 CURRY スゴロク」は2週間で3万人に200万回プレイされた-Web広告研究会第二回東北セミボラレポートpart3(全3回)「ソーシャルメディアのROIは十分か~無印良品とスターバックスが明かす活用の裏側と展望~」)。

ステッカーの引き換えで来店を促進

店頭でステッカーと引き換えることができるクーポン

ゲームの内容はスゴロクゲームとなっており、進んだマスによってはステッカーなどのプレゼントをもらうことができます。このプレゼントは店頭で引き換えられることになっており、これによって来店の機会を促進させています。

ソーシャルメディアで商品情報を拡散

ソーシャルメディア上で拡散させることができる

もちろん、Facebook、Twitter、mixi、Sina Weiboの4つのソーシャルメディアアカウントに対応しており、止まったマスで紹介されている商品などの拡散も促しています。

最新技術を駆使したPC/モバイルワンソースによるハイブリッド開発

そして、この「MUJI to GO WORLD TOUR SOCIAL GAME」の一番の特徴は、PC/モバイルをHTML5によってワンソースで実装しハイブリッド開発を実現しているということです。ハイブリッド開発をすることによって、同時にバグフックスできたり、バージョンを常に同期できるため管理が効率化されます。また、HTML5のノウハウが貯まっていけばFlashで開発するときとに負けないスピードで開発を進めることも可能になるかもしれません。そうなれば、工数も減りコストダウンを実現できます。

このハイブリッド開発を実現させるのに重要なのが、以下の2点です。

旧ブラウザへの対応

Flashに負けない表現

旧ブラウザへの対応とは、HTML5といった最新技術に対応していないIE6などのブラウザの対処です。今回のサイトでは思い切ってこの旧ブラウザを対象外としています。

そこで本記事はFlashに負けない表現をどう実現しているのか、サイトの裏側を解説します。

CSS3アニメーションでサイコロを上下にアニメーション

サイコロが上下するアニメーション

ひとつ目は、右下のサイコロが上下するアニメーション。こちらはCSS3アニメーションが使用されています。CSS3とはWebサイトを装飾するCSS最新のバージョンで、広義の意味でHTML5の最新技術に含まれます。CSSで始点、終点、アニメーションの所要時間、実行回数などを指定することによってアニメーションしてくれます。このサイコロは0.7秒かけてで上下するように、実行回数は1000回に設定されていました。

トランクのジャンプとマップの位置をずらすことにより移動を表現

マスの間を飛び回るトランクケース

二つ目はサイコロのマスの目に従って移動するトランクケースです。上にアニメーションしながらマスの間を移動しています。これはCSS3アニメーションとjavascriptの組み合わせによって実現しています。まずトランクケースが上にジャンプしているように見えるのがCSS3アニメーションです。パラメータでは、アニメーションの所要時間は0.7秒でサイコロと同じです。しかし再生回数は1回に設定され、javascriptによってサイコロの目の数だけアニメーションを適応させていました。次にジャンプと同時にトランクの座標を移動しているのが、javascriptによるマップの移動です。あたかもトランクケースが移動しているように見えますが、背景のマップ部分を移動させています。トランクケースは上にアニメーションしているだけで、常に画面中央にセットされています。javascriptでマップのCSSパラメータを操作することによって移動を実現しています。

この他にもたくさんのHTML5の技術がちりばめられています。もちろんFlashに比べ表現面や旧ブラウザへの対応が難しいこともあります。しかし、PC/モバイルでの同時にバグフックスできたり、バージョンを常に同期できたりと、PC/モバイルをワンソースで実装することによるメリット大きいです。このメリットでデメリットを理解した上で、HTML5サイトを企画してみてはいかがでしょうか。

このエントリーをはてなブックマークに追加

This entry was posted in blog. Bookmark the permalink. Both comments and trackbacks are currently closed.

Comments Closed

トップ | tadashiku, Incについて | 製品・サービス | 実績のご紹介 | ニュース | ブログ | パートナーシッププロジェクト | お問い合わせ