株式会社IKUSA

モバイルウェブページを速くするAMP対応のメリットとデメリット

ディレクターblog
タグ AMPスマートフォン
米田 真介 米田 真介
2017.12.13

スマホ対応サイトのAMP(AMP)化を、2016年10月にGoogleが推進していくと発表してから少し時間が経ちました。 実際にAMP対応すると、スマホで検索した時の表示機会が増えたり表示速度が早くなったりしています。

 

徐々に対応してきたサイトもあるなかで、 一般認知も少しずつ増えてきましたので、「モバイルウェブページを速くするAMP対応のメリットとデメリット」として、参考事例や情報を整理しご紹介していきます。

 

そもそもAMPとは?

marker-writing-web-design-and-development-concept

 

AMPとは、Googleが提唱しているスマートフォンなどのモバイルウェブページを高速に表示させるためのインターネット言語の名称です。AMPのHTML言語は自由に利用できるため誰でもページ作成しやすくなっています。

 

大手企業の導入例としては、Googleを筆頭に、Yahoo! JAPAN、Twitter、LINE、アメーバ(サイバーエージェント)、リクルートに加え、大手新聞社でも導入されています。

 

AMP HTMLとキャッシュ

AMPを導入するには、「AMP HTML」と呼ばれるコードでサイトを構築する必要があります。またAMPは、AMP HTMLに加え、CSS、Javaスクリプトで構成され、作成したモバイルウェブページはページ読み込みスピードが速くなります。

 

AMPで構成されたページは、キャッシュ(データ)としてGoogleに保存されます。ユーザーがAMPのサイトを閲覧すると、Googleに保存されたキャッシュを直接読み込むため高速で表示されます。

 

AMP対応のメリット・デメリット

AMPの導入には、メリットとデメリットがあります。ここではメリットとデメリットを3つずつご紹介します。

 

AMPのメリット1「ページの読み込みが速くなる」

AMPのメリットの1つ目は、モバイルウェブページの読み込みスピードが上がることです。
これがAMP対応をする最大のメリットです。サイトの表示スピードが速くなると、ユーザーがページ閲覧をする際の快適度が向上します。このことから直帰率が減少し、提供したい商品やサービスなどの売り上げ増加が見込めます。

 

AMPのメリット2「モバイルウェブページのアクセス数が増加する」

AMPのメリット2つ目は、今後SEO対策として影響が出る可能性がある点です。

 

現状では直接的なSEO効果はありませんが、GoogleはAMP対応を推奨していますので将来的なSEO対策としてオススメです。

 

また、Googleが発表している検索ランキングの条件に「ページの表示スピード」が含まれていますので間接的にはSEO効果が期待できます。ページの表示スピードが上がるとユーザビリティも向上するため、Googleの基本方針である「ユーザーを優先したサイト作成」にも一致し、この点でも間接的にSEOに影響があります。

 

AMPのメリット3「カルーセル表示が期待できる」

AMPのメリットの3つめは、インターネット検索のトップに位置する「カルーセル」に表示される可能性がある点です。

 

カルーセルとは、ニュースの画像一覧などを横にスライドできる表示方法です。スマホでGoogle検索をするとトップ部分に横にスライドできるニュースが表示されます。AMPで自社のモバイルウェブページを作成しニュースを配信すると、このトップ部分に表示される可能性がありアクセスアップにつながります。

 

AMPのデメリット1「ページのコーディング作業が大変」

ここからはAMPのデメリットをご紹介します。AMPのデメリットの1つ目は、サイトのコーディングをやり直す必要があり、多くの労力が必要になる点です。

 

元々のHTMLに加えて、AMP HTMLを再構築する必要があるので時間がかかります。元々のHTMLを削除して、AMP HTMLで0からサイトを構築する場合も多くの作業が必要になります。

 

また、AMPには様々な制作上の制約があり、そのルールに沿っていないとページを表示できなくなります。この点もコーディングのデメリットであるといえます。制約の1つとしては、利用できるタグが制限されています。例えば、画像用の「imgタグ」は、「AMP-imgタグ」を利用する必要があります。

 

ワードプレスを利用してサイト構築をおこなっているモバイルウェブページの場合は、AMPプラグインを導入するとページが表示できないトラブルが多発するため、こういった事態に対応できるWEBデザインの技術が必要になります。

 

