【ミーア】HP上にインタラクティブなユーザー体験を設置する方法
はじめに
以前、こちらの記事で、「SNSマーケ：FB・インスタ広告リール動画の作成とA/Bテスト検証方法」について記載した。
インスタのリール動画広告が思いの外、CTRが高く（8%程度）、毎日広告経由で100人くらいがHPに訪れるようになったが、そこからの購入につながっているのは現状2。
なかなか実物を見てもらわないと実感が湧かないという課題はありつつも、なんとかCVRを上げられないかと考えたところ、
「HP上にミーアの3Dモデルを設置して、360度回転で見れるようにするのと、頭をなでると目が動いて話す」というインタラクティブなユーザー体験をHP上でも提供するのはアリなのでは？ と思いついた。
なので、本記事ではHP上にインタラクティブなAR動画を設置する方法について記載したいと思う。
VR体験を表現するためのライブラリ「A-Frame」
VR体験をweb上で簡単に表現できるライブラリはいくつか存在するが、今回は最も簡便なA-Frameというライブラリを使ってみる。
fusionからfbxでエクスポート→blenderに取り込み→glb形式でエクスポート→github pagesに公開
で出来るみたい。
試してみて、実際に表示自体はできたのだが、3Dモデルで、ミーアの頭を撫でると音声をランダム再生して目の部分を変えて表示するのは難易度が高そうだった。
あと、ここを2Dで表示するのと3Dで表示するのとでどの程度コンバージョンに差が出るか、いまいち想定しづらかったので、3DモデルVR体験のアプローチは一旦やめて、2Dで作成する方針に変更。
ミーアの頭を触るとgif画像が切り替わり、音声も変更
2Dで作成したコードがこちら。
HP自体はWordpressで作成しているので、下記コードをカスタムHTMLに貼り付ける。今回は、カスタムHTML内にstyle属性でCSSを指定してJavaScriptも埋め込むというゴリ押しの実装にした。
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet" />
</head>
<body>
<div style="text-align:center;">
<div class="cat-container" style="position: relative; display: inline-block; ">
<!-- ミーアの画像 -->
<img id="mia-image" src="https://mia-cat.com/wp-content/uploads/2024/08/mia_main.gif" alt="Mia" style="display: block;">
<!-- 透明なクリック/ホバリング対象の要素 -->
<div id="head-target" style="position: absolute; top: 13%; left: 35%; width: 30%; height: 5%;">
<button id="click-button" style="
background-color: orange;
border-radius: 50%; /* 球体にする */
width: 60px;
height: 60px;
border: none;
cursor: pointer;
z-index: 3;
"></button>
</div>
<!-- 矢印とメッセージ -->
<div class="hint" style="
position: absolute;
top: 0%;
left: 50%;
transform: translateX(-50%);
text-align: center;
color: #333;
z-index: 2;
">
<p style="font-size: 16px; margin-bottom: 0px; margin-top: 0px;">
ミーアの頭をタッチしてね
</p>
<i class="fas fa-arrow-down" style="font-size: 24px;"></i>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var clickButton = document.getElementById("click-button");
var miaImage = document.getElementById("mia-image");
clickButton.addEventListener("click", function () {
// ボタンを無効化
clickButton.disabled = true;
clickButton.style.backgroundColor = "#ccc"; // ボタンの色を変えて無効化を視覚的に示す
// ランダムなGIFを選択して表示
var gifNumber = Math.floor(Math.random() * 22) + 24; // 24から37までのランダムな数字
miaImage.src = "https://mia-cat.com/wp-content/uploads/2024/08/mia" + gifNumber + ".gif";
// ランダム音声再生
var soundNumber = Math.floor(Math.random() * 133) + 1; // 1から133までのランダムな数字
var randomSound = "https://mia-cat.com/wp-content/uploads/2024/08/sound" + soundNumber + ".mp3";
var audio = new Audio(randomSound);
audio.play();
// 音声再生が完了したらボタンを有効化
audio.onended = function () {
clickButton.disabled = false;
clickButton.style.backgroundColor = "orange"; // 元の色に戻す
miaImage.src = "https://mia-cat.com/wp-content/uploads/2024/08/mia_main.gif";
};
});
});
</script>
</body>こんな感じで、ミーアの頭を触る部分を、
続きはこちらで記載しています。
よろしければサポートお願いします！いただいたサポートはクリエイターとしての活動費に使わせていただきます！