アンプとは？対応方法・実装事例を紹介

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

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

Googleが推進するAMP（アンプ）とは何か？～プロジェクトの背景

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

実際にGoogleは「ページの読み込み速度をモバイル検索のランキング要素に使用する（2018年1月）」とGoogle検索セントラルの公式ブログで明言しています。

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

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

検索エンジンマーケティング（SEM）カンファレンス・Pubcon 2018で、Google・Ben Morris氏のキーノートで共有された情報によると、モバイルユーザーのスマホ使用時間のうち平均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対策効果も最大化する（検索結果順位が上昇する）可能性があります。

さらに、世界的に見るとまだ48%のモバイル通信が2G・3G回線(2019年時点)で行われている点も、特にグローバル展開するビジネスにおいては重要な視点。インターネット通信環境の整っていない国・地域でビジネスを成功させるためにも、モバイルサイトの高速化・速度改善は重要なテーマです。

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

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

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

瞬時にページの読み込みが可能なAMPに対応すれば、上記のようにユーザーの利便性が大幅に向上するメリットがあります。

Googleも述べているように、WEBページの利便性はSEOにおける検索品質スコアやGoogle広告ランクを左右する重要な要素。AMP対応すれば表示速度が速いページを作成することが可能となります。

他にも、ページの読み込み速度が高速であるほどコンバージョン獲得数も多くなるので、WEBサイトのオーナーにとってもAMP対応にはメリットがあります。

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

AMPの仕組みを利用することでカルーセル型のデザインの制作も可能。構造化データを使用したAMPページは、カルーセルがGoogleモバイル検索でリッチリザルトとして表示することもできます。

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

AMP対応でのデメリット

WEBページをAMP対応することで、多くのメリットが得られる一方でAMP対応によるデメリットが生じることもあります。

表示できる広告が制限され収益が下がる恐れがある

上部でAMP対応のメリットとして紹介した広告表示の制限も、自身のWEBサイトにとってはデメリットになる可能性があります。

というのも、広告の種類によってはAMP対応ページだと全く表示されないものもあるので、自身のWEBサイトのメインの収益が広告による場合、収益に多大な影響が出る恐れがあるのです。

実際、AMPを導入したことによって収益が下がったと報告するメディアもあります。

簡素なデザインになる・デザインが崩れる恐れがある

詳しくは後述しますが、AMPページでは、ページの表示速度を上げるため利用できるJavaScriptやHTMLタグが制限されます。

そのため多くの場合、AMP非対応ページと比べシンプルなデザインとなり元ページのデザインを十分に表現できません。そうすると、WEBサイトのテーマやジャンルにもよりますが、AMP対応することでユーザー体験を損ねる可能性もあります。

また、AMP特有のタグを使用しなければならないため、元ページと比べてデザインが変わりページのレイアウトが崩れてしまう危険性があります。

公開前に十分な確認をすることでデザイン崩れは対処可能ですが、かなりの工数がかかりますし、ページによってはコンテンツの内容をすべて反映するのが難しい場合があるので、WEBサイトの特徴に合わせて十分に検討しましょう。

ブラウザで高速表示を実現するAMPの仕組み・構造と対応方法

ページ読み込みが一瞬で完了し、高速ブラウジングを可能とするAMP。では実際にAMPはどのような仕組み・構造でページ読み込み速度を高速化しているのか、Google AMPへの対応方法についてそれぞれ説明します。

AMP対応の仕組み・構造

Google AMPの仕組みは、大きく分けて「AMP HTML」「AMP JS」「AMP Cache」の3つのパートから成り立っています。

高速表示を実現するためにGoogle AMPでは通常のHTMLと比較して制限の多いAMP HTMLやAMP JS、それらのページ情報をAMP Cacheで事前にGoogleのサーバーにキャッシュします。

