表示速度改善に貢献！AMPとは？どうやって対応する？

更新日: 2019年04月16日

検索結果からアクセスしたコンテンツのURLが「google.co.jp」になっているページに遭遇したことはないでしょうか？
あるいは、検索結果画面にカミナリマークがついてるページをご覧になった方も多いかと思います。

これらはAMPと呼ばれるページを高速に表示する仕組みで作られているページです。

モバイル利用者が増える現代のインターネット環境において、消費者はモバイル端末を使うことで時間や場所にとらわれずWebサイトを閲覧する機会が日常的にあります。

Googleがthink with Googleにおいて2017年2月に発表した「Find out how you stack up to new industry benchmarks for mobile page speed」という記事では、モバイル端末からWebサイトにアクセスした際に、ページの読み込みに時間がかかるほど直帰率が高まっていると発表しています。

具体的には、1秒から3秒の場合32%、1秒から5秒の場合90%、1秒から6秒の場合106%、1秒から10秒の場合123%増加しているのです。このデータからページの表示速度がWebサイトのページビューやコンバージョン率など様々な部分に影響していることを推測します。Webサイトの表示にかかる時間が顧客満足度の低下につながってしまう可能性があり、避けたいところです。

参考：
think with Google「Find out how you stack up to new industry benchmarks for mobile page speed」

Webサイトの表示速度を改善するために、画像サイズの最適化やソースコードの改善など様々な方法で対処しているケースが多いでしょう。そういった改善手法の1つにAMPがあります。AMPは圧倒的に早い表示速度を誇るコンテンツ制作のフレームワークです。今回はAMPにスポットをあてて、AMPに関する基礎知識や対応方法をご紹介します。

AMPとは

AMPとはAccelerated Mobile Pagesの略称であり、GoogleとTwitterが共同開発しているモバイル端末のページ表示速度を高速化するフレームワークです。2016年2月25日のGoogle Japan Blogでは、AMPに対応することで対応しているページの表示速度が、対応していないページに対し平均4倍にあたり、データ量も約10分の1であることを説明しています。新聞をはじめとする様々なメディアでAMPが採用されており、モバイルユーザーに対し快適な環境を提供しているのです。AMPはオープンソースですので、誰でも利用できます。そのため、自社のWebサイトをAMPに対応するのも、それほど難しいことではありません。

参考：
Google Japan Blog「モバイルウェブをもっと速く」

AMPはWebサイトを読み込まず、キャッシュを利用することで表示速度を早めます。キャッシュとは一度開いたページのデータを記憶し、次回のページ表示の際に時間をかけずに済むことです。キャッシュはブラウザや検索エンジンが有する機能であり、AMPに関してはGoogleによるキャッシュが利用されます。また、AMPに基づいて制作されたページはデータ量が軽く、そもそもページの表示にあまり時間がかからないのが特徴です。

また、AMPに対応したページのURLは、通常のページのURLとは異なります。検索エンジンにキャッシュしたページを表示するため、検索エンジンのドメイン以下にあるURLになっているのです。検索結果を表示するとAMPに対応したページが存在する場合、ページタイトルの下に「AMP」という記載やイナズマのようなマークとともにURLがあるので一目でわかります。AMPの表記のあるページをタップするとAMP対応のページを表示しており、元ページのURLが確認可能です。この部分には、AMP対応ページに関する説明もあり、まさにAMPを推進している動きを感じます。

※上記はGoogleによるキーワード検索結果画面（ページタイトルの下にイナズマのようなマークあり）

AMPに対応し期待できる効果

AMPに対応すると、ページの表示速度を改善できることをお伝えしました。それでは次に、AMPに対応すると具体的にどのような効果が期待できるのか掘り下げて考えてみましょう。

顧客満足度を高められる

冒頭でご紹介させていただきましたようにページ読み込み時間と直帰率は密接な関係にあります。Webサイトに訪問する際、ユーザーは何らかの目的を持っています。その目的が情報収集であっても申し込みや商品購入であったとしても、どれだけストレスなく達成できるかが顧客満足度につながるでしょう。

