![AMPとは?導入してユーザー体験を改善しよう!のアイキャッチ画像](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/36082471147743acb54174f5483ad8dd/Group%20472.png?w=1200&fm=webp)
マーケティング
更新日: 2023/12/20
AMPとは?導入してユーザー体験を改善しよう!
![character_balloon](/media/character/pink_normal_left.png)
ブルーちゃん、ちょっといい?
どうしたの?
![character_balloon](/media/character/blue_normal_right.png)
![character_balloon](/media/character/pink_normal_left.png)
このAMPってなにかしら…
![character_balloon](/media/character/pink_normal_left.png)
資料に書いてあるんだけど、何かわからなくて
あぁ、AMPね
![character_balloon](/media/character/blue_normal_right.png)
じゃあAMPがどんなものか説明するね
![character_balloon](/media/character/blue_normal_right.png)
AMPとは
![AMPとは?導入してユーザー体験を改善しよう!の画像_2枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/d261fc0c94a2467eb462ffc7788989f3/AMP.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
AMPとは、パソコンに比べて通信速度やネット環境が不安定になりやすいモバイルでも、快適なネット環境でいられるように開発されたシステムのことだよ
![character_balloon](/media/character/blue_normal_left.png)
具体的にどんなことをしてくれるかというと、AMPをページに設定しておくと、ページ内のコンテンツを瞬時に読み込んで、端末に表示してくれるようになるんだよ!
![character_balloon](/media/character/blue_normal_left.png)
AMPを導入することで読み込み速度を高めて、モバイルで検索するユーザーの利便性を向上することが目的なんだ
![character_balloon](/media/character/blue_normal_left.png)
実際にモバイルを使って検索してみると…
![character_balloon](/media/character/blue_normal_left.png)
こんな感じで雷のアイコンがついているものが表示されるよ
![character_balloon](/media/character/blue_normal_left.png)
これはAMPに対応しています、ってことなんだ
AMPの仕組みをご紹介!
![AMPとは?導入してユーザー体験を改善しよう!の画像_4枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/8492c63f61c2484288b59e7020a034ce/AMP2.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
AMPは2015年にGoogleとTwitterが始めた事業なんだ
![character_balloon](/media/character/blue_normal_left.png)
AMPは以下の仕組みを使って高速表示をしてくれるよ
1.非同期のJavaScripのみ使用
2.すべてのリソースサイズをを静的に規定
3.AMP Cacheにコンテンツをキャッシュ
4.フォントの表示を最適化...など
全然わからない…
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_normal_left.png)
簡単に説明すると、本来はサイトにアクセスすると自社サーバーにアクセスして、Webサイトのデータ(HTML,CSS,Javascript)を読み込んでユーザーの端末に表示するのに対して、
![character_balloon](/media/character/blue_normal_left.png)
AMPを導入すると、GoogleのサーバーにあらかじめWebサイトのデータをキャッシュしておくことで、ユーザーの端末に表示する時間をとにかく減らすことができるんだ
![character_balloon](/media/character/blue_normal_left.png)
ただ、AMPを導入すると一部のJavascriptが使えなくなるから、予約カレンダーのデータ更新や、ドル円チャートなどのページ情報が変動しやすいサイトには向いていないんだ
AMPに対応するメリット・デメリットはどんなもの?
![character_balloon](/media/character/blue_normal_left.png)
実際にAMPを対応させたらどんなことが起きるか見てみよう
メリット.ページ速度の改善・SEOにプラスの効果!
![AMPとは?導入してユーザー体験を改善しよう!の画像_8枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/6ae1529991e84566b385450cbb78d96d/AMP3.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
一番のメリットはやっぱりサイトを早く表示してくれることだね
![character_balloon](/media/character/blue_normal_left.png)
読み込みが遅いサイトほど離脱率がどうしても高くなるんだ
![character_balloon](/media/character/blue_normal_left.png)
2018年のGoogleの発表では『3秒以上読み込みにかかるページは53%離脱してしまう』らしいんだ
ユーザーがより長くサイトに滞在してくれるようになるんだね
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_normal_left.png)
そうなんだ
![character_balloon](/media/character/blue_normal_left.png)
さらに滞在時間が長くなればサイトの評価も上がりやすくなり、自然と検索上位に上がりやすくなるんだよ
なるほど!マーケティングにもよいし、SEO対策にもなるんだね
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_normal_left.png)
その通り!
デメリット.Javascriptを多用するサイトには不向き
![AMPとは?導入してユーザー体験を改善しよう!の画像_10枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/1c8ef5ae94c14ba2beca39ee1fae5704/AMP4.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
もちろんいいところばかりでないよ
![character_balloon](/media/character/blue_normal_left.png)
さっきも言ったけど、AMPは早くサイトを表示することを目標にしているからよりシンプルなサイトを好むんだ
![character_balloon](/media/character/blue_normal_left.png)
AMPの仕様に沿ったものにすると、サイト上の制限は増えてしまうよ
![character_balloon](/media/character/blue_normal_left.png)
おしゃれな装飾なんかはつけにくくなり、シンプルなWebページになりがちなんだ
![character_balloon](/media/character/blue_normal_left.png)
また、今のページをそのままAMPに適応させると崩れてしまう可能性があるんだ
![character_balloon](/media/character/blue_normal_left.png)
AMP自体まだ新しいものだから、これからのアップデートに期待だね
AMPに向いているコンテンツをご紹介!
![AMPとは?導入してユーザー体験を改善しよう!の画像_12枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/67b3e22be9b648dba31a914addeca7af/AMP5.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
ここまで見てわかる通りAMPに向いているコンテンツ、向いていないコンテンツがあるよ
![character_balloon](/media/character/blue_normal_left.png)
向いているコンテンツは
1.ニュース
2.レシピ
3.ブログ
4.経済情報
5.レビュー
![character_balloon](/media/character/blue_normal_left.png)
など、動きの少ないコンテンツになるね
![character_balloon](/media/character/blue_normal_left.png)
これらの場合派手な装飾やサイト内で動的な動きがないからAMPに対応しやすいよ
![character_balloon](/media/character/blue_normal_left.png)
また、ページの全部をAMP対応にせずとも一部だけでもかまわないんだ
![character_balloon](/media/character/blue_normal_left.png)
静的なページのみ徐々に移行するなど、良さが生かせる使い方をしてみるのもいいね
実際にAMPに対応する方法は?
![character_balloon](/media/character/blue_normal_left.png)
じゃあ実際AMPを使ってみよう
![character_balloon](/media/character/blue_normal_left.png)
主な2パターンを紹介するね
方法1.WordPressのプラグインを利用する
![character_balloon](/media/character/blue_normal_left.png)
一番簡単なのはWordPressを使った方法だね。WordPressを使っている人はこの方法をやってみよう
プラグインって何?
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_normal_left.png)
プラグインは、そのシステムを拡張させるオプションのようなものだよ
![character_balloon](/media/character/blue_normal_left.png)
AMP公式のプラグインが公開されているのでそれがおすすめ
方法2.独自実装する
![character_balloon](/media/character/blue_normal_left.png)
独自のWebサイトを使う場合、AMP用のHTMLを実装することで作成可能だよ
![character_balloon](/media/character/blue_normal_left.png)
新しくAMP用のページを作成することになり、すでにある通常のページをつなげるパスも必要になるよ
![character_balloon](/media/character/blue_normal_left.png)
初めて実装する人に向けて、手順やHTMLのサンプルコードを公式サイトが載せてくれているよ
![character_balloon](/media/character/blue_normal_left.png)
ここを参考にしながらやってみるといいね
AMPテストをする方法をご紹介!
![AMPとは?導入してユーザー体験を改善しよう!の画像_20枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/48b94121c5d8472a841629690f726fec/image%20117.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
導入した後はエラーがないか確認しよう
![character_balloon](/media/character/blue_normal_left.png)
AMPのチェック用としてGoogleの公式ツール「AMPテスト」を使うと確認がすぐできるよ
![character_balloon](/media/character/blue_normal_left.png)
URLを入れる方法とコードを入れる方法の2つがあるよ
![character_balloon](/media/character/blue_normal_left.png)
じゃあ最後にまとめるね
まとめ
◆AMP(アンプ)とはiPhoneなどのモバイル環境でも、快適にサイトを開ける仕組みのこと
◆AMPは2015年にGoogleとTwitterが始めた事業
◆AMPを適用するとコンテンツを早く表示してくれる一方、シンプルなサイトになってしまう
◆AMPに向いているコンテンツは「ニュース」「レシピ」「ブログ」「経済情報」「レビュー」など動きの少ないコンテンツ
◆実際にAMPに対応するには「WordPressのプラグインを利用する」「独自でコードを実装する」などがある
![character_balloon](/media/character/blue_normal_left.png)
AMPについてわかった?
うん!AMPを使ってるサイトを探してみようかな
![character_balloon](/media/character/pink_normal_right.png)
ブルーちゃん、ありがとね
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_normal_left.png)
どういたしまして
![character_balloon](/media/character/blue_writer.png)
ブルー
SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。
最新の記事一覧
7割の人にとって味が最も重要!?エナジードリンクのアンケート調査結果をご紹介!
アンケート・調査結果
副業で5万円以上稼ぐ人は15%しかいない?副業の実態について調査しました!
アンケート・調査結果
53%の人は最後に浴衣を着てから5年以上経った?!浴衣の実態を徹底調査!
アンケート・調査結果
約82%の人が部屋着のズボンを履いてテレワークをしている!テレワークの現状を調査しました!
アンケート・調査結果
「1杯目はビール!」は約6割しかいない!?お酒についてアンケート調査しました!
アンケート・調査結果
企画書とは?目的や作り方、おすすめのテンプレートを紹介
マーケティング
取引や計算で使われるグロスとは?使用例や注意点を徹底解説!
マーケティング
「スーパーフレックス制度」とは?導入に向けて注意する点を解説!
マーケティング
ペルソナ設定とは?目的と作り方、注意点について徹底解説!
マーケティング
視聴者を魅了し続ける冠番組とは?成功している冠番組の特徴を解説
ビジネス
有名企業のペルソナマーケティング事例5選!何に活用できるか解説
マーケティング
破ると法律違反になるステマとは?過去のステマ事件や対策を紹介
マーケティング
多くの市場で危惧されるコモディティ化とは?コモディティ化対策5選
マーケティング
社会に影響を与えるマスメディアとは?影響力やリスクについて解説
マーケティング
カーボンニュートラルとは?実現のための取り組みや課題も解説
ビジネス
ネゴシエーションとは?ビジネスにおける意味と成功のポイントを解説
ビジネス
音声SNSとは?注目される理由やメリットを解説【アプリも紹介】
ディスプレイ広告
オーガニックサーチとは?広告なしで質の高い集客を実現できる!
SEO
問題解決フレームワークの活用法は?使用するメリットや注意点も解説
ビジネス
ブランドロイヤリティとは?顧客ロイヤリティとの違いを解説
広報・PR
最新の記事一覧
7割の人にとって味が最も重要!?エナジードリンクのアンケート調査結果をご紹介!
アンケート・調査結果
副業で5万円以上稼ぐ人は15%しかいない?副業の実態について調査しました!
アンケート・調査結果
53%の人は最後に浴衣を着てから5年以上経った?!浴衣の実態を徹底調査!
アンケート・調査結果
約82%の人が部屋着のズボンを履いてテレワークをしている!テレワークの現状を調査しました!
アンケート・調査結果
「1杯目はビール!」は約6割しかいない!?お酒についてアンケート調査しました!
アンケート・調査結果
企画書とは?目的や作り方、おすすめのテンプレートを紹介
マーケティング
取引や計算で使われるグロスとは?使用例や注意点を徹底解説!
マーケティング
「スーパーフレックス制度」とは?導入に向けて注意する点を解説!
マーケティング
ペルソナ設定とは?目的と作り方、注意点について徹底解説!
マーケティング
視聴者を魅了し続ける冠番組とは?成功している冠番組の特徴を解説
ビジネス
有名企業のペルソナマーケティング事例5選!何に活用できるか解説
マーケティング
破ると法律違反になるステマとは?過去のステマ事件や対策を紹介
マーケティング
多くの市場で危惧されるコモディティ化とは?コモディティ化対策5選
マーケティング
社会に影響を与えるマスメディアとは?影響力やリスクについて解説
マーケティング
カーボンニュートラルとは?実現のための取り組みや課題も解説
ビジネス
ネゴシエーションとは?ビジネスにおける意味と成功のポイントを解説
ビジネス
音声SNSとは?注目される理由やメリットを解説【アプリも紹介】
ディスプレイ広告
オーガニックサーチとは?広告なしで質の高い集客を実現できる!
SEO
問題解決フレームワークの活用法は?使用するメリットや注意点も解説
ビジネス
ブランドロイヤリティとは?顧客ロイヤリティとの違いを解説
広報・PR