Smart Communication Design Company
ホーム > サービス > Webサイト運用 > ファインダビリティ改善 > AMP対応

AMP対応

高速な表示パフォーマンスでモバイルユーザーのエンゲージメントを改善

スマートフォンやタブレット型端末の普及した昨今、外出先や移動中などのモバイルシーンにおいて特定のWebサイトを閲覧、ないし検索サービスやSNSを利用し特定のWebコンテンツを検索することは、珍しくなくなりました。

しかし、モバイル環境における通信速度は必ずしも高速かつ安定しているとは限らず、またアクセスしたWebサイトの表示やつくりがモバイル環境に最適化されているとも限りません。そのため、せっかくユーザーがWebサイトにアクセスしても、表示パフォーマンスの悪さからコンテンツを利用することなく離脱してしまうケースがあります。

ミツエーリンクスでは、こうした表示パフォーマンスに起因するエンゲージメントの低下を改善するための施策の一つとして、WebコンテンツのAccelerated Mobile Pages(以下「AMP」)対応を提供します。

サービス概要

AMPとは、Googleが中心となって開発を始めた、モバイルユーザー向けにWebコンテンツを高速で表示するためのオープンソースのプロジェクトであり、またそのフレームワークのことです。AMPではフレームワーク独自のルール、例えば

  • CSSをインラインに記述することでサーバーへのリクエスト数を抑制
  • 専用の「AMP JS」と呼ばれるライブラリ以外のJavaScriptの使用を禁止することで、サーバーへのリクエスト数とコンテンツの動的操作を抑制
  • Googleが提供するCDN「Google AMP Cache」の利用

により、Webコンテンツの表示を高速化します。その度合いは、Google Japan Blogの記事「モバイルウェブをもっと速く」によると、従来のページと比べ平均で4倍速いとされています。

AMP対応によって、モバイルユーザーがコンテンツをストレスなく利用できるようにするばかりでなく、コンテンツのカテゴリー次第では、Googleの検索結果画面においてモバイルユーザーの見つけやすい位置にコンテンツが表示されることが期待できます。そのようなファインダビリティの向上を含め、概してAMP対応はモバイルユーザーのエンゲージメントを改善します。

  • 仕様上の制約から、お問い合わせページなどにあるフォームのAMP対応は、2016年7月時点では実現することができません。ほかにも仕様上、完全なAMP対応を行うことの難しい(AMP対応が向いていない)コンテンツも存在しますが、その場合には代替案を検討します。

サービス特長

AMP対応の「仕組み化」を実現

AMP対応が比較的容易なのは、一定のフォーマットなり情報構造を伴ったWebコンテンツです。ニュース記事や商品紹介、Blog記事などがその代表例ですが、そうした定式化されたコンテンツは多くの場合、CMSやBlogツールなどで生成することが多いでしょう。そのようなバックエンド側のシステムの有無にかかわらず、HTML版コンテンツから可能な限り自動的にAMP版コンテンツを生成できるよう「仕組み化」を行い、Webサイトの運用を省力化します。

「構造化データ 提供支援」サービスとの協調

AMP版コンテンツがGoogleのモバイル検索結果でトップニュース枠にあるカルーセルに表示されるには、AMPの仕様(AMP HTML)に準拠した有効なページであるだけでなく、schema.orgを用いた構造化データの実装が必要とされています(2016年8月現在)。ミツエーリンクでは2014年8月より「構造化データ 提供支援」サービスを提供、コンテンツのメタデータ実装を支援してきましたので、構造化データの実装もAMP対応の範疇として提供できます。

サービス詳細

Webサイトの規模やカテゴリーなどを考慮し、AMP対応が必要なコンテンツの選定、AMPの制約を踏まえたビジュアルデザイン、既存コンテンツのAMP対応、将来追加される新規コンテンツに対するAMP対応の「仕組み化」(テンプレート作成を含む)を行います。そのほか、ご要望に応じAMP対応に紐付く関連サービスの提供が可能です。

表示パフォーマンスを犠牲にしないビジュアルデザインとAMPコンポーネントの活用

Webサイトのトーン&マナーとAMPの制約を考慮した、表示パフォーマンスの高いビジュアルデザインをご用意します。JavaScriptを用いた機能を自由に追加することはできませんが、AMP JSにはあらかじめコンポーネント単位で用意されている機能が複数あり、画像を一定間隔でスライドさせて切り替えるカルーセル(スライダー)や、タップした画像を全画面で表示させるモーダルなどが利用できます。

AMP対応品質の担保

AMPでは、フレームワークの持つ独自ルールに従うことで表示を高速化させるため、厳密に仕様に沿った設計と実装が必要になります。加えて、インラインで記述することのできるCSSの容量に上限があるなど、制約も少なからずあります。仕様とその制約をしっかり踏まえつつ、品質の高いAMP版コンテンツの提供を実現します。

サービスフロー

  1. 要件定義
    • 対応範囲
    • HTML版コンテンツからAMP版コンテンツへの変換方法
    • AMP版コンテンツのURL設計
    • 検品方法
  2. ビジュアルデザイン
  3. AMP版コンテンツの制作およびHTML版コンテンツからのリンク設定
  4. 検品
  5. 公開

Pick Up