モバイル版の Google 検索で 3D モデルと AR が表示されるもの一覧 (2020/12 版)

2020/12/22

WebXR

WebAR

2019 年 9 月から、モバイル版の Google 検索で特定の動物を AR で表示できるようになりました。2020 年 12 月現在は、動物以外にも恐竜や昆虫などが、そして「先行プログラム」として特定のアイテムを表示できます。

本エントリでは、言語設定が日本語のモバイル版 Google 検索で、実際に AR で表示できるものを一覧化しています。

動作環境

動作環境と表示されるものの一例は Google の公式サイトで示されています。

iOS

iOS の AR 表示は “ARKit” に依存しているため、ARKit の動作要件と同じで、端末は iPhone 6s 以降、OS バージョンは 11 以降が動作条件となります。ブラウザは Safari を推奨します。

なお、iPad の場合、「デスクトップ用Webサイトを表示」ではなく「モバイル用Webサイトを表示」にしていれば 3D は表示されますが、AR は表示できません。

Android

Android の AR 表示は “ARCore” に依存しているため、ARCore の動作要件と同じで、端末は ARCore supported devices に挙げられている ARCore に対応しているもの、OS バージョンは Android 7 以降が動作条件となります。ブラウザは Chrome を推奨します。

実際に表示できるもの一覧

確認した諸条件は次の通りです。

Google 検索の言語設定は日本語
端末は iPhone 11 Pro
OS バージョンは iOS 13.4
ブラウザは Safari

付随する条件は次の通りです。

括弧内のものは、実際に表示される名前です。
例えば『トラ(ベンガルトラ)』の場合、「トラ」で検索すると「ベンガルトラ」として表示されます。
二重括弧内のものは、英語で検索しないと表示されないものです。
例えば『angler fish((アンコウ))』の場合は、「アンコウ」で検索すると表示されませんが、「angler fish」で検索すると表示されます。
三重括弧内のものは、三重括弧内のもので検索しないと表示されないものです。
例えば『スフィンクス(((スフィンクス猫)))』の場合は、「スフィンクス」で検索すると表示されませんが、「スフィンクス猫」で検索すると表示されます。
* 付きのものは、iPhone の場合は Google アプリが必要なものです。
例えば『秋田犬*』の場合は、Google 検索結果に表示される「3D 表示」をタップすると、「Google アプリを使って実空間に表示」というボタンが表示され、Safari 単体での AR 表示は実現できません。
この場合、Safari では動作する “オクルージョン” が動作しなくなります。
! 付きのものは、iPhone の場合は Google アプリを使っても AR 表示できないものです。
例えば『Leiodidae((マンマルコガネ))!』は、Google 検索結果に表示される「3D 表示」をタップすると、3D で表示されますが、「周囲のスペースに表示する」というボタンも「Google アプリを使って実空間に表示」というボタンも表示されず、AR 表示を実現できません。

2019 年 9 月に実装されたもの

トラ(ベンガルトラ)
パンダ(ジャイアントパンダ)
ヒョウ(アフリカヒョウ)
チーター
ポニー(シェトランドポニー)
クマ(ヒグマ)
オオカミ(シンリンオオカミ)
ヘビ(ボールニシキヘビ)
ウマ(アラブ種)
アライグマ
ハリネズミ(ナミハリネズミ)
シカ(オジロジカ)
カモ(マガモ)
アリゲーター(アメリカアリゲーター)
サメ(ホホジロザメ)
タコ
カメ(アオウミガメ)
コンゴウインコ
ペンギン(コウテイペンギン)
ワシ(イヌワシ)
ポメラニアン
ゴールデン・レトリーバー
イヌ or ラブラドール(ラブラドール・レトリバー)
ロットワイラー
フレンチ・ブルドッグ
パグ
ネコ(アメリカン・ショートヘア)
アルパイン種
angler fish((アンコウ))
ブルドッグ*

Ref. 「Google検索で動物のAR」登場するのは全部で29、その種類をよく見たら

2020 年 7 月のアップデートで実装されたもの

恐竜と翼竜

月初に Jurassic World Alive とのコラボで恐竜と翼竜あわせて 10 種が加わりました。

ティラノサウルス
ヴェロキラプトル
トリケラトプス
スピノサウルス
ステゴサウルス
ブラキオサウルス
アンキロサウルス
ディロフォサウルス
プテラノドン
パラサウロロフス

Ref. Google 検索の AR 機能で恐竜を現代に

昆虫

