AMPとは?導入してユーザー体験を改善しよう!のアイキャッチ画像

マーケティング

更新日: 2023/12/20

AMPとは?導入してユーザー体験を改善しよう!

character_balloon

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

どうしたの?

character_balloon
character_balloon

このAMPってなにかしら…

character_balloon

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

あぁ、AMPね

character_balloon

じゃあAMPがどんなものか説明するね

character_balloon

AMPとは

AMPとは?導入してユーザー体験を改善しよう!の画像_2枚目
character_balloon

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

character_balloon

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

character_balloon

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

character_balloon

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

character_balloon

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

character_balloon

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

AMPの仕組みをご紹介!

AMPとは?導入してユーザー体験を改善しよう!の画像_4枚目
character_balloon

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

character_balloon

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

ポイント

1.非同期のJavaScripのみ使用


2.すべてのリソースサイズをを静的に規定


3.AMP Cacheにコンテンツをキャッシュ


4.フォントの表示を最適化...など

全然わからない…

character_balloon
character_balloon

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

character_balloon

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

character_balloon

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

AMPに対応するメリット・デメリットはどんなもの?

character_balloon

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

メリット.ページ速度の改善・SEOにプラスの効果!

AMPとは?導入してユーザー体験を改善しよう!の画像_8枚目
character_balloon

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

character_balloon

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

character_balloon

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

ユーザーがより長くサイトに滞在してくれるようになるんだね

character_balloon
character_balloon

そうなんだ

character_balloon

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

なるほど!マーケティングにもよいし、SEO対策にもなるんだね

character_balloon
character_balloon

その通り!

デメリット.Javascriptを多用するサイトには不向き

AMPとは?導入してユーザー体験を改善しよう!の画像_10枚目
character_balloon

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

character_balloon

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

character_balloon

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

character_balloon

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

character_balloon

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

character_balloon

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

AMPに向いているコンテンツをご紹介!

AMPとは?導入してユーザー体験を改善しよう!の画像_12枚目
character_balloon

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

character_balloon

向いているコンテンツは

AMPに向いているコンテンツ

1.ニュース


2.レシピ


3.ブログ


4.経済情報


5.レビュー

character_balloon

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

character_balloon

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

character_balloon

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

character_balloon

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

実際にAMPに対応する方法は?

character_balloon

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

character_balloon

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

方法1.WordPressのプラグインを利用する

character_balloon

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

プラグインって何?

character_balloon
character_balloon

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

character_balloon

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

方法2.独自実装する

character_balloon

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

character_balloon

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

character_balloon

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

character_balloon

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

AMPテストをする方法をご紹介!

AMPとは?導入してユーザー体験を改善しよう!の画像_20枚目
参照: GoogleのAMPテスト
character_balloon

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

character_balloon

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

character_balloon

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

まとめ

character_balloon

じゃあ最後にまとめるね

まとめ

◆AMP(アンプ)とはiPhoneなどのモバイル環境でも、快適にサイトを開ける仕組みのこと


◆AMPは2015年にGoogleとTwitterが始めた事業


◆AMPを適用するとコンテンツを早く表示してくれる一方、シンプルなサイトになってしまう


◆AMPに向いているコンテンツは「ニュース」「レシピ」「ブログ」「経済情報」「レビュー」など動きの少ないコンテンツ


◆実際にAMPに対応するには「WordPressのプラグインを利用する」「独自でコードを実装する」などがある

character_balloon

AMPについてわかった?

うん!AMPを使ってるサイトを探してみようかな

character_balloon

ブルーちゃん、ありがとね

character_balloon
character_balloon

どういたしまして

character_balloon

ブルー

SEO
マーケティングオートメーション(MA)
アフィリエイト
wordpress

SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。

最新の記事一覧
最新の記事一覧