なぜAMPなのか?HTML5+レスポンシブではダメな理由

AMP(Accelerated Mobile Pages)について一通り学んでも、なぜ AMP なのか?なぜ HTML5 + レスポンシブウェブデザインではダメなのか?なぜ Google は AMP を猛プッシュしているのか?なぜ巨大メディアが一斉にAMP化しはじめたのか?といった疑問が残ったままでしょう。

AMP(Accelerated Mobile Pages) = 高速レンダリングの技術 という面が強調されます。それはAMPの最優先課題だったとともに、数値化でき、誰でも簡単に体感できるからです。しかし、本当のAMPはレンダリングの高速化だけではなく、モバイルWeb全体の再構築にあります。

これまでの研究成果をもとに「本当のAMP」を徹底解説いたします。
※研究過程につき一部弊社の私見が含まれております。

 

時代はパソコンからモバイルへ

パソコンからのインターネット利用が急減したわけではありません。しかし主役はモバイル(スマートフォン)になりました。この時代の変化はアメリカや日本だけではなく、全世界でおきており、AMPを知る上での絶対条件となります。

 

AMPを知るカギは Apple と Facebook社

AMP(Accelerated Mobile Pages)を知る上では、Google の競合企業 Apple と Facebook社 がカギとなります。
※Facebook と書くと、SNS の Facebook なのか 企業の Facebook なのかわかりにくいため、この記事では前者を(SNSの)Facebook、後者を Facebook社 と区別することにします。

Apple

モバイルを語る上で iPhone の存在を欠かすことはできません。グローバル・シェアでは陰りが見られるものの、Apple・iPhone は依然 Google・Andorid の強力なライバルです。iOS の標準ウェブブラウザ Safari に広告ブロック機能を搭載し、Google を牽制したのも記憶に新しいところでしょう。この広告ブロックこそが AMP を生んだという説もあります。

Facebook社

Mark Zuckerberg f8 Keynote

日本円にしておよそ7200億円!過去最高益を更新したFacebook社。2.7倍成長はモバイル(スマートフォン)向け広告の拡大が大きく、広告事業を柱とする Google にとって最も脅威的な存在といえます。

「えっ、(SNSの)Facebook ってまだそんなに急成長しているの?」と思われるかもしれません。世界中の若者を虜にしている Instagram、世界最大のインスタントメッセンジャー WhatsApp が Facebook社の傘下だということをお忘れなく!

Facebook社は Instagram と WhatsApp を傘下にしたことより世界最強のネイティブアプリ配信元になりました。

[補足] 日本では LINE が圧倒的なので WhatsApp は馴染みの薄いものですが、WhatsApp はユーザー数10億人超、世界最大のインスタントメッセンジャーです。

 

事業領域は違いますが、この2社に共通するのは、Google と切り離された状態でも持続的発展ができることです。とくにFacebook / Instagram に(Google の収集できない)膨大な情報が蓄積されてゆく現状は、「世界中の情報を整理し、世界中の人々がアクセスできて使えるようにすること」を企業スローガンとする Google にとっては好ましいものではないでしょう。

[補足] Google はネイティブアプリ内の情報を収集・整理することはできません。ストアに公開されているアプリ概要や App Indexing によりアプリが意図的に公開する情報程度です。

 

一方のGoogleは?

今でこそ Android というモバイルOS・デバイス関連事業も展開していますが、Google といえばインターネット検索( Google 検索)です。検索連動広告( AdWords )と世界中のウェブサイトに広告ネットワーク( AdSense )を展開。インターネット関連産業を今のポジションに押し上げたといっても過言ではありません。

Google は“インターネットの道”となり、世界中のウェブサイトは Google 検索に大きく依存し、Google もまたウェブサイトの発展が自社の利益拡大に繋がる状態になりました。つまり、「 Web の発展は Google の発展」という関係があり、この関係も AMP を知る上で重要になります。

大きく出遅れたモバイルシフト

Google の莫大な売上の多くはパソコン版ブラウザによりもたらされました。その大きすぎる成功のためか、モバイルシフトで競合他社に完全に出遅れています。実際、2016年の今でも Google 検索はパソコン版サイトを基準にしており、モバイルへの本格的シフト(モバイルファーストインデックス)は2017年まで待たなければならない状態です。

