航空写真で顧客を引きつける

このドキュメントでは、Aerial View を使い始めるためのさまざまな設計パターンとアイデアについて説明します。Aerial View をお客様に提示する方法を慎重に検討して、プロダクトとの良好なエンゲージメントを実現し、その価値をお客様に実感してもらう必要があります。

Aerial View を使用すると、視覚に訴えるコンポーネントがウェブサイトに追加され、物件とその周辺の鳥瞰図が表示されます。

物件を 3D で見ると、立地や広さがわかりやすくなります。また、近隣の対象物（道路、水域、山、公園など）に加えて、プール、別館、広い庭などの宿泊施設の対象物を強調する場合にも役立ちます。

エンゲージメントの向上

Aerial View はお客様にとって驚くべき要素であり、そのメリットをすべて確認するには、コンテンツができるだけ簡単に見つけられる必要があります。このセクションでは、この目的を達成するための Aerial View の実装設計パターンについて説明します。

今すぐ試す: Google Cloud コンソールにアクセスし、Aerial View を有効にします。

動画の向き

Aerial View 動画を読み込むデバイスの画面の向きを考慮することが重要です。特に全画面表示では、モバイル デバイスで横向きの動画を表示すると、ユーザー エクスペリエンスが低下することがあります。デバイスの不適切なアスペクト比で動画を表示すると、画面内のかなりの量が無駄になります。

Aerial View の動画は横向きと縦向きで提供されます。

ヒント: 画面: 画面の向きのプロパティを使用すると、デバイスの画面の向きが変化したことを検出し、その向きで動画を表示できます。

以下に、Aerial View をモバイル デバイスで推奨の向きと推奨しない向きで実行した場合の違いの例を示します。

埋め込みホバーカード

宿泊施設検索ビューに複数の宿泊施設を表示する場合は、埋め込みのホバーカードを追加して Aerial View の動画を表示し、その上に住所や料金などの宿泊施設に関する追加情報を表示することをおすすめします。これにより、ユーザーはクリックしてプロパティの詳細ページまで移動することなく、宿泊施設の概要をすばやく簡単に把握できます。

以下の例は、マウンテンビューの Googleplex 複合施設を表すマーカーを示しています。このマーカーにカーソルを合わせると、ホバーカードが表示され、物件の Aerial View 動画を確認できます。

マーカーと埋め込みホバーカードの両方に onClick イベントを追加して、プロパティの詳細ページにユーザーを誘導できます。これにより、ユーザーは物件の詳細を確認し、適切な物件かどうかを判断しやすくなります。

プロパティのストーリーのようなエクスペリエンスを作成

潜在顧客に真に没入感のあるエクスペリエンスを構築したい場合は、写真と Aerial View 動画を組み合わせたストーリーのようなエクスペリエンスで物件を紹介できます。これは、HTML、CSS、JavaScript を組み合わせて画像カルーセルと同様の方法で作成できます。

上記の例では、1 つのスライドに Aerial View の動画を含めています。下部には、宿泊施設の詳細を表示するリンクがあります。このボタンをクリックすると、プロパティの詳細ページが表示されます。

仕組みは次のとおりです。

1. 写真を選択します。宿泊施設の最も良い特徴が強調されているさまざまな写真を選択します。
2. Aerial View の動画を作成します。
3. 写真と動画を組み合わせてストーリーを作成できます。
4. ストーリーを共有しましょう。ウェブサイトやメール マーケティング キャンペーンで、購入を検討しているユーザーにストーリーを共有します。

ショーケース プロパティにストーリーのようなエクスペリエンスを構築することで、潜在的な購入者の関心を引き付けることができます。

ページ読み込み時に Aerial View を開始する

Google の UX 調査では、デフォルトで 3D ビューが読み込まれたときにユーザー エンゲージメントが最大になることがわかっています。これは新しくて興味深いフォーム ファクタであるため、ユーザーが物件の詳細を確認したいと思ったらすぐに読み込む必要があります。費用について考えると、API から Aerial View 動画を取得する場合は料金が発生します。動画がリクエストされたら、ユーザーがメリットを享受できるように、自動再生を検討してください。