特にモバイルユーザーの場合は、必ずしも快適なネット環境からアクセスするとは限りません。できるだけスムーズにページを表示できるようにすることが大切ではないでしょうか。

検索結果からページにアクセスされやすくなるかもしれない

検索結果の表示からAMPに対応していることがわかるため、対応していないページよりもスムーズにアクセスできることがユーザーにも明確です。もちろん、AMPのことを知っているユーザーである必要はありますが、有利に働く可能性があります。今後のAMPの認知拡大に伴い効果的になるかもしれません。

また、モバイル端末による検索時にカルーセルが表示され、他のページより目立つ場合があります。カルーセルの表示は必ずあるわけではありませんが、表示される場合、ページアクセスの増加が期待できます。

表示速度の改善によりSEOにプラスに働く可能性がある

残念ながらAMPに対応しているから検索順位が上がるわけではありません。しかし、ページの読み込み時間はSEOに関係する大切な要素です。ユーザビリティが高く、高品質なユーザーエクスペリエンスを提供できるAMPに対応していることは、表示速度を最適化していることであり、SEOに貢献する可能性があると期待したいところでしょう。

AMPへの対応方法

対応すると表示速度の改善を通じてユーザーの満足度を高められるAMPですが、実際にどのように対応すればよいのでしょうか。気になる対応方法についてお伝えします。

対応方法１：ワードプレスならプラグインを利用する

ワードプレスを使用しているWebサイトなら、プラグインを利用するのが手軽でしょう。「AMP」というプラグインを使用すると簡単にAMPに対応できます。プラグインの機能により、AMPに対応したWebページが自動的に作られるので便利です。AMPに対応したページはURLの末尾に「/amp/」と追加されます。AMP対応の場合、同じページでも見た目が少々変わる場合があり、想定したデザインではないかもしれません。しかし、手軽にAMPに対応できるというメリットは実に大きいものでしょう。

ただし、ご存知の人も多いと思いますが、プラグインのバージョンが稼働中のワードプレスのバージョンに対応しているかなどを事前に確認しなければいけません。プラグインのインストールはバックアップの取得など適切なステップを踏んでから行わなければいけないので注意が必要です。

プラグインを有効化した後、AMP対応のページが表示されるかURLに「/amp/」をつけてみましょう。また、Googleアナリティクスを設定するなど、通常のWebページと同じように必要な設定をしておかなければいけません。

対応方法2：現在のページを手作業で修正する

ワードプレスなどのCMSを使っていない場合、手作業でファイルを作成する必要があります。この場合、通常のページとAMPページの両方を用意しなければいけません。AMPに対応したページの制作は、AMP HTMLでWebページを構築する必要があります。

CSSは外部ファイルを読み込めないなど、通常ページで可能なことに制限がかかってしまうことに注意しなければいけないでしょう。JavaScriptはAMP用のものを使わなければいけません。HTMLを使ってWebページを構築している人なら難しいわけではありませんが、AMP対応ページを作成する分、手間がかかってしまいます。

制作後：ページが正しく対応できるかテストしてみる

制作したページがAMPに対応し正しく動作できるか、AMPテスト用のWebサイトを使用して試してみましょう。以下のWebサイトにアクセスし、テストするURLを入力するだけで、誰でも簡単にテストを実行できるので大変便利です。

参考：
AMPテスト用Webサイト

問題なければ、制作したページを掲載したXMLサイトマップをサーチコンソールを利用してGoogleに伝えましょう。その後、クローラーによりAMP対応ページがインデックスされれば完了です。

AMP対応の前に考えておくべきこと

AMPがどのようなものかイメージできましたでしょうか。AMP対応の前に留意しておかなければいけないことをお伝えしますのでご参考ください。

Webサイトのデザインに影響する可能性がある

AMPの仕様に伴ったページ制作を行うと、複雑なデザインは再現できない可能性があります。既存のWebサイトのAMP対応なら、もともとのページを再現できない可能性は考慮しなければいけません。

