LIG✕SHIFTBRAINの伝説のクリスマス企画『SANTA CLOSE TO YOU』の裏側を大公開！【リアルタイム通信を実現したNode.js×milkcocoa】と【Web×リアルを連動させたキャンペーンの作り方】| 技術勉強会「ヒカラボ」のイベントレポート（開催)

 こんにちは！木下です。
2014年クリスマス、LIGとシフトブレインの2社合同で実施された企画『SANTA CLOSE TO YOU』。リアルとWebの融合をテーマに、2つの精鋭クリエイティブ集団によって開催されたイベントは、大きな話題になりました。

2015年4月18日（火）、ヒカ☆ラボにて、LIG＆シフトブレインの企画関係者をお呼びして、企画の誕生秘話や技術面でのノウハウ、失敗談を語っていただきました。
ディレクター、エンジニア、必見の内容です！

シフトブレイン　山本真也氏

こんにちは。シフトブレインの山本と申します。
今日は弊社とLIGさんとで去年のクリスマスにやった企画『SANTA CLOSE TO YOU』の裏側について、お話ししたいと思います。
技術的な話は、後ほどLIGさんのエンジニア「のびすけさん」にしていただくとして、僕の方からはこの企画の考え方についてお伝えしていければと思っています。

『SANTA CLOSE TO YOU』って、そもそもどんな企画？

『SANTA CLOSE TO YOU』は「クリスマス当日の25日に、サンタクロースがあなたのオフィスにプレゼントを届けに来る」というコンセプトがコアにある企画です。

具体的に何をしたかと言うと、まずクリスマスの数日前に、「#お願いサンタ」のハッシュタグを紹介している裏サイトを公開しました。プレゼント希望者はこの「#お願いサンタ」をつけて、お願いをTwitterにツイートします。

そして、クリスマス当日。
ツイートしてくれた方のオフィスにサンタがプレゼントを届けにいきます。そしてプレゼントを受け取った方には、サンタと記念撮影し、その写真を「#ありがとサンタ」のハッシュタグをつけてアップしてもらいます。

と、大まかな流れはこんな感じです。企画自体ものすごくシンプルで、なんのひねりもないです。

『クリスマスシーズンだから、クリスマスっぽいことやろう』そんな思いつきからスタートした企画

この企画をどうやって考えていったか？というところについて、始まりはすごく雑で…。僕とLIGさんのアートディレクターである野田さんという方とで、「クライアントワークじゃなく、何か面白いことをやろうか」と話したのがきっかけです。

ちょうどそのとき、クリスマスが近かったので、「クリスマスに絡めて何かやろう！」と、話は進んでいきました。

クリスマスのリアルな"ときめき"や"わくわく"を表現したいと思った

ウェブ制作会社で働く僕らですから、普段はディスプレイの中で動くものや体験できるものを作ることが多いです。でも、「せっかくのクリスマス企画、ウェブ上でしか動かないものを作るのもどうか」という話になりました。

やっぱりみんなが体験したことがある、クリスマスのリアルなときめきやワクワクを表現したいという気持ちがあったんですね。

「じゃあ、クリスマスのリアルなときめきって何か？」

と考えたとき、思いついたのがクリスマスプレゼントでした。 「それなら、みんなにクリスマスプレゼントを届ける企画にしよう！」

と、企画の方向性が見えてきたのもつかの間、僕達はあるデカイ壁にぶち当たります

プレゼントを届けるだけなら配送業者がやったほうがいい。ウェブ制作会社が届けるべきものは「リアルなときめき」

クリスマスプレゼントを通して、リアルなときめきを皆さまに届けよう！ということになったんですけど、

「プレゼントを届けるだけの企画なら、僕らのようなウェブ制作会社ではなく配送業者がやったほうがいいんじゃない？」

という話が出まして。
もう一度、クリスマスのリアルなときめきについて考えて直す必要が生じてしまいました。

色々考えているうちに、
“クリスマスのリアルなときめきというのはクリスマスプレゼントそのものではなく、
「サンタさんが来てくれるかな！」
「プレゼントは何がもらえるんだろう！」
と、ワクワクしながら待っている時間なのではないか？”と思うようになってきました。

すると、僕らがサイト上で何をすべきか？ということも、だんだんと分かってきたんです。
それは「デジタルで、プレゼントを待っている人全員を楽しませる」ということ。

この「楽しませる」という部分こそが、リアルとウェブの融合みたいなことを考えたときに、ウェブ側の役割なのではないかと思うようになりました。

サンタの位置情報とライブ映像をリアルタイムに配信することで、「リアルなときめき」を届けることに成功

