今回はGoogle製のWebコンポーネント <model-viewer> を使って、WebARを実装する方法を解説します。オープンソースで、iOS・Android両方に対応したマーカーレスWebARが気軽に実装できます！公式サイト: https://modelviewer.dev/対応状況Android:Chromeブラウザで動作ar-modes="scene-viewer" を指定.glb ファイル形式が必要Android 7.0以降推奨Google Play Services for AR（旧ARCore）が必要iOS:Safariブラウザで動作ar-modes="quick-look" を指定.usdz ファイル形式が必要iOS 12以降で対応共通要件:Webサイトは HTTPS で提供されている必要があります<model-viewer> はモバイルでのみAR機能が利用可能（PCブラウザでは非対応）モデルの準備glTF / glb(Android用).glb はバイナリ形式で、最も一般的な形式です。Blender や 3Dツールでエクスポート可能です。USDZ (iOS用).usdz はAppleの形式。以下のサイトから変換することができます。https://modelviewer.dev/editor/Macユーザーは Reality Converter.app を利用することで作成可能です。Blenderで3Dモデルを書き出す際に、Universal Scene Description(.usd*)を選択して、拡張子をusdzにして書き出すこともできます。実装例head内に、以下のスクリプトを読み込みます。<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>html内に以下を記述します。<model-viewer src="model.glb" ios-src="model.usdz" ar ar-modes="scene-viewer quick-look" auto-rotate camera-controls>主な属性:src： モデルファイルへのパス（.glb と .usdz）ar：AR機能を有効化ar-modes： 使用するARモードを指定（Android: scene-viewer, iOS: quick-look）auto-rotate, camera-controls： モデルの回転やカメラ操作を有効化公式ドキュメントにも属性は色々記載されていますので、用途に応じてカスタマイズしてみてください。https://modelviewer.dev/docs/例：<!DOCTYPE html><html><head> <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script></head><body> <model-viewer src="3d.glb" ios-src="3d.usdz" ar ar-modes="scene-viewer quick-look" auto-rotate camera-controls> </model-viewer></body></html>サーバーにアップ後、URLにアクセスすると、モデルビューアーが立ち上がります。画面右下の丸いボタンを押すと、AR画面に遷移します。何も設定していないととても小さく表示されますので、大きさは調整した方が良いです。iPhoneを動かして、平面を認識させると…机の上に3Dモデルが表示されました！アニメーションの3Dモデルも表示することができます。eコマースサイトで商品を立体的に見せたり、教育コンテンツで複雑な構造を分かりやすく解説したり、不動産のウェブサイトで物件のバーチャルツアーを提供したりと、「model-viewer」の活用シーンは無限に広がります。色々なことに活用ができそうなWebARをぜひお試しください！🤩