この仕組みを使って、各WEBサイトのサーバーの情報にアクセスせずに、Googleサーバー上のGoogle AMP キャッシュから直接情報を取得してブラウザ上でページを高速表示するというのがGoogle AMPの基礎的な構造です。

Google広告においても、AMPの仕組みを応用してAMP HTML広告を作成することができ、より速くて軽い、より安全で便利な広告の提供が可能となります。

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

AMP HTMLとは、AMP用に定められたHTMLのコーディングルールにしたがって作成し、AMP対応ページとしてモバイルのWEBブラウザに読み込みされるHTMLのことです。

AMP HTMLの多くのタグが通常のHTMLタグと同様ですが、AMP独自のタグ・記述方法があったり、AMP HTMLでは許可されていないHTMLタグや要素がある点に注意が必要。

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

AMP JS（JavaScript）とは

AMP HTMLページではJavaScriptの記述が原則として禁止されており、独自に記述することができません。

ただしその代わりに、AMP JSという表示速度を低下させること無く、AMPページで使用可能なJavaScriptのライブラリが提供されています。

AMP JSのJavaScriptはすべて非同期で実行されるため、ページの読み込みに影響を与えません。

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

AMP Cache（キャッシュ）とは

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

これらのAMP CacheのコンテンツにはGoogleの検索画面などからリンクされ、ユーザーがモバイルの検索結果画面でリンクをクリックするとGoogleのAMP Cache上のキャッシュから直接ページ情報を取得します。

通常のモバイルサイトへのアクセスの場合、ユーザーはWEBサイトのサーバーとの通信が必要ですが、AMPページの場合はGoogleのAMP Cacheからページ情報を読み込むだけで良いため、ページの高速表示が可能なのです。

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

Googleなどの検索結果では、AMP対応ページにはAMPに対応していることを示す「稲妻⚡」のようなAMPマークが表示され、そのページに即座にアクセスできることがユーザーに分かる仕組みとなっています。

また検索結果からのリンク先はオリジナルのWEBサーバーにあるページではなくAMP Cacheのページとなるため、URLもAMP用のURL（例：https://www.google.com/amp/s/www.example.com/など）に変わります。

AMPページの表示でURLも異なる

Google検索でユーザーがAMP対応ページをクリックしたとき、AMPページが表示される方法は以下の2つあります。

Google検索でのAMPページ表示方法の違い

	Google AMPビューア	Signed HTTP Exchanges（SXG）
表示方法の違い	Google検索でのAMP対応ページのデフォルトの表示方法。Google AMPビューアでは自分のWEBサイトのドメインではなく、https://www.google.com/amp/で始まるURLで表示されます。なお、Google AMPビューアのURLとは別でコンテンツ上部に配信元のドメインが表示されるので、その分コンテンツの開始点が下がりファーストビューで表示される情報が変化します。	Google AMPビューアとは異なり、https://www.example.com/amp/のように自分のWEBサイトのドメイン下でAMPページの表示が可能。ただし、通常のAMP HTML形式に加えてSigned HTTP Exchanges（SXG）形式のAMPページも公開が必要です。また、現在、SXGが対応しているのはGoogle Chromeブラウザのみで、Google検索結果でのカルーセルなどAMP特有のリッチリザルトにも対応していません。
URL例	https://www.google.com/amp/s/www.example.com/ など	https://www.example.com/amp/sample.html https://amp.example.com/sample.html など

ちなみに、Yahoo!検索ブラウザでもSigned Exchange（SXG）の正式公開に向けて試験公開が始まっています。（2019年4月15日発表）

Yahoo!ブラウザでのSXG検索は、https://search.yahoo.co.jp/?fr=trial_sxgで試すことができるので、検索してSXG対応したAMPページを確認してみましょう。

なお、本番公開するまでは、AMPページはhttps://search.yahoo.co.jp/amp/s/www.example.com/のようなURLで表示されます。

Google AMP対応ページを作成する方法

以上でGoogle AMPについての理解が深まったかと思います。では、ここからAMP対応ページを作成する方法をご紹介していきます。

