デジタル・バーガー・ジェネレーター『バーガー x バーガー』R&D活動レポート

IMJのフロントエンドエンジニア・デザイナーを中心としたプロジェクトチームが、デジタルを活用した新しいテクノロジーとクリエイティブをかけ合わせたR&Dの一環として、dotFesに参加しました。本記事では、出品した作品の紹介をご紹介します。

プロジェクトチーム
フロントエンドエンジニア：高田 英里 / 向 由夏
デザイナー：新井 薫 / 奥 稔宜 / 周 詩耘
イラスト：菊池 夏実 / 伊藤 美紀

dotFesは、株式会社クスールが主催するwebクリエイティブのためのデザインとアイデアに満ちた、1日限りのパフォーマンス。毎年、トレンドをキャッチアップしたトークセッションやライブパフォーマンス、インスタレーションなど盛りだくさんで開催されます。
IMJからフロントエンドエンジニア2名・デザイナー3名・イラストレーター2名でプロジェクトチームを組み、関西大学での開催されたイベントに参加しました。

今回制作したコンテンツは、Web技術と電子工作を組み合わせ、デジタルとフィジカルを融合した体験型のコンテンツ企画です。
「あなたの内に潜むハンバーガーをつくる」というやや不思議なコンセプトを掲げて、キャッチーで楽しくて笑える、今日一日を少し元気に過ごせるようなコンテンツを制作しました。
題して、デジタル・バーガー・ジェネレーター『バーガー x バーガー』です。

dotFesでは、多くの来場者の中から約200名の方に『バーガー x バーガー』を体験していただきました。選んだアイテムによって異なる診断結果が生成されますが、キャッチーでポップなオリジナルハンバーガーのイラストと、トレンドワードを組み込んだ言い得ていそうで言い得ていない、思わず吹き出して笑ってしまう診断結果に、みなさんに大いに盛り上がり楽しんでいただけました。 

技術的なポイントとしては、AI・人工知能・カメラによる認識系技術・各種センサーの使用・IoTなど、新しい技術をWebを使って取り入れたことです。Webで扱える技術領域が広がっていることで、アウトプットできるモノや表現の幅も多様化しています。

今回の活動において、私達はよく使用するWeb技術を活かしながら、流行りのテクノロジーを取り入れ、Webを超えた表現に落とし込みました。
ここからは使用しているいくつかの技術をご紹介します！

【カメラによる顔認識技術】
ブラウザ上でリアルタイムに人間の姿勢を推定できる機械学習モデル「PoseNet」などで話題のTensorFlow.jsを使用しています。TensorFlowとは、Googleが開発しオープンソースで公開している、機械学習に用いるためのソフトウェアライブラリで、そのJavascript版を使用しました。Webカメラで取得した画像から、目や鼻、口の位置を認識し、性別や年齢を解析することができます。 
 

【モノの向きを判別するIoT技術】
6軸加速度センサーを用いて、選択した表面を判定しています。最近はJavascriptで動くマイコンボードが増えているため、Web技術者でもIoT技術に取り組むことができます。『バーガー x バーガー』では、IoT部分もJavascriptで実現しています。
 

【バーガージェネレーター部分】
ブラウザーでサイネージのような見せ方を実現しています。使用している技術は、Node.jsサーバーとフロントエンド技術のみ。アニメーション部分もCSSアニメーションで作成しています。よく使う技術も使い方次第で、全く別の見せ方にできることを再発見しました。
 

【レシート印字技術】
電子部品のプリンタシールドを使用しています。Node.jsサーバーからマイコンボードへデータを渡し、印字命令させてレシートを出力しています。体験の最後に、フィジカルなアウトプットへ転換するということで、今回の展示コンテンツのメイン部分です。

IMJではエクスペリエンス・エージェンシーとして『REINVENTING THE EXPERIENCE“体験を再発明する”』ことをスローガンに掲げ、デジタルを活用し新しいテクノロジーとクリエイティブをかけ合わせながら、あらゆる体験を豊かなステージへアップグレードしていくために、日々アイデアをカタチにする取り組みを行っています。今回のR&D活動として制作したコンテンツで得た知見を、今後のクライアントワークで応用していければと考えています。