AMP（Accelerated Mobile Pages）とは？今から導入するための基礎知識と手順書マニュアル

2016年7月6日

この記事は2016年12月26日に更新しました。

もうWebサイトにAMPは実装済みでしょうか。

AMPを実装すると、モバイルページの表示速度が高速化してユーザー満足度を高めることが出来ます。

そんなAMPをサポートする取り組みも盛んに行われています。2016年6月20日、日本でも Google NEWSがAMP対応したと発表されました。
アメリカでは4月中旬に、イギリス・フランス・ドイツなど主要6カ国についても6月上旬には対応済みとなっています。

今回は、今なにかと話題になっているAMPについて解説いたします。

AMP ページの詳しい作成方法などは分からなくても、Web業界に関わる方であればその概要だけでも把握しておく必要があります。
まだ概要がよくわからない方はもちろん、すでにご存知の方も再確認として一読しておくことをオススメします。

AMPとは
AMPに対する各プラットフォームの現状
AMPが速くなる仕組み
AMPを構成する3要素
1. AMP HTML
2. AMP CDN
3. AMP JS
AMPを利用するメリット
AMPを利用するデメリット
1. デザインやコンテンツがうまく表示されない可能性がある
2. 一部の広告タグしか利用できない
AMP実装方法
AMPが正しく設定されているか検証する方法
AMPページのアクセス解析

AMPとは

AMP 公式サイト
AMPとは、Accelerated Mobile Pagesの略でアンプと読みます。 Google と Twitter が共同開発しているモバイル端末でホームページを高速表示するためのプロジェクト、またはAMP HTML フレームワークのことです。

ユーザー体験の向上を目的として開発が進められていましたが、2016年2月24日に Google 検索で対応開始となったことで、世の中で広く認知されるようになりました。

AMPを実装すると、モバイルページの表示速度が約4倍、データ量が約1/10になると言われています。

WordPress では、通常の HTML で作成したホームページをAMP HTML に自動変換してくれるプラグインも開発されています。ferret内の以下のページで利用方法をご紹介していますので、ぜひ参考にしてみてください。

参考：
誰でも一瞬でできる！WordPressのプラグインを使ってAMPに対応する方法｜ferret編集部

AMPに対する各プラットフォームの現状

AMPのプロジェクトは、様々なプラットフォームが続々と対応を始めています。各プラットフォームの対応状況をまとめてみました。

Google

2015年にプロジェクト公開されたAMPですが、当初はAMP用の表示枠があり、そこにAMP コンテンツが表示されるようになっていました。通常の検索結果には影響を及ぼしていませんでした。しかし、2016年10月には、スマホ検索の通常検索結果もAMP対応されるようになりました。

このように⚡マークのラベルが表示され、これがAMPで表示される通常検索結果になります。

Yahoo

Yahooの検索結果では、 Google と違いAMPマークのラベル表示などは行われていません。今後対応する予定ですが、導入時期は明確になっていません。

参考：
日本のYahoo!検索がAMPサポートを表明、日々5,800万のYahoo!検索ユーザーがAMPページにアクセスすることに | 海外SEO情報ブログ

はてなブックマーク

ソーシャルブックマークサービスとして人気のはてなブックマークも実はAMPに対応しています。アプリ版のはてなブックマークでは、AMP対応されているページが人気・新着エントリーに入ると⚡マークが表示されます。

この⚡マークが付いているものをクリックすると、AMP ページへ飛び高速でコンテンツを見ることが出来ます。

また、検索結果のAMP枠にもはてなブックマークのページが表示されるようになっています。

AMPが速くなる仕組み

1.プリレンダリングに最適化

通常ホームページやWebサイトにアクセスしようとすると、要求されたページを読み始め時間とともにページが表示されていきます。要するに、リンクがクリックされてから HTML が読み込まれるためページが表示されるまでにタイムラグが生じていました。しかもスマホのネット回線は強くないため、よりページのローディング速度が遅くなる状態でした。

しかしAMPでは、ページを開く前に事前にページが読み込まれるようになり、速度が高速化します。

2. JavaScript が使えない

