WebAR付きデジタル名刺を作ってみよう！~②WebVR&LitLink編~
こんにちは、クラウディアです！
前回はデジタル名刺の概要と準備についてお話したね。
今回はデジタル名刺をさらに進化させるために、WebVRの作り方とLitLinkを使ったプロフィールページについて説明しようかね。
これを使えば、名刺交換だけじゃなくて、相手をバーチャル空間や自分のサイトに招待することもできるっちゃね！
レッツ、トライや！
WebVRの作り方
WebVRってなに？
まず、WebVRが何か説明するね。WebVRは、インターネット上でバーチャルリアリティ（VR）体験を提供する技術のことなんよ。
これを使えば、パソコンやスマホを使って仮想空間に入り込むことができる！
例えば、ゲームの中に入ったり、仮想の展示会を見学したりすることができたりするんよ。
A-frameを使ってWebVRを作ってみよう！
まずは、A-frameというツールを使ってWebVRを作る手順を説明するね。A-frameは、簡単にVRコンテンツを作れるようにするためのフレームワークやけん、初心者でも安心して使えるっちゃん。
手順1：A-frameのセットアップ
まずはA-frameの公式サイトに行ってみ！
たくさんのサンプルコードがあるやろ？
それを参考にしながら自分のVRコンテンツを作ってみてね。
1.A-frameの公式サイトにアクセス
2.サンプルコードをコピー
3.Glitchに貼り付け
Glitchはコードを書いてすぐにWebアプリとして公開できる便利なオンラインエディタやけん、ぜひ使ってみてね。
手順2：基本的なVRコンテンツを作る
次に、基本的なVRコンテンツを作ってみるよ。
例えば、立方体や球体がある3D空間を、たった4行で作り出せるんよ。
下の例では、
①<a-scene>タグでVRのシーンを作って
②<a-box>タグや<a-sphere>タグでオブジェクトを配置する
ってことをしとるよ！
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
</a-scene>
こんな感じで出来上がりを見ながら作業できるとよ！
手順3：Glitchで公開する
Glitchを使えば、作ったVRコンテンツをすぐに公開できるよ。以下の手順で進めてね。
1.Glitchにアクセスして新しいプロジェクトを作成
2.A-frameのコードを貼り付ける
3.右上にあるリンクに移動すると、もう公開できてる！！
ね、簡単やろ？
今回参考にしたYouTube動画があるけん、分からんときはそれをチェックしてみてね。
この動画ではA-frameの基本的な使い方と、Glitchというオンラインエディタを使ってWebアプリとして公開する方法がわかりやすく紹介されてるっちゃ。
A-frameとAR.jsを組み合わせたシステム
今回はA-frameとAR.jsを組み合わせてシステムを作ったんよ。
AR.jsはWebARのフレームワークで、マーカー上に物体を出現させることができるとよ。
これを使うことで、名刺に埋め込んだマーカーをスマホで読み取ると、立体的なオブジェクトが表示されるっちゃね。
例えば、うちの会社は3Dアバターにアニメーションをつけたのをマーカー上に表示できるようにしたよ。
これでカメラをかざすとうちがVRで飛び出してくるけん、
人気うなぎのぼり間違いなしやね！
VRコンテンツは自由自在！
この技術、うちだけじゃなくて自社のロゴやマスコットキャラクターをVRで表示させたり、画像をクリックすると自社のウェブサイトやV-Cardファイルに飛ぶようにすることもできるっちゃ。これで名刺交換だけじゃなくて、相手に自分の情報をしっかりと伝えることができるね。
(・・・実はこの仕組み、エラーが出まくって作るのになかなか苦労したんやけど、それはまた今度別の記事でね！)
Litlinkでおしゃれな自己紹介ページを作ろう！
Litlinkってなーに？
次に、Litlinkを使って無料のブランドサイトを構築する方法を説明するよ！
Litlinkは、きゃりーぱみゅぱみゅや山田孝之など、
国内の有名人やインフルエンサーが積極的に使っている「完全無料」のブランドサイトアプリなんよ。
スマホで見るときのデザインが最初からしっかり設計されているけん、スマホで読み取ってもらうことの多い名刺交換の時にはとても効果的やね。新しい情報を追加する時も、項目を増やしてリンクを書き込むだけで簡単に登録できるけん、プログラミングの知識がなくても直感的に操作できるとよ。
詳しい使い方は、以下のリンク先の記事を参考にしてみてや！
サイトのデザインやコンテンツ設定のポイント
Litlinkの良いところは、おしゃれなデザインテンプレートがたくさんあるけん、それから選ぶだけでOKというところやね。
基本は画面の指示に沿って作れば問題ないけん、自分のブランドに合ったデザインを選んで、簡単に作成できるとよ。
例えば、X（旧Twitter）やFacebook、LINEなどのリンクを最初から設定しておいて、自作のアプリや独自のコンテンツを追加することもできるけん、自分だけのオリジナルブランドサイトが簡単に作れるとよ。
どんなふうに使うの？
ここで、今回作成したWebVRコンテンツやLitlinkサイトをデジタル名刺に取り入れたら、どんな風に使えるか具体的に説明するね。
例えば、名刺交換の場面を想像してみて。新しいビジネスパートナーに会った時、「これが私のデジタル名刺です」と言いながらNFCカードを渡すやん？相手がそのカードをスマホにタッチすると、突然VR空間に自社のマスコットが飛び出してきて、「こんにちは！これが私たちの会社です！」と元気に挨拶してくれるっちゃ。相手は驚きと感動で、「この名刺すごいですね！」と感嘆すること間違いなしやけん。
また、名刺にはLitlinkのブランドサイトへのリンクも埋め込まれていて、相手がそのリンクをクリックすると、カッコよくデザインされたサイトが表示され、あなたの経歴やプロジェクトが一目でわかるっちゃ。これで相手に強烈な印象を与えることができるね。
さらに進化したデジタル名刺を！
今回紹介したWebVRとLitlinkを取り入れたデジタル名刺は、まだ始まりに過ぎないとよ。これからさらに進化させるためのアイデアをいくつか紹介するね。
ゲーム要素を追加する
例えば、名刺にクイズやゲームを組み込んで、相手が楽しみながらあなたの情報を学べるようにする。
リアルタイム更新
名刺の情報をリアルタイムで更新できるようにすることで、常に最新の情報を相手に提供する。
パーソナライズドメッセージ
名刺を受け取った相手に個別のメッセージを表示させることで、よりパーソナルなつながりを感じてもらう。
次回予告
次回の記事では、NFCカードにデータを書き込む方法について詳しく説明するばい。これができれば、今回作ったアプリやサイトをデジタル名刺を組み込んでフルに活用できるっちゃね！
さらに、名刺交換がもっと楽しくなるテクニックも紹介するけん、次回も楽しみにしとってね！
Discussion