エンゲージメントを最大化するためのAMPストーリーの3つのメリットと8つのベストプラクティス

AMPオープンソースイニシアチブは、より高速なモバイルWebエクスペリエンスへの道を開きました。 AMP形式の採用により、モバイルWebページの速度が向上しただけでなく、コンバージョン率も向上しました。 AMPページは、ウェブサイトのトラフィックを10％増加させ、売り上げのコンバージョンを20％増加させるのに役立ちました。

これらの印象的な数字があっても、フォーマットには1つ欠けていました。それは、ストーリーベースの没入型Webページエクスペリエンスです。 AMPストーリーは、この目的のために特別に立ち上げられました。

AMPストーリーは、Snapchat、Instagram、Facebookのストーリーと同じ形式に従い、ブランドが視覚的に印象的なコンテンツを作成して、ストーリーテリングでユーザーの注意を引くことができます。

この投稿では、AMPストーリーについて知っておくべきすべてのこと、つまりメリット、ストーリーを作成するためのコンポーネント、例、フォーマットが広告に適用されるかどうかについて説明します。

AMPストーリーとは何ですか？

AMPストーリーは、オープンウェブ向けの視覚的なストーリーテリング形式です。 ストーリーにより、読者はタップ可能なフルスクリーンコンテンツに没頭することができます。 このフォーマットにより、パブリッシャーとマーケターは、高速でオープンでユーザーファーストのビジュアルコンテンツを作成できます。

このフォーマットは当初、Vox Media、CNN、Mashable、WashingtonPostを含む8つの出版社で発売されました。 このフォーマットがこれらのブランドの注目を集めた後、すべてのAMP開発者に公開されました。

ユーザーはモバイルデバイスで多くのコンテンツを表示します。この形式では、太字のテキスト、画像、動画、グラフィックを使用して、モバイルユーザーの注意をできるだけ早く引き付け、負担のかからない方法でコンテンツを利用できるようにします。

AMPストーリーは、Google画像検索、Discover、Search、Newsに表示されます。

縦向きの形式は、画面の大部分を占める背の高い画像を特徴とするストーリーカードとともにGoogleフィードで自然に伝えられます。 ストーリーには「注目のビジュアルストーリー」というラベルが付いています。ストーリーをタップすると、AMPストーリーの標準のChromeカスタムタブが開きます。

右上のオーバーフローメニューを使用すると、標準のブラウザコントロールにアクセスできます。また、Googleの「コレクションに追加」機能もアプリバーにあります。

AMPストーリーは、ホーム画面の左側にあるGoogleフィードとGoogleアプリに表示されます。

タップしてGoogle検索結果でAMPストーリーを開くと、次のように表示されます。

AMPストーリーのメリット

他のウェブページと同様に、ブランドやサイト運営者はウェブサイトでAMPストーリーHTMLをホストし、他のページからリンクして視聴回数を増やすことができます。 検出プラットフォームは、事前レンダリング可能なページ、最適化されたビデオの読み込み、キャッシュなどの手法を使用して、ユーザーへの配信を最適化します。

Google AMPストーリー形式には、プリセットの柔軟なレイアウトテンプレート、標準化されたUIコントロール、フォローアップコンテンツを共有および追加するためのコンポーネントが付属しています。

次の理由から、AMPストーリーの作成を検討する必要があります。

• 高速： AMPストーリーはすばやく読み込まれ、ユーザーにスムーズなエクスペリエンスを提供します。
• 没入型：ストーリーは拡大してユーザーの画面全体に表示されるため、没入型のエクスペリエンスを実現します。 タップ可能なフォーマットは、視聴者を引き付けるデザインの柔軟性を備えたストーリーテリングの創造的な機会を提供します。
• オープン： AMPストーリーはオープンウェブの一部であり、単一のエコシステムに限定されることなく、ウェブサイトやアプリ間で簡単に共有および埋め込むことができます。

最後に、ストーリーはAMPのコンポーネントライブラリの上に構築されているため、分析などの機能をサポートしており、AMPストーリーのユーザーデータを収集して分析できます。

AMPストーリーの作成

AMPストーリーを正常に作成するには、最初にそのストーリーを構成する部分を理解する必要があります。

AMPストーリーは、基本的なHTML要素とAMP要素を含む個々のレイヤーで構成される個々のページで構成されています。

これらの各部分はAMPコンポーネントに変換され、ストーリーは「amp-story」で表され、ページは「amp-story-page」で表され、レイヤーは「amp-story-grid-layer」で表されます。 ：

AMPストーリーを構成するものの概要を説明したので、先に進む前に前提条件を見てみましょう。

1. HTML、CSS、およびJavaScriptの基本的な知識。
2. AMPのコアコンセプトの基本的な理解。
3. お好みのブラウザ。
4. お好みのテキストエディタ。

これらを設定したら、このチュートリアルに従って最初のストーリーを作成します。

ベストプラクティスと仕様

ユーザーの注意を引くためにAMPストーリーを作成するときは、次のベストプラクティスを考慮してください。

背景色を選択してください

