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

このドキュメントでは、Aerial View の利用を開始するためのさまざまな設計パターンとアイデアについて説明します。お客様にエアリアル ビューをどのように提示するかは、プロダクトのエンゲージメントを高め、お客様にその価値を認識していただくために慎重に検討する必要があります。

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

ユーザーは物件を 3D で確認することで、その場所やサイズをより正確に把握できます。また、道路、水域、山、公園などの近くの対象物だけでなく、プール、別棟、広い庭などの物件の特徴を強調するのにも役立ちます。

エンゲージメントの向上

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

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

動画の向き

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

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

ヒント: Screen: orientation プロパティを使用すると、デバイスの画面の向きが変更されたときに検出し、関連する向きで動画を表示できます。

以下に、モバイル デバイスで航空写真を撮影する際の、推奨される向きと推奨されない向きの違いの例を示します。

埋め込みホバーカード

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

次の例は、マウンテンビューの Googleplex 複合施設を表すマーカーを示しています。このマーカーにカーソルを合わせると、ホバーカードが表示され、プロパティの航空写真動画が表示されます。

マーカーと埋め込みホバーカードの両方にonClick イベントを追加して、ユーザーを物件の詳細ページに移動させることができます。これにより、ユーザーは宿泊施設の詳細を確認して、自分に合っているかどうかを簡単に判断できます。

宿泊施設にストーリーのような体験を提供する

購入者に没入感のある体験を提供したい場合は、写真と航空写真動画を組み合わせたストーリーのようなエクスペリエンスで物件を紹介します。これは、HTML、CSS、JavaScript を組み合わせて、画像カルーセルと同様に作成できます。

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

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

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

ショーケース プロパティにストーリーのような体験を作成することで、見込み顧客の注目を集めることができます。

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

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

アンチパターン: ボタンの背後に航空写真を非表示にすることは、3D ビューを表示するためにユーザーが余分な手順を踏まなければならないため、アンチパターンと見なされます。ユーザーは不満を感じ、3D ビューのメリットを享受できなかったり、航空写真が静的コンテンツと誤解されたりする可能性があります。

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

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

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

ボタンのデザイン

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

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

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

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

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

動画の読み込み

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

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

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

航空写真を実装する際は、ロゴの帰属表示など、すべての利用規約に準拠する必要があります。詳しくは、こちらのページをご覧ください。

まとめ

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

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

次のステップ

おすすめの関連情報:

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

寄与者

この記事は Google が管理しています。以下は、このページの作成者です。

主な作成者:

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