1. ホーム
  2. コラム
  3. モバイル時代の高速化ページ新規格「Google AMP」とは?

モバイル時代の高速化ページ新規格「Google AMP」とは?

what is Google AMP(Accelerated Mobile Pages)

インターネット利用率でPCよりスマートフォンが上回るというニールセンの調査結果発表の衝撃から1年以上が経過し、2016年移行のWebサイト運営において「モバイルファースト」という言葉の重みがより一層増しています。

Google AMP(Accelerated Mobile Pages)とは?

Google AMP ScreenRecord

Google AMPとはモバイルの検索結果を高速化させる新規格で、HTMLとしての表現には多くの制約が課せられますが、引き換えにモバイル検索結果から爆速でWebサイトを表示させることができます。
Googleでキーワード検索を行うとAMP対応ページは検索結果画面上部にカルーセル表示され、そこから直接AMP対応ページが高速レンダリングでアクセスできるようになっています。対応ページには「AMP」のアイコンがつき、差別化されたコンテンツとして扱われています。
実際の動作はモバイル版Googleからキーワード検索して確認してみてください。

Google AMPの実装方法

コンテンツをGoogle AMP対応化させるには通常のHTMLページとは別に、パフォーマンス向上を目的に一定の制約が規定されたAMP HTMLでコーディングする必要があります。
公式サイトに掲載されているサンプルは下記のようになっています。

<!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>Hello World!</body>
</html>

htmlタグに対して 「⚡」または「amp」を付与してライブラリの読み込みを行います。絵文字を使うのがなんとも慣れませんが仕様なので…
CSSはインラインでコーディングし、外部読み込みは禁止となります。またcanonicalを付与することで通常のHTMLページに対する「重複コンテンツ」であることを宣言していますので、SEOに対するマイナス効果はなくなっています。

Google AMP対応化でメリット・デメリットはあるのか?

やはり気になるのは「WebサイトのGoogle AMP対応化によってメリット・デメリットはあるのか?」という点です。
Googleエンジニアの各所での発言を総合すると検索順位への影響は「今のところ」ないが、今後要因のひとつとして導入される可能性はあるという認識のようです。
では現時点でAMP対応化してもメリットはないのか…というと一概にそうとは言えません。

前述の通りGoogle AMP対応化されたコンテンツは最も目につく検索結果の上段に表示され、かつ高速レンダリングによりエンゲージメントが増加すると予想されます。本当に必要なのはPV数を稼ぐことではなく「ユーザーに認知されること」ですので、メリットは十分にあるといえるでしょう。
またGoogle アナリティクスが正式にAMPをサポートしているので、実際のエンゲージメントの効果測定も可能となっています。

参考サイト:Google アナリティクスが AMP (Accelerated Mobile Pages)のサポートを開始

逆にデメリットとなるのは通常のHTMLページとは別に、AMP HTMLでコーディングされたコンテンツを準備する必要がある点です。
同内容のページを二重に制作しなければならないため手間もコストも増大する事となり、数百~数千ページの規模のサイトとなると全ページを対応させるのはかなりハードルが高いと予想されます。

ただしCMSによって管理されているサイトの場合、テンプレートを工夫することでコンテンツ公開と同時にAMP対応ページを生成するなどの運用が可能になりますので、導入によるスケールメリットは大きくなると思われます。
このためニュースサイトやブログなどで先行して導入が進んでいるようです。

モバイル時代は「シンプルで高速なこと」が重要に

近年Googleが公言する通り、ゴテゴテとあらゆる情報を詰め込んだWebサイトよりも「シンプルで高速にアクセスできる」などよりユーザー体験を重視したWebサイトが検索で上位表示される方向にシフトしてきています。
AMP(Accelerated Mobile Pages)といったモバイルユーザーを重視した規格の登場からも、「モバイルファースト」の重要性が加速度的に高まってきおり、スピード感をもって臨機応変に対応できるサイト運営が必要になってきているのがわかります。
時代の波に乗り遅れないよう、今後もAMPの動向には注意していきましょう。


■コラム執筆者
第2ビジネスユニット アカウントサービス第11ユニット
芳賀 裕一郎

カテゴリ: Webサイト構築, スマホサイト制作
2016年08月31日

RSS