スマートフォンの検索結果に、「AMP」という文字や雷マークが表示されているのを見かけたことがありますか?

今回は、AMPとはどのような目的で導入されたものか、また、どのようなものなのかを説明していきます。

AMPとは

AMPとは、Accelerated Mobile Pagesの略でアンプと読みます。モバイルユーザーが快適にホームページを閲覧できるようにすることを目的としてGoogleとTwitterが共同で立ち上げたオープンソースプロジェクトで、一般的にはモバイル端末でホームページを高速で表示させるための仕組みを指します。

AMPプロジェクト公式サイト

ホームページの表示速度が遅いと、スマートフォンの場合特に、ユーザーが表示を待てない傾向があり、そのままページを離脱してしまうこともあります。AMPを実装すると、モバイル ページの表示速度が約4倍、データ量が約1/10になると言われていて、ユーザーはストレスなくページの閲覧をすることができます。

AMP対応をしているサイト

現在、AMP対応しているのは、ニュースメディアや食べログ等の情報サイトが中心です。時事要素を含む内容をGoogleで検索すると、AMP対応しているページがトップニュースとして画像つきでカルーセル表示されます。

また、Googleの検索結果では、AMP対応ページには雷マークが表示されます。

カルーセル表示

AMPアイコン

AMPの仕組み

通常、Googleなどの検索結果からWebページにアクセスする際、検索結果に表示されたリンクをクリックしてからサーバ上にあるHTMLやCSS、画像ファイルなどを読み込みます。そのため、読み込みが完了するまでに時間がかかります。

一方AMP対応しているWebページは、あらかじめGoogleやTwitterのサーバにキャッシュする（Webページのデータを一時的に保存する）ことで、リンクをクリックしたときに、通常はサーバにデータを読みに行くところをあらかじめ用意しておいたキャッシュを表示させ、読み込み時間を大幅に削減しています。

このようにAMP対応のWebページはキャッシュを表示しているため、オリジナルのURL（本来のURL）と異なるキャッシュ表示用のURLが表示されます。

オリジナルURLの表示の仕方

AMP対応ページからは、「オリジナルのページを見ることができない」「オリジナルのURLがわからず、コピーできない」といった問題点がありましたが、2017年2月にAMP対応ページに新機能が追加され、AMPページのヘッダーバーにオリジナルURLの表示・コピー・共有が行えるボタンが実装されました。

AMP対応ページのヘッダーのボタンをタップするとオリジナルのURLが表示され、URLをタップするとオリジナルのページが表示されます。また、URLを長押しすると選択肢が表示され、新しいタブでの表示、URLのコピー、メールやSNSでの共有もできます。

1. ヘッダーのボタンをタップ

2. オリジナルURLが表示

3. オリジナルURLを長押し

AMPの今後

オリジナルのURLが表示されないことは、コンテンツを提供している側にとってもデメリットが多く、上記の新機能の追加が行われました。今後は、オリジナルのURLのみを表示するようGoogleは取り組みを進めているようです。

また、今のところAMP対応しているのは、ニュースメディアや情報サイトが多いですが、商品を販売するECサイトなどでも対応が進められています。

まとめ

• AMPとはモバイル端末でホームページを高速で表示させるための仕組み
• AMP対応のページは、表示速度が約4倍、データ量が約1/10になるといわれている
• Googleの検索結果では、AMP対応ページには雷マークが表示される
• あらかじめWebページをGoogleやTwitter側でキャッシュさせることで読み込み時間を大幅に削減している
• キャッシュを表示しているURLと本来のオリジナルURLは異なる

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

アーティス

創造性を最大限に発揮するとともに、インターネットに代表されるITを活用し、みんなの生活が便利で、豊かで、楽しいものになるようなサービスやコンテンツを考え、創り出し提供しています。

最新記事 by アーティス (全て見る)

• Markdownドキュメントを共同編集できるツール「HackMD」を使って作業効率をアップさせよう！ - 2020年5月14日
• Windows 10 Insider Previewに参加して「WSL2」をインストールする方法 - 2020年5月7日
• positionプロパティを身に着けよう！stickyの仕様と使い方を解説！ - 2020年4月17日
• Dreamweaver CCでSassを使ってCSSファイルをコンパイルする（CSSプリプロセッサー機能） - 2020年4月16日
• 公式テンプレートを使ってAdobe XDのプラグインを自作してみよう ～starter project導入編～ - 2020年3月18日