この記事では、AMPとは何か、その仕組みやメリット・デメリット、導入方法などをわかりやすく解説します。AMPを導入することで、ウェブサイトのパフォーマンスを向上させ、より多くのユーザーを獲得する方法を学びましょう。
このページに書いてあること
AMPとは？
AMPとは、「Accelerated Mobile Pages」の略称で、Googleが中心となって開発を進めているモバイルページ高速化のためのオープンソースプロジェクトです。
一言で表すと、AMPは「モバイルページを高速表示させるための技術」です。
スマートフォンでWebサイトを閲覧する際、ページの読み込みが遅くてイライラした経験はありませんか？
ページ表示の遅延は、ユーザーの離脱に繋がり、結果的にサイトのアクセス数減少や機会損失の原因となってしまいます。
AMPはこの問題を解決するために、モバイルページの表示速度を劇的に向上させることを目的としています。
AMPで構築されたページは、Googleのキャッシュサーバーに保存され、ユーザーがページにアクセスした際に高速で配信されます。
AMPは現在も有効なのでしょうか？
結論からお伝えすると、「現在も有効ではあるが、実装時ほどGoogleからは推奨されていない」といった状態です。
AMPが実装された当時は、導入サイトへはAMPバッヂを表示し、AMP未導入のサイトとの差別化を図るきっかけになったり、Google検索画面のトップニュースエリアに表示するためにはAMP対応が必須など、優遇装置として展開されていました。
しかし、2021年6月にバッヂの表示は廃止され、ニュースへの表示基準も変更されました。
そのため、現代においては当時ほど「AMP実装を優先的に対応しなければいけない」ということもなくなりました。
しかし、優遇が除外されたからと言って、AMPページが無視されるわけではありません。
後述しますが、Googleはモバイルフレンドリーなページを推奨したり、表示速度はUI/UXへの大きな影響に関わってきます。
間接的にはSEO要素も踏まえ、ポジティブな側面を持っていると言えるでしょう。
AMPの歴史
AMPは、2015年10月にGoogle（X：旧Twitter社と共同）が主導して発表されたオープンソースプロジェクトです。モバイルページの表示速度が遅いという問題を解決するために開発されました。
当時、スマートフォンやタブレットなどのモバイルデバイスの普及が進んでいましたが、モバイルサイトの表示速度は遅く、ユーザーエクスペリエンスを損なう要因となっていました。そこで、Googleはモバイルページを高速表示するための技術としてAMPを開発し、公開しました。
AMPは、誰でも無料で利用できるオープンソースプロジェクトとして開発されたため、多くの企業や開発者に支持され、急速に普及しました。現在では、ニュースサイト、ブログ、ECサイトなど、さまざまなWebサイトでAMPが導入されています。
AMPの歴史を理解することで、AMPがなぜ開発され、どのように進化してきたのかを知ることができます。これは、AMPを導入するかどうかを検討する際に役立つだけでなく、AMPをより効果的に活用するためにも重要な知識となります。
AMPの基本要素
AMP（Accelerated Mobile Pages）は、Webページを高速表示させるための技術です。AMPの基本要素は、HTML、JavaScript、そしてキャッシュの3つです。
AMPでは、通常のHTMLにいくつかの制限を加えた「AMP HTML」を使用します。この制限によって、ページの表示速度を落とす原因となる要素を排除し、高速化を実現しています。
JavaScriptも、AMPでは「AMP JS」と呼ばれる専用のものが用意されています。AMP JSは、ページのレンダリングを高速化するために設計されており、外部からのJavaScriptは原則として許可されていません。
さらにAMPでは、Googleのサーバーなどにページを事前に読み込んでおく「AMPキャッシュ」という仕組みが使われています。これによって、ユーザーがページにアクセスした際に、高速でページを表示させることができます。
これらの3つの要素が組み合わさることで、AMPはモバイルページを高速に表示することを可能にしています。
AMPの仕組み
AMPの仕組みを一言で表すと、「Webページをシンプル化し、高速なサーバーにキャッシュすることで表示を高速化する」ことです。
ユーザーがAMPページにアクセスすると、GoogleのAMPキャッシュサーバーなどからページデータが配信されます。この時、AMP HTML、AMP JS、AMPキャッシュという3つの要素が連携して、高速な表示を実現しています。
AMP HTMLは、通常のHTMLをシンプル化し、高速化のためのルールを設けたものです。例えば、画像のサイズを事前に指定することで、ページ読み込み後のレイアウト崩れを防ぎ、表示速度を向上させています。
AMP JSは、JavaScriptの実行を制御し、ページ表示を高速化する役割を担います。JavaScriptはページ表示速度に影響を与える可能性がありますが、AMP JSは必要なタイミングでのみJavaScriptを実行することで、この問題を解決しています。
AMPキャッシュは、AMPページをGoogleのサーバーなどに事前に保存しておく仕組みです。ユーザーがアクセスした際に、近い場所にあるキャッシュサーバーからページデータが配信されるため、従来よりも高速にページを表示できます。
これらの要素が組み合わさり、AMPはモバイルサイトの表示速度を劇的に向上させています。
AMP HTMLとは？
AMPの仕組みを理解する上で欠かせないのが「AMP HTML」です。これは、通常のHTMLをAMP仕様に最適化したものと言えます。基本的には従来通りのHTMLと同様の記述方法ですが、AMPで高速表示を実現するために、いくつかの制限と独自のルールが設けられています。
例えば、ページのレンダリングを阻害する可能性のあるJavaScriptの使用は原則禁止されています。AMPでは独自のJavaScriptライブラリを用いることで、パフォーマンスの低下を防ぎながら必要な機能を実現しています。
また、画像や動画などのリソースもAMP独自のタグで記述する必要があります。これらのタグは、リソースの遅延読み込みやサイズ指定の最適化などを行い、ページ表示速度の向上に貢献します。
このように、AMP HTMLは従来のHTMLに独自のルールやタグを組み合わせることで、軽量かつ高速なページを実現するAMPの基盤となっています。
AMP JSとは？
AMP JSは、AMPページの高速なレンダリングを実現するために欠かせないJavaScriptライブラリです。AMPページでは、通常のJavaScriptの使用は制限されていますが、AMP JSはAMPプロジェクトによって開発された専用のJavaScriptライブラリであるため、高速な動作が保証されています。
AMP JSは、主に以下の3つの役割を担っています。
- リソースの非同期読み込み: AMP JSは、ページ内のリソース（画像、動画、広告など）を非同期で読み込みます。つまり、HTML文書の解析をブロックすることなく、リソースの読み込みが行われるため、ページ表示速度が大幅に向上します。
- JavaScriptの実行制御: AMPでは、ページのレンダリングを阻害する可能性のあるJavaScriptの実行が厳密に制御されています。AMP JSは、許可されたJavaScriptのみを実行し、レンダリングブロックを防ぎます。
- AMPコンポーネントの提供: AMP JSは、AMPページで使用できる様々なコンポーネントを提供しています。これらのコンポーネントは、高速な動作とパフォーマンスが最適化されているため、AMPページの使い勝手を向上させます。
AMP JSは、AMPページの高速なレンダリングを実現するための重要な要素の一つであり、AMPページの表示速度とユーザーエクスペリエンスを向上させるために欠かせないものです。
AMPキャッシュとは？
AMPキャッシュとは、GoogleやTwitterなどのプラットフォームが、AMPページをあらかじめ読み込んでおく仕組みのことです。
ユーザーがAMPページにアクセスすると、自身のサーバーからではなく、これらのプラットフォームが持つキャッシュサーバーから配信されます。キャッシュサーバーは世界中に設置されているため、ユーザーは地理的な場所に関係なく、高速でページを表示できます。
イメージとしては、お店でよく売れる商品を、お客さまの近くにあらかじめ用意しておくようなものです。お店から商品を取りに行くよりも、近くの倉庫から商品を受け取れる方が、早く商品を受け取れますよね。AMPキャッシュも同様に、ユーザーの近くにAMPページのデータを用意しておくことで、表示速度を劇的に向上させています。
AMPのSEO効果
AMPは、モバイルページの表示速度を劇的に向上させる技術ですが、SEOにも相対的な効果をもたらします。
冒頭でもお伝えしたように、Googleはユーザーにとって快適なウェブ体験を提供することを重視しており、ページの表示速度は、その重要な要素の一つです。
AMPを導入することで、ページの表示速度が大幅に向上し、それが結果として検索順位の向上に繋がることが期待できます。
さらに、AMP導入は、ユーザーエクスペリエンスの向上にも貢献します。ページ表示のストレスを軽減することで、ユーザーは快適にウェブサイトを閲覧できるようになり、直帰率の低下やページ滞在時間の増加に繋がる期待ができます。
このように、AMPはSEO効果を高め、ウェブサイトの成功に大きく貢献する可能性を秘めています。
ユーザーエクスペリエンスの向上
AMPがユーザーエクスペリエンスの向上に大きく貢献する点は、何よりもその表示速度にあります。ユーザーはページの読み込みに時間がかかると、すぐに離脱してしまいます。これはモバイルサイトではさらに顕著で、少しでも表示が遅いとユーザーを逃してしまう大きな要因となります。
AMPはページ表示速度を劇的に向上させるため、ユーザーはストレスなく快適にコンテンツを楽しむことができます。ページ読み込み時間の短縮は、ユーザーのストレス軽減だけでなく、ページへの没入感を高め、結果的にサイトの長時間閲覧、回遊率向上、そしてコンバージョン率アップなどの効果も期待できます。
Googleはユーザーエクスペリエンスを重視しており、ページ表示速度は検索順位にも影響を与える重要な要素と明言しています。つまり、AMP導入による表示速度の向上は、ユーザーファーストの観点とSEOの観点、双方からウェブサイトの評価を高める効果があると言えるでしょう。
AMP導入のメリット
AMPを導入することで、ウェブサイトに様々なメリットがもたらされます。
中でも特に大きなメリットは、ページの表示速度が劇的に向上することです。
AMPは、レンダリングをブロックする要素を排除し、コンテンツを高速で配信する仕組みを持つため、ユーザーをイライラさせることなく、快適な browsing 体験を提供できます。
さらに、表示速度が向上することで、ユーザーの離脱率が減少し、ページ滞在時間の増加にもつながります。
これは、ユーザーがサイトに滞在する時間が長くなることで、より多くのコンテンツを閲覧し、結果的にコンバージョン率の向上に寄与します。
AMP導入は、単にページ速度を向上させるだけでなく、SEO効果を高め、ユーザーエクスペリエンスを向上させるための有効な手段と言えるでしょう。
ページ表示速度の高速化
AMP導入による最大のメリットと言えるのが、ページ表示速度の大幅な改善です。これは、AMPがウェブサイトの表示速度を遅くする要因を徹底的に排除するように設計されているためです。
従来のウェブサイトでは、JavaScriptや重い画像データなど、読み込みに時間のかかる要素が多く存在します。これらの要素がページ表示速度を低下させ、ユーザーにストレスを与えてしまう原因となっていました。
AMPでは、JavaScriptの実行を制限し、画像を軽量化することで、ページ表示速度を劇的に向上させています。
この高速なページ表示は、ユーザーエクスペリエンスの向上に大きく貢献します。ユーザーはストレスなく快適にウェブサイトを閲覧できるため、ページの離脱率の低下や、コンバージョン率の向上などの効果も期待できます。
ページ滞在時間の増加
AMPを導入することで、ページの表示速度が向上し、結果としてユーザーのページ滞在時間が増加する傾向があります。ページの読み込みが遅いと、ユーザーはストレスを感じてすぐに離脱してしまう可能性があります。
逆に、AMPによってページが高速表示されれば、ユーザーはストレスなくコンテンツを読み進めることができます。快適な閲覧体験を提供することで、ユーザーはサイトにより長い時間滞在し、より多くの情報に触れることになります。これは、ユーザーのエンゲージメントを高め、コンバージョン率の向上にも繋がる可能性があります。
例えば、ECサイトであれば、商品ページをじっくり見てもらえる時間が増え、購入意欲を高めることに繋がります。また、ブログであれば、記事を最後まで読んでもらえる確率が上がり、読者の満足度向上に貢献できます。
AMP導入のデメリット
AMP導入は多くのメリットがある一方で、いくつかのデメリットも存在します。
まず、AMPは独自の仕様であるため、通常のウェブサイト開発とは異なる知識や技術が必要となり、開発コストが増加する可能性があります。特に、複雑な機能やデザインをAMPページに実装するには、専門的な知識を持ったエンジニアが必要になる場合もあります。
さらに、AMPではページ表示速度の高速化を重視するため、CSSやJavaScriptの使用に制限があります。そのため、通常のウェブサイトのような自由なデザインや表現を実現することが難しい場合があります。凝ったアニメーションやインタラクションを取り入れたデザインは、AMPでは実現できないか、大幅な変更が必要になる可能性も考慮しなければなりません。
また、AMPページでは広告掲載にも制限があります。AMPが対応していない広告ネットワークやフォーマットも存在するため、収益化を目的としたウェブサイトの場合、広告収入の減少に繋がる可能性も考えられます。
これらのデメリットを踏まえ、AMP導入はウェブサイトの目的や特性に合わせて慎重に検討する必要があります。
開発コストの増加
AMP導入には、開発コストの増加という側面も考慮しなければなりません。従来のWebサイトと比較して、AMPページは独自の仕様やルールに従って開発する必要があるため、新たな学習コストや作業工数が増える可能性があります。
具体的には、AMP HTMLやAMP JSといったAMP独自の技術を習得する必要があり、既存のWebサイトをAMPに対応させるためには、HTML構造の見直しやCSSの調整、JavaScriptコードの書き換えなど、広範囲にわたる修正が必要となるケースもあります。
もし、社内にAMPの知見を持った技術者がいない場合は、外部の開発会社に委託することも検討しなければならず、その場合は、開発費用に加えて、外部とのやり取りや調整といったコストも発生します。
特に、動的なコンテンツや複雑な機能を多く含むWebサイトの場合、AMPへの対応はより複雑化し、開発コストも増大する傾向にあります。そのため、AMP導入を検討する際は、事前に開発コストを慎重に見積もり、費用対効果について十分に検討することが重要です。
デザインの制約
AMPは、ページ表示速度を向上させるために設計されているため、通常のウェブサイトで使用できる一部の機能が制限されます。これは、ページの軽量化と高速化を優先しているためです。具体的には、CSSやJavaScriptの使用に制限があります。
AMPでは、ページのレンダリングを妨げないよう、外部CSSの使用が禁止されており、インラインでの記述のみが許可されています。また、CSSのファイルサイズにも制限があります。これは、ページの読み込みを高速化するために、CSSの量を最小限に抑える必要があるためです。
さらに、AMPでは、ページの動的な変更を制限するために、JavaScriptの使用も制限されています。AMPページでは、アニメーションやインタラクティブな要素など、JavaScriptを必要とする機能の実装に、AMPが提供する専用のコンポーネントを使用する必要があります。
これらの制約は、ページデザインの自由度を低下させる可能性があります。リッチなデザインや複雑な機能を重視するウェブサイトでは、AMP導入によって実現できるデザインが制限される場合があることを理解しておく必要があります。しかし、AMPの設計思想であるシンプルさや高速性を重視する場合には、大きな問題にはならないでしょう。
広告の制限
AMPでは、高速表示を実現するために、使用できる広告の種類や配置場所などに制限があります。
従来のWebサイトでは自由に設置できたJavaScriptを使用したリッチな広告や、ページ読み込み後に表示内容が変わる広告などは、AMPページでは使用できません。これらの広告はページ表示速度を遅らせる可能性があり、AMPの高速表示の理念に反するためです。
ただし、AMPに対応した広告フォーマットも用意されており、収益化を諦める必要はありません。AMPでは、高速表示とユーザーエクスペリエンスを損なわないように設計された「AMP Ads」と呼ばれる広告フォーマットを使用します。AMP Adsは、従来の広告よりも軽量で高速に読み込まれるように設計されており、ユーザーのページ閲覧体験を阻害することなく広告を表示できます。
AMPページで広告を掲載する際は、これらの制限を理解し、AMP Adsなどの対応策を検討する必要があります。
AMPの対応方法
AMPの対応方法は、大きく「AMPページの作成」と「AMPページの有効性確認」の2つに分けられます。
まずAMPページの作成について説明します。AMPページは、通常のHTMLページとは異なるAMP独自のルールに基づいて作成する必要があります。具体的には、AMP HTMLの宣言、標準タグの置き換え、AMP専用コンポーネントの利用など、いくつかの手順を踏む必要があります。
AMPページの作成
AMPページを作成するには、HTML、CSS、JavaScriptの基本的な知識が必要です。しかし、AMPでは通常のWebページ作成とは異なるポイントがいくつか存在します。
まず、AMPページであることを示すために、HTMLタグの<html>を<html amp>と記述します。 <head>タグ内には必須です。
AMP HTMLの宣言方法
<!doctype html>
<html amp lang="ja">Code language: HTML, XML (xml)AMP HTMLでは、DOCTYPE宣言をして、html amp の lang属性 を指定しましょう。
標準タグの置き換え
AMPページを作成する際には、HTMLの標準タグの一部をAMP専用のタグに置き換える必要があります。これは、AMPがページ表示速度を最適化するために、一部の標準的なHTMLタグの使用を制限しているためです。
例えば、画像を表示する際に通常使用する <img>タグは、AMPでは＜<amp-img>タグに置き換えます。同様に、動画を埋め込む<iframe>タグは<amp-youtube>などのAMP専用のタグに置き換える必要があります。これらのAMPタグは、画像や動画の遅延読み込みなど、パフォーマンス向上のための機能を備えています。
標準タグをAMPタグに置き換えるには、それぞれのタグの対応関係を理解する必要があります。AMP公式サイトでは、標準タグとAMPタグの対応表が提供されているので、参考にしながら置き換えを行いましょう。
置き換え作業自体は、HTMLの知識があれば比較的容易に行えます。しかし、多くのページで標準タグが使われている場合、置き換え作業が膨大になる可能性があります。そのような場合は、自動変換ツールなどを活用することも検討しましょう。
重要なのは、AMPページを作成する目的を理解し、ページ表示速度の向上という観点から、適切に標準タグをAMPタグに置き換えることです。
AMP専用コンポーネントの利用
AMPページでは、HTMLやCSSの制限に加えて、JavaScriptの使用にも厳しい制限があります。これは、JavaScriptがページ表示速度に大きな影響を与えるためです。しかし、イメージカルーセルや動画の埋め込み、アコーディオンメニューなど、動的なコンテンツをAMPページで実現するために、AMP専用コンポーネントが用意されています。
これらのコンポーネントは、<amp-img>や<amp-video>のように、amp- から始まるカスタムタグで実装します。例えば、<amp-img>タグは<img>タグの代わりに画像を表示するために使用し、<amp-youtube>タグを使用するとYouTube動画を埋め込むことができます。
AMP専用コンポーネントは、AMPプロジェクトによって開発・提供されており、高速なパフォーマンスとセキュリティを考慮して設計されています。そのため、JavaScriptの実装に比べて軽量で、ページ表示速度への影響を最小限に抑えることができます。
AMP専用コンポーネントを利用することで、表現力豊かなAMPページを構築することができます。AMPプロジェクトでは、多様なコンポーネントが提供されており、日々新しいコンポーネントが追加されています。
利用可能なコンポーネントやその使用方法については、AMP Projectの公式ドキュメントを参照することをおすすめします。
https://amp.dev/
AMPページの有効性確認
せっかくAMPページを作成しても、正しく作成されていないと、AMPの恩恵を受けることができません。AMPページが正しく作成されているかを確認するためには、「AMP Testツール」と「PageSpeed Insights」という2つのツールを活用します。
AMP Testツールは、Googleが提供する公式ツールであり、AMPページのHTMLタグや構造がAMPの仕様に準拠しているかどうかを検証します。AMP TestツールにURLを入力するだけで、簡単にAMPページの有効性を確認できます。検証結果は「合格」「不合格」で表示され、不合格の場合はエラー内容と修正方法が具体的に提示されますので、初心者の方でも安心して利用できます。
一方、PageSpeed Insightsは、Webページの表示速度を計測し、改善点を提案してくれるツールです。AMPページは高速化を目的としているため、PageSpeed Insightsで表示速度を計測することで、AMPページが本来の性能を発揮できているかを判断できます。PageSpeed Insightsでは、モバイルとデスクトップ両方の表示速度を100点満点で評価し、改善点や具体的な改善策も提示してくれます。AMPページの表示速度が遅いと感じる場合は、PageSpeed Insightsで改善点を洗い出し、修正していくことで、より高速なAMPページを実現できます。
これらのツールを活用することで、AMPページがAMPの仕様に準拠し、期待通りのパフォーマンスを発揮できているかを確認できます。
AMP Testツールの使用
作成したAMPページがAMPの仕様に準拠しているか、正しく動作するかを確認することは非常に重要です。AMPページの有効性を確認する便利なツールとして「AMP Testツール」があります。
Googleが提供するこのツールは、AMPページのURLを入力するだけで、HTMLの文法エラーやAMPのルール違反などをチェックしてくれます。エラーが検出された場合は、その内容と修正方法が具体的に提示されるので、初心者でも問題箇所を容易に特定し、修正することができます。
AMP Testツールは、ページのレンダリング速度やモバイルフレンドリー性なども評価し、改善点があれば合わせて指摘してくれます。これにより、単にAMPの仕様を満たすだけでなく、より質の高いAMPページの作成に役立ちます。
AMP Testツールは、https://search.google.com/test/amp から無料で利用できます。
PageSpeed Insightsの活用
Googleが提供するPageSpeed Insightsは、ウェブサイトの表示速度を計測し、改善点を提案してくれる無料ツールです。AMPページの有効性を確認する際にも活用できます。
PageSpeed InsightsにAMPページのURLを入力して分析を実行すると、モバイルとデスクトップ両方のパフォーマンススコアが表示されます。スコアは0〜100点で評価され、スコアが高いほどページの表示速度が速く、ユーザーエクスペリエンスが良いことを示します。
重要なのは、単にスコアを見るだけでなく、表示される改善提案を確認することです。AMPページであっても、画像の最適化やJavaScriptのレンダリング blocking リソースの削減など、さらなる改善の余地がある場合があります。PageSpeed Insightsからの提案を参考に、AMPページの表示速度をさらに向上させましょう。
また、「診断」セクションでは、AMPページとして正しく認識されているかどうかも確認できます。もしAMPに関するエラーが表示された場合は、AMPの仕様に準拠していない可能性があります。「AMPの対応方法」セクションで紹介した内容を参考に修正を行いましょう。
まとめ
AMPとは、モバイルページを高速表示するための技術です。
AMPを実装、HTMLやCSS、JavaScriptに独自のルールを適用することで、ページ表示速度を劇的に改善することができます。これにより、ユーザーはストレスなく快適にモバイルサイトを閲覧することができるようになります。
さらに、ページ表示速度が向上することでユーザーエクスペリエンスが向上し、直帰率の低下やページ滞在時間の増加も見込めます。
AMP導入には、ページ表示速度の高速化、SEO効果の向上、ユーザーエクスペリエンスの改善など、多くのメリットがあります。
しかし、一方で、開発コストの増加やデザインの制約、広告掲載の制限といったデメリットも存在します。
AMP導入を検討する際は、これらのメリットとデメリットを比較し、自社のサイトにとって本当に必要かどうかを判断することが重要です。
