デザイン会社が発信するLP制作情報メディア

AMPでモバイルページが高速表示される仕組みと注意点

2022.3.3
AMPでモバイルページが高速表示される仕組みと注意点
AMPはGoogleやTwitter社などが共同で開発した「モバイル上のWebページ表示を高速化するテクノロジー」です。表示高速化というメリットに加えてSEO的メリットも期待されますが、一方で「デザイン崩れ」などのリスクも指摘されています。その仕組と注意点を解説します。

目次

はじめに

2015年下旬に突如現れ、Webの世界で話題に上がることが多くなったAMP(アンプ)。Webサイトやブログ運営者の中には「難しくてわからないけど導入したほうがいいのかな」と考えている方もいるのではないでしょうか。


今回はAMPを知らない方でも理解できるよう解説していきます。AMPについて知りたい方、導入を考えているという方はぜひ参考にしてみてくださいね。

AMPは「よりスピーディーなモバイルインターネット」を実現させたプロジェクト

AMPは「よりスピーディーなモバイルインターネット」を実現させたプロジェクト
まずAMPとは「Google社が、Twitter社など業界各社と共同でスタートさせたプロジェクト」のことです。


プロジェクト名のAMPは「Accelerated Mobile Pages」の略で、「加速されたモバイルページ」という意味を持っています。


このことからも分かるように、プロジェクトの目的は「モバイルインターネット上のWebページ表示をさらに高速にすること」。つまり、携帯電話やノートPCなどの端末を用いてインターネットをする際、より早く繋げるようにするプロジェクトですね。


また、そのためのテクノロジーもプロジェクト名と同様にAMPと呼ばれています。


2018年現在はまだWebページのみの対応です。


zoom_in画像クリックで拡大

制作費用はこちら

AMPはWebページの表示速度を早くするために生まれた

「コンテンツ表示に3秒以上かかるWebページは読まれない」


これはWebマーケティングの世界ではよく目にするフレーズです。Web上のユーザーは、とても時間にシビアだということはデータとして証明されています。



多くのユーザーが表示に3秒も必要とするコンテンツは「価値がない」と考えて閲覧を止めてしまう可能性が高いです。「遅いより速いほうがいい(Fast is better than slow)」という会社理念を持つGoogleは、Webページの表示に時間がかかる状態を改善するため、動き出しました。その結果生まれたのが「AMP」です。



AMPの登場により、表示速度に対するモバイルユーザーのストレスを軽減することが可能になったのです。


表示速度は通常の4倍の速さ!AMPによる表示高速化の仕組み

AMPがWebページの表示を高速化するために作られたテクノロジー、ということは分かりましたね。


では実際にAMP仕様で作られたWebページでは、どれくらい速く表示することができるのでしょうか?



Googleの公式発表では、「本来のWebページの4倍の速さでの表示ができる」ということ。これは驚くべき速さではないでしょうか。



とはいえ、「なぜAMPで表示高速化が可能になるの?」と不思議な方も多いのではないでしょうか。


AMPの基本的な仕組みについて理解できれば高速化の理由も分かりますよ。


AMPの仕組みについて知っておきたいことは以下の2つです。



1. Webページを読み込まずにキャッシュで表示させる


2. 極力まで無駄を省き、データ転送量を従来の1/10までに抑えた



では、それぞれ詳しく見ていきましょう。


Webページを読み込まずにキャッシュで表示させる

Webページを読み込まずにキャッシュで表示させる
AMPによるWebページ表示高速化のキーワードは、「キャッシュ」です。キャッシュとは「保存される」という意味になります。


AMP仕様のWebページは、一度Google・Twitter側にページのデータが保存されるようになっています。すでに保存されているデータは読み込む必要がないため、モバイルユーザーがアクセスした際、瞬時に表示させることができるのです。



これがAMPによる表示高速化の一つ目の仕組みになります。


htmlとCSSで静的なページを作り、データ転送量が従来の1/10に

htmlとCSSで静的なページを作り、データ転送量が従来の1/10に
AMPの最大な特徴はなんといっても「データ転送量」です。


通常のWebページと比較して、なんと1/10のデータ転送量でページを閲覧できてしまいます。なぜ、このように大幅な軽減が可能になったのでしょうか?



