Help us understand the problem. What is going on with this article?

webVRで遊べるQRコードTシャツを作りました

Art02.PNG
はじめまして、arisaitoと申します。
MESONというARスタートアップでUXデザインやプランニングをやっています。

自分はデザイナーですが、AR/VR中心に開発の勉強もしてて
今回webVRの楽しいプロダクトを作ったので技術などをご紹介します。

webVRで遊べるアパレル

VRT1.PNG
QRコードがデザインされたアパレルを作りました。
QRコードをスマホで読み取るとwebVRのミニゲームで遊べます。

↓そのwebVRのミニゲームがこちら
https://vrt1.saharu.work/

スクショ1.png
こんな感じのミニゲームで遊べます。

→ここで売ってる←

動機

このアパレルはそもそも【話したい人と話せるように】コミュニケーションのきっかけを作りたいという思いから出発しました。

そのためこのプロダクトは

  • 誰でも遊べる
  • コミュニケーションを促進する

この2点を重要視して技術選定をしました。

webVRを実現している技術

今回のwebVRはaframeを採用しています。

aframeとはmozillaの提供するwebVRのフレームワークで、htmlとJavaScriptで3Dコンテンツがサクッと作れます。

aframeは半年くらい前から触りはじめてこれまでもいろんなものを作ってきました。

これらをスマホで見ていただくとわかると思うんですが
スマホのジャイロセンサーを使って、実際にいろんな角度に向けることでインタラクティブに楽しむことができます。

これは普通のwebページでは珍しい体験なため、技術に疎く、ましてやwebVRなんて全然知らないって人にも良いリアクションをもらえました。

その他使ったもの

  • SweetAlert2
    • 簡単におしゃれなポップアップを作れるJavaScriptフレームワーク
  • fontawesome
    • アイコンのライブラリ

QRコードは装置

このプロダクトはQRコードを使ってるのもミソです。
というのも、QRコードはスマホを扱える人であれば誰もが「スマホで読み取るもの」と言う共通認識を持ってるものだからです。

普段目にするのはQRコードは広告についてたりして、大抵その広告主のwebに飛ばすものなのでスマホをかざすこともしませんが
それがもし服についていて、どこに飛ぶか分からないものだったら・・・
その意外性と違和感でコミュニケーションを加速できるのではないかと思いました。

検索したりURLを入力するよりもっと手軽に人を巻き込めますよね。

最後に

(ちなみに、一回で終わらないように駄目押しの「おみくじ機能」もつけました。)
スクショ2.png

VR/AR界隈の課題のひとつは、それを体験できるハードが依然として高価格であることです。

その点、アプリをインストールする必要がなくスマホのブラウザで遊べるwebVR/ARはまだおもしろいものを多くの人に遊んでもらうポテンシャルがあると思っています。

それに関連してwebARのAR YouTuberをやってみたりなど、個人的に色々やっていますので
また気が向いたら記事にしていきます。

今回ご紹介したwebVRアパレルはこちら

Buy Me A Coffee

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした