コーディングメソドロジー

第96回 Google AMPについて - 概要編 -

最近いろんな場所で「Google AMP」についての話題を目にすることが多くなりました。モバイルでのページ表示を高速化するもので、日本でも Google 検索結果への正式対応が予定されており今後のモバイルページの主流になることが予想されます。そんな今が旬の GoogleAMP について概要編と実装編の2部構成でお送りします。今回は概要編として「AMP とは何か」「どのようなメリットがあるのか」を紹介いたします。

【図①】 ページの関係

■AMP とは

AMPとは「Accelerated Mobile Pages」の略で、GoogleやTwitterなどが共同で参加しているAMPプロジェクト(https://www.ampproject.org/ja/)が構成した、モバイル端末でウェブページを高速表示するためのフレームワークです。

このフレームワークを用いることで、従来の様に「モバイル端末でページを読み込む」のではなく「GoogleなどのWebサービス側で用意されたWebペ ージの情報(キャッシュ)を読み込む」ことでアクセス時間を短縮して表示することが出来ます。

■AMP 対応ページの作成について

既に存在するページをAMP対応させる場合は、下記の手順にて実装します。

① AMPの基準に沿った新規ページを作成する

② 既存ページのlink relに"amphtml"指定する

③ AMP対応ページのlink relに"canonical"指定する

このlinkの指定によりGoogleにはAMPページの存在や関係性を知らせると共に、モバイルからアクセスした場合はAMP対応ページを表示、PCからのアクセスは既存ページを表示というように、自動的にユーザーエージェントを振り分けられるようになります。

■AMP 対応が効果的なページ

図2 AMP対応ページの検索結果

AMPは、ニュース/映画情報/製品ページ/レシピ/レビュー/動画/ブログなどの"記事として情報がストックされるページ"には特に有効です。AMP対応したページはGoogle検索結果に図② のようにAMP対応マーク( が表示され、記事一覧がカルーセル表示になりスワイプ操作で記事一覧を見られる為、ページにアクセスする前に多くの情報を得る事が出来ます。

実際にアクセスした記事も、画像を含めたコンテンツが瞬時に表示され、記事のページ内でもスワイプ操作で次の記事を瞬時に表示する事が出来ます。私も試しにアクセスしてみましたが、いつもはモバイルページ全体を表示するまでの時間が体感で3~5秒ぐらいなのが、1秒かからない程度の速さで驚きました。

■現在の対応状況

2016年12月現在の情報では、AMPは「AMP JS」以外のJavaScriptが原則使用不可のため、 JSを使うような動的なページには不向きとなります。CMSについては、WordPressはAMP対応化するプラグインが公開されています。(https://wordpress.org/plugins/amp/) 一方、 MovableTypeはまだ主要なプラグインはありませんがテンプレートによる実装は可能のようです。いずれも今後正式導入に向け様々な情報、プラグイン等が整っていくかと想定されます。

詳しい実装方法については次号の「実装編」でお伝えしますのでご期待下さい。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム