筑波大学COJT2020　Faciopプロジェクト

情報科学類3年　堤海斗知識学類3年　春名航亨 Faciop ～気軽にWeb上で試着！～ 2020年度COJT春学期 1

メンバー堤海斗情報科学類 3年次担当：AR試着システムの実装検証春名航亨知識情報・図書館学類 3年次
担当：商品・3DデータAPIとフロント 2

3 ”AR試着” で解決家にいながら買い物がしたい！商品の訴求力を上げたい！自分の作った 3Dモデルを売りたい！

Faciopの想定するユーザーフロー 4 商品情報を Faciopに申請商品情報を元に 3Dモデルを作成・入稿商品をAR試着気に入ったら購入

3Dモデラー×中小の小売店×消費者をつなぐ全く新しいプラットフォーム！ 5

6 Stay Homeで試着し、買い物をする機会を提供商品を訴求するプラットフォームを提供 3Dモデルを使った新しいマネタイズの
手段を提供

マネタイズの一例 - 出品料 - 商品売れるごとにマージン - AmazonなどECサイトのアドセンス 7

サイト https://faciop-cojt.github.io/faciop/ デモ　https://drive.google.com/ﬁle/d/1uwJUxDpyV1RVoOSOfVYEbmSPYFgaPCMT/view?usp=sharing 8

システム構成 - 全体クライアントサイドサーバサイド(API) 9 商品取得・ 3Dモデル入稿/取得データ返却 SQL発行
結果返却

システム構成 - フロントエンド(試着・堤) 10 フレームワーク Nuxt.js+TypeScript 顔の姿勢推定 facemesh(tensorflow.js) 3DCG描画回り three.js

システム構成 - フロントエンド(試着以外・春名) 11 フレームワーク Nuxt.js UIコンポーネント BootstrapVue 本番環境 GitHub
Pages

システム構成 - バックエンド(API・春名) 12 フレームワーク Ruby on Rails データベース PostgreSQL
本番環境 Heroku

今回得られた知見 - Nuxtでメディアコンテンツを扱った開発の知見(堤) - 商品データ取得/3Dデータ入稿API構築(春名) - Vueのアーキテクチャの理解(春名) 13

頑張ったところ - 少人数でもなんとかやりきった(春名) - 試着システムを1から作った(堤) - ドキュメントやライブラリが少なかった(堤) 14

今後の展望 - 他の小物に対応 - 帽子, マスク… - より洗練されたサービスへ - UI/UX,
ユーザー認証, 欲しい物リスト… - 実運用を行う 15

第2部でお会いしましょう！ 16

にー兄さん