JavaScript は非常に広い範囲で使われていますが、多くのリクエストを発生させ、低速化の要因の1つになっていました。そのため、AMPでは JavaScript を使うことが出来ません。

3.ローディングに優先順位がある

ページ内に存在するコンテンツに、ローディングの優先順位をつけることで体感速度をアップさせています。例えば、スクロールさせないと表示されないような画像は、最初から表示させておく必要がないため優先順位は低くなります。他にも、iframeも優先順位が低く設定されています。

ホームページの HTML をあらかじめ Google または Twitter 側でキャッシュ（保存）しているため、読み込み時間が短縮されページがこれまでより高速で表示されるという仕組みになります。

AMPを構成する3要素

AMPは高速化のため、使用できる要素が制限されています。

AMP HTML
AMP CDN
AMP JS

AMP HTML

AMP HTML は、 HTML5 をベースにしたAMP用に簡略化された HTML です。AMP用に独自のカスタマイズが加ているのが特徴です。主な点は以下です。

html要素に<html ⚡>か<html amp>と記述
画像は<img> ではなく、<amp-img>と記述
画像は必ずwidth、heightを固定値で指定
外部 CSS が読み込めない。

などなど。これは一部なので、どんなものが他に使えて、使えないかなどは公式サイトを確認しましょう。

参考：
AMP公式サイト
https://www.ampproject.org/

AMP CDN

AMP CDNとは、AMP Projectが提供しているCDNです。CDNとは、コンテンツデリバリーネットワークのことで、CDNがコンテンツを配信してくれるので負荷分散が起き、高速化が実現できます。AMP CDNはAMPに特化したCDNをイメージすると分かりやすいです。AMP CDNにAMP コンテンツがキャッシュされれば、そのページはAMP ページとして配信され、高速表示されます。

AMP JS

AMP JSとは、AMP HTML のリソース読み込みやレンダリングを行う JavaScript ライブラリで非同期で読み出し、高速化を助けています。主な特徴としては、読み込みに優先順位が付けられ体感速度の向上を行っています。

AMPを利用するメリット

1. コンテンツが高速表示される

AMPでは、AMPが定義した JavaScript のみ使用できます。広告などの読み込みによって処理が重くなってしまう JavaScript の使用を制限することで、動画やアニメーションなどが瞬時にロードできるようにするためです。簡単にいえば、無駄なものを削ぎ落とすことで高速化するイメージです。
2度目以降アクセスする場合は、すでにキャッシュされているので更に高速表示されます。

2.通常検索結果枠とは別の枠で表示される

AMPに対応しているホームページは、 Google でのモバイル検索結果で表示されるトップニュースのカルーセル部分で記事を表示させることができます。
必ず表示されるわけではありませんが、ここで表示されることでホームページの認知度向上が期待できます。

なお、カルーセルが表示されたら記事のアイキャッチ画像の下に「AMP」と表記されていることがわかります。
この表記があるものをクリックすると、AMP対応ページが表示されます。

3. ユーザーのストレスを軽減できる

これまでよりページの表示速度が高速化するため、ユーザーがホームページを閲覧している際に「遅い」と感じることが少なくなります。
ユーザーは記事を読み進めやすくなり、ストレスなくホームページを閲覧することができます。

4. 検索結果で上位表示される可能性が高くなる

今のところ、 Google はAMPの対応/非対応を検索順位に反映させることはないと言っています。
しかし、先に述べたメリットでも挙げたように、AMP対応をすることでユーザーのストレスが軽減される、カルーセル部分に表示されるなどの要因からアクセスされやすくなると考えられます。

また、 Google の検索順位に関する施策は突然実施されることも少なくありません。よほどの理由がない限り、対応しておいた方がよいでしょう。

ferretも、AMPに対応しています。ぜひモバイル端末から以下の URL をクリックしてみてください。
AMPのメリットを直接感じることができます。
ferret

5.AMP専用枠"Live Ticker"に表示される可能性がある

2016年秋頃に導入されると見られている"Live Ticker"ですが、Digidayによると現在既に導入されているAMPのカルーセル枠の上（赤枠の部分）に表示されるとされています。
通常のAMPのカルーセル枠よりも大きな表示になると見られており、ここにはAMP コンテンツのみが表示されます。

