仕事 業務効率化

ARをホームページやブログに埋め込む方法について30分以内で徹底解説

悩む人

ARをホームページに入れて色々と集客をしたいんだけどやり方がわかりません。

このようなお悩みを解決します    

本記事の内容

読者がこの記事を読むとわかる事

  • WordPressにAR拡張子(usdz)をアップロードする方法
  • ブログにARを貼り付ける方法を解説します
  • 30分程度でこの記事のように埋め込みが出来るようになります

この記事を書いた人

この記事を書いた人1

Yocchin(@blog_lab_

よっちんブログを運営している副業サラリーマンです。

副業でプラスアルファの生活をするための情報発信を行なっています

今の時代、スマートフォンからのWEBアクセスが当たり前となってきました。

さらにスマートフォンの技術が進化し、AR(仮想現実)を使い立体的に物を見ることができる技術が増えてきて、大手サイトではARを使ったWEB集客も増えてきましたね。

今回はARをホームページに埋め込む方法について解説をしていきます。

今回、XserverのレンタルサーバーでWordPressを使用しAR Quick Viewをつかった埋め込み方法について説明します。

3Dデータがあれば簡単にホームページに埋め込むことが出来ます。

よっちん

ARをブログに埋め込むとどうなる?

解説を行う前に実際にARを埋め込んで見ました!

下の椅子画像をクリックしてください。

WordPressにアップロードしたARファイルが起動するようになっています

よっちん

このように実際にARを埋め込むことによって椅子を買いたいと思っている方が、実際に自宅で椅子を置いた時のイメージを掴むことが出来るので売り上げ向上が見込まれるようになります。

ARをホームページに埋め込むために準備する物

今回はレンタルサーバーとしてXserverとWordPressという初心者でも簡単にホームページを作成することができるソフトを利用しています。

今回の解説は、プログラミングが苦手な初心者の方に向けた解説記事となっております。

  • Xserver
  • WordPress
  • ARデータ(USDZ拡張子)

では実際に操作方法を見て見ましょう。

ARデータを準備する

会社でプログラミングしている3DデータをARに変換しましょう。

AR Quick ViewはUSDZ拡張子であることが条件なのですが次のサイトでは3Dデータを変換することが出来ます

Vectary – The Easiest Online 3D Design and 3D Modeling Software
Vectary – The Easiest Online 3D Design and 3D Modeling Software

Turn ideas into a 3D design with this easy-to-use online 3D modeling software. Start for free with a ...

www.vectary.com

ブラウザ上で3Dデータをモデリングできるサイトなんですが、こちらのサイトではファイル出力で「USDZ」拡張子を選ぶことができるんです。

Xserverを準備する

レンタルサーバーを契約しましょう。

Xserverのクイックスタートというサービスを使うことによって、レンタルサーバーの契約とホームページの作成まで一括で行ってくれます。

WordPressをクイックスタートで始める方法!一か月無料延長の特典付きも貰える?
WordPressをクイックスタートで始める方法!一か月無料延長の特典付きも貰える?

このようなお悩みを解決します     本記事の内容 この記事を書いた人   得られる理由と根拠 読了後の未来を提示

yocchin-hitorigoto.com

よっちん

すでにレンタルサーバーを契約していてWordPressを利用されている方は②の作業は不要です。

WordPressでUSDZ拡張子をアップロード出来るようにする

WordPressにUSDZファイルは初期設定ではアップロードすることが出来ません。

サーバーパネルへアクセスし、MIME設定を行うことによって任意の拡張子をアップロードできるようになります。

MIME設定から追加を行いましょう。

USDZのMIMEタイプと拡張子を求められますので、下記情報を入力します。

MIMEタイプmodel/vnd.usdz+zip
拡張子.usdz
拡張子は.(ドット)を忘れないようにしよう

詳細については下記記事を参考ください。

WordPressで記事にARを埋め込む

記事に先ほどアップロードしたUSDZファイルを埋め込んで見ましょう。

ブロックからショートコードを追加しましょう。

ショートコードの中に下記コードを記載します。

こちらのコードはコピペでOKです。

<div>
   <a rel="ar" href="●">
   <picture>
       <img src="■">
   </picture>
</a>
</div>

hrefの中の●をUSDZファイルのURLに置き換えます。

srcの中の■を画像ファイルのURLに置き換えます

よっちん

srcの画像ファイルはアイキャッチ画像となるので、わかりやすい画像を選ぶと良いですね

ファイルURLは先ほどアップロードしたメディアを選ぶとURLが記載されているのでコピペを行います。

ARをブログ記事に埋め込むことが出来ました。AR Quick View

ARが埋め込まれていたら成功です

以上でARの埋め込み出来るようになりました。

操作方法は少し複雑ですが、3Dデータを準備することができれば簡単にARをホームページやブログ記事に埋め込むことが出来ます。

ARが商品を購入する際の決定打になる時代にもなってきました。

ARを自社のホームページに取り入れることによりさらに商機を取り入れてみてはいかがでしょうか?

-仕事, 業務効率化