アンチパターン: Aerial View をボタンの背後に隠すと、ユーザーが 3D ビューを表示するために余分な操作を行わなければならなくなるため、アンチパターンとみなされます。これはストレスを感じるだけでなく、3D ビューのメリットを失ったり、Aerial View を静的コンテンツと取り違えたりする可能性もあります。

顧客が物件の詳細を表示する場合は、デフォルトで Aerial View を読み込むことをおすすめします。これによって優れたユーザー エクスペリエンスが得られ、ユーザーは十分な情報に基づいて物件を決めることができます。自動再生機能を設計する際は、Aerial View 動画が 30 MB 以上であることと、ユーザーによっては読み込みに時間がかかる可能性があることに留意してください。

ページの一部として画像カルーセルを使用する場合、Aerial View 動画をリードアイテムとして含めることができます。これにより、3D エクスペリエンスを既存のウェブサイトのデザインに簡単に統合できます。

3D ビューを読み込むボタンを配置するのは簡単ですが、エンゲージメントが低下する可能性があります。Google マップはデフォルトで 3D ビューを読み込みます。たとえば、エンパイア ステート ビルを検索すると、3D ビューが自動的に読み込まれ、3D ビューを表示したまま画像の一部を見ることができます。これは、ユーザーの没入感と魅力を高める優れた方法です。

ボタンのデザイン

ボタンを使用して Aerial View にアクセスする場合は、次の点を考慮することが重要です。

• 場所: ボタンは、宿泊施設の場所に関連していることをユーザーが把握できるように、他の地図関連のボタンとグループ化する必要があります。
• 移行: 動画への遷移はスムーズかつシームレスにする必要があります。 画像、地図、ストリートビューを表示するセクションがすでにページに存在する場合、Aerial View の動画は同じセクションに表示されます。
• ハイライト表示: これはページに新たに追加された機能であるため、「新機能」タグまたは動画の静止画像のサムネイルでボタンをハイライト表示すると便利です。
• 強調: ボタンを押すと顕著なアクションが実行されるため、中または高の強調をボタンにデザインします。Google マテリアル デザインには、さまざまな強調レベルでボタンを設計する方法についてのガイダンスが記載されています。

効果的な Aerial View ボタンを設計するためのその他のヒントをいくつか紹介します。

• 明確で簡潔な表現を使用します。ボタンにはわかりやすいラベルを付けてください
• 大きく読みやすいフォントを使用します。ボタンの大きさは、ユーザーが見やすく、クリックしやすいものにしてください。
• コントラストの強い色を使用します。ボタンは、周囲のテキストや背景とは異なる色にして目立つようにする必要があります。
• 行動を促すフレーズを使用する。ボタンには、「Aerial View を見る」や「動画を見る」など、行動を促す明確なフレーズを含める必要があります。

ディスプレイに関する考慮事項

動画を読み込んでいます

動画の静止画像プレビューを表示し、onClick などのユーザー操作ですべてのエクスペリエンスを読み込むなど、接続速度が遅いことを考慮に入れることをおすすめします。Aerial View 動画のほか、この操作を可能にするサムネイルにもアクセスできます。

また、さまざまな解像度で動画にアクセスできるため、それらを戦略的に使用することで、さまざまな接続速度でユーザーがエクスペリエンスの読み込みを待つ時間を最小限に抑えることができます。

ロゴの帰属表示

Aerial View を実装する場合は、ロゴの帰属表示を含むすべての用語を遵守する必要があります。詳しくは、こちらのページをご覧ください。

おわりに

この記事が、高いユーザー エンゲージメントでウェブサイトに Aerial View を実装する方法について検討する際のヒントになれば幸いです。

ユーザーがコンテンツをどのように見つけ、どの形式で表示するのが最も適切なのかについて考えることが重要です。動画を再生するデバイスタイプ（特に画面の向き、ユーザーの接続速度）を考慮することもおすすめします。

次のステップ

関連資料:

• Aerial View での住所入力の精度を高める
• Aerial View プロダクトのドキュメント

協力者

この記事は Google が管理しています。最初に書いたのは以下の寄稿者です。

主任執筆者:

Henrik Valve | Google Maps Platform ソリューション エンジニア