デジタル広告での集客

AMPは速いけど、導入もまだ早いのか?~青いイナヅマが僕を責める~

「AMP」というキーワードがWeb界隈を賑わせて久しいです。
先日のgoogle webmaster conferenceでもいくつかトピックが出ていました。

いいから黙ってWEBサイトの読み込みを高速化しろ!というフレームワークです。
「そんなん知らん」という方も、おそらく全員が一度は無意識に見かけているはずです。

まだまだ発展途上のフレームワークですが、導入事例もなかなかに蓄積されてきましたので、ここいらで一度おさらいをしてみましょう。

そもそもAMPとは?

AMPとは「Accelerated Mobile Pages」の略です。ずばり言うと「モバイルサイトの高速化」です。AMPに対応したページはモバイルブラウザでは一瞬で画面が表示されます。AMPのフレームワークはAMPプロジェクトと呼ばれるオープンソース・プロジェクトとして、2015年にGoogleとTwitterによって共同で立ち上げられました。(しかしAMPにしろbootstrapにしろ、twitterの果たす役割には毎度頭が下がります。)

時代はアプリじゃない!?

スマホユーザーが費やす時間のうち約80%は、3つの主要アプリで占められており、また平均的なユーザーの1ヶ月あたりのアプリのダウンロード件数は1件未満。というデータがあります。つまり、新たにアプリを作成しても、それがダウンロードされ、なおかつ使ってもらえる可能性はとても低いということになります。

GoogleはWEBページの高速化こそ、ユーザーにとっては重要であるという立場をとっています。必ずしもAMPを必ず使う必要はないが、ページ表示の高速化はモバイルサイトにとっては絶対に必要な要素だ、ということはかねてよりGoogleは強調していました。

WEBサイトの高速化はマーケティングでもSEOでも重要

Google Chromeのデータによりますと、モバイルWEBサイトでページ読み込みに3秒以上費やすと、約50%のユーザーがサイトへの訪問を断念する、というデータがあります。
これは当然EC領域にも影響を及ぼし、コンバージョン率の低下やカート落ちの増加に有意に作用します。

WEBページを使った集客・販売をしている企業にとって、WEBページの高速化は命題ともいえるものです。また自然検索の順位決定にもページ表示速度は影響しますのでSEO対策においても当然注力しなければならない課題です。

AMPの仕組みと構造

AMPは、大きく分けると

  • 「AMP HTML」
  • 「AMP JS」
  • 「AMP Cache」

という3つの要素から成り立っています。
AMP HTMLやAMP JSによって構築されたそれらのページ情報を、AMP Cacheサーバーに事前にキャッシュします。ユーザーはWEBサイトのサーバーにはアクセスせず、AMP Cache上のキャッシュ情報を参照することで、ページが高速表示されるというのが基礎的な仕組みです。

AMP HTML

AMP用に定められたHTMLのコーディングルールです。ほとんどのタグは通常のHTMLタグと同じですが、AMP独自のタグ・記述方法があり、またAMP HTMLでは許可されていないHTMLタグや要素があります。
例えば、CSSファイルを読み込めないため、デザイン要素をすべてインラインスタイルで記述しなければなりません。
AMPプロジェクトがスタートした直後は、AMPでサポートされているコンポーネントが少なく、デザイン的にリッチなものを実装することができませんでした。しかし現在では対応可能なコンポーネントも増えており、通常のデスクトップ・モバイルサイトと同様のデザインを再現できるようになってきています。

AMP JS

これが一番びっくりなんですがAMPではJavaScriptが書けません。正確には非同期実行のモノでないと書くことが出来ません。
そこで表示速度を低下させずに、AMPで使用することが出来るJavaScriptのライブラリが提供されています。これがAMP JSです。これらは当然すべて非同期で実行されるため、ページ読込み速度に干渉しません。
カルーセルやサイドバーなどのコンポーネントをAMP JSライブラリから呼び出して使用することができます。

AMP Cache

ざっくりいうとCDNです。
AMPで作成されたページ情報をキャッシュしつつ、同時にページがAMPの仕様に基づいているかのチェックも行います。
ユーザーが 検索結果画面でリンクをクリックするとAMPCache上からページ情報を取得します。通常はWEBサイトのサーバーとの通信を行いますが、AMPの場合、GoogleのAMP Cacheからページ情報を読み込むだけで済むので表示が高速化されるというわけです。

AMPに対応しているサイトは、イナヅママークが表示される

AMP対応ページは、検索結果画面で、AMP対応していることを示す「稲妻」のようなマークが表示されます。またリンク先はWEBサーバーはなくAMP Cacheとなるため、URLもAMP用のURL[https://www.google.com/amp/s/www.example.com/]という形に変わります。

まとめ

大規模なWEBサイトや動的コンテンツの多いECサイトにおいては、当然開発の工数はかかりますがAMPを導入するメリットはありそうです。
また個人サイトや小規模なサイトですと、テンプレートやプラグインを用いた実装も可能です。WordPressではAMP for WordPressというプラグインもおりますので、チャレンジしてみてはいかがでしょうか?

それでは!

ABOUT ME
tsukasa
tsukasa
吉本新喜劇座長・小藪一豊と同じ身長にして、新垣結衣と同じ生年月日。 座右の銘は「只管打坐」。顔はもちろん小藪似。 リスティング広告を極めることを人生の目標に置きつつ、現在SNS広告運用に奮闘中!
インターネット広告運用のご相談はこちら

株式会社ワンクルーズは、北海道札幌市を拠点にインターネット広告事業を手掛けるWEBマーケティングカンパニーです。WEBを駆使し、札幌から、全国そして世界を代表する企業を目指します。

様々なニーズに応じた的確なプランニングを行い、ローカルビジネスに特化したWEB広告の集客手法で、ローカル企業がいかにWEBで集客しビジネスを成功させるかをサポートします。

実績を評価されGoogle社から受けた動画取材

メールでのご連絡電話でのご連絡

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です