Googleが推進するAMPとは？～その構造や対応サイトの実装事例

インターネット通信で利用するデバイスが、パソコンからスマートフォンなどのモバイル端末へとシフトする中、モバイルでのユーザー体験がパソコンでの体験より劣れば、モバイル化とともにインターネットビジネスが苦しくなる可能性も。実際、ページの読み込みに10秒以上かかるモバイルWEBサイトが数多く存在したり、また国・地域によってはモバイルの通信回線そのものが遅い場合もあります。

そこでGoogleなどが立ち上げ、推進しているのがAMP（アンプ）プロジェクト。AMPとは、独自のHTMLの記述ルールとキャッシュの仕組みを使って、モバイルWEBサイトのページコンテンツを一瞬で高速表示させるフレームワークを指し、モバイルでのインターネット体験を向上させようという試み。

このページでは、モバイルWEBサイトでのユーザー体験を改善・向上させることを目的としたAMP（アンプ）について、AMPとは何か？という定義や基本的な構造・仕組みの解説から、対応サイトの実装事例を紹介します。

Googleが推進するAMP対応とは何か？～プロジェクトの背景

AMP（アンプ）とは「Accelerated Mobile Pages」の略で、Googleが推進するモバイルWEBサイト高速化のための方法。AMP対応ページはモバイルでブラウジング中のユーザーに一瞬で画面が表示される（ページの読み込みにほとんど時間がかからない）のが特徴です。このAMPの仕組みはAMPプロジェクトと呼ばれるオープンソース・プロジェクトによって提供されており、2015年にGoogleとTwitterが共同して立ち上げたプロジェクトです。

AMPプロジェクトでは、WEBサイトやページをAMP対応させるための様々なフレームワークをオープンソースとして無料提供しており、誰でもAMPを利用・導入することが可能。モバイルWEBでの検索体験やユーザビリティの向上を目的に、Googleが推進している手法です。

スマホ・モバイル向けアプリ作成の時代はもう終わった…？

特定のアプリの利用に集中、アプリの新規ダウンロードもほとんど無い

スマホユーザーは平均して80%の時間が3つの主要アプリの使用に集中しており、平均的なユーザーの1ヶ月あたりのアプリのダウンロード件数は1件未満。つまり、今後新たにスマホ・モバイル向けアプリを作成しても、それがダウンロードされ、使用される可能性は低いということ。

GoogleはWEBブラウジングの高速化こそ、モバイルでのユーザー体験向上に重要と考えているようです。一般的なスマホ利用ユーザーからするとテキストメールの送受信や写真撮影は一瞬にもかかわらず、WEBサイトのブラウジングだけ何秒も待たされるのはストレス。GoogleのBen Moriss氏はPubcon 2018のキーノートの中で「AMPでなくても良いが、ページ表示の高速化はモバイルサイト経由の売上創出・拡大に絶対に必要」と強調していました。

WEBサイトの表示速度改善は売上・マーケティング・SEO対策効果に重要

ここまでモバイルWEBサイトの表示速度の高速化が重要視されるのは、裏付けとなるデータ・事実があるからです。例えばGoogle Chromeのデータによると、モバイルWEBサイトでブラウザのページ読み込み時間が3秒以上になると、53%のユーザーがサイトへの訪問を途中で断念するとのこと。

また、ページの表示速度が1秒でも遅くなると以下のようなマーケティング面での弊害、つまり売上の減少を引き起こすと言われています。

このためモバイルWEBサイトの表示速度改善は、WEBサイトのオーナーにとって売上・マーケティング効果を最大化するための重要課題とGoogleは捉えています。また、ページ表示速度はGoogleの検索結果順位の決定要素の1つであるため、SEO対策効果も最大化する（検索結果順位が上昇する）可能性があります。

AMP対応はユーザー体験（UX）に多数の利点・メリットをもたらす

モバイルWEBサイトのページ読み込みが一瞬で完了し、高速ブラウジングを可能とするAMPの仕組みですが、AMP対応がユーザー体験（UX）にもたらす具体的な利点やメリットとして以下のような点が挙げられます。

• AMPの仕組み上、ページ読み込みを遅くさせる要素を使用できないため、AMPページはすべて高速
• ページ読み込み時にスムーズにレンダリングされ、コンテンツの要素があっちこっちに移動しない
• コンテンツ閲覧の邪魔となるポップアップやインタースティシャルなどの広告掲載が基本的に禁止
• ページ要素をユーザーが必要とする時まで読み込まない、つまりページの表示開始時に読み込みが必要なデータ量が減り、即時でページが表示される

