TeamUDN / nicotore

JPHACKS2021 （2021/10/23~30）ミライ小町ちゃんと一緒に表情筋のトレーニングができるWebアプリケーション「にこトレ！」バンダイナムコ研究所賞 & Innovator認定 & 審査委員特別賞🏆

😄 にこトレ！

🎥 作品紹介動画

https://www.youtube.com/watch?v=7i1JmvzQEoc

✨ 作品URL

※PC＆Chrome推奨です🙇
https://nicotore.herokuapp.com/

💪 製品概要

ミライ小町ちゃんと一緒に表情筋のトレーニングができるWebアプリケーションです！

😷 🌀 背景（製品開発のきっかけ、課題等）

コロナ禍で人と会う機会が減ったことや長いマスク生活の影響で、表情筋を使う機会が大幅に減ってしまっています。

しかし表情筋が衰えると顔が老けて見えてしまったりするなど様々なデメリットがあります。

そんな悩みを解消するために、自宅で簡単に楽しく表情筋を鍛えることができるような物が欲しいと考え制作することにしました。

📝 製品説明（具体的な製品の説明）

実際にミライ小町ちゃんと一緒に「あいうえお体操」と呼ばれる表情筋全体を鍛えることができるトレーニングを行います。

• 😊 初心者モード
  • あいうえお体操のやり方が分からない人に向けてミライ小町ちゃんがやり方を教えてくれながらトレーニングをすることができます。
  • 表情の作り方の説明文も表示されます。
• 😎 経験者モード( 🚧 準備中)
  • 慣れてきた人向けに説明を省いてサクサクトレーニングを行えるモードです。

初心者モードでは説明文が表示されるうえ、ミライ小町ちゃんの表情をまねすることでもトレーニングができるため、直感的に「あいうえお体操」を行なうことができます。

🥳 特長

1. ミライ小町ちゃんと一緒に表情筋のトレーニングができる！

2. ゲーム感覚で楽しくトレーニングができる！

✅ 解決出来ること

「にこトレ！」はコロナ禍で使われにくい表情筋のトレーニングをすることができ、顔の老け防止や小顔効果を期待することができます。

🌟 🔭 今後の展望

顔認識機能を搭載しているため、そこから取った特徴点座標を用いて小町ちゃんからアドバイスをもらいながらトレーニングができるようにしたいと考えています。

現状はあいうえお体操のみにとどまっていますが，今後さらなる体操などを搭載したい他、顔の表情でコマンドを入力しミライ小町ちゃん遊べるようなミニゲーム等を搭載し、より楽しくトレーニングができるようにしたいと考えています。

😆 💯 注力したこと（こだわり等）

• 「ミライ小町ちゃんと一緒にトレーニングができる！」という世界観
• ミライ小町ちゃんのボイスを使用して、より没入感を高めたこと
• ゲーム感を出すため，SEを積極的に取り入れたこと
• ミライ小町ちゃんをイメージした配色にしたこと
• トレーニングを毎日継続できるようにできるだけ無駄を省いて手軽に使えるようにしたこと
• ミライ小町ちゃんのモデルを使用して一緒にトレーニングできるようにしたことで表情筋を鍛えるモチベーションが上がるようにしたこと
• 3Dモデルの読み込み回数を減らすことで、作品の軽量化を行なったこと
• 画面に自分のカメラ映像を映すか選択できるようにして、世界観を壊さないようにしたこと

💻 開発技術

活用した技術

📁 API・データ

• 🙌 バンダイナムコ研究所さん提供
  • ミライ小町の3Dデータ
  • ミライ小町のボイスサンプルデータ

😉 フレームワーク・ライブラリ・モジュール

• HTML
• CSS( Sass )
• JavaScript( jQuery / Three.js / Vue.js )
• TypeScript
• python( Flask )
• webpack
• Heroku
• Unity

独自技術

🔧 ハッカソンで開発した独自機能・技術

• Three.jsによる3Dモデルの制御
• JSのclmtrackrによる顔ランドマーク推定機能