Google公式ブログでも自ら「依然として」と表現しています。

最近では、Google 検索を使用しているほとんどのユーザーは、モバイル端末から検索を行うようになりました。しかし依然として、Google のランキング システムは、主にデスクトップ版のコンテンツを用いてユーザーとの関連性を評価しています。

出典: https://webmaster-ja.googleblog.com/2016/11/mobile-first-indexing.html

ここまでのまとめ

  • 時代はパソコンからモバイルへ
  • Google はネイティブアプリの情報を完全には収集・整理できない
  • Apple はネイティブアプリ配布の大元
  • Facebook社は最強のネイティブアプリ開発元
  • Facebook社は Google の生命線、広告で猛烈に売上拡大中
  • Google はモバイルシフトで大きく出遅れ
  • Web の発展は Google の発展

Google はモバイルWebを(再び)発展させ、ネイティブアプリに勝てるようにならなけれならないのです。
とくに Google の生命線 オンライン広告(それも将来有望なモバイル市場で)猛烈に売り上げ拡大している Facebook社のアプリ( Facebook / Instagram / WhatsApp )に勝つことが至上命題といえます。

[補足]日本は世界一 iPhone が好きな国なので感覚としてわかりにくいですが、世界的な販売台数は Android が iPhone を圧倒し、その差は広がりはじめています。iOS Safari 広告ブロック導入のような事態の再発は避けたいものの、Apple との緊張関係は落ち着いてきたように感じます。

一方、Google+ で Facebook社との SNS 直接勝負に惨敗、さらに Facebook社のモバイル広告が絶好調の現状があります。Apple 以上に Facebook社に手を焼いているように感じます。

 

さて、お待たせいたしました。下準備がすべて整いました。ここから一気にAMPの全貌を見ていきます。

 

レガシー化する HTML5 + RWD、そしてAMPへ…

Accelerated Mobile Pages is faster than HTML5
2016年現在、多くのウェブサイトは「HTML5 + レスポンシブウェブデザイン(RWD)」によって作られています。

技術解説が目的ではないので、とても大雑把に説明させていただきます。

HTML5

HTML5 は文字、画像、動画、音声、地図、グラフィック描画まであらゆる表現ができるウェブの標準技術です。極めて自由度が高く、デザインを整える CSS、動きや機能を操作する JavaScript と合わせることで、ありとあらゆるアプリケーションを作ることができます。もちろんパソコンだけでなく、スマートフォンのブラウザでも問題なく動きます。

レスポンシブウェブデザイン(RWD)

レスポンシブウェブデザイン(RWD)はパソコン/タブレット/スマホを問わずあらゆるデバイスに対して1つのページ(正確には1つのHTML)で対応する手法です。Google の推奨手法ということもあり、2012年頃から一気に普及。今では多くのウェブサイトが RWD で作られています。
※RWD 登場前はパソコン向けサイト、スマートフォン向けサイト、フィーチャーフォン向けサイトといったようにデバイス毎に専用ウェブサイトを用意するのが一般的でした。

遅いHTML5 + レスポンシブ

モバイル最適化されたネイティブアプリに比べると、HTML5 は表示が遅く反応が鈍くなってしまいます。さらに レスポンシブウェブデザイン(RWD) というモバイルに特化していない“合いの子”の構築手法により、モバイルWeb は「とても遅いもの」へと成り下がってしまいました。

それは Google も公式ブログで「とても遅いもの」と強烈に批判している程です。

2016 年にもかかわらず、モバイルでのウェブの閲覧は依然としてとても遅く、ユーザーは速くページを読み込めないというだけで閲覧を諦めてしまうという事実は信じがたいものがあります。

出典: https://webmaster-ja.googleblog.com/2016/08/amp-your-content-preview-of-ampd.html

そこで Google / Twitter を中心とする初期AMPプロジェクトでは、モバイルWeb が生き残るための最優先課題として「とても遅いHTML5 + RWD」の改善に取り組みました。

結果できあがったのが下記です。

  • AMP HTML
  • AMP JS( JavaScript の利用制限)
  • モバイルオンリー

