このドキュメントでは、 Aerial View の導入を開始するためのさまざまな設計パターンとアイデアについて説明します。Aerial View をユーザーにどのように提示するかは、プロダクトのエンゲージメントを高いレベルで維持し、ユーザーにその価値を理解してもらうために、慎重に検討する必要があります。
Aerial View は、物件とその周辺の鳥瞰図を表示することで、ウェブサイトに視覚的に魅力的な要素を追加します。
ユーザーは物件を 3D で見ることで、物件の位置とサイズをより正確に把握できます。また、道路、水域、山、公園などの周辺の施設に加えて、プール、別棟、広い庭などの物件の特長を強調するのにも役立ちます。
エンゲージメントを高める
Aerial View はユーザーにとって魅力的な要素となりますが、そのメリットを最大限に引き出すには、コンテンツをできるだけ見つけやすくする必要があります。このセクションでは、これを実現するための Aerial View の実装設計パターンについて説明します。
動画の向き
Aerial View の動画が読み込まれるデバイスの画面の向きを考慮することが重要です。横向きの動画をモバイル デバイス、特に全画面表示で表示すると、ユーザー エクスペリエンスが低下する可能性があります。デバイスに誤ったアスペクト比で動画を表示すると、画面の大部分が無駄になります。
Aerial View の動画は、横向きと縦向き で提供されます。
以下に、モバイル デバイスで Aerial View を実行した場合の推奨される画面の向きと推奨されない画面の向きの違いの例を示します。
埋め込みホバーカード
物件検索ビューに複数の物件を表示する場合は、埋め込みホバーカードを追加して鳥瞰図動画を表示すると便利です。このホバーカードには、住所や価格などの物件に関する追加情報が重ねて表示されます。これにより、ユーザーは物件詳細ページをクリックしなくても、物件の概要をすばやく簡単に把握できます。
下の例は、マウンテンビューの Googleplex コンプレックスを表すマーカーを示しています。このマーカーにカーソルを合わせると、ホバーカードが表示され、物件の Aerial View の動画が表示されます。
マーカーと埋め込みホバーカードの両方に onClick イベントを追加して、ユーザーを物件詳細ページに移動させることができます。これにより、ユーザーは物件の詳細を簡単に確認し、自分に合っているかどうかを判断できます。
物件のストーリーのようなエクスペリエンスを作成する
購入を検討している購入者に真に没入感のあるエクスペリエンスを提供したい場合は、写真と鳥瞰図動画を組み合わせたストーリーのようなエクスペリエンスで物件を紹介できます。これは、HTML、CSS、JavaScript を組み合わせて、カルーセルと同様の方法で作成できます。
![縦向きモードで、ストーリーのようなエクスペリエンスで航空写真動画が表示されている例を示すアニメーション GIF。2 枚目のスライドに航空写真の動画が表示され、下部のボタンに [建物を表示] と表示されています。](https://developers.google.com/static/maps/architecture/engage-customers-with-aerial-view/images/AV_story.gif?hl=ja)
上記の例では、スライドの 1 つに鳥瞰図動画を含め、下部に物件の詳細を表示するリンクを追加しています。このボタンをクリックすると、物件詳細ページに移動します。
仕組みは次のとおりです。
- 写真を選択します。物件の最も優れた特長を強調するさまざまな写真を選択します。
- 鳥瞰図動画を作成します。
- 写真と動画を組み合わせてストーリーを作成します。
- ストーリーを共有します。ウェブサイトやメール マーケティング キャンペーンで、購入を検討しているユーザーとストーリーを共有します。
物件のストーリーのようなエクスペリエンスを作成することで、購入を検討しているユーザーの関心を集めることができます。
ページ読み込み時に Aerial View を開始する
Google の UX 調査では、3D ビューがデフォルトで読み込まれる場合に、ユーザーのエンゲージメントが最も高くなることがわかっています。これは新しい魅力的なフォーム ファクタであるため、ユーザーが物件の詳細を表示したいときにすぐに読み込む必要があります。費用についてですが、API から鳥瞰図動画を取得する場合は、料金が発生します。動画がリクエストされたら、自動再生を検討して、ユーザーがメリットを実感できるようにします。
アンチパターン: Aerial View をボタンの背後に隠すのはアンチパターンと見なされます。ユーザーが 3D ビューを表示するために追加の手順を踏む必要があるためです。これは不満につながる可能性があり、3D ビューのメリットを見逃したり、Aerial View を静的コンテンツと誤解したりする可能性があります。
ユーザーが物件の詳細を表示したいときに、Aerial View をデフォルトで読み込むことをおすすめします。これにより、優れたユーザー エクスペリエンスを提供し、物件について十分な情報に基づいて判断できるようになります。自動再生エクスペリエンスを設計する際は、鳥瞰図動画が 30 MB 以上あり、一部のユーザーでは読み込みに時間がかかる可能性があることに注意してください。
ページに画像カルーセルが含まれている場合は、鳥瞰図動画を先頭のアイテムとして含めることで、3D エクスペリエンスを既存のウェブサイトのデザインに簡単に統合できます。
3D ビューを読み込むボタンを配置するのは簡単ですが、エンゲージメントが低下する可能性があります。Google マップでは、3D ビューがデフォルトで読み込まれます。たとえば、エンパイア ステート ビルディングを検索すると、3D ビューが自動的に読み込まれ、3D ビューを表示したまま画像の一部を確認できます。これは、ユーザーに没入感のある魅力的なエクスペリエンスを提供するための優れた方法です。
ボタンのデザイン
ボタンを使用して Aerial View にアクセスする場合は、次の点を考慮することが重要です。
- 場所: ボタンは、他の地図関連の ボタンとグループ化して、物件の位置に関連していることをユーザーに知らせる必要があります。
- トランジション: 動画へのトランジションはスムーズでシームレスである必要があります。 ページに画像、地図、ストリートビューを表示するセクションがすでに存在する場合は、鳥瞰図動画を同じセクションに表示する必要があります。
- ハイライト: これはページへの新しい追加となるため、「新機能」タグや動画の静止画サムネイルでボタンをハイライトすると便利です。
- 強調: ボタンを押すと重要なアクションが実行されるため、ボタンは中程度または高い強調でデザインする必要があります。Google Material Design には、さまざまなレベルの 強調でボタンをデザインする方法に関するガイダンスがあります。
効果的な Aerial View ボタンをデザインするためのその他のヒントを以下に示します。
- 明確で簡潔な言葉を使用します。ボタンには、その機能がわかるように明確なラベルを付ける必要があります。
- 大きく読みやすいフォントを使用します。ボタンは、ユーザーが簡単に確認してクリックできる大きさにする必要があります。
- 対照的な色を使用します。ボタンは、周囲のテキストや背景とは異なる色にして、目立つようにする必要があります。
- 行動を促すフレーズを使用します。ボタンには、「Aerial View を見る」や「動画を見る」などの明確な行動を促すフレーズを含める必要があります。
表示に関する考慮事項
動画の読み込み
動画の静止画プレビューを表示し、onClick などのユーザー操作で完全なエクスペリエンスを読み込むことで、接続速度が遅い場合を考慮できます。鳥瞰図動画とともに、これに使用できるサムネイルにもアクセスできます。
また、さまざまな解像度の動画にアクセスできるため、接続速度に応じて、ユーザーがエクスペリエンスの読み込みを待つ時間を最小限に抑えるために戦略的に使用できます。
ロゴの帰属表示
Aerial View を実装する場合は、ロゴの帰属表示など、すべての利用規約を遵守する必要があります。詳細については、こちらの ページをご覧ください。
まとめ
この記事が、ユーザー エンゲージメントの高い Aerial View をウェブサイトに実装する方法を考えるきっかけになれば幸いです。
ユーザーがコンテンツをどのように見つけるか、どのような形式で表示するのが最も適切かを考えることが重要です。また、動画が再生されるデバイスの種類（特に画面の向き）とユーザーの接続速度を考慮することも重要です。
次のステップ
おすすめのドキュメント:
コントリビューター
この記事は Google によって管理されています。以下に、この記事の作成に協力してくれた寄稿者を示します。
主な作成者:
Henrik Valve | Google Maps Platform ソリューション エンジニア