これまではAMPで表現できるデザイン要素や使用可能なタグに制限があり、デスクトップサイトやモバイルサイトと同じデザインを再現できないことが課題・デメリットでしたが、AMPで使用可能な要素やタグが増えた結果、現在では通常のWEBサイトと同様のデザインがAMPで再現できる状態。

つまりAMPは一部のメディアサイトやECサイト向けのものではなく、すべてのWEBサイトに必要な考え方であり、ページ表示速度を劇的に改善するためのソリューションだと考えられます。

ブラウザで高速表示を実現するAMP（アンプ）の基礎知識～仕組みや構造

AMPの仕組みは、大きく分けて「AMP HTML」「AMP JS」「AMP Cache」の3つのパートから成り立っています。高速表示を実現するために通常のHTMLと比較して制限の多いAMP HTMLやAMP JS、それらのページ情報を事前にGoogleのサーバーにキャッシュするAMP Cacheにより、モバイルユーザーは各WEBサイトのサーバーの情報にアクセスせずにGoogleサーバー上のキャッシュ情報を参照でき、ブラウザ上でページが高速表示されるというのが基礎的な構造。

各パートの基礎知識や特徴を以下で紹介します。

AMP HTMLとは～ページで使用できないタグや要素に注意

AMP HTMLとは、AMP用に定められたHTMLのコーディングルールにしたがって作成、AMP対応ページとしてモバイルのWEBブラウザに読み込みされるHTMLのことで、多くのタグが通常のHTMLタグと同様ですが、AMP独自のタグ・記述方法があったり、AMP HTMLでは許可されていないHTMLタグや要素がある点に注意が必要。

例えば、<img>タグは、<amp-img>に置き換えが必要だったり、CSSファイルを読み込めないため、デザイン要素をすべてインラインスタイルで記述する必要がある点などが注意点。

AMP HTMLの制作で記述可能な部品・コンポーネントは増加中

AMPプロジェクト開始直後は、AMP HTMLがサポートする部品・要素が少なく、十分なデザインでAMPページを制作できない状態でしたが、現在では記述可能なコンポーネントが増え、誰でも簡単に、デスクトップ・モバイルサイト本体と同様のUXデザインを再現できるように対応が進んでいます。

具体的には下記で説明するAMP JSのライブラリと合わせて、<amp-carousel>でカルーセル型のデザインの制作や、<amp-sidebar>でAMPページにサイドバーの表示、<amp-experiment>でAMPページ上でのABテストの実施などが利用可能になってきています。

※より詳しい情報は、AMPプロジェクト内のページ「AMP HTMLで提供されるコンポーネント」をご覧ください。

AMP JS（JavaScript）とは

AMP HTMLページではJavaScriptの記述が原則として禁止されており、独自に記述することができません。ただし、表示速度を低下させること無く、AMPページで使用可能なJavaScriptのライブラリが提供されており、これがAMP JS。これらのJavaScriptはすべて非同期で実行されるため、ページの読み込みに影響を与えないのです。

前述したAMP対応ページでのカルーセルやサイドバーの表示、ABテストの実行などのコンポーネントは、このAMP JSのライブラリにあるScriptをAMP HTML上で記述、呼び出すことで利用できます。

AMP Cache（キャッシュ）とは

AMP Cache（キャッシュ）とはコンテンツ配信ネットワーク（CDN）の働きをする仕組みで、AMP HTMLで作成されたページ情報をキャッシュ、同時にページがAMPの仕様に沿って作成されているかのチェックも行います。

これらのAMP CacheのコンテンツにはGoogleの検索画面などからリンクされ、ユーザーがモバイルの検索結果画面でリンクをクリックするとAMP Cache上のキャッシュからページ情報を取得します。通常のモバイルサイトへのアクセスの場合、ユーザーはWEBサイトのサーバーとの通信が必要ですが、AMPページの場合はGoogleのAMP Cacheからページ情報を読み込むだけで良いため、ページのを高速表示が可能なのです。

検索結果でAMP対応マークが表示されるほか、リンク先URLが変わる

Googleなどの検索結果では、AMP対応ページにはAMPに対応していることを示す「稲妻」のようなマークが表示され、そのページに即座にアクセスできることがユーザーに分かる仕組みとなっています。また検索結果からのリンク先はオリジナルのWEBサーバーにあるページではなくAMP Cacheのページとなるため、URLもAMP用のURL（例：https://www.google.com/amp/s/www.example.com/など）に変わります。

