注目の記事 PICK UP

モバイルユーザビリティを向上させるAMPとは何か?

Last Updated 2021.02.01

モバイルユーザビリティを向上させるAMPとは何か?

11-wordpressfirst-header
AMPという用語をご存知でしょうか?2017年頃から聞くようになったWEB業界のトレンドなのですが、WEBサイトをモバイル端末での表示に特化して軽量化・高速化するというプロジェクトです。AMPとは略称で正式名はAccelerated Mobile Pages といいます。このAMPプロジェクトは、2015年10月GoogleとTwitterの2社が中心として関わって開始され2021年にかけて推進・普及させようとしています。それはWEBサイトのデザインに関係してきます。WEBサイトはPC用デザインを基本として、昔はPC用サイトとモバイルサイトでデザインを分けたサイトを構築していたのが、HTML 5 規格の登場によってWEBデザインもフレキシブルになり、レスポンシブデザインというPC端末でWEBサイトを見た時とモバイル端末でWEBサイトを見た時に、WEBサイトのデザインを可変させて一つのWEBデザインで表示させるというトレンドがありました。

WEBサイトページのデザイン性と重量化

レスポンシブデザインはPCサイトとモバイルサイトの垣根を無くしました。と、同時にモバイル端末にはデザインを可変したPCサイトがそのまま表示されるので、1ページあたりの表示データ量が飛躍的に増えることとなりました。PCページでは当たり前のアイキャッチ画像や、ページ内の解説写真・動画など容量が大きいデータをモバイル端末でダウンロードすることになったのです。それは、モバイル端末でWEBサイトのページを表示させるのに時間がかかる要因になりました。そのため、モバイルフレンドリーなWEBサイトが必要になってきたということで立ち上がったのがGoogleとTwitterを中心としたAMPプロジェクトです。

AMPはSEOにも影響することになりました

自サイトのAMP化はSEOの観点からみても有利になると考えられています。それは、Googleが検索結果にAMP対応ページがある場合ページ読み込み速度が早いためランキングに影響すると明言しているからです。

Google 検索での AMP の表示 | Google 検索セントラル  |  ドキュメント  |  Googl...
Google 検索では、AMP ページをインデックスに登録することによって、信頼性に優れた高速なウェブ エクスペリエンスを実現しています。Google 検索で AMP がどのように表示されるか、また構造化データが果たす役割について詳しくご説明します。

AMPプロジェクトによるHTMLの策定

AMPプロジェクトでは、WEBサイトのデータが肥大化しないように細かいところまでHTMLの規格が策定されています。そのAMPの仕様は限定的で、表示されるページは昔のimodeページのようなシンプルなページ構成になるように策定されています。AMPプロジェクトの構造化には

  • AMP HTML/CSS
  • AMP JS
  • AMP Cache

と大きく分けて3つの要素から構成されています。

表示の高速化を実現するために、WEBサイトのHTML構造を簡素化してデータ量を減らすことと同時にAMP CacheというAMPのWEBページをサーバーにキャッシュして、ユーザーに高速でデータを転送するということを行っています。そのため、モバイルのユーザーは瞬時に見たいWEBサイトを表示することが可能になり、モバイルユーザビリティが向上するというわけです。

AMPの進化

AMPプロジェクトは当初はその限定されたHTMLマークアップとJS規格のため、キュレーションメディアやニュースサイトと相性が良く導入されていました。しかしAMPが知られるようになってきてニーズが高まったのはECサイト等の物販業界でした。ECサイトでは1ページあたりに表示する商品のデータ量が激増しページ表示速度が低下、ユーザーはページ読み込みの遅さにうんざりして離脱してしまい機会損失が大きいと嘆いていました。その中でAMP化して成功したのがアメリカのeBayというECサイトでした。2017年頃からAMPプロジェクトもアップデートされてECサイトやポータルサイトで使用できるようなHTML構造が策定されて拡大していきました。2018年には日本の食べログやマイナビ等もAMP対応し、AMPプロジェクトはますます勢いを増しています。

これからのWEBサイトはAMP対応が必要か?

SEO関連の用語としてモバイルフレンドリーという用語があります。これはWEBサイトがモバイル対応のデザインであって、モバイルにも最適化されているということです。AMPもモバイルフレンドリーなのですが、AMPとモバイルデザインWEBサイトでは考え方が少し変わってきます。モバイルフレンドリーなWEBサイトのデザインは、SEOにおいて検索結果に影響する大事な要素です。

もし、あなたのWEBサイトがモバイルに対応していないと検索ランキングが下がる可能性あります。モバイル端末でのアクセスが約6割を占める今の時代は、モバイルでのアクセスに最適化されたWEBデザインというのは必須ということです。一方、AMP対応WEBサイトは検索ランキングが上昇する可能性はあっても、AMP対応WEBサイトが無いからといって検索結果ランキングが下がるということは無いということです。

まぁこれも2021年初頭のSEOの考え方と見方で、2022年にはどうなっているかはわかりません。AMP対応WEBサイトは無くても検索結果ランキングに影響はありませんが、AMP対応WEBサイトがあって検索結果ランキングが上がる可能性があるのなら用意しておいて損はありません。幸いWordPressにはプラグインでAMPに対応できるものがいくつかあります。次回はおすすめのAMPプラグインを紹介しようと思います。

