CASE STUDY OF

OMIKUJI MACHINE
NEW YEAR WEB EXPERIENCE

ROLE: ART DIRECTION, CONCEPTION, UI/UX DESIGN, WEB DEVELOPMENT AND ENGINEERING

DELIVERABLE: EXPERIENCE WEBSITE

DATE: JAN 2018

2018年の運勢をWeb上で占うことができる「おみくじ」コンテンツを制作しました。

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

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

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

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

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

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

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

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

A challenge to generate gif animations

いかにパフォーマンスを快適にするかは、このサイト制作において重要な課題でした。ユーザーが写真を撮り、それをトリミングしたものを組み込んだGIFアニメーションを生成するには、サーバーからグラフィックメモリが大量に必要なため、生成する速度と滑らかなページ遷移を持つ速度を保てるバランスを見つけることは大きな課題でした。そこで、各アニメーションは4つの異なるフレームを使用し、多くのイメージを作成するため、ユーザーあたり約30/40 pngのエクスペリエンスを割り当てるように仕様を変更。さらにサーバーの仕様を変更したことが有効でした。 ジェネレーター機能では、顔がすべてのフレームで動くように、三角関数を使用して各イラストレーションの各フレームの顔の配置を計算しなければなりませんでした。私たちは4枚のフレームのイラストを15枚持っていたので、技術自体はシンプルでしたが、60のプレースメントを計算することにはかなりの労力を要しました。 フロントエンドでの実装面では、カメラのリアルタイムプレビューにWEBRTCを使用し、スマートフォンでも機能させることが課題でした。最終的にモバイルではhtml5ビデオとplaysinlineの両方を採用しました。

Credits

Client: monopo in-house project

Our role: Art direction, Conception, UI/UX design, Web development and engineering

THE TEAM

Director / Project manager / PR: Midori Sugama

Art director / Creative / Designer: Mélanie Hubert

Technical director / Back-end engineer: Shun Okada

Assistant designer: Keita Niiro

Copy-writer (English): Chace Fedor

Copy-writer (Japanese): Tomoki Inaguma, Mayu Oba, Takayuki Yokoyama

PARTNERS

Animator / Illustrator: Thibaud Gayral

Front-end developer: Shoichiro Kameda (PRMO)

Music: SUKISHA

Awards & recognition

  • FWA

    Site of the day

  • Css Design Awards

    Site of the day

  • Awwwards

    Honorable mention

  • Design Taxi

    Featured article

  • Sora News 24

    Featured article

  • The Knife Media

    Featured Article

  • Muzli

    Featured

Related projects

We should work together!