通常の検索結果の上に表示されるカルーセルAMP枠でさえ目立っていましたが、それ以上に目立つLive Tickerは流入に大きく寄与しそうです。

AMPを利用するデメリット

1.デザインやコンテンツがうまく表示されない可能性がある

AMPが定義した JavaScript 以外が多様されているコンテンツを2次利用している場合など、デザインやコンテンツが表示されない可能性があります。
AMPで禁止されているタグは多数ありますので、AMP対応を行うなら事前にタグのチェックはしておきましょう。

2.一部の広告タグしか利用できない

広告を掲載しているホームページの場合、限られた配信業者の広告タグしか利用できません。
記事執筆時現在(2016年4月21日)は、以下の配信業者が対応しています。

A9
AdReactor
AdSense
AdTech
Doubleclick
i-mobile

これらの配信業者のタグを使用する場合でも、高速表示する、 HTTP Sで作成された安全なクリエイティブを提供するなどの点に注意する必要が有ります。

AMP実装手順

AMP HTML ページ作成編

AMP HTML の仕様に合わせてAMP ページを作成していきます。

<!doctype html>
<html ⚡>
<head>
　　<meta charset="utf-8">
　　<link rel="canonical" href="hello-world.html">
　　<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
　　<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
　　<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body></body>
</html>

AMP HTML には以下のようなルールがあります。箇条書きに羅列すると、以下のような変更を加えていきましょう。

・<!doctype html>で宣言を開始する
・<html> ではなく <html amp> もしくは <html ⚡>
・<head>
                  タグ
                内に <link rel="canonical" href="$SOME_
                  URL
                " /> 
                  タグ
                を入れて、AMPの元となった
                  HTML
                
                  ページ
                を指定する。
                  HTML
                
                  ページ
                がない場合は、AMP
                  ページ
                自身を指定。
・<meta charset="utf-8">を<head>の開始
                  タグ
                直後に配置する
・<head>
                  タグ
                内に<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">を追加
・<script async src="https://cdn.ampproject.org/v0.js"></script>を<head>の閉じタグの直前に追加
・<img> → <amp-img>へ変更
・<video> → <amp-video>へ変更
・<iframe> → <amp-iframe>へ変更
・javascript → 使用不可
・css →link relで読み込み不可のため、head内に<style amp-custom>を記述してその中で設定

サイトに合わせてもうひと工夫必要な箇所も出てくるかもしれません。以下公式サンプルを参考に調整してみてください。

参考：
AMP HTML ページを作成する|Accelerated Mobile Pages Project

WordPress にプラグインを使って実装する方法

AMPは、ニュースやブログなどのコンテンツページのモバイル体験を快適にするためのものです。そのため、 CMS である WordPress を用いた運用をされている方のために、専用の「AMP」プラグインが用意されています。 WordPress の管理画面上でプラグイン「AMP」を検索し、直接インストールできます。

もちろんAMP プラグインのページからダウンロードして「wp-content/plugins」のディレクトリへアップしても可能です。

その後管理画面で「有効化」し、「ダッシュボード > 設定 > パーマリンク設定」で「変更を保存」を押して更新。設定が完了したら、AMPバージョンの URL ヘアクセスしてみましょう。

見たい記事の URL の末尾に「/amp/」もしくは「/?amp=1」を付けてブラウザで確認してみてください。
※既存のページ URL が勝手にAMP対応されて表示されるわけではありません。

WordPress にプラグインを使わずに実装する方法

WordPress は、PHPを使ってページを動的に（効率的に）管理するためのシステムです。静的 HTML の技術であるAMPとは本来は相容れないものです。プラグインを使う分には問題ありませんが、むやみにプラグインを編集すると動かなくなることがあります。

基本的には先ほどの「AMP実装手順（AMP HTML ページ作成編）」と同様にview pointやcanonical等を設定しつつ、PHPで条件分岐を設定して、AMP ページの HTML と通常ページの HTML を切り替えて表示するように実装します。詳しくは以下のページも参考にしてみてはいかがでしょうか。

