😄 にこトレ！

🎥 作品紹介動画

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

✨ 作品URL

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

💪 製品概要

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

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

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

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

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

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

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

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

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

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

🥳 特長

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

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

3. リアルタイムに小町ちゃんからアドバイスがもらえる！

✅ 解決出来ること

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

🌟 🔭 今後の展望

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

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

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

💻 開発技術

活用した技術

📁 API・データ

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

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

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

独自技術

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

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