Web技術トピック&コラム

Web/App Column 2016.01.13 (Wed)

AMPの新技術で高速スピード表示!

セッション7 Engage Track「Googleを活用したユーザーエンゲージメントとリテンション」

2015年12月9日パフィコ横浜で開催されたGoogle Playの開発デベロッパー向けのイベント「Google for Mobile」に参加しました。特に印象に残ったセッションをいくつか紹介していきます。今回は、「Googleを活用したユーザーエンゲージメントとリテンション」というセッションのレポートです。

アプリの話も前半あったのですが、後半のAMP(Accelerated Mobile Pages)の技術紹介がとても印象に残りました。
とにかく「情報を速く見せる」技術です。
ユーザーは3秒経過して表示されないと40%が離脱する(あきらめる)といわれているのです。

AMP(Accelerated Mobile Pages)とは

劇的に情報表示を高速化することを目的とした新しいフォーマットです。
基本的には従来のhtml技術ですが、独自のルール・フォーマットに対応させて制作する必要があります。

下記サイトのリンクをスマホ実機で閲覧すると体験できます。
fashion

情報元
http://insidesearch.blogspot.jp/2015/10/accelerated-mobile-pages-in-search.html

Googleが特に力を入れているampproject

GoogleさんがこのAMPの技術を広げようと力を入れているようです。
AMPに対応していれば検索結果も優位に表示される可能性もありそうです。
以前から、読み込み表示スピードがSEO的に影響があることは、 Googleが提供する「PageSpeed Insights」が示す通り、表示スピードはとても重要視されています。

また、Facebookアプリやpinterestなどは既にこの技術は既に活用されています。
「朝日新聞、BBC、BuzzFeed」など一部メディアが対応を表明しています。

ampproject公式サイト
https://www.ampproject.org/

amp技術情報

html記述サンプルファイルは下記Githubで公開されています。
https://github.com/ampproject/amphtml/tree/master/spec

cssも外部インポートが禁止で、すべてインライン記述が必要です。
画像や、SNSボタンなども、独自の記述が必要です。
JavaScriptも基本使えません。

例えば、画像ファイルを設置する場合も、imgタグではなく、


などと記述します。

さいごに

一見すると良いことづくめの新フォーマットですが、 制作する側としては、完全に通常のhtmlとは切り分けて制作が必要で手間がかかるのでこの技術がどこまで普及するかは定かではありません。

しかし、1ユーザーとして、情報が速く表示されるのはうれしいことなので、今後どうなるか楽しみでもあります。

Web技術トピック&コラムの一覧へ