また、新規制作のWebサイトで、AMP対応ページとの通常ページとのギャップが生じるのを避けたいなら、あらかじめAMP対応のシンプルなデザインも想定した上で制作を進めるのがベストではないでしょうか。一部のJavaScriptが使えないということも考慮しておかなければいけません。

AMPの仕様に沿って対応するので手間がかかる

AMPに対応するページはAMPのページ仕様を理解した上で構築しなければいけません。技術的にそれほど難しい作業ではないとしても、制作にあたり新たな仕様を考慮しながら作業をするのは手間がかかります。

一般的なWebサイトの制作よりデザインなどに可能な範囲が決まっているため、構築する技術者はいつもより時間がかかるでしょう。

アクセス解析がしづらくなる

同じページでもAMP対応のページは、通常のページとURLが異なります。
そのため、Googleアナリティクスなどを使ったアクセス解析時に分析が複雑になります。内容が同一でも通常のページとAMPページのそれぞれのデータをどのように集計するかを考えなければいけません。いずれにせよ、データ解析にはひと手間かける必要があります。

向いていないWebサイトもある

AMPに向いているのはシンプルなWebページです。動的なコンテンツには向いておらずオーソドックスなページを表示する際にすばらしいパフォーマンスを発揮できます。

ニュースの記事など、静的なページが多数できるタイプのWebサイトに適した存在であると言えるでしょう。また、現時点ではトップページには対応できないので、あくまでシンプルな下層ページのみと考えておきましょう。

うまくいかない場合、諦める必要もある

ワードプレスを使用しているWebサイトの場合、プラグインが正しく動かなかったときや、他のプラグインを探すなど別のアクションをする必要があります。どの程度までAMP対応に力を入れるかにより対応が異なりますが、無理をせず、安全にAMPに対応しましょう。

まとめ

AMP対応はページ表示速度の改善という顧客満足度の向上に貢献できる重要なプラットフォームです。AMPへの対応はそれほど難しくはないものの新たな作業や管理が生じる分、手間であるとも言えます。また、自社のページの仕様によりAMPに対応しやすいかは異なります。

どのような作業対応が必要なのか整理の上、すぐに対応するか否かを検討してもよいのではないでしょうか。AMPに対応した場合のWebページの読み込み速度は感激するほど早く、まったくストレスを感じません。それほどまでにユーザーにとってストレスなくページを閲覧できる環境を提供できるのは、やはりAMPが注目される最大の理由と言えるでしょう。

AMPに対応すること自体がSEOに直接的につながるわけではありませんが、AMPで実現するページ速度の改善は、SEOにおいて必要とされる要素です。また、メディアが限定されますがAMPに対応しているページが検索結果の上位に画像付きカルーセルを使って表示される場合は、まさにSEOのようなメリットでしょう。カルーセルが表示されると、ユーザーが目立つ分、自然とAMPページに流れる動きが期待できます。

メリットがイメージしやすいAMPではあるものの、一番の迷いどころは今すぐ対応するべきかでしょう。今回ピックアップしたように、AMP対応に必要な作業やページ管理などの負担はどうしても生じてしまいますし、デザイン上の課題も発生する恐れがあります。

今すぐのAMPの導入はWebサイトの目的や性質により検討してもよいでしょう。デザインでイメージを与えるタイプのWebサイトは、通常ページと同じデザインを再現できない可能性があるAMPにはあまり適していないと言えます。

それよりも情報を与えることに価値のあるページであれば、AMPに適しており成果を発揮しやすいのです。Webサイト運営の目的を見つめてAMPへの対応を検討しましょう。

この記事を書いたライター

藤野真人

北海道札幌市にあるWebマーケティング事務所、コビトスパイス代表。各種メーカーやコンサルティング企業などで様々な分野のマーケティングを経験し独立。これまで培ったマーケティングに関するノウハウを活かしクライアント企業の業績アップに貢献しています。Webマーケティング初心者にもわかりやすい解説に定評があります。

このライターの記事一覧