月末に Google 昆虫 AR ! 夏休みフォトコンテストとのコラボで 23 種の昆虫が加わりました。

カブトムシ
ヘラクレスオオカブト
アトラスオオカブト
ノコギリクワガタ(クワガタムシ)
オオクワガタ
ミヤマクワガタ
タマムシ
テントウムシ
ホタル
アゲハチョウ
モルフォチョウ
ヨナグニサン
カマキリ
トノサマバッタ(バッタ)
トンボ
セミ(アブラゼミ)
ミンミンゼミ
周期ゼミ
ツクツクボウシ
ヒグラシ
オオスズメバチ
カミキリムシ(ルリボシカミキリ)
Leiodidae((マンマルコガネ))!

Ref. ヘラクレスオオカブトや約 20 の昆虫が AR 機能に登場

2020 年 12 月のアップデートで実装されたもの

2020 年 12 月のアップデートで実装された動物はすべて「Google アプリを使って実空間に表示」となり、iOS Safari の WebAR として AR 表示ができません。

犬

秋田犬*
オーストラリアン・シェパード*
ビーグル*
ボーダー・コリー*
ブル・テリア*
イタリアン・コルソ・ドッグ*
チャウ・チャウ*
cocker spaniel((コッカー・スパニエル))*
ダックスフント*
ドーベルマン*
シェパード(ジャーマン・シェパード・ドッグ)*
グレート・デーン*
珍島犬*
子犬(パピー)*
マルチーズ*
プードル*
シュナウザー*
柴犬*
シーズー*
ウェルシュ・コーギー・ペンブローク*
ヨークシャー・テリア*
チワワ*

猫

メインクーン*
子猫*
ベンガル*
メインクーン*
ノルウェージャンフォレストキャット*
ペルシャ*
ラグドール*
ロシアンブルー*
スコティッシュフォールド*
シャム猫(シャム)*
スフィンクス(((スフィンクス猫)))*

その他

コヨーテ*
乳牛*
去勢牛(農耕去勢牛)*
pig((ブタ))*
ロバ*
tamias((シマリス))*
モルモット*
ハムスター*
フェネック(フェネックギツネ)*
カバ*
シマウマ*
レッサーパンダ*

Ref. モバイル版Google検索結果のAR表示に柴犬やシャム猫、ハムスターなど50種追加
Ref. Google opens the door for 50 new AR animals to jump into your living room

ベビーヨーダ

スター・ウォーズ実写ドラマ『マンダロリアン』とのコラボでベビーヨーダが追加されました。

the child または baby yoda(ザ・チャイルド)

表示されるとされているが表示されなかったもの

『キリン』は、「キリン」でも「きりん」でも「giraffe」でも「ジラフ」でも、検索結果には「3D 表示」ボタンが表示されませんが、「その他のコンテンツ」から表示できます。
『ピットブル』は、「ピットブル」でも「アメリカン・ピット・ブル・テリア」でも「Pit Bull」でも「American Pit Bull Terrier」でも、検索結果には「3D 表示」ボタンが表示されませんが、「その他のコンテンツ」から表示できます。
『シベリアンハスキー』は、「シベリアンハスキー」でも「siberian husky」でも、検索結果には「3D 表示」ボタンが表示されませんが、「その他のコンテンツ」から表示できます。

Appendix: 3D 表示と AR 表示の仕組み

ここから先は技術的な話です。

Scene Viewer

この 3D 表示と AR 表示は ARCore 1.9 で実装された WebAR を実現する Scene Viewer によって成り立っています。これは「3D 表示」ボタンをタップ後、実際に 3D と AR を表示するサイトの遷移先 URL に scene-viewer が含まれていることからも明らかです。

e.g. https://arvr.google.com/scene-viewer/web?file=...

ARCore の Scene Viewer は ARKit の AR Quick Look に近しい存在ですが、もちろん異なる部分もあります。

この Scene Viewer を使って 3D モデルや AR を表示する方法については、ARCore のドキュメントとして詳細が示されています。

ドキュメントの冒頭にパラメーターも説明されているので、『猫』で検索したときの URL を参考に紐解いていきましょう。

