AMPページに追加できるとは知らないかもしれない23のAMPコンポーネント

きらめくものは必ずしも金ではありません…それともそうですか？

AMPは、モバイルWebを高速化するために作成されましたが、そのために、カスタムコード、HTML / CSS、JavaScriptなどの制限が適用されました。 75kbのCSSスタイルシートの制限は、それを超えるWebページはAMP検証に失敗するため、その証拠です。

その制限があっても、デジタルマーケターは多くのAMPコンポーネントでページをカスタマイズできます。 これらの特殊なHTMLタグは、従来のHTMLタグ（開始タグと終了タグ、属性、および一部のCSSスタイリング機能を含む）と同様に機能し、常にamp-プレフィックスで始まる簡単に識別できます。

完全なリストは継続的に追加される可能性がありますが、次の23のAMPコンポーネントから、AMPページをカスタマイズする方法がわかります。

（Instapageは、さまざまなコンポーネントを有効にするためのAMPカスタムコードを提供するようになりました。詳細については、こちらをご覧ください。）

ページをカスタマイズするための23のAMPコンポーネント

1.アコーディオン

ページにamp-アコーディオンを追加すると、コンテンツの概要が提供され、訪問者はページの特定のセクションにジャンプできます。 AMPアコーディオンの直接の「子」のそれぞれは、アコーディオンのセクションと見なされ（各セクションには、2つの直接の「子」のみが含まれている必要があります）、セクションの最初の子はセクション見出しと見なされます。 見出しをクリックすると、セクションが展開または折りたたまれます。

AMPアコーディオンコンポーネントの2つの追加オプションは、ネストされたアコーディオン（複数のアコーディオンを相互にネストまたはスタックするため）と自動折りたたみアコーディオン（一度に1つの拡張セクションのみを許可する）です。

2.オーディオ

従来のHTML5オーディオタグの代わりに、AMPは独自のバージョンであるamp-audioを使用します。 AMPオーディオコンポーネントは、HTML5オーディオファイルの直接埋め込みにのみ使用でき、次のようにページに表示されます。

上記のオーディオコントロール（再生/一時停止、サウンド/ミュート、ダウンロード）はデフォルトで追加されていますが、右側のダウンロードボタンは無効にできます。

3.通話追跡

AMP-call-trackingは、静的な電話番号を、通話追跡分析用に設計された電話番号に置き換えるだけです。

4.カルーセル

AMPカルーセルコンポーネントは、横軸に沿って複数の画像を表示し、いくつかの異なるアンプカルーセル形式から選択できます。

type =” carousel”を使用して、画像のリストを連続したストリップとして表示できます。

または、type =” slides”を使用して、画像のリストをスライドとして表示します。

また、ユーザーの操作なしで5秒間隔でスライドを自動的にスクロールする自動再生属性（type = slidesのみ）を選択することもできます。

5. Facebook

AMP Facebookコンポーネントは、Facebookの投稿、画像、動画をAMPページに埋め込み、FacebookのURLのみを必要とします。

6.Facebookのコメント

AMP-facebook-commentsを使用すると、FacebookのコメントをAMPページに埋め込むことができます。

7.Facebookのような

AMP-facebook-likeを使用すると、Facebookの「いいね」ボタンをAMPページに埋め込むことができます。

8.Facebookページ

AMP-facebook-pageはFacebookページをAMPファイルに埋め込み、Facebookページのhrefのみを必要とします。 AMP Facebookページコンポーネントを使用すると、Facebookページにさまざまなタブを表示することもできます。 たとえば、data-tabs =” timeline、events：”を指定すると、[タイムラインとイベント]タブを表示できます。

9.フォント

AMPフォントコンポーネントを使用すると、ドキュメントの本文またはヘッダーにカスタムフォントを使用してページをデザインできます。

選択したフォントがサポートされていない場合は、プレーンな赤いテキストとして表示されます。

10.フォーム

AMPフォームコンポーネントを使用すると、詳細なリードキャプチャフォームを使用してAMPページをデザインできます。 この拡張機能を使用すると、特別な属性であるsubmit-successおよびsubmit-errorを使用して成功およびエラー応答を提供することもできます。

11.ジオ

AMP geo拡張機能を使用すると、ユーザーの場所の概算に基づいてコンテンツの小さなセクションを作成できます（国レベルのみ、ISO国コードのレベルと同様）。 また、さまざまな場所をグループ化するオプションも提供されているため、一度に複数の地域に属性を簡単に適用できます。

12.iFrame

AMP-iframeは、iFrameを介してコンテンツをAMPページに埋め込みます。これは、AMPでまだサポートされていないコンテンツ（Vimeo、Giphy、Googleマップなど）を表示するのに理想的です。

