さっしーブログ

埼玉県在住のシステムエンジニアです。基本的には技術的な内容を中心に発信していきます。

最新Web技術!AMPについて調べてみた

目次

1. AMPとは?

AMPは「Accelerated Mobile Pages」の略です。
 
google翻訳してみると「加速されたモバイルページ」と略されます。
 
つまり、AMPとはモバイルページ高速化のことで、googleが取り組んでいるオープンソースのプロジェクトを指します。
 

2.なぜAMP?

近年では徐々にモバイルページへの表示速度が求められ、googleさんの情報によりますと表示速度に3秒以上かかるモバイルサイトでは40%くらいの方が閲覧をあきらめるそうです。
そのため、これらの課題に対応してユーザーエクスペリエンスやサイトへのエンゲージメントを向上させることが目標になり、そのために行う施策としてAMPが必要になってきます。
 
しかし、AMPはページを高速にロードできるようにするため、ページ数の多いサイトには有効ですがSPAのような1ページで非同期に内容を書き換えるようなサイトには向いておりません。
 
このようになんでもかんでもAMP対応を行えばよいというわけでなくサイトの特性により向き不向きがあるそうです。
 

3.AMPページを見てみたい方

googleさんの情報によりますと下記のURLにモバイルからアクセスして、実際にAMP対応が行われたサイトのデモが確認できるそうです。
 
 
また、AMP対応のサイトにはf:id:y_saiki:20170929134335p:plainの表示があります。
 
f:id:y_saiki:20170929134335p:plainの画像は以下のサイトから引用させていただいております。
 
 

4.AMP対応するには?

筆者自身まだ試せていないため、資料とわかりやすそうな参考サイトを下記にまとめました。
 
 

5.AMPの注意点

どうやらAMP HTMLという仕様があるそうで独自タグを使用しなさいや制約があったりします。
例えば<img>タグではなくて<amp-img>タグを使用しなさい。
または<form>タグは使用禁止などがあります。
 
そこら辺についても今後調査していこうと思います。
 

6.最後に

サイトをストレスなく見れるのは主にスマホでネットを見るユーザーからしたら、とてもうれしいですね。
しかし、対応する側としてある程度育ったサイトをAMP化するのはとても工数がかかりそうな気がします。
そして対応前と対応後でデザインが崩れる可能性があるだとか。。。
色々一長一短がありますが、今後のECサイト開発には視野に入れるべき内容ではあるかと思います。
 
以上