参考：AMPをワードプレスにプラグイン無しで設定する方法 | q-Az

AMPが正しく設定されているか検証する方法

AMPが正しく設定されているかを確認する方法は、主に3つあります。

Chromeのデベロッパーツールを使用する
Google Search Console(以下、サーチコンソール)で確認する
構造化データテストツールを利用する

1.Chromeのデベロッパーツールを使用する

Chromeのデベロッパーツールでは、AMP HTML が定められている仕様に従って記述されているかを検証できます。

まず、AMP対応している該当のページを開いた状態でデベロッパーツールを起動します。
この際、 URL の末尾に「#development=1」をつけてください。

画面右上のアイコン(画像赤枠部分)をクリックすると、プルダウンでメニューが表示されますので、この中から「その他のツール」を選択します。
するとさらにメニューが開きますので「デベロッパーツール」を選択してください。

なお、ショートカットキー「Ctrl + Shift + C(Macの場合はCommand + Shift + C)」でも開けます。

デベロッパーツールが表示されたら「Console(画像赤枠部分)」をクリックします。
ここで「Powered by AMP HTML – Version〜」と表示されていれば、正しく記述されています。

2.サーチコンソールで確認する

Google からの評価を把握できるサーチコンソールでも、正しくAMP対応できているかを確認することができます。
この機能は2016年にサーチコンソール内に追加されました。

サーチコンソールを開きます。
画面右横のメニューのうち「検索での見え方」をクリックするとさらに詳細なメニューが表示されますので、その中から「Accelerated Mobile Pages」を選択してください。

インデックス数やエラーの原因・対象のページなどが表示されます。
こここで表示されているエラーをもとに、対応すべきページについては速やかに修正するようにしましょう。

3.構造化データテストツールを利用する

構造化データテストツールとは、構造化マークアップをチェックして、正しく解析・認識されているかを確認することができるツールです。
Google より、無料で提供されています。
このツールを使用して、正しくAMP対応できているかを確認することができます。

まず、構造化データテストツールにアクセスします。
以下の URL よりアクセスしてください。

構造化データテストツール

チェックしたいAMP対応のページの URL を入力し、テストを実行します。するとテスト結果が表示されます。
ここで「エラー」や「警告」が出ている場合は、AMPの記述に誤りがありますので修正してください。エラー・警告が0の場合は、正しく記述されています。

AMP ページのアクセス解析

AMPでは、ページの高速表示に影響を与えてしまうタグや読み込み速度を落とすスクリプトの使用が制限されています。
そのためAMPに対応しているホームページでは、アクセス解析が難しい状態にありました。

しかし規模の大きなメディアになってくると、アクセス解析タグを複数使用している場合もあります。
そこで Google は、 Googleアナリティクスに対応したことを公式ブログで発表しました。

実装の簡単な手順としては、AMPに対応した Googleアナリティクスようの JavaScript をロードして「」のタグを書き、この中に計測内容を記述する、とされています。
詳しくは以下の公式ブログを参照ください(英語表記です)。

参考：Announcing GA Support for Accelerated Mobile Pages (AMP) Analytics｜Analytics Blog

まとめ

Google は今のところAMPを検索結果のランキング要因とするかについては明言を避けています。
しかし、AMPによってユーザー体験が向上すればユーザー満足度が向上し、対応していないホームページに比べてこれまで以上に閲覧されるページとなっていくことは明らかです。

ホームページを構成するコンテンツや裏側で動作するコードなどによっては、AMP対応をいまだ検討している運営者の方もいらっしゃるでしょう。
AMPを活用するメリット・デメリットなどをよく鑑みて、自社のホームページを閲覧してくれるユーザーの満足度向上をめざしましょう。

このニュースに関連するカリキュラム

ホームページの成果を伸ばす具体的な施策とは

URL:https://ferret-plus.com/186

売上アップの公式は、訪問数Ｘ成約率Ｘ客単価で表せますが、具体的に何をしたらいいのかまでイメージをふくらませることが必要です。具体的な行動の成果をチェックしながら、ホームページを調整し精度をあげていく、それこそがホームページ運営といえます。

目次