AMPとは? 導入を検討する前に知っておきたい基礎知識

AMPとは? 導入を検討する前に知っておきたい基礎知識

スマートフォンでで検索しているとお目にかかることが増えてきた雷マーク。GoogleとTwitterが提唱し始めたAMP(Accelerated Mobile Pages)を導入したサイトを示すマークです。AMPとは、モバイル表示を高速化するための技術のこと。AMP導入によって得られるメリットがあるのですが、同時にデメリットも存在します。両者を理解した上で、導入前に検討すべきことや導入方法についてご説明します。

AMPとはモバイル表示を高速化するGoogleプロジェクトのこと!

モバイル表示を高速化するamp
スマートフォンでWebサイトを閲覧しているとき、Wi-Fi接続の有無や回線の混み具合で画面の表示が遅い時があります。Webサイトを見ている立場としては、遅いとイライラして、ブラウザを閉じてしまうこともあるでしょう。しかし、モバイルサイト運営側にとっては大問題です。あなたのクライアントにとって、ビジネスチャンスを逃してしまっているかもしれません。

つまりは、サイト閲覧者にとっても運営者にとっても、まったく良いことがないWebページ読み込み遅くてイライラする問題。解決に向けてGoogleとTwitterが、共同で立ち上げたのが、モバイルサイト高速化を狙ったAMPプロジェクトというものがあります。「AMP……アンプ?」となった人に読んでいただきたい、基礎情報をまとめてみました。

AMPで高速表示する仕組みとは

AMPで高速表示を実現する仕組みを簡単に説明します。高速表示を実現させるために、3つのコンポーネントが提示されています。

AMP HTMLは高速化のために、制限とAMP独自のタグを追加したHTMLです。AMP JSは高速化するための非同期のみ使用を許可するJava Scriptライブラリを指します。

この2つの要素を取り入れて作成したページは、表示に要するデータ量が1/10まで抑えることを可能にしました。

AMP CacheはAMPページを一時的にキャッシュに保存する仕組みです。表示の際にキャッシュを使用することにより、オリジナルページを読み込むのにかかる時間を削減しています。

AMPで効果が上がるサイトはどんなサイト

AMPはリリース当時は、ニュースやブログなどの記事を表示するページのみサポートしていました。しかし、離脱率が成果に影響を与えやすいのはECサイトです。記事コンテンツ以外にも応用可能な要素が2017年から徐々に追加されてきています。

AMPはキャッシュを使って高速化しています。常に書き込みがされる動的なコンテンツにはあまり効果が期待できません。定期的に更新はされるものの、頻繁ではないニュースやブログのようなサイトでは効果が見込めます。

AMPに対応するメリットとは?

AMP対応 話し合い
モバイルページをAMP対応にするメリットを挙げてみましょう。

サイト閲覧のストレス軽減により回避されずに閲覧してもらえる

スマートフォンでの閲覧はスキマ時間に行われることもあり、表示速度の遅さはパソコン以上にストレスに感じられます。

AMP導入により、表示を待つストレスが軽減します。少しの時間で多くの情報に接することができるAMP導入は、UXの向上につながる大きな要素です。

カルーセル表示されやすくなり閲覧アップにつながる可能性がある

検索結果を表示する画面で表示されることがある、検索結果に合致するコンテンツページを画像付きで紹介している部分をカルーセルと呼びます。

カルーセルに表示されるのは、AMP実装済みのページのみです。検索窓のすぐ下や、検索結果の一番最後に表示されるためユーザーの目につきやすいという効果があります。カルーセルに表示されることは、閲覧数アップに結びつく大きな要因です。

SEO上位表示される可能性がある

Google社は「AMP導入の有無を検索順位決定に反映させない」と公式発表しています。しかし、モバイルに対応しているかどうかは検索順位に影響を与えます。

Googleが検索順位アップの条件として、モバイルフレンドリーをあげているのが現状です。AMP対応するということはモバイルフレンドリー対応にもつながります。今後、AMP対応の有無がSEOに反映される可能性はなきにしもあらずです。

AMPを導入する前に!事前に検討すべきことは?

AMP導入前に思考する人
AMP導入はメリットばかりではありません。導入を決定する前に、検討しておくべき注意点をご紹介します。

現在のサイトのデザインを変える必要性が出てくる

すでに出来上がっているサイトをAMP対応に変更すると、デザインが崩れてしまいます。AMPページでは、高速表示実現のため、HTMLタグやJava Scriptに大幅な制限があることは前段でご紹介しました。

WordPressで作成したサイトはAMP対応のプラグインを追加するとAMP対応できますが、修飾はほとんど無効になってしまいます。無効となった修飾の部分は、モバイル表示するとテキストのみの表示になり、狙った視覚効果が薄れてしまう結果を招きます。

広告タグも一部しか利用できなくなってしまうので、ご使用中でしたら注意が必要です。

導入期間とコストがかかる

AMPを導入する場合、使用できるHTMLタグやJava Scriptに制限がかかります。その条件のもと、現在のサイトの構成を活かしながらどのように対応させていくのか、あらかじめ設計が必要です。

設計をサイトに反映させるコーディング作業もエラーとの戦いになることが予想できます。設計とコーディングにかかる工数とコストは余裕をもたせて見積もる必要があります。

表示時間軽減に向けたルールを遵守するのが大変

AMP対応では、決められた制約を守るのが非常に重要です。また、まだ発展途上の技術のため、今後仕様が変更されたり、追加されることも起こり得ます。禁止されているタグが多いので、今まで使用していたものが使えなくなり、削らなくてはいけないコンテンツも出てきます。

AMP導入は意外に大変!外部発注も視野に入れる

AMPに対応するのは、制限が強化されているため、慣れていないと難しい作業です。JavaScriptを使用しているサイトは特に細かい部分の変更が難解になります。

ルールを熟知したプロに依頼するほうが結果的に期間・コスト軽減に

普段Webサイトの作成に使用しているHTMLタグとJavaScriptの機能が制限されていて試行錯誤させられるのがAMP対応です。まったくAMP対応の経験がない社内人員で対応しようとした場合、トライ&エラーの繰り返しになります。

工数とコストを通常のサイト改造よりかなり多めに見ておく必要があります。AMP対策は経験者でルールも熟知したプロに発注したほうが、期間を短縮でき結果的にコストを削減できる案件です。

比較的新しいプロジェクトなので対応エンジニア探しは難しい?

AMPは2016年から対応開始になった、まだ新しいプロジェクトです。AMPに精通しているWebプログラマーは、まだまだ数が少ないと思われます。

一方でAMP対応済みのサイトも年々増えてきているので、適切な方法で探せばニーズにあった技術者は必ず見つけられるはずです。

クラウドソーシングなら条件にあったエンジニアが見つけやすい

AMP対応を依頼する技術者を見つけられる適切な方法とは、どのような方法でしょうか。

間違いない方法としては、AMP対応経験のある制作会社に依頼すること。または既存のサイトを作成した会社に聞いてみるのがいいでしょう。ただし先述した通り、メリットとデメリットがあるため、AMP対応の費用相場はそこそこのお値段です。

どうしても安くあげたいのであれば、フリーランスのサイト開発者に依頼してみるのも一手。フリーランス探しとなれば、一番手取り早いのがクラウドソーシングですね。クラウドソーシングで最適なエンジニアを探してみてもいいですし、google検索で良さそうな人を見つけるのもあり。

当たり外れが恐ければ、やっぱり専門の業者に依頼するのが吉ですね。迷うところですが、お財布と相談してきめてください。