Date: 2017/02/20

AMPってなに？WEBページが速くなる？

こんにちは、ANDSPACEのKNです。 最近は画像の高画質化やスクリプトの多様で肥大化しているモバイル用のwebページ、読み込みが遅かったり、表示のぎこちなさにイライラしている人はいませんか？ そういった不満を解消しようとGoogleが主導となり推し進めているAMPプロジェクトについてお話ししたいと思います。

AMP（Accelerated Mobile Pages）とは

読んで字のごとく高速化したモバイルページのことで、通常のWebコーディングとは少し違った［amp html］に対応したコーディングをする必要があります。 AMP対応されたWEBページは、複雑なスクリプトなどは使えないようになっているので軽くなるのは当たり前なのですが、GoogleのサーバーにAMP対応ページとしてキャッシュされます。モバイル表示される場合はGoogleが優先的にキャッシュから表示するので、通常のページよりも高速に表示されるようになります。 AMP

こちらの図はGoogle Developers Japanより引用しています。

AMPコーディングのルール

AMPに対応するにはいくつかの決まりがあります。 最低限の対応をしたAMPページのコードを見本にすると以下のようになります。 [html] <!doctype html> <html amp> <head> <meta charset="utf-8"> <title>タイトル</title> <link rel="canonical" href="通常ページのURL"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-custom> body{ background-color: #fff ; padding: 12px ; } </style> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "NewsArticle", "headline": "記事のタイトル", "image": [ "アイキャッチ画像" ], "datePublished": "2017-02-18T00:00:00+0900" } </script> <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> <h1>H1タイトル</h1> <p>サンプルテキスト</p> </body> </html> [/html]

細かく解説すると

01行目： [html] <!DOCTYPE html> <html amp>　もしくは　<html ⚡> <meta charset="utf-8"> この３行からはじめる必要があります。 [/html] 06行目： [html] AMP対応したページには <link rel="canonical" href="通常ページのURL"> 通常のページには <link rel="amphtml" href="amp要ページのURL"> この1行を入れることでGoogleが理解してインデックスしてくれようになります。 [/html] 07行目: [html] <meta name="viewport" content="width=device-width,minimum-scale=1"> 必ずviewportを指定しないといけない。 [/html] 09行目: [html]<style amp-custom></style> スタイルシートは外部参照することはできないインラインで記述する必要があります [/html] 27行目: [html] <style amp-boilerplate></style> AMP専用のスタイルで必ずheader内に記述必要があります。 [/html] 30行目: [html] <script async src="https://cdn.ampproject.org/v0.js"></script> AMP専用のスクリプトを読み込む必要があります。 [/html]

AMP対応のメリット

表示速度が格段に早くなるのはもちろんですが、Googleの検索結果に稲妻の様なマークと「AMP」と表記され他のサイトと区別されるほかに、カルーセルと呼ばれるアイキャッチ画像とリンクが表示される場合があることです。 それにともなって、ユーザーの目に止まりやすくなり流入が増えるかもしれないといった事になります。 blog_amp02 上の図は、映画について検索をした時のスクリーンショットです。

AMP対応のデメリット

AMPの仕様にそってコーディングするとシンプルなhtmlとCSSになります。 その為、現在のWEBページを修正すると見た目も随分シンプルになってしまったり、動的なWEBサイトには不向きといった事があげられます。 そうなると今のモバイルページとは別にAMP対応したページを制作することになるので、単純に工数も倍に増えて、手間がかかる事にもなります。

AMP対応のまとめ

昨年発表され、それほど大きなメリットがあるとはとても言えないAMP対応ですが、Googleではどんどん対応と開発がすすみ、新しいタグや仕様が追加されています。 今後どのように対応され、良くなるのか悪くなるのかさえいまだ、見えない部分もありますが、 次回は、「amp html」の専用タグについて、掘り下げていこうかと思います。
  • シェア