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

このドキュメントでは、Aerial View の利用を開始するためのさまざまな設計パターンとアイデアについて説明します。Aerial View を顧客に提示する方法は、製品に対する十分なエンゲージメントが得られ、顧客がその価値を実感できるよう、慎重に検討する必要があります。

Aerial View を使用すると、視覚的に魅力的なコンポーネントをウェブサイトに追加し、物件とその周囲の鳥瞰図を表示できます。

ユーザーは物件を 3D で確認することで、その場所やサイズをより正確に把握できます。また、道路、水域、山、公園などの付近の対象物に加えて、プール、別荘、広い庭など、宿泊施設の特徴を強調することもできます。

エンゲージメントの向上

お客様に驚きを与える要素となる Aerial View のメリットを最大限に活用するには、コンテンツをできるだけ簡単に見つけられるようにする必要があります。このセクションでは、Aerial View でこれを実現するための実装設計パターンについて説明します。

今すぐお試しください: Google Cloud コンソールにアクセスして、航空写真を有効にします。

動画の向き

Aerial View 動画が読み込まれるデバイスの画面の向きを考慮することが重要です。モバイル デバイスで横向きの動画を表示すると、特に全画面表示でユーザー エクスペリエンスが低下する可能性があります。デバイスの正しくないアスペクト比で動画を表示すると、画面領域の大部分が無駄になります。

航空写真動画は、横向きと縦向きで提供されます。

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

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

埋め込みホバーカード

複数の物件を物件検索ビューに表示する場合は、埋め込みホバーカードを追加して、航空写真動画を表示し、住所や価格などの物件に関する追加情報を重ねて表示すると便利です。これにより、ユーザーはクリックして宿泊施設の詳細ページを表示しなくても、宿泊施設の概要をすばやく簡単に把握できます。

次の例は、マウンテンビューの Googleplex 複合施設を表すマーカーを示しています。このマーカーにカーソルを合わせると、ホバーカードが表示され、宿泊施設の鳥瞰図動画が表示されます。

マーカーと埋め込みホバーカードの両方に onClick イベントを追加すると、ユーザーを宿泊施設の詳細ページに誘導できます。これにより、ユーザーは宿泊施設について詳しく把握し、自分に合っているかどうかを簡単に判断できるようになります。

物件のストーリーのような体験を作り出す

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

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

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

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

ショーケース プロパティでストーリーのようなエクスペリエンスを提供することで、見込み顧客の注目を集めることができます。

ページの読み込み時に空中写真を開始する

Google の UX 調査では、デフォルトで 3D ビューが読み込まれたときに最もユーザー エンゲージメントが高くなることがわかっています。これは新しい魅力的なフォーム ファクタであるため、ユーザーが宿泊施設の詳細を表示したいと思ったらすぐに読み込みたいものです。費用について考えると、API から航空写真動画を取得する場合は料金が発生します。動画がリクエストされたら、自動再生を検討して、ユーザーにメリットを提供しましょう。

アンチパターン: Aerial View をボタンの背後に非表示にすると、ユーザーは 3D ビューを表示するために追加の手順を行わなければならなくなるため、アンチパターンとみなされます。これはストレスを感じるだけでなく、3D ビューのメリットを逃したり、Aerial View を静的コンテンツと間違えたりする原因にもなります。

お客様が宿泊施設の詳細を表示したい場合は、デフォルトで航空写真を読み込むことをおすすめします。これにより、優れたユーザー エクスペリエンスを提供でき、ユーザーは宿泊施設について十分な情報に基づいて判断できるようになります。自動再生のエクスペリエンスを設計する際は、Aerial View 動画は 30 MB を超えており、一部のユーザーでは読み込みに時間がかかる可能性があることに注意してください。

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

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

ボタンのデザイン

ボタンを使用して航空写真にアクセスする場合は、次の点を考慮してください。

• 位置情報: ボタンは、プロパティの位置情報に関連していることをユーザーに認識させるため、他のマッピング関連のボタンとグループ化する必要があります。
• 切り替え: 動画への遷移はスムーズでシームレスにする必要があります。 ページに画像、地図、ストリートビューを表示するセクションがすでにある場合は、Aerial View の動画が同じセクションに表示されます。
• ハイライト表示: ページに新しく追加される機能であるため、ボタンを「新機能」タグや動画の静止画像のサムネイルでハイライト表示することをおすすめします。
• Emphasis: ボタンを押すと顕著なアクションが実行されるため、ボタンは中程度または高の強調でデザインする必要があります。Google マテリアル デザインには、さまざまな強調レベルのボタンを設計する方法に関するガイダンスが記載されています。

効果的な航空写真ボタンを設計するためのその他のヒントを次に示します。

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

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

動画の読み込み

接続速度が遅い場合は、動画の静止画像のプレビューを表示し、クリックなどのユーザー操作で完全なエクスペリエンスを読み込むようにするとよいでしょう。航空写真動画とともに、この目的に使用できるサムネイルにもアクセスできます。

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

ロゴのアトリビューション

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

まとめ

この記事が、ユーザー エンゲージメントを高めながらウェブサイトに Aerial View を実装する方法について考えるきっかけとなれば幸いです。

ユーザーがコンテンツを見つける方法と、コンテンツを表示するのに最も適した形式について考える必要があります。動画を再生するデバイスの種類（特に画面の向き）や、ユーザーの接続速度も考慮することをおすすめします。

次のステップ

関連情報:

• 航空写真での住所入力の精度を向上させる
• Aerial View プロダクトのドキュメント

寄稿者

この記事は Google が管理します。以下の寄稿者が執筆しました。

主な作成者:

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