背景色を選択すると、ネットワークの状態が悪い場合に優れたフォールバックユーザーエクスペリエンスを提供します。 背景色は、ページの背景アセットの主要な色を表す必要があるため、ページ自体の画像とのスムーズな移行を提供します。

テキストの読みやすさを確保する

この点は、特にテキストオーバーレイを指します。 ユーザーエクスペリエンスが向上するため、背景色と対照的なフォントの色を選択してください。 もう1つできることは、テキストと画像の間にグラデーションオーバーレイを追加して、コントラストを追加することです。

最小限のテキストを使用する

エンゲージメントを最大化し、各単語が確実に読まれるようにするには、ページごとに1つまたは2つ以上の文を追加しないでください。

音声がなくても意味のあるものにする

ストーリーに音声が含まれている場合は、多くのユーザーが外出先でAMPストーリーを表示し、ミュートで視聴することを選択する可能性があるため、音声がなくてもストーリーが意味のあるものであることを確認してください。 音声がオフのときにメッセージを伝えるためにキャプションを追加することもできます。

ビデオのポスター属性を指定します

ポスターは、ビデオがダウンロードされるまでUIに表示される画像です。 これは通常、ビデオの最初のフレームですが、どの画像でも機能しますが、ビデオを代表し、スムーズな移行を可能にする画像を選択する必要があります。 ポスター画像の推奨寸法は、720p（720w x 1280h）です。

ビデオのソースを指定する

アンプビデオのソースを指定するときは、src属性の代わりに子要素を使用してください。 子要素を使用することで、ビデオタイプを指定したり、ビデオソースを追加したりできます。 子要素で、「type」属性を使用してMIMEタイプを指定します。

最適なパフォーマンスを得るには、4MB以下のビデオを提供することを目指してください。 長い動画の場合は、動画を複数のページに分割することを検討してください。

ストーリービデオは常に垂直（つまり、縦向き）で、予想されるアスペクト比は16：9です。 ビデオストリーミングタイプの推奨解像度を使用します。

1. MP4ビデオの場合は、H.264を使用します。
2. WEBMビデオの場合は、VP9を使用します。
3. HLSまたはDASHビデオの場合は、H.264を使用します。

ビデオを最適化する

ビデオをエンコードし、エンコード中にビデオの品質を調整するために使用できるさまざまなツールがありますが、次のビデオ最適化を使用することをお勧めします。

ビデオが終わったら次のページに進んでください

ビデオの再生が終了した後、あるページから別のページに自動的に進むには、auto-advance-after属性の値を、ビデオの予想される長さではなく、ビデオのIDに設定します。

AMPストーリーの例

AMPストーリーは、視聴者にメッセージを伝えることを目的としています。 成功するAMPストーリーには、高品質のアセットが含まれ、視覚的に豊富で、ユーザー関連情報を共有します。

ワシントンポスト

ワシントンポストのAMPストーリーは、ハリケーンマイケルの壊滅的な被害を中心に展開しています。

有線

WiredのAMPストーリーは、ユーザーをアイスクリーム博物館のツアーに連れて行きます。

ピープルマガジン

ピープル誌のAMPストーリーは、王室の結婚式を特集しています。

コンテンツのトーンに関係なく、AMPストーリーを使用して、視覚的にインパクトのある方法でメッセージを伝えることができます。

AMPストーリーの広告

AMPストーリーページに広告を配信する方法は次のとおりです。

AMPストーリーは現在、次の2種類の広告フォーマットをサポートしています。

1. 単一ページ広告：各単一ページ広告には事前定義されたCTAボタンがあり、理想的には、訪問者をクリック後のランディングページに誘導します。
2. スポンサーストーリー広告：この広告タイプはスタンドアロンのマルチストーリーです。 スポンサー記事のように機能し、サイト運営者は1ページの広告のCTAURLボタンからトラフィックを増やすことができます。

AMPストーリーには、ビジュアルレイアウトのより豊富なコンポーネントサポートを可能にする新しいブックエンド機能もあります。 広告にCTAリンク、テキストボックス、縦向きカードと横向きカードを追加できます。

以下は、CNNAMPストーリー内のGooglePixel2シングルページ広告の例です。

他のすべての広告と同様に、クリック後のランディングページを最適化するには、AMPストーリーとCTAボタンを使用して、訪問者を忙しいホームページではなく、クリック後の専用のランディングページに誘導します。

AMPストーリーで魅惑的なビジュアル体験を作成する

AMPストーリー形式を使用すると、視聴者に超高速で視覚的に豊かなストーリーテリング体験を作成できます。 このフォーマットはオープンソースであるため、ブランドのストーリーを簡単に作成できます。また、ストーリーはWebサイトに存在するため、検索結果にも表示されます。 さらに、視覚的に没入型のフォーマットは、より多くの視聴者の関与に役立ちます。

AMPフォーマットがあなたのブランドに何ができるかを体験することに興奮していますか？ Instapage AMPビルダーの動作を確認し、Instapageが市場で最も堅牢なクリック後最適化プラットフォームである理由を発見してください。