「リアルなときめき」を皆さまにお届けするために、何をしたか？ということについてお話しします。まずサンタの現在地とプレゼントを届けた位置をサイト上でリアルタイムにマッピングできるようにしました。

また、サンタにツイキャス（TwitCasting）用のスマートフォンを持たせ、撮影したライブ映像をサイトで流すといったこともしました（ちなみに僕もサンタの一人だったので、ツイキャスでライブ中継していました）。

これをすることで、サンタさんにお願いをしてくれた人が「うちの会社にサンタが来ている！」「会社の近くに来たけど、通り過ぎちゃった！」といったようなワクワクやときめきを感じてもらうことができたと考えています。

サンタの努力は報われる！？誠実な企画にリアリティを感じるユーザー心理とは？

25日当日のサンタクロース役として、シフトブレインから2名（うち一人は僕）、LIGさんから2名の計4名が選ばれました。僕達は、渋谷や新宿といった街に繰り出し、ツイートしてくれた方が待つオフィスへとプレゼントを届けに行きました。

この日に配ったプレゼントの数は全部で100個。また、あるサンタの一日の移動距離は22キロメートルでした。距離だけで言うと、ハーフマラソン並です。
僕もその日はたくさん歩き、大量の汗を流しました。

別に、
「これだけ頑張ったぞ！」
「これだけ汗をかいたんだぞ！」
と言いたいわけではないんです。

だけど、僕らのかいた汗というのは見ている人にもちゃんと伝わっていて、この企画が盛り上がる1つの要因になったと僕は分析しています。

ソーシャル上のユーザーは不誠実なことに対してすごく敏感です。嘘をついたり誇張が過ぎたりすれば、すぐにバレます。反対に誠実であればあるほど、ユーザーはその企画がリアリティを持ったものだと判断してくれます。

だからこそ、
「ソーシャルキャンペーンに必要なのはリアリティだ！」と言う事ができるのです。

楽するためでなく、誠実さを拡張するためにテクノロジーを使うべき

「ソーシャル上でコミュニケーションを設計する際、楽をするためにテクノロジーを使ってはいけない」

この企画をやってみて、僕はそう感じました。

「ソーシャルサービスを提供する側が楽をしている」とユーザーが感じてしまえば、誠実さもリアリティもお届けすることはできません。もちろん、テクノロジー自体は使って良いのです。ただ使用する際には、

「ユーザーにとって誠実なサービスを拡張・転換させるためにテクノロジーを使うべき」 だと、意識してもらえればいいなと考えています。

今日はありがとうございました

LIG　菅原のびすけ氏

初めまして、株式会社LIGでエンジニアをしております。菅原のびすけです。

今日は『SANTA CLOSE TO YOU』に関する技術的な部分、「リアリティをウェブで表現するためにはどうすればいいのか？」についてお話をさせていただこうと思います。

時間も予算もない中、バックエンド側を自分一人で担当することに。

今回、開発の時間が2～3週間ほどしかなくて…。とりあえずフロント側はシフトブレインのエンジニアさんにやってもらい、僕はバックエンド側を担当しました。裏側といっても、インフラ周り、サンタの位置情報、映像、Twitterなど、やることは結構多かったです。

映像はツイキャスに全部任せたのでそんなに考える必要はなかったのですが、インフラ周りとGPSの取得法、そしてTwitterに関しては結構頭を使いました。

【インフラ問題】～解決する鍵はS3とMilkcocoa～

キャンペーンサイトとの相性が良いAWSサービス「Amazon S3」を選択

先程もお話ししましたが、今回はとにかく時間が厳しくて、アクセス数を試算する余裕もありませんでした。だから余計に、どれだけアクセスがきても大丈夫なようにしておきたかった。

そこでまず、裏側のロジックと表側のロジックとを分けて、裏側にはAWS（Amazon Web Services）の「Amazon EC2」を、表側には同じくAWSの「Amazon S3」を用いることに決めました。

なぜ、表側にS3を選んだかというと、S3はどれだけアクセスが来ても落ちないようになっているからです。たとえ、裏側のサーバーが落ちたとしても、表はとりあえずアクセスできる状況が保てるんですね。

「S3なら99.999％の確率で大丈夫だよ」 とも言われているので、キャンペーンをやる人はぜひ、S3は覚えておくと良いと思います。

S3とEC2との 間で発生するSocket通信を抑えるためにMilkcocoaを導入