理由はとても簡単。なぜなら、htmlとCSS(外部ファイルのCSSは不可)のみでコーディングを行うからです。基本的にJavascriptは使用不可になっています。つまり、静的なページ(htmlファイルで作られたページ)を作り上げることで結果的にデータ転送量を抑えることができるのです。


「htmlとCSSのみでコーディング」という仕組みが表示高速化を支えていることが分かりますね。


表示高速化だけじゃない!AMPによるその他のメリット2つ

AMPにより、モバイルサイトのWebページがこれまで以上に高速で表示されることは大きなメリットです。「ユーザーのストレス軽減」など、ユーザー体験を向上させる相乗効果も生まれるでしょう。


しかし、高速表示の他にもAMPを使うメリットは2つあります。それぞれ見ていきましょう。


検索結果でユーザーの目に留まる確率が高まる

Googleのモバイル検索結果上部には、検索キーワードに対応した「トップニュース」が表示されます。そして、AMP対応のWebページであればトップニュース内に表示させることが可能なのです。


トップニュースには記事タイトルと画像イメージが表示され、自動的に横スライドをしていくのでユーザーの注意を惹くことができます。この機能は「カルーセル表示」と呼ばれています。


このトップニュースに選ばれれば、Googleからのアクセスが増えることは間違いありません。AMP利用による大きなメリットですね。



※AMP実装したからといって、必ずトップニュース内にカルーセル表示されるとは限りません。


検索順位(SEO)にプラスな影響が出る可能性がある

これはまだ憶測にすぎませんが、AMPを実装することで、検索結果で上位表示される可能性があるということです。ユーザー体験を向上させることを実現できたWebページであれば、それは「ユーザーにとって価値のあるページ」になります。


また、表示速度は検索順位を決定する基準のひとつあり、Googleがサイト運営者に求めているものなのです。


現在のところGoogleは「AMP利用は検索順位決定に影響を与えないスタンス」をとっていますが、今後変わってくる可能性は十分あるといえます。


AMPをSEO対策に導入するデメリット

AMPを導入する際は、事前にAMPをSEO対策に導入するデメリットについても把握しておきましょう。
以下では、AMPをSEO対策に導入する3つのデメリットをご紹介します。

コンバージョンが減少する

一部のサイトでは、コンバージョンが減少してしまうことがあります。
例えば、AMP対応していない広告では、AMPページでは表示されないため、コンバージョンにつながりません。
そのため、掲載する広告がAMP対応であるかどうかを事前に確認しておく必要があります。

アクセス数が減少する

AMPを導入することで、アクセス数が減少する場合があります。
それは、AMPを導入すると、スニペットにサイトリンクが表示されることがあるからです。
スニペットとは、検索後の結果ページで表示されるウェブページの説明をしてくれている文章のことを指します。
AMPを導入すると、その説明文の代わりに、他のサイトに移動できるようなリンクが表示されていることがあります。
そのような場合は、サイトにアクセスすることなく外部リンクにとんでしまうユーザーもいるため、アクセス数が減少することがあるでしょう。
ただし、そのような仕様になるのは、Googleの検索仕様にマッチしたサイトのみであるため、そこまで過度な心配は不要です。

運用の手間がかかる

ページごとにAMPページを2ページつくる必要があるため、その分管理の手間がかかります。
ただ、WordPressのサイトを使用することで、自動でAMPページが作成されるため、手間を削減することも可能です。

AMPの導入方法

AMPには多くの魅力がありますが、いざ導入しようとするとどこから手を付けたら良いのかが分からないという事態になるかもしれません。
そこで、以下ではAMPの導入する際の手順についてご紹介します。

1. AMPページを作成する

AMPページを作成する際は、「AMP HTML」という専用のHTMLタグを使用して記述していくことが基本です。
具体的な手順を見ていきましょう。
まずはモバイル端末対応の新規AMPページを作成します。
次に、文字コードをUTF-8とビューポートに設定します。
その作業が終わると、元のPC用のページとAMP用のページの紐づけを行います。
最後にクローラに伝えるための設定をして完了です。

