- ブラジルを拠点とする Fastcommerce のクライアントでは、AMP 200 万ページで、非 AMP ページと比較してモバイルのコンバージョン率が 15% 向上しています。
- WompMobile は e コマース ウェブサイト向けの効果的なモバイル体験を構築し、AMP ページによってコンバージョン率が 105% 向上し、直帰率が 31% 減少しました。
- 中東およびアジア太平洋地域最大の旅行サービスサイトである Wego.com は、AMP 版の主要ランディング ページを作成したことにより、パートナー コンバージョン率が 95% 向上し、広告コンバージョン率が 3 倍増加しました。
- フランスのオーガニック食品小売りサイトの Greenweez では、約半分のモバイル トラフィックが AMP で処理されており、2017 年 1～3 月の間に、モバイル コンバージョン率が 80% 向上し、モバイル獲得単価が 66% 低下しました。
AMP を実装すると、
ページがほぼ一瞬で読み込まれるため、ユーザーとの最初のインタラクションが理想的なものになります。しかし、e コマース体験で重要なことは速度だけではありません。AMP は e コマース体験をさらに進化させるために理想的なパートナーです。Greenweez や Fastcommerce に匹敵する成功を望む方のために、AMP を活用した e コマースで何ができるのか、その概要を次にご紹介します。
基本
まずは、e コマースサイトの基本事項を確認しておきましょう。AMPbyExample ウェブサイトにある
e コマース向け AMP のスタートガイドをご覧ください。製品ページ、製品カテゴリページ、購入 / 支払いフローの構築を開始するためのサンドボックス サンプルがあります。
レビュー、
写真、
製品のカスタマイズなど、製品の購入を判断するために必要なすべての要素をユーザーに提供します。
AMP がサポートする主要な機能の一部:
- 動的コンテンツ: ユーザーに常に最新の情報を表示するために、amp-list と amp-bind を使用して、ページで最新のコンテンツを取得してレンダリングします。
- 購入 / 支払い: ショッピング カートを実装して、AMP ページ内から購入フローを直接開始できます。ウェブサイトで Payment Request API や amp-form を使用するか、またはユーザーを非 AMP ページにリダイレクトするかは自由に設定できます。WompMobile は今年の AMP カンファレンスでその支払い実装例を紹介しました。リンク先の動画でご覧いただけます。
- パーソナライズ / ログイン: amp-list を使用すると、おすすめの製品を表示したり、ショッピング カートの状態を保存したりして、ユーザーにパーソナライズされたコンテンツを提供できます。
- A/B テスト: ユーザーに対して最適な方法を見つけるために、amp-experiment を使用して、AMP ページでユーザー エクスペリエンスの実験ができます。
ネイティブでサポートされていない機能を実装する場合は、
amp-iframe を使用して、コンテンツを埋め込んだり、チャットアプリ、マップなどのサードパーティ機能を組み込むことができます。また必要に応じて、ウェブサイトに非 AMP ページを表示することもできます。
amp-bind
amp-bind を使用すると、このような多くの魅力的で便利な e コマース体験が実現します。このインタラクティブ モデルによって、ユーザー アクションとドキュメントのさまざまな状態を関連付けることができます。
今年の 7 月に、amp-bind がもたらす
新たな可能性の例を多数ご紹介しました。e コマースで重要となる追加の要素を次にいくつか示します。
次の例では、フィルタリングと並べ替えが組み込まれています。
ご説明したように、ここで取り上げた機能以外にも多くの機能が見つかるはずです。有用な機能を探し、見つけた機能を
コミュニティで共有してください。
AMP + PWA
中東最大の旅行サービスサイトである Wego では、AMP を活用してランディング ページを再構築し、PWA を活用してよりインタラクティブなページを作成した結果、サイトのパフォーマンスが
大幅に向上しました。AMP ページでは速度が 10 倍以上向上し、オーガニック ページアクセスが 12% 増加しました。
PWA はアプリと同じような魅力的な機能をサポートしていますが、ユーザーがサイトを最初に読み込んだときは、PWA に必要な Service Worker を利用できません。AMP を活用すると、画面の背後で PWA を読み込むことができる最適なエントリ ポイントをサイトに追加できます。Wego は AMP と PWA を実装することにより、コンバージョン率を 95% 向上させ、サイトへの訪問者を 26% 増やすことに成功しました。
このように、特に e コマースサイトではこの組み合わせが効果を発揮します。AMP はサイトの最初のページの読み込みを大幅に高速化し、PWA はそれ以降のクリックで発生する読み込み時間を短縮します。これは、コンバージョン ファネルが複数のページにまたがる場合に特に有用です。
さらに PWA は、ホーム画面への追加ボタン、プッシュ通知、ネットワークの条件が悪いときの信頼性、ユーザーが完全にオフラインであっても使用できる機能など、アプリと同じような魅力的な機能もサポートします。
AMP + PWA サイトを実装する方法の詳細については、この
チュートリアル ビデオと
ガイドをご覧ください。
アナリティクス
amp-analytics は、サードパーティのアナリティクス ツールと独自の社内アナリティクス ソリューションの両方をサポートします。Adobe Analytics、Google アナリティクス、Clicky Web Analytics など、amp-analytics コンポーネントと併用可能な構成が組み込まれているすべてのサードパーティ ツールのリストについては、
こちらをご覧ください。社内で実装する場合は、
アナリティクスに関する AMP By Example をご覧ください。また、今年の AMP カンファレンスでは、
eBay や
Pinterest などの企業が、AMP 向けアナリティクスの導入方法について詳しく説明しました。リンク先の動画をご覧ください。
* * *
AMP Project は、e コマースサイト向けにこの超高速フォーマットの活用を支援しています。今後数か月のうちに、AMPstart.com で新しい e コマース テンプレートなどの追加リソースをご紹介していきます。
作業したりフィードバックを寄せてくださっている AMP 開発コミュニティの方々に感謝いたします。いつものように、問題や機能リクエストがありましたら遠慮なくお知らせください。
