広告の限界を超える|セールス
広告の限界を超える|セールス
2014.02.20

君はもう体験した?スマホとPCサイトが連動して遊べるサイトまとめ

鮫島

余寒お伺い申し上げます。ディレクターの鮫島です。

まだまだ寒いですね。いつまでも冬服が手放せないので冬服がボロボロになってきました。

さて、今回はスマートフォンとPCサイトがリアルタイム通信で連動しているWEBサイトをいくつかご紹介します。

主にキャンペーンやプロモーションサイトで使用される手法なのですが、どこもスマートフォンの特性を活かしていて、本当に面白いものばかり!!

まずはみなさん!是非これから紹介するサイトを体験してみてください!

※PCとスマートフォン(もしくはタブレット)の両方がないと体験できないので注意です。

スマートフォンとPCサイトが連動して遊べるサイトを体験

DRIVE YOUR WORLD!

DRIVE YOUR WORLD!

フォルクスワーゲンさんの特設キャンペーンサイト。スマートフォンを車のハンドルにして、PCサイト上の車を操作しながら街を走る事ができます。

スマートフォンには「アクセル」「ブレーキ」「左右に曲がる」という行動が操作できるので、本当に車を操作しているような体験ができます! 技術も凄いけど発想がほんと凄いなぁ…。

さっそく運転する!!

WORLD WIDE MAZE

WORLD WIDE MAZE

Googleが提供する3D立体迷路サイト。好きなWEBサイトをPC上で立体迷路化してくれて、スマートフォンで玉をコロコロ転がしながら、迷路のゴールまで進んでいくゲームとなっています。もう「さすがGoogle様!」と言うしかないクオリティ!!!

※Chromeブラウザ同士じゃないと体験できないので注意です

さっそくコロコロしにいく

映画『貞子3D2』スマ4D特設サイト

映画『貞子3D2』スマ4D特設サイト

専用アプリをダウンロードして体験するタイプ。サイト内のYoutube動画と連動した恐怖体験が味わえます。本来は映画館で『貞子3D2』の映画を見ながら体験するものらしいのですが、サイトでも少しだけ恐怖体験ができます。映画館で体験したかった…。

さっそく恐怖体験をしにいく!!

SHAKIN` RACER

SHAKIN` RACER

スマートフォンアプリとPCサイトが連動しているタイプ。PC上にサーキットがあり、連動したスマートフォンをとにかくシェイクする(振る)と車が動き出し、レースができます。

カーブでは少し緩めのシェイクにするなど、テクニックが要求されてゲーム性が高かったです。

さっそくシャカシャカする!!

PUNCH FACE

PUNCH FACE

PC上にいるボクサーに向かってスマートフォンでパンチの動作をすると、ボクサーが実際に殴られている画に変わります。Facebookページでもこんなことができるんですね!!

ちなみに、殴る方向も検知してるっぽくて、今のところ「右フック」「左フック」「アッパー」に反応する事を確認しました。

さっそく殴りに行く!!

超体験!エイのひものつくり

超体験!エイのひものつくり

スマートフォンをうちわのようにしてPCサイトに向かって扇ぐと、画面上に吊るされているエイがどんどん干物になっていくという、なんとも言えない体験ができます。扇ぎすぎてスマートフォンをふっ飛ばさないよう注意っすw

さっそく干物をつくる!!

CheetosChannel

CheetosChannel

YouTubeの動画と連動しているタイプ。PCの画面で寝ているオッサンの顔を目掛けてスマートフォン画面にあるスナックを指ではじくと、オッサンがスナックを食べます。説明が難しいので、実際にやってみてください。。。

さっそくオッサンにスナックを食べさせる

ALTERATION WALL

ALTERATION WALL

スマートフォンで撮影・保存してある写真をPCモニターに投げ込むと、写真が9つの色に分解され、9つの音色・音階と共にPCモニター上にペイントされます!

投げ込む時にスマートフォンの傾きを検知してPCサイトに反映される仕組みっぽいですね。投げ込む臨場感が凄いので、是非試してみてください!

さっそく音を奏でる!

どういう仕組なの?

ここで仕組みの説明です。細かい仕様はサイトによって違うとは思うのですが、ほとんどの場合、非同期通信(リアルタイム通信)ができる『node.js』というプログラムを使用しているみたいです。

Facebookやチャットを思い浮かべればわかりやすいのですが、画面を手動で更新しなくても、自動的に最新の状態にしてくれるプログラムです。今回紹介したサイトでは、その仕組を利用して、スマートフォンとリアルタイムで通信できるようにしています。

まとめ

いかがでしたでしょうか。PCサイト連動の他にも、街中のスクリーンやTV番組のスマートフォンサイトと連動させるなど、色々な活用方法があるみたいです。

体験者は多少の準備が必要なので、少しハードルが高い気もしますが、アプローチの仕方を工夫すれば凄くいいプロモーションになると思うので、手法の1つとして取り入れてみてはいかがでしょうか。

技術も凄いけど、発想がほんと凄いですね^^

j a v a