上記のように、少し専門的な用語があって難しいと感じられる場合は、AMPの公式サイトを調べてみること、AMPに対応するためのプラグインが提供されているサイトを使用すること、ウェブサイトの制作を外部の会社に依頼することがおすすめです。

2. AMPページが有効かどうかの確認をする

AMPページの作成が終われば、AMPページがしっかりと機能するかどうかを確認しましょう。
具体的には、Googleが提供しているAMPテストと呼ばれるAMPの確認ツールを使用します。
AMPテスト内の検索窓に、AMPのURLを入力するだけで、ページがAMPページが有効であるかどうかがわかります。
「有効なAMPページです」と表示される場合と、「AMPページではありません」と表示される場合がありますが、後者の場合はエラーの原因を特定して、改善する必要があります。

SEO対策に効果的なAMPの対応方法

AMP化する際は、AMPプラグインを導入することがおすすめです。
実は、WordPressを使用することで、簡単にプラグインを導入することができます。
具体的には、WordPressのプラグインの管理メニューで新規追加からAMPのインストールをするだけです。
プラグインを有効にしてから、WordPressのメニューに戻り、AMPを選択します。

次に、Experienceの項目のWebsiteにチェックを入れて、Website Modeを選ぶとAMP化は完了です。
実際に、ご自身のサイトがAMP化されているかどうかを確認するために、自サイトのURLを確認しましょう。
URLの最後にampという文字を付け加え、シンプルな自サイトが表示されると、AMP化は成功です。
モバイルページの表示を高速化する手法であるAMPをうまく活用することで、Googleからの評価は上がるため、SEO対策をされている方はAMPの活用を検討してみてはいかがでしょうか。

「デザイン崩れ」や「導入の難易度の高さ」など注意点も多い

「デザイン崩れ」や「導入の難易度の高さ」など注意点も多い
今はスマートフォンの時代。モバイルユーザーをターゲットにしたAMPは非常に良いプロジェクトでありテクノロジーです。しかし、メリットだけではなくデメリットもそれなりに存在します。


現在見つかっている注意点は以下こちらです。



*AMPの仕様に沿ってサイト構築を行うため、当初のサイトデザインが大きく崩れるリスクがある


*Javascriptが使えない


*使える広告タグは限られている


*AMP導入には高いコーディングスキルを要するため、サイトオープンまで時間がかかる(外注する場合はお金も)


*AMPを無効にすることはできない



このように、一見メリットしか目立たないAMPにもマイナスな面はあるものです。調べてみると、実際にAMPに不満を持ったユーザーも意外と多いことが分かります。


導入の際は慎重に検討するようにしましょう。


やっぱりLP制作はプロに任せたい!まず制作事例を見る

まとめ

以上、AMPの仕組みから注意点までを解説しました。


一体、Googleのこの新しい試みは今後どのように変化を遂げていくのでしょうか?


SEO的にも有利な展開になっていくのか、より普及が進むのか…。その動きに要注目ですね。注意点にも十分留意した上で、あなたのウェブページを検索結果で上位表示させるために活用することも視野に入れてみましょう。


この記事を書いたライター
LPの制作に特化したデザイン会社(LP制作実績)。累計では数千LPデザインを手掛けております。すべて内製化しており、構成からデザイン、コーディングまですべてご対応可能です。各種サーバーのご対応はもちろん、楽天市場、ヤフーショッピングなどのモール系などへの反映もご対応可能です。
この記事の画像を作成したデザイナー
所属:株式会社Ryuki Design / 部署:デザイン部
※デザイナー一覧

紙媒体のデザインからwebデザイン(LP制作・バナー制作)までオールマイティーにデザインが可能。
デザインだけではなく構成も得意なハイスペックデザイナー。毎回クオリティの高いデザインをクライアントに提供しています。

LP制作.jpへのお問い合わせはこちらから

お電話でも承ります
050-3541-5719

    ※アンケートモニター提供元:ゼネラルリサーチ 
    調査期間:2020年8月7日~12日
    調査方法:インターネット調査 
    調査概要:デザイン制作会社10社を対象にしたサイト比較イメージ調査
    調査対象:全国の20代~50代の男女 1052名

    LPアーカイブ
    AMAZON制作