OMIKUJI MACHINE
NEW YEAR WEB EXPERIENCE

新年の社内行事としてスタート

多くの日本企業は、新年にクライアントやパートナーに向けて年賀状を送ります。2018年、monopo Tokyoでははがきで送り合う既存の慣習のほか、世界の人たちに届けられるようなデジタルコンテンツの制作を企画しました。季節の挨拶というタッチポイントを活用し、monopo Tokyoの遊び心のあるユニークなプロジェクトにより、私たちのカルチャーを広く世界に広報しました。

日本の伝統文化「おみくじ」をデジタル体験に

新しい年を迎えると、一年の幸福を祈願するために訪れる「初詣」。そこでは多くの人がおみくじを引き、新年の幸運を祈る習慣があります。2018年、私たちはこの伝統を受け継いだデジタル体験できるようにしました。神社でおみくじを引くときと同様に、画面上に出てくるおみくじボックスを振ると、その動きに合わせて「ロマンス」、「旅行」、「パーティー」の3つのテーマに沿ったユーザーの運勢を表示します。

日本らしく、面白く、ユニークで、芸術的

横尾忠則の作品からのインスピテーションを得た、日本の新年の幸運のモチーフをイラストやアニメーションとして制作。ユニーク・モダンな印象のなかにも、おみくじの用紙やキャラクター、タイポグラフィーなどには伝統的なモチーフを散りばめ、絶妙なコラボレーションを生み出しました。また、4枚の画像を組み合わせた動きのgifアニメーションはインターネット文化に触発されて採用されました。

顔写真ジェネレーター、クレイジーモードなどの仕掛け

コンセプトの一部でもある「ユニークさ、面白さ」を体現するために、ユーザーの顔写真をそれぞれの運勢の結果に合わせて表示されるアニメーションに組み込める「ジェネレーター」機能を実装しました。さらに、運勢ごとに異なるカードはダウンロードでき、友人にシェアすることも可能です。
また、アニメーションが表示される画面では長押しすると「クレイジーモード」に切り替わり、キャラクターたちが動き出します。音楽も激しいBGMへと切り替わり、予期せぬ体験へとユーザーを導きます。

A challenge to generate gif animations

いかにパフォーマンスを快適にするかは、このサイト制作において重要な課題でした。ユーザーが写真を撮り、それをトリミングしたものを組み込んだGIFアニメーションを生成するには、サーバーからグラフィックメモリが大量に必要なため、生成する速度と滑らかなページ遷移を持つ速度を保てるバランスを見つけることは大きな課題でした。そこで、各アニメーションは4つの異なるフレームを使用し、多くのイメージを作成するため、ユーザーあたり約30/40 pngのエクスペリエンスを割り当てるように仕様を変更。さらにサーバーの仕様を変更したことが有効でした。

ジェネレーター機能では、顔がすべてのフレームで動くように、三角関数を使用して各イラストレーションの各フレームの顔の配置を計算しなければなりませんでした。私たちは4枚のフレームのイラストを15枚持っていたので、技術自体はシンプルでしたが、60のプレースメントを計算することにはかなりの労力を要しました。

フロントエンドでの実装面では、カメラのリアルタイムプレビューにWEBRTCを使用し、スマートフォンでも機能させることが課題でした。最終的にモバイルではhtml5ビデオとplaysinlineの両方を採用しました。