AMP HTML + AMP JS によるレンダリング速度の劇的な向上は、この記事で説明するまでもないでしょう。省略します。注目なのは3つ目のモバイルオンリーです。(和製英語感たっぷりで恐縮です、許してやってください…。ジャストモバイルの方がよいでしょうか…。)

これまでも「モバイルファースト」という設計手法はありましたが、AMPは「モバイルオンリー」という点が決定的に異なります。パソコン時代の延長 HTML5 + レスポンシブWebデザイン と異なり、AMP(Accelerated Mobile Pages) はモバイル時代に対応するためのモバイルWeb 専用のエコシステムなのです。

[補足]HTML5 + RWD が“オワコン”というわけではありません。

AMPは制限が厳しく、HTML5でしか実現できないコンテンツやページも多くあります。また、モバイルWeb全体の傾向として「とても遅い」だけで、サーバ等のインフラやHTML/CSS/JavaScriptや最適化により、HTML5 + RWD でも高速に配信・表示可能です。

あなたのウェブサイトでAMP対応すべきかは、ウェブサイト特性やページ・コンテンツ要素を正しく見極めてから判断する必要があります。

 

さて、まだまだ続きます。

オープンソース化

“HTML5 が遅い”のは表示だけではありません。HTML5 の仕様を決める組織( W3C )は、かなりの慎重派として広く知られています。実際 HTML5 は草案(ドラフト)が2008年1月、勧告(リリース)が2014年10月と、6年以上の月日を費やしています。

ライバルが日々進化する中 HTML5 の進化を待っていては完全に手遅れになってしまいます。そこで Google は AMP をオープンソースとすることで、W3C に依存しない迅速な開発体制を整えました。

AMP プロジェクトは下記 Github にて開発が進められています。オープンソースなので世界中の誰もが開発に参加することができます。
AMP Project – Github

ウェブサイト毎に異なるUXの統一

AMP(Accelerated Mobile Pages) では JavaScript を使えないため、ユーザーの操作に対応した機能や動きのあるパーツを自由に作ることはできません。エンジニアの誰もが「制限が厳しすぎる!」と感じるでしょう。それもそのはずで、AMP は高速化とともに「モバイルWeb のコンテンツ利用時のブラウジング エクスペリエンスを一定に保つこと」にも取り組んでいます。

※ブラウジング エクスペリエンスという言葉はあまり使用されないので、以下では一般的な用語ユーザーエクスペリエンス(UX)に置き換えます。

HTML5 + JavaScript はありとあらゆる機能や動きを可能にします。ブラウザの標準的な操作を改変することでさえも朝飯前です。この自由で柔軟な組み合わせにより、各ウェブサイトはウェブサイトに適した方法でユーザーエクスペリエンス( UX )の最適化を行ってきました。

しかし部分最適化が全体最適化にならないのはよくあることで、各ウェブサイトが作り込めば作り込むほどにモバイルWeb全体としては不均質なものとなります。ネイティブアプリでは一定以上の UX 統一が図られていますが、HTML5 のウェブサイトでは、同じアイコンの UI パーツをタップしてもウェブサイト(もしくはウェブページ)ごとに異なる反応が起こります。ユーザーはウェブサイトごとに異なる操作方法をおぼえなければなりません。

そこでAMPではフォーム、サイドバー、アコーディオン、カルーセル、動画再生といった要素や機能をAMP独自の拡張機能として提供することで、レンダリング速度向上とユーザーエクスペリエンス( UX )の共通化を図っています。逆にいうと HTML5 + JavaScript の自由を意図的に制限しているのです。

[補足] 現段階では拡張機能が十分とは言えず、自由で柔軟なHTML5に慣れていると、とても窮屈で貧弱に感じるのはいたしかたありません。AMPの今後の発展に期待しましょう。

 

[補足] AMP 誕生にあたっては iOS Safari の広告ブロック機能の存在を無視できません。AMP では広告までも一貫性のある UX にするため、広告専用の拡張機能が用意されているのも興味深いところです。

 

コンテンツ配信ネットワーク

レンダリング速度の劇的な向上、迅速な開発体制、一貫性のあるUXと、モバイルWebはネイティブアプリに対する弱点を克服しました。しかし、Facebook社のアプリにはそれでもまだ確実に及ばないことがあります。

