【イラスト付き】AMPとは？導入してユーザー体験を改善しよう！

ブルーちゃん、ちょっといい？

このAMPってなにかしら…

資料に書いてあるんだけど、何かわからなくて

AMPとは、パソコンに比べて通信速度やネット環境が不安定になりやすいモバイルでも、快適なネット環境でいられるように開発されたシステムのことだよ

具体的にどんなことをしてくれるかというと、AMPをページに設定しておくと、ページ内のコンテンツを瞬時に読み込んで、端末に表示してくれるようになるんだよ！

AMPを導入することで読み込み速度を高めて、モバイルで検索するユーザーの利便性を向上することが目的なんだ

実際にモバイルを使って検索してみると…

こんな感じで雷のアイコンがついているものが表示されるよ

これはAMPに対応しています、ってことなんだ

AMPは2015年にGoogleとTwitterが始めた事業なんだ

AMPは以下の仕組みを使って高速表示をしてくれるよ

簡単に説明すると、本来はサイトにアクセスすると自社サーバーにアクセスして、Webサイトのデータ(HTML,CSS,Javascript)を読み込んでユーザーの端末に表示するのに対して、

AMPを導入すると、GoogleのサーバーにあらかじめWebサイトのデータをキャッシュしておくことで、ユーザーの端末に表示する時間をとにかく減らすことができるんだ

ただ、AMPを導入すると一部のJavascriptが使えなくなるから、予約カレンダーのデータ更新や、ドル円チャートなどのページ情報が変動しやすいサイトには向いていないんだ

実際にAMPを対応させたらどんなことが起きるか見てみよう

一番のメリットはやっぱりサイトを早く表示してくれることだね

読み込みが遅いサイトほど離脱率がどうしても高くなるんだ

2018年のGoogleの発表では『3秒以上読み込みにかかるページは53%離脱してしまう』らしいんだ

そうなんだ

さらに滞在時間が長くなればサイトの評価も上がりやすくなり、自然と検索上位に上がりやすくなるんだよ

その通り！

もちろんいいところばかりでないよ

さっきも言ったけど、AMPは早くサイトを表示することを目標にしているからよりシンプルなサイトを好むんだ

AMPの仕様に沿ったものにすると、サイト上の制限は増えてしまうよ

おしゃれな装飾なんかはつけにくくなり、シンプルなWebページになりがちなんだ

また、今のページをそのままAMPに適応させると崩れてしまう可能性があるんだ

AMP自体まだ新しいものだから、これからのアップデートに期待だね

ここまで見てわかる通りAMPに向いているコンテンツ、向いていないコンテンツがあるよ

向いているコンテンツは

など、動きの少ないコンテンツになるね

これらの場合派手な装飾やサイト内で動的な動きがないからAMPに対応しやすいよ

また、ページの全部をAMP対応にせずとも一部だけでもかまわないんだ

静的なページのみ徐々に移行するなど、良さが生かせる使い方をしてみるのもいいね

じゃあ実際AMPを使ってみよう

主な2パターンを紹介するね

一番簡単なのはWordPressを使った方法だね。WordPressを使っている人はこの方法をやってみよう

プラグインは、そのシステムを拡張させるオプションのようなものだよ

AMP公式のプラグインが公開されているのでそれがおすすめ

独自のWebサイトを使う場合、AMP用のHTMLを実装することで作成可能だよ

新しくAMP用のページを作成することになり、すでにある通常のページをつなげるパスも必要になるよ

初めて実装する人に向けて、手順やHTMLのサンプルコードを公式サイトが載せてくれているよ

ここを参考にしながらやってみるといいね

導入した後はエラーがないか確認しよう

AMPのチェック用としてGoogleの公式ツール「AMPテスト」を使うと確認がすぐできるよ

URLを入れる方法とコードを入れる方法の2つがあるよ

じゃあ最後にまとめるね

AMPについてわかった？

どういたしまして