AMPへの対応方法は以下の2つがあります。

• AMPのウェブコンポーネントフレームワークを使って作成する
• CMSのAMPプラグインやAMP対応テーマを使って作成する

まずは、それぞれ簡単に説明します。

AMPのウェブコンポーネントフレームワークを使って作成する

amp.devでは、「AMPウェブサイト」「AMPストーリー」「AMP広告」「AMPメール」を作成するためのウェブコンポーネントフレームワークを公開しています。

このフレームワークを使えば、ページ表示がスムーズで高速なWEBサイトだけでなく、ビジュアルに訴えるAMPストーリーや、 最適化されたAMPHTML広告などがゼロから簡単に作成可能です。

また、あらゆるデバイス（モバイル、タブレット、デスクトップ）で動作するように設計されたデザインテンプレートも公開されているので、デザイン性も利便性も高いAMPサイトが簡単に作成できます。１からAMP対応ページを作るのが面倒な方にもおすすめです。

CMSのAMPプラグインやAMP対応テーマを使って作成する

WEBサイトを作るときに使用するCMS（コンテンツ管理システム、英：Content Management System）でもAMPページを作成することができます。

AMP対応できる有名なCMSには、WordPress（ワードプレス）、はてなブログなどがあります。

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

AMPに対応したWordPressテーマ（無料・有料）は徐々に増えてきているので、そうしたテーマにテンプレートを変更することで簡単にAMP対応が可能なほか、無料のプラグイン「AMP」などを使っても簡単にAMPを実装することが可能です。

ちなみに、はてなブログは有料プランの「はてなブログPro」に加入しないとAMPの配信設定はできません。

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

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

WordPress（ワードプレス）でAMP対応する方法と注意点

多くのWEBサイトで利用されているCMS「WordPress（ワードプレス）」でAMP対応する方法と注意点についてもう少し詳しく紹介します。

WordPressで簡単にAMP対応するには、「AMPプラグインを使う」または「AMP対応テーマを使う」方法がありますが、基本的には、AMP対応テーマを使用してAMPページを実装することをおすすめします。

というのも、AMPプラグインを使って対応した場合、既にインストールしている他のプラグインと競合して不具合を起こしたり、サイトデザインが大きく崩れたりする可能性があるためです。

一方、AMP対応テーマであればAMP化する前提で作られているので、基本的にはWordPressにコンテンツを追加するだけでAMPを実装できます。もし、WEBサイトを立ち上げたばかりでテーマ変更できるのであれば、AMP対応テーマに変更するのがおすすめします。

もちろん、AMPプラグインで問題なくAMP対応できる場合もありますし、逆に大きくカスタマイズしたWordPressサイトでAMP対応テーマに変更するのにはリスクもあります。

運営しているWEBサイトの状態を考慮して、どちらの方法を使用するか慎重に選択するようにしてください。

なお、どちらの方法を選んでも、AMP対応後は様々なチェックが必要です。以下で、AMPページ作成〜AMP対応後のチェックフローを紹介します。

その他にAMPページのURLパスをどうするかも先に検討しておきましょう。

基本は「https://www.example.com/samplepage/amp」か「http://www.example.com/samplepage.amp.html」の形式を選択するのがおすすめです。

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

すでに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対応の成功事例です。

ご紹介した以外にも多くのAMP成功事例がSuccess Stories - amp.devで公開されているので、ぜひチェックしてみてください。

AMPはGoogleだけ？よくある誤解について解説

最後にAMPに関するよくある誤解をGoogleがThe AMP Blogの記事“Debunking Common AMP Myths”を元に解説したページを参考にご紹介します。

AMPに関するよくある誤解