コンテンツの配信速度です。どれだけレンダリングが高速でも、AMP HTML ファイルがサーバから届かなければ、ブラウザは読み込み画面のまま、ユーザーは待ちぼうけになってしまいます。

Facebook社のアプリは強固な Facebook社のサーバから配信されるので、配信速度面での心配はないでしょう。しかし、星の数ほどあるウェブサイトの場合はどうでしょう。億単位のコストをかけたサーバ群からワンコインの格安共有サーバまで、品質は全くもって一定ではありません。

そこで Google は AMP に Google AMP Cache という CDN(コンテンツデリバリーネットワーク)を取り入れました。(CDN はとても専門的で複雑なので、とても大雑把に説明させてください…)これにより AMP 化されたモバイルWebページは Google の強固なサーバから配信されるようになり、コンテンツ配信速度も Facebook社アプリに引けを取らなくなりました。

AMP(Accelerated Mobile Pages) に関するシステムの中で Google AMP Cache だけは浮いた存在で謎に思われるかもしれませんが、対Facebookアプリの上では欠かせない要素なのです。なお、Google AMP Cache に関して、ウェブサイト製作者は特に何もする必要はありません。正しい AMP HTMLページであれば、Google が自動的に処理してくれます。

どうでしょう。AMP(Accelerated Mobile Pages)は全くもってレンダリング高速化だけの技術ではありませんね。

極端な言い方をするなら、AMP に乗っかるだけであなたのウェブサイトが Faceook社ネイティブアプリ並みの品質になるのです!

 

AMPの今後は?

散々に持ち上げてなんですが、どんなに素晴らしい技術であっても普及しないことはあります。

実際に案件をこなすと痛感しますが、AMP には制限がとても多く、「出来ること」は少なくなるのに多くの手間(工数)が掛かります。現場のエンジニア・デザイナーのモチベーションがあがりにくく、既存ページのAMP化は“痛みを伴う改革”でもあります。

現時点では Google 推奨のモバイルWeb 構築手法は「HTML5 + RWD」 と 「AMP」 のダブルスタンダード状態で(それは、おそらく長期的に)、AMP の位置付けは曖昧と言わざるを得ません。

ただ、Google の AMP への力の入れ具合は異例とも言えるものです。

モバイル検索結果にカルーセル特別枠を設け、「AMP 対応ラベル」を全面導入するなどGoogle社プロダクトでの猛プッシュは当然ですが、それだけではありません。AMP プロジェクト公式サイトには、世界有数のウェブメディア、プラットフォーマーが名を連ね、開発はオープンソースとして世界中のエンジニア・デザイナーを巻き込み Github 上で進められています。

過去に Google が世界中のウェブメディア、プラットフォーマー、エンジニア・デザイナーにこれほどまでに協力を呼びかけたプロジェクトがあったでしょうか?

「AMP の普及なしにモバイルWeb は生き残れない」というほどの意気込みを感じます。

さて、まとめます。

本当のAMPとは?

AMP(Accelerated Mobile Pages) は単なるレンダリングの高速化技術でなく、モバイルWeb 全体を最適化・再構築するために、Google と世界中のエンジニアが考えに考え抜いて作った(そして現在進行形で作られている)エコシステムです。

  • モバイルファーストではなく、モバイルオンリー
  • 時代の変化に応じて迅速に開発・改良されるオープンソース・プロジェクト
  • レンダリングからネットワークまでモバイルWeb全体を再構築・最適化
  • カオス化したモバイルWeb の UX(ユーザーエクスペリエンス)を再構築・全体最適化
  • Google のインフラを利用した高速で安定した配信システム(CDN)
  • 乗っかるだけでウェブサイトがネイティブアプリや Facebook社アプリ並みの品質に向上
  • モバイルWeb が生き残るためのすべてを投入したGoogle本気のプロジェクト
  • まだ発展途上。普及するかは Webエンジニア・Webデザイナーの不断の努力にかかっている(?)

モバイルWeb を盛り上げていきたいので、少しでも役に立ちましたら、シェア、ツイート、はてブ大歓迎!よろしくお願いします!

もちろんAMP関連のご依頼・相談もどうぞ!(宣伝)