e.g. https://arvr.google.com/scene-viewer/web?file=https://storage.googleapis.com/ar-answers-in-search-models/static/ShortHairedCat/model.glb&title=アメリカン・ショートヘア&referrer=google.com:ANIMALS:ios_intent_with_upsells&sound=https://storage.googleapis.com/ar-answers-in-search-models/static/ShortHairedCat/Feline_AmericanShortHair_Unisex_Adult.mp3&card_content=https://arvr.google.com/searchar/infocard?data%3DCg0vZy8xMWo5NzNiNW0wEAE%26hl%3Dja-JP%26hl%3Dja-JP%26gl%3Djp&fdl

file パラメーターには 3D モデルの URL が含まれています。

file=https://storage.googleapis.com/ar-answers-in-search-models/static/ShortHairedCat/model.glb

3D モデルには複数のフォーマットが存在していますが、Scene Viewer が対応しているのは Google 検索でも使われている .glTF のバイナリ形式にあたる .glb 形式と、ARKit の標準フォーマットにあたる .usdz 形式の 2 種類だけです。

title パラメーターには URL エンコードされた名前が含まれています。

title=%E3%82%A2%E3%83%A1%E3%83%AA%E3%82%AB%E3%83%B3%E3%83%BB%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%83%98%E3%82%A2

この例ではアメショこと「アメリカン・ショートヘア」となります。

referrer パラメーターには遷移元などのリファラー情報が含まれています。

referrer=google.com:ANIMALS:ios_intent_with_upsells

sound パラメーターには鳴き声などの音声データが含まれています。

iOS の場合は Google アプリを使わなければ鳴き声を聞けませんが、URL に直接アクセスすると聞けます。
また、ティラノサウルスのように、現代には存在していないものはどうしているのか気になりましたが、ジュラシック・ワールドとのコラボということもあってか (おそらく) 映画で使われている声が含まれています。

sound=https://storage.googleapis.com/ar-answers-in-search-models/static/ShortHairedCat/Feline_AmericanShortHair_Unisex_Adult.mp3

アメリカン・ショートヘアの鳴き声

ティラノサウルスの鳴き声

card_content パラメーターには「その他の動物」として表示される infocard の情報が含まれています。

card_content=https://arvr.google.com/searchar/infocard?data%3DCg0vZy8xMWo5NzNiNW0wEAE%26hl%3Dja-JP%26hl%3Dja-JP%26gl%3Djp

検索結果に「3D 表示ボタン」を追加できる先行プログラム

本エントリの冒頭でも触れていますが、この Google 検索で 3D および AR が表示される仕組みには「先行プログラム」が存在しています。

猫や犬といった動物などは、検索してすぐに「3D 表示」ボタンが表示されますが、この位置は SEO 観点でも非常に強力なものであり、自由に設定できるものではありません。

しかし、「先行プログラム」に申し込み、審査を通過したものについては、検索結果のページ上部ではなく、スクロールしている途中に「3D 表示」ボタンを表示させることができます。これは Google 検索セントラルのドキュメント「上級者向け SEO」として示されています。

一例として、ドキュメントでも示されている「Keurig K-Mini Single-Serve K-Cup Pod Coffee Maker : Target」が挙げられます。

<model-viewer> を使って検索結果ではなく自分のウェブサイトに 3D と AR を表示する方法

前述の先行プログラムは検索結果に表示されることにより、SEO の効果が得られますが、何でもかんでも適用してもらえるわけではなく、一定の審査があり、決して簡単とは言えません。

本エントリでは <model-viewer> の詳細は省きますが、Web Component のひとつである <model-viewer> を使うことで、検索結果ではなく自分のウェブサイトであれば、誰でも自由に 3D と AR を表示させられます。

気になる方は公式ドキュメントを参照してください。

サンプルとして用意されている `<model-viewer>` を使った WebAR の一例

上記のような見た目は下記のコードで実現できます。

<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>

<!-- Use it like any other HTML element -->
<model-viewer src="../../shared-assets/models/Astronaut.glb" ar ar-modes="webxr scene-viewer quick-look" ar-scale="auto" camera-controls alt="A 3D model of an astronaut" skybox-image="../../shared-assets/environments/aircraft_workshop_01_1k.hdr" ios-src="../../shared-assets/models/Astronaut.usdz"></model-viewer>

Ref. https://modelviewer.dev/examples/augmentedreality/#ar

前述の通り iOS 向けであれば AR Quick Look でも実現できますが、AR Quick Look は USDZ にしか対応していないため、Android ユーザーは見れません。この <model-viewer> であれば Android ユーザー向けに GLB を、iPhone ユーザー向けに USDZ を用意することで、環境によって 3D モデルをライブラリ側で出し分けてくれるので、とても便利です。

現場からは以上です！