よくある誤解	実際のAMP
AMPはGoogleだけで行っているプロジェクトである	AMPはGoogleだけでなく、Googleが他の企業やWEBコミュニティメンバーとともに主導するオープンソース プロジェクトです。AMPプロジェクトの開発には、AMPデベロッパーや企業、個人など多くの開発者が携わっています。
AMPページにはGoogle.comでしかアクセスできない	AMPページにはGoogle.comだけでなく、すべての検索エンジンからアクセス可能で、検索結果上のリンクやサイトから表示できます。また、Google、Yahoo JP、Bing、、Baidu、LinkedIn、Twitterなどのプラットフォームなら、AMPページがあればデフォルトでAMPページが表示されます。
AMPはモバイル端末でしか動作しない	AMPはモバイル端末だけでなくパソコン(PC)やタブレットなど、あらゆる画面サイズで動作するようにレスポンシブデザインで設計されています。AMPは速度が遅いデバイスやネットワークに向けた仕組みなのでパソコンよりもスマホ方がより速さを実感できるでしょう。
AMPページを作成するときは必ず非AMPページも必要	AMPページと非AMPページの両方をサイト内に用意することは可能ですが、必須ではありません。AMP移行初期段階のテスト用に両方必要な場合もありますが、それ以外はAMPページ1つだけでもOK。むしろAMPページだけの方が両方作成した場合よりメンテナンスコストを下げられるメリットがあります。
AMP対応ページの作成は大変である	AMP対応に必要な労力はページのタイプによって異なりますが、多くの場合1週間以内で対応可能です。早ければたった1日でAMP対応が完了する場合もあります。以内でできる AMP ページもあれば、もっと時間がかかるものもあります。amp.devの無料テンプレートを活用すればAMP対応サイトの開発時間をグッと短縮することができます。
AMPはニュースサイト専用の仕組みである	最初にAMPがリリースされたときは主にニュースサイトで採用されていましたが、広告主やeコマース企業もAMPを活用して読み込み高速化によるメリットを得ています。こちらのサイトでAMPの成功事例をご覧いただけます。
AMPはデザイン性や操作性が制限される	AMPのリリース当初は見た目のデザインに制限がありましたが、現在ではAMPコンポーネントを使うことで、ほとんどのデザインカスタマイズやインタラクティブな操作が実現できるようになっています。
AMPはeコマースサイトに対応していない	むしろ、AMPはeコマースサイトにうってつけの仕組みです。AMPに対応すると読み込み速度が高速化するので、ユーザー体験が向上し購入へのコンバージョンが促進されます。
AMPページはキャッシュを使うから最新コンテンツを提供できない	たしかにAMPは高速化のためにキャッシュを使用して配信しますが、デフォルトのAMP Cacheメカニズム（stale-while-revalidate）やキャッシュ更新機能、動的コンポーネント（amp-list など）を使うなど、コンテンツを最新に保つ方法は数多く用意されています。
AMPページはセキュリティが不十分でプライバシーが保護されない	AMPフレームワークは、プライバシーとデータのセキュリティを確実に保護できるように構築されているのでご安心ください。
AMPページは非AMPページよりもコンバージョンが下がる	正しく最適化されたAMPページならば、多くの場合、非AMPページよりもむしろ高い成果(コンバージョン)をあげることが可能です。AMPページでなかなか成果があがらない場合、以下のような問題が考えられます。 測定とトラッキングに問題がある ⇒AMPページで正しくGoogle Analyticsの設定ができていない恐れがあるので確認する。 AMPページの見え方や機能に問題がある ⇒AMPページと非AMPページの見え方や機能が異なる場合はコンバージョンに影響が出る場合があるので両方同じ見た目・機能にしてパフォーマンスを再評価する。

まとめ：AMP対応しなくてもモバイルページ表示速度は高速化すべし

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

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

全体を通しては、

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

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

また当サイトではAMP対応でページ速度を改善する方法の他にも、当社が13年以上かけて貯めた独自のSEOノウハウを、チェックリストとして公開しています。SEO対策に取り組んでいる方は、ぜひ下記の資料をご覧いただければと思います。