AMP-iframeを使用すると、実行時にiFrameのサイズを変更できます。ページの読み込み時（埋め込まれたiFrameは200x200pxにサイズ変更されます）、またはユーザー操作時に（ボタンを押すとiFrameのサイズが300x300pxに変更されます）。 このAMPコンポーネントの唯一の制限は、上部から600ピクセル離れているか、上部にスクロールしたときにビューポートの最初の75％以内にないか、どちらか小さい方である必要があることです。

13.イメージライトボックス

AMPイメージライトボックスコンポーネントを使用すると、ユーザーはAMPイメージを展開してビューポートを埋めることができます。 オプションで、次のようにビューポートの下部に画像のキャプションを表示することもできます。

14. Instagram

Instagramの動画と写真は、すべての写真/動画のURLにあるデータショートコードを使用して、amp-instagramを使用してAMPページに埋め込むことができます。 data-captioned属性を持つキャプションを含めることもできます。

15.ライトボックスギャラリー

AMP-lightbox-galleryは、amp-imgやamp-carouselなどの他のAMPコンポーネントに「ライトボックス」エクスペリエンスを提供します（現在サポートされているのは画像のみです）。 訪問者がAMP要素を操作すると、UIコンポーネントが展開され、ビューポートが再び閉じるまでビューポートがいっぱいになります。 ページに複数の要素が含まれている場合は、ユーザーにライトボックスで表示させる各画像にライトボックス属性を追加するだけです。

16.Pinterest

amp-pinterestを使用して、ページに「ピン留め」ボタンを追加すると、訪問者はサイトからさまざまなコンテンツをピン留めできます。

「ピン留め」ボタンを追加するには、次の属性が必要です。

• data-url：共有するURL
• data-media：固定する画像のURL
• data-description：ピンに表示されるデフォルトの説明

または、完全なピンウィジェットを埋め込むことができます。

この場合、data-url属性には、Pinterestリソースの完全修飾URLが含まれている必要があります。

17.ピクセル

AMPピクセルコンポーネントは、ページビューを追跡するための高速な方法です。 AMPピクセルは、拡張機能をロードする必要のない組み込みコンポーネントです。

18. Reddit

Redditの投稿とコメントはどちらもamp-redditを使用してAMPページに含めることができます。 AMP Redditコンポーネントでは、投稿またはコメントと、埋め込みのソースを指定する必要があります。 コメントを埋め込むときは、data-embedparent =” true”を指定して親コメントを含め、data-embedlive =” true”を指定して更新されたコメントを含めます。

19. SoundCloud

訪問者は、AMP SoundCloudコンポーネントを使用すると、AMPページでSoundCloudトラックを再生できます（amp-soundcloudに必要なのは、SoundCloud埋め込みコードにあるtrackidだけです）。

data-trackidをdata-playlistidに置き換えることで、完全なSoundCloudプレイリストをplaylistid（SoundCloud埋め込みコードにもあります）で埋め込むこともできます。

20. Twitter

他のソーシャルメディアAMPコンポーネントと同様に、amp-twitterはツイートをAMPページに埋め込みます。

画像が不要な場合、またはページのスペースを節約しようとしている場合は、data-cards =” hidden：”を使用してTwitterカードを非アクティブ化することを選択できます。

21.お気に入りのボタン

AMPフレームワークを使用すると、マーケターはお気に入り/いいね/ブックマークボタンを追加できます。 また、お気に入りのカウントを含むより洗練されたバージョンを提供し、ボタンがクリックされるとこの数を更新します。

22.AMPでの支払い

AMPページは、ブラウザから直接支払い情報をリクエストすることをサポートできます。 AMPで支払いをリクエストするには、amp-iframeも必要です。 これは、「今すぐ購入」ボタンが埋め込まれたiFrameで、実際の支払いロジックはすべてiframesrc自体に含まれています。

ただし、AMPはJavaScriptを制限しているため、iFrameソースはPaymentRequestが利用できないインスタンスも処理する必要があります。 その他のオプションは次のとおりです。

• 「今すぐ購入」ボタンを「カートに追加」ボタンに交換
• ユーザーを標準のチェックアウトフォームにリダイレクトする

23.星の評価

星評価機能がAMPページに追加される場合があります。これには、タッチ、マウス、キーボードのアクセシビリティ、ユーザーが星にカーソルを合わせると色が変わる星などの機能が含まれます。

どのAMPコンポーネントをページに追加しますか？

AMPの制限があっても、美しくカスタマイズ可能なページをデザインすることは完全に可能です。 上記の23のコンポーネントは、コンバージョンを最大化するためにAMPページに追加できる機能のほんの一部です。

InstapageのAMP機能を使用すると、マーケターは、デザイナーフレンドリーなビルダー、高度な分析、組み込みのバリデーターツールなどを使用して、最適化されたクリック後のランディングページを作成できます。 より高速なランディングページの作成を開始し、今すぐInstapageデモにサインアップしてください。