[レベル: 中級]
Accelerated Mobile Pages (AMP) に対応したサイトを増やすことを目的としたAMPlifyキャンペーンをGoogleは先日スタートしました。
キャンペーンの第一弾として、AMPの始め方を紹介する記事を、英語版と日本語版のウェブマスター向け公式ブログで同時に公開しました。
英語版と日本語版のほか、ドイツ語版やフランス語版の公式ブログでも翻訳記事をすぐさま公開しているあたりにも、AMP普及に対するGoogleの気合の入れようを感じます。
AMP対応を始めるに必要なリソースの紹介
書いてある内容は、AMPを始めるために必要なリソースの簡単な紹介です。
CMSはプラグイン利用
次のCMSはプラグインを使えば簡単にAMP化できるということで、それぞれの公式ページへ誘導しています。
AMPの基礎から応用をコードラボで学ぶ
一方で、AMPページを自作したりAMPの仕組みについて詳しく学んだりしたい人にはコードラボを紹介しています。
コードラボでは、AMPページを作成する手順を、解説に沿って実際にコードを修正しながら体験できます。
コードラボには、基礎編と上級編があります。
基礎編の「Accelerated Mobile Pages Foundations」では次が学べます。
- AMPによって、モバイルウェブのユーザー体験がどのように改善されるか
- AMPページの基本
- AMPの制限
- AMPウェブコンポーネントが、ウェブサイトによくある問題を解決する方法
- 作成したAMページを検証する方法
- AMPページをGoogle検索のために準備する方法
上級編の「Accelerated Mobile Pages Advanced Concepts」では次が学べます。
- amp-adで広告を表示する
- YouTube動画とTwitterカード、レスポンシブ テキスト要素の埋め込み
- amp-carouselを使って画像とコンテンツを組み合わせのカルーセルを構築する
- amp-analyticsでのシンプルなトラッキングパターン
- ページにサイトナビゲーションを追加する方法
- AMPでフォントはどのように機能するか
ちょっと残念なのは、コードラボは英語だけの提供という点でしょうか。
とはいえ、たいていのコードは詳しく学ぶには英語は避けて通れません。
苦手な方も頑張ってください。;)
なお、AMPプロジェクトの本体サイトはかなりの部分で日本語化が進んでいます（ただし、最新の情報が反映されていない可能性もあるので、オリジナルの英語版はやっぱり参照すべき）。
AMPlifyキャンペーンを開始する際に「AMPの何を知りたいか？」をアンケートした結果、55%がAMPの始め方を学びたいと回答したそうです。
On Friday, 55% of you mentioned that you want to learn how to get started on #AcceleratedMobilePages.
この結果も受けて、AMPの始め方を紹介する記事をGoogleは最初に公開したようです。
「Googleの”オシ”も強くなってきたことだし、そろそろAMP化を真剣に考えるか」という人は公式ブログの記事を読んで、AMP対応を始めるといいでしょう。