AMPのデメリット2「ページのデザインが崩れる」

AMPのデメリットの2つ目は、導入により、モバイルウェブページのデザインが崩れる可能性がある点です。AMPは、無駄なコードやタグを制限することでページ表示の高速化を実現しています。

 

凝ったデザインのホームページやサイトを構築している場合は、AMPを導入するとデザインが再現できません。例えば、元々のサイト全体のカラーを「青色」にしていても、AMPを導入した途端に全体が「黄色」に変わってしまったりします。

 

その他に、以下のようなトラブルが想定されます。

 

  • サイト案内用のメニューがなくなる。
  • アニメーションなどが省略される。
  • サイトに表示させていたFacebookやTwitter用のシェア機能がなくなる。
  • ワードプレスを使って調整していた写真のサイズが無効になる。

 

また、現状では複雑なデザインのCSSやJavaスクリプトがあまり利用できません。

 

AMPのデメリット3「広告が表示されない」

AMPのデメリットの3つ目は、あなたが運営しているサイトで利用しているインターネット広告が表示されなくなる可能性がある点です。

 

例えば、AMPを導入した途端にモバイルウェブページのGoogleアドセンス広告が消えてしまうことがあります。通常のGoogleアドセンスは、基本的なHTMLにしか対応していないためです。GoogleアドセンスをAMP HTMLに対応したコード記述に書き換えると表示ができるようになりますが、専門的な技術が必要となります。

 

AMPを導入する際の判断基準

どのようなモバイルウェブページにも有効ではない

designer-drawing-website-ux-app-development

 

最後に、AMP対応を導入する際の判断基準をご案内します。
AMPは、どのようなサイトにも効果を発揮するわけではありません。これは、Googleが公式ブログで公表しています。AMPは、基本的に動きが複雑なサイトには向いていません。例えば、地図やナビのようなサイトにAMPを導入してもほとんど効果はありません。

 

あなたが運営しているモバイルウェブページが、SNSやメール機能、道路などの経路をナビする内容の場合はAMP対応を見送りましょう。ニュースやブログ、動画サイトや商品案内のページなどを運営している場合はAMPの導入を前向きに検討しましょう。

 

実際にAMPを導入するかどうかの判断

実際にAMPをモバイルウェブページに導入するべきかどうか、現状では判断しづらい問題です。

 

AMPにはまだまだデメリットや改善するべき点が目立ちます。「トラブルがあっても新しい技術はすぐに導入したい」といったタイプの方であればすぐに利用することをオススメしますが、「新しい技術は様子を見て慎重に導入したい」といったタイプの方は、もう少し技術改善が進んでから利用することをオススメします。

 

例えば、「新バージョンのWindowsはトラブルがないのを確認してから慎重に導入する」というタイプの方は、AMPをすぐには利用せず情報収集のみをおこないましょう。

 

メリット・デメリットを踏まえてAMPを導入しましょう

japanese-business-woman-holding-a-smart-phone

 

「モバイルウェブページを早くするAMP対応のメリットとデメリット」をご紹介してきました。

 

AMPは、まだまだ発展途上でトラブルも目立ちますが、今後もGoogleが推奨していくと考えられます。将来的なAMP技術の拡大も見据えながら、あなたが運営しているモバイルウェブページへの導入を検討しましょう。

 

米田 真介
米田 真介

1984年、大阪城下に生まれ落ち大阪で育った次男坊。コンピュータ専門学校を卒業後、広告制作会社に3年間勤務。
その後、FinalFantasy Xというゲームで泣きまくって人生を変えられ、高校時代からの夢であった旅を決行し、半年間ヒッチハイクで47都道府県を駆け巡った後にWeb&デザイン会社(TearsSwitch LLP)を起業。
「WEB事業の拡大とチャンバラの手伝いをさせる為」であると共に"当時お金持ち"だった「赤坂のお金目当て」で共に株式会社TearsSwitchを立ち上げる。
チャンバラ合戦-戦 IKUSA-を展開するNPO法人ゼロワンの理事長でもある。『オンラインゲームの世界を現実化』させる夢のため、プログラム、デザイン、カメラ、地域活性化、コンサル、開発など新しいことを何でも満足するまでやるので気がついたら顔がゴボウになっている毎日。でも、母さん。僕は元気です。

関連記事

人気記事

新着記事

同じカテゴリの記事

人気タグ