AMP for WPのイントールと詳細設定の方法
WordPressはWEBサイト全体をAMP化する時、プラグインをインストールして設定するだけで誰でも簡単にAMP化できます。AMP for WPプラグインをインストールして詳細設定をしてWEBサイトをAMP対応する方法を解説します。


AMP for WPの詳細設定方法-Design(デザイン)
WordPressはプラグインをインストールして設定するだけで誰でも簡単にAMP化できます。AMP for WPプラグインをインストールして詳細設定をしてWEBサイトをAMP対応する方法のDesign(デザイン)を解説します。

スポンサードリンク

関連記事

  1. 05-05-sxomarketing-header

    SXO検索体験最適化を実現するためには-2022年からのSEO対策

  2. 08-wordpress-head

    WordPressの簡単セットアップ方法-コアサーバー(CORESERVER)

  3. 23-revealids-header

    投稿一覧をID順で並べ替えるプラグイン-Reveal IDs

  4. 07-wordpressfirst-aicache

    新しいブロックエディターが使いづらい。そんな時はClassic Editor

  5. 34-bigdata-header

    GDPR対応について-WordPressをGDPR&CCPAに対応する

  6. 05-03-aboutsxo-header

    SXO検索体験最適化とは何か?-SEOの次世代のSEO対策

  7. 06-wordpressfirst-header

    SiteGuard WP PluginでWordPressの不正ログインを防止する

  8. 14-wordpress-aicache

    WordPressサイトを簡単にバックアップ&復元-UpdraftPlus&Googleドライブ

  9. 29-complianzgdpr-header

    英国のGDPRはさらに厳しい-Complianz GDPR&CCPA Cookie Consentプ…

スポンサードリンク

特集記事

  1. 19-chromedev-header ChromeでPCからモバイル端末をエミュレートして表示する方法
  2. 24-polylang-header PolylangとLingotek Translationで自動翻訳した多言語サ…
  3. 29-complianzgdpr-header 英国のGDPRはさらに厳しい-Complianz GDPR&CCPA Cooki…
  4. 05-03-aboutsxo-header SXO検索体験最適化とは何か?-SEOの次世代のSEO対策
  5. 28-consumerbehavior-header 消費者行動モデル-AIDMA・AISAS・VISAS複雑化するコミュニケーション…
  6. 20-marketing-header マーケティングの定義-消費者志向から価値主導のマーケティングへ
  7. 05-wordpressfirst-aicache WordPressをインストールして最初にやる設定-パーマリンク設定
  8. 02-wordpressfirst-header WordPressをインストールして最初にやる設定-投稿設定
  9. 12-wordpressfirst-header AMP for WPのイントールと詳細設定の方法
  10. 11-wordpressfirst-aicache モバイルユーザビリティを向上させるAMPとは何か?

PICK UP記事

  1. 29-complianzgdpr-header 英国のGDPRはさらに厳しい-Complianz GDPR&CCPA Cooki…
  2. 18-resetcss-header リセットCSSとは何か-WEB制作の基礎
  3. 14-wordpress-aicache WordPressサイトを簡単にバックアップ&復元-UpdraftPlus&Go…
  4. 17-postandpage-header レンタルサーバーが増強されるようです
  5. 17-postandpage-header WordPressの投稿ページと固定ページの違い
  6. 20-marketing-header マーケティングの定義-消費者志向から価値主導のマーケティングへ
  7. 24-polylang-header PolylangとLingotek Translationで自動翻訳した多言語サ…
  8. 05-wordpressfirst-aicache WordPressをインストールして最初にやる設定-パーマリンク設定
  9. 25-marketing-header 4C分析とクロスSWOT分析-マーケティングの分析フレームワーク
  10. 16-onamae-header お名前.comのドメインのDNS設定をする-コアサーバー連携

人気記事

  1. 24-polylang-header
  2. 29-complianzgdpr-header
  3. 23-revealids-header
  4. 13-wordpressfirst-aicache
  5. 34-bigdata-header
  6. 30-wpsitemap-header
  7. 11-wordpressfirst-aicache
  8. 22-recaptcha-header
  9. 26-gdpr-header
  10. 12-wordpressfirst-header

最近の記事

  1. 17-postandpage-header
  2. 02-02-csspseudoclass-header
  3. 35-newthemeupdate-header
  4. 05-03-aboutsxo-header
  5. 05-05-sxomarketing-header
  6. 29-complianzgdpr-header
  7. 30-wpsitemap-header
  8. 28-consumerbehavior-header
  9. 34-bigdata-header
  10. 26-gdpr-header

おすすめ記事

  1. 30-wpsitemap-header
  2. 11-wordpressfirst-aicache
  3. 15-wordpress-aicache
  4. 29-complianzgdpr-header
  5. 20-marketing-header
  6. 25-marketing-header
  7. 26-gdpr-header
  8. 21-marketing-header
  9. 05-wordpressfirst-aicache
  10. 17-postandpage-header
PAGE TOP