「速いらしいよ、AMP。」と言われてドキッとした方、ぜひこの記事を参考にしてください。
Official Launch Date for Google AMP Confirmedの情報によるとGoogleは2月24日にAMPを公開すると噂されていました。
本記事の公開時点でGoogleからの正式なアナウンスは出ていませんが、少しずつ展開が始まっているようです。
［追記］
2016年2月25日にGoogle Developers Japanで正式に発表がありました。日本の対応パートナーや表示が高速化される仕組みが書かれてあります。
http://googledevjp.blogspot.jp/2016/02/google-accelerated-mobile-pages.html
AMP（アンプ）は、モバイルページを高速表示させる技術＆プロジェクトの名称です。
インターネット業界お得意の頭文字3文字ですね。今回はAMPプロジェクトってどういうもの？導入するとどんなメリットがあるか、導入方法などについて解説します。
AMPを実装したページは「速い」どころではなく「爆速」と言われています。その速さを簡単に体感することもできますので後ほど改めてご紹介しますね。
AMPって何？
まず初めにAMPについての基礎知識です。
AMPは「Accelerated Mobile Pages」の略で、モバイルページ閲覧を高速化させる技術です。
かつ、複数社から成るプロジェクトの名称でもあります。プロジェクトを主導したのはGoogleで他にもTwitterをはじめとする約30社が参画しています。
力のある企業がこぞってプロジェクトに参加していることで大きな注目をあつめていますが、なぜ大々的にAMPを開発するに至ったかは当然スマートフォンからのアクセスが大きな成長を続けているからです。
でもふと疑問に思うことは、パソコンではこのような特別プロジェクトが始動した歴史はないということです。なぜモバイルだけ必死になるのだろうと感じませんか？
これはアプリへの対抗策だと想定できます。Googleにとってはモバイル検索、ページ閲覧をしてもらうことが基本です。
しかしニュースや天気予報はアプリで閲覧しているという人も多いのではないでしょうか。
毎日閲覧するものはサクサク動くアプリの方が手軽という意見もあります。
プロジェクトを立ち上げてまで高速化を推進する背景には、モバイルからのアクセスがアプリへ流れることを食い止める動き、そしてさらにモバイルからのWebアクセスを増やしたいという目的があると言えます。
AMPは「モバイルページで情報を閲覧してもアプリ並みにサクサク動く」ということを実現するためのプロジェクト＆技術です。実際に体感してみると本当に速いです。
AMPをもうちょっと詳しく＆体感してみよう
AMPがモバイルページ閲覧を高速化させる技術だとわかったところで、もう少し深く理解を進めてみましょう。
AMPはどんな言語で書かれているの？といった開発部分、そして表示速度は実際どれぐらい？といった部分についてです。
まず開発基盤は「AMP HTML」という新しいフレームワークです。
これはオープンソースとして公開されているため、技術仕様が順次ユーザーに広がっていっています。
ではAMP HTMLは通常のHTMLとどのぐらい違うの？というのが気になるところですね。
画像を例にとると、
- HTML：img
- AMP HTML：amp-img
といったふうに違和感のない形式でタグが準備されています。
属性はsrc・altなど見慣れたものが採用され、新たにlayout=”responsive“といった画像幅が可変に設定できる属性など新たなものがいくつか採用されています。
上記は一例ですが、他にも広告表示、CSSなどさまざまな記述形式が指定されています。
多少のハードルはありますが、HTMLを知っていれば違和感を覚えず乗り越えられるレベルです。
ちなみにモバイルで高速表示させるにあたって一番時間を食ってしまうのはリクエストです。
画像の重さももちろん関係していますが、リクエストを投げて受け取る時間の長さが待ち時間になるのです。そしてAMP HTMLはリクエストを最小限にするために工夫されています。
AMPを体感してみる
ではお待たせしました。実際にどのぐらい早いのか体感してみてください。
下記のリンクはAMP技術を使って作成されているページです。ただしパソコンからクリックしても何の変哲もありません。モバイルからお試しください。
PCで閲覧している方は下記にQRコードを用意したので読み取ってみてください。
どうでしょうか？家に帰りたくなってしまうような美しい夕焼け空がサクっと表示されませんか？
体感すべきことはまだ終わっていません。上記の画面から夕焼け空の画像のどれか1つをクリックして画像を表示させます。
その後、画面をスワイプ（左か右に引っ張る）させると次の画像がまたもやサクっと表示されます。インターネット接続していることを忘れるかのごとく、ストレスフリー・待ち時間フリーです。
AMP導入におけるメリット
AMPについて詳しい技術や体感もできたことで、改めて導入メリットについて抑えておきましょう。
新たな技術を取り入れるには当然それなりの工数がかかります。メリットがわかっていなければ工数をかける決断ができませんよね。
とにかく速い
スマホの難点はページが表示されるまでの待ち時間。AMPであればサクサク表示されるのでユーザーストレスを軽減できます。
検索結果で優先的に上位表示される可能性高
どう優先的に上位表示されるか詳細は公開されていませんが、AMPに対応することで上位表示される可能性があることを Googleは発表しています。
話は変わりますが、2015年4月のアルゴリズム変更で「モバイルフレンドリー」つまりモバイル対応をしているかどうかを検索結果表示の評価基準に加えることになったことは記憶に新しいニュースですね。
AMPについても近い将来これと同様になる可能性があります。
Googleのポリシーは常にエンドユーザーのメリットを追求すること。今回のAMPも表示速度が劇的に変化することがわかっているので、いずれはアルゴリズム変更が発表される可能性が高いでしょう。
メリットは以上です。
え？これだけ？と感じた方もいらっしゃるかもしれません。
でもこの2つさえあればもう十分です。リアル店舗で言えば、「お客さんが見て回りやすい店内」＆「店舗が入っているモールがその店舗を優遇してくれる」ということですから。
では次にデメリットも見ていきましょう。
すべての企業、サイト管理者にとってデメリットになるとは限りませんが、AMPでできないことを把握しておくと開発がスムーズです。
AMP導入におけるデメリット
静的ページでしか使えない
AMPはHTMLページでしか実装することができません。
SEOの観点からも静的ページの方が望ましく動静両ページを利用しているサイトもあると思いますが、静的ページにのみしかAMPを実装することはできないことを覚えておきましょう。
JavaScriptは使えない
これは前述した“静的ページでしか使えない”というのとほぼ同じ意味ですが、デバイスごとに表示ページを判別するスクリプトやポップアップ表示や外部APIを動かすことはできません。
AMPはいかに高速表示させるかを追求しているので、時間を要するものは排除しているということですね。
広告の表示形式が定められている
AMPでは広告の表示形式を「iframe」で表示することが定められています。
広告を表示するのもリクエストを送信し時間がかかることが原因と思われます。
そしてここから先は予想段階のお話しです。
おそらくページコンテンツが表示し終わってからiframeの記述を読みに行くといった順番が設定されているor今後されることが予想されます。
つまり、もしページの上部に広告を配置していたらページ全体を読み終わってからしか広告が表示されず、ユーザーには「なんだか余白が大きいなぁ」と感じる時間が多少生まれる可能性があります。
スマートフォンで高速表示をさせることに追求するとこれらのデメリットはとても容易に想像がつきますね。
AMPの導入方法は？
ではAMPの導入方法についてです。
疑問点に沿って解説していきます。
導入にあたっての正式な情報はどこで参照する？
2016/2/8、Googleウェブマスターツールにおいて「AMP 導入ガイドの日本語版 PDF」が公開されています。
さらに個別のタグや属性についての詳細な情報はAMP プロジェクトの公式ページで公開されています。（まだ英語のみの対応）
参考：Accelerated Mobile Pages プロジェクトについて — 導入ガイド日本語版を本日公開しました
「AMP 導入ガイドの日本語版 PDF」はわずか5ページ程度で、基礎的な情報のみです。
細かい仕様や記述方法を参照しようとすると英語表記のページへリンクされる状況です。
ただ、基本的にはHTMLと似通ったものではありますので英語の知識がなくてもある程度は参照して記述ができるはずです。ぜひ一度見てみると良いですね。
WordPressでAMPを導入できる？
WordPressのサイトであればプラグインをインストールすることでAMPをすぐに導入することができます。一瞬です。
このプラグインは「AMPページの自動化」を目的とされているため、インストールするだけで自動的にAMPページが作られていきます。
こちらはまだ正式版ではないため、デザインが固定される・構文エラーが発生するといったことが報告されています。おそらく順次修正対応されていくはずです。
導入前後のWebページの見え方を比較したい
個別のページ変更・プラグインなどの方法でAMP対応を行った後は、どんな見え方をしているか確認します。
その場合はURLの最後に「?amp=1」あるいは「/amp/」のどちらかを付与すると、AMP対応ページを見ることができます。（何も対応をしていなければもちろん見ることはできません）
今すぐAMP版と通常版の見え方を比較できるページは以下です。
※モバイルでご覧ください。PCでもデザインの違いがわかります。
The Verge記事 AMP版
http://www.theverge.com/platform/amp/2015/10/7/9467149/google-accelerated-mobile-pages-caching-preview
The Verge記事 通常版
http://www.theverge.com/2015/10/7/9467149/google-accelerated-mobile-pages-caching-preview
（URLの中にplatform/ampがあるかどうかです）
導入後はどんな変化がある？
ここが一番ポイントですね。
AMPはGoogleだけに向けての対策ではなく、ユーザーに向けての対策です。
なのでAMPページをインデックスさせればページが高速表示されユーザーメリットがあります・・・と言いたいところですが、まだ明確にはそう言えません。
現時点では順次対応している程度でどのような反応があるか分かりません。
近い将来AMPページが完全に表示される準備はしておいて良いかもしれません。
まとめ
モバイルからのアクセスは増加し続け、スマートフォンからいかにユーザーを取り込むかはどの企業・サイトにとっても大きな課題です。
そしてそれはGoogleも同じこと。スマホユーザーがGoogle検索を日々活用するにはどうすれば良いかを考え、今回ご説明したAMPのプロジェクトや技術革新に乗り出しているのです。
スマホユーザーに自社サイトをもっと快適に閲覧してもらうために、AMPは今後展開と拡大が予想されます。導入や検討、テスト的に対応するなどユーザーへの提供を考えてみてはいかがでしょうか。
![記事本文を抜粋表示する文字数と文末の[…]を変更する方法](https://whitebear-seo.co.jp/wp-content/uploads/wordpress-popular-posts/4920-featured-94x62.png)