対応・導入済みサイトの実装事例の紹介

すでにAMP対応・導入済みのWEBサイトの中には、モバイルサイトのページ表示速度改善により、大きな成果を生み出しているところがあります。Googleも成功事例と紹介している2社の実装事例を紹介します。

旅行検索サイトWEGOの成功事例～モバイルのアクセス・CVRともに増加

AMP対応の成功事例の1つとして紹介されているのが、中東地域や東南アジアを中心に展開する旅行情報の比較・検索サイト・WEGO。航空券やホテル予約などの価格比較サービスを提供しており、提携先の航空会社サイトやホテル予約サイトへのユーザー送客がマネタイズのポイントです。

展開している地域の特性上、回線スピードが非常に遅かったり、またアプリもあるもののデータ容量の非常に少ないスマホ・モバイル端末を利用しているユーザーが一般的なこともあり、AMPの実装を決断したとのこと。

このWEGOではAMP対応で多くのページが1秒以内に表示されるようになり、全体としてページ表示速度は10倍近く改善したそうです。また検索結果からのサイトアクセスも12%上昇、マネタイズに重要なコンバージョン率（CVR）は95%増加、WEBサイトで掲載しているバナー広告などのクリック率（CTR）も3倍に向上したそうで、AMP対応により収益面も大きく改善したと予想されます。

インドのECサイト・Myntraの実装事例～CVRが60%増加

Myntraはファッション製品や日用品などを扱うインドで最大級のECサイト。ECサイトのためWEBサイトのコンバージョン率（CVR）が売上に直結、またサイトへアクセスしたユーザーの直帰率や離脱率低下も重要な課題だったと推測できます。MyntraのAMP対応サイトは動的な情報提供を可能にする<amp-bind>コンポーネントを活用して実装、通常WEBサイトと同様のデザイン・使い勝手を実現しています。

このAMP対応によってSEO対策上の効果（検索結果順位の上昇など）は見られなかったものの、サイト全体のページ表示速度は65%減少、直帰率も40%改善したとのこと。結果的にAMP対応前のサイトと比較して、コンバージョン率（CVR）が60%も増加したというAMP対応の成功事例です。

WordPressサイトの場合、テーマ変更やプラグインで実装する方法も

大規模なWEBサイトや動的コンテンツの多いECサイトの場合は、AMP対応のためのシステム開発に一定の期間や費用が必要ですが、WordPressで運用中のブログサイトや静的コンテンツが中心のWEBサイトの場合は、無料のテーマやプラグインを利用して簡単にAMPを実装する方法もあります。

まだ数は多くないもののAMPに対応したWordPressのテーマがあり、それらのテーマにテンプレートを変更することでAMP対応が可能なほか、無料の「AMP for WordPress」などのプラグインを使ってAMPを実装する方法も可能です。

対応後はテストツールを利用した確認・チェックが必要

いずれの実装方法でも、AMP対応の完了後にはGoogleが提供する「AMPテストツール」を利用、記述ルールに沿った正しいAMP HTMLが生成しているかの確認・チェックが必要で、もし何らかのエラーが発生している場合は修正が必要です。エラーが発生している場合は、AMP Cacheにページ情報がキャッシュされず、Googleの検索結果等にも反映されません。

以上、Googleが推進するAMPについて、その定義や基本的な仕組み・構造、対応サイトの成功事例などを紹介しました。

GoogleからはAMPのメリットが強調される一方、まだAMPは発展途上の印象もあり、今後さらに使い勝手が上がったり対応事例も増えていくと思われます。またGoogleは「AMP対応でなくても、モバイルのページ表示速度が上がれば良い」とも話しており、AMP以外の方法でのページ表示速度高速化の手法も模索している様子（詳細はこちらの記事）。いずれにせよ現段階ではAMPを実装しなくても、ページ速度の改善に努めることが重要です。

全体を通しては、

というのが個人的な印象で、比較的規模の大きいサイトで直帰率・離脱率やページ速度への課題が顕在化している場合は、AMP導入に取り組んだ方が良さそうだと感じます。

いずれにせよ世界中で通信トラフィックのボリュームが増加傾向にある中、このまま増え続けるとネットワーク回線がパンクする可能性もあり、AMPのように通信量を減らすためのアーキテクチャーは今後も求められ続けるだろうと思われます。