S3を選んだことで、短時間で落ちないサービスを作ることができました。しかし、ここでさらなる課題が。それは「コスト」です。S3自体のコストパフォーマンスはとても良いのですが、アクセスが来たときのS3とEC2との間に発生するSocket通信にどうしてもお金がかかってしまう…。

「S3とEC2間のSocket通信を抑えるにはどうしたらいいか？」
ここで注目したのがBaaSの一つ、Milkcocoaです。

このMilkcocoaのすごいところは、Milkcocoaだけですべてのアクセスを受け取り、それを返せるということ。おかげでずいぶんとアクセスの負荷が分散され、Socket通信を抑えることができるようになりました。

【GPS問題】～気をつけたいキーワードは「地下鉄」と「端末」～

GPSは地下鉄に弱い！？検証の結果、「大江戸線深すぎ問題」が浮き彫りに

東京の街中を移動するサンタの位置情報を、リアルタイムでマッピングしていく今回の企画。移動手段として電車を使うことも大いに考えられました。ですから事前に何人かのメンバーに声をかけて、電車に乗って移動しても正確な位置情報が把握できるかを検証してみることにしました。

その結果、地上の電車内で測定した位置情報の精度と、地下鉄の電車内で測定した位置情報の精度に開きがあることが分かりました。最も深いところにある大江戸地下鉄線で得られた測定値は、特に怪しかったです。

このようなことから、「地下鉄はあまり利用しないようにしましょう」とサンタにアナウンスをすることにしました。

GPS取得の精度はGPS発信端末によって違う！？今回選んだ端末はiPhone5

GPSに関して、地下鉄問題の他にもう一つお話したいことがあります。それは「GPS端末は揃えた方が良い」ということ。

まず、AndroidとiPhoneとでは、GPS取得の精度が結構違います。さらに言うと、Androidはメーカーによっても精度に違いが見られます。今回は、iPhoneを使うことにしました。

ただ、iPhone4をWiMAXのルーターでテストしたら、なんだかうまく位置情報が反映されなくて。最初はWiMAXの方を疑い、試しにLTEにしてみたんですけど、やっぱりうまく行きません。
それならと、今度は端末をiPhone5にしてWiMAXを試してみたら、無事位置情報を取ることに成功しました。ということで、今回の企画ではiPhone5×WiMAXを使っています。

【Twitter問題】～「SNS文化をきちんと理解しておくべきだった」と反省～

テレビとは違った、適切なNGワードフィルタの細かさ

Twitterからの投稿がリアルタイムで反映されるというこの企画の特徴を踏まえると、ある程度のNGワードフィルタをかける必要性を感じました。そのため、テレビの放送禁止用語を参考にしながらフィルタをかけたのですが、当日サイトに反映されるべき内容が反映されないという事態に陥ってしまいました。

やっぱり、SNSはテレビとは違うんですね。「テレビではこの発言はアウトだけど、SNSではまだまだオッケー」といったケースが結構あって。ここの“許容範囲”みたいなものを事前にうまく読むことができていれば良かったなと思います。

ツイートが反映されない？ロジックの組み方に要注意！

今回の企画は「#ありがとサンタ」にコメントと画像のURLを投稿してもらうというものだったので、ありがとサンタの画像URLにフォーカスしてロジックを組みました。でも、このロジックの組み方のせいで、幾つか失敗をしたことがありました。

[失敗の例］

・「#ありがとサンタ」以外にもハッシュタグがついており、うまく反映されなかった
・インスタグラムで撮影した画像のURLだと、直接画像を取得できなかった
・ハッシュタグのみのツイートが反映されなかった
・画像ではないURLが来たときにうまく表示されなかった
・「#ありがとサンタ」を「#ありがとうサンタ」と間違える人がいた
・事前周知用のハッシュタグ「#おねがいサンタ」に投稿する人がいた
など

当日に対応することになったこれらの失敗は、事前にSNS文化に慣れることができていたら、防げていたことかもしれません。

今、TwitterやFacebookを使うキャンペーンはいっぱいありまります。でも、そのキャンペーンを企画する側がTwitterやFacebookを普段から使っていなければ、今回のような失敗が生じてしまうのではないかなっていう感想を持ちました。

新しい技術は使ってない。でも、たくさんの人に感動を届けられたことが嬉しい

最後になりますが、この企画を通して、皆さまにプレゼントだけではなく「サンタが来てくれるかな？」「近くにいるけど寄ってくれるかな？」といったワクワクそのものを届けることができたかなと思っています。
技術的には何ら新しいことをしてはいないのですが、喜んでくれた方や感動してくれた方の笑顔をたくさん見ることができて、「この企画やってよかったな」と感じています。

本日はどうもありがとうございました。