更新日：2019年5月31日

公開日：2017年8月25日

AMP＋レスポンシブは可能か？

AMPマーク

最近、『AMP』というキーワードを頻繁に目にするようになってしまった。

いよいよ、AMP化必須の時代が近づいているのかもしれない。

WordPressのAMP化

そこで、試しに新規サイト（https://www.miyazaki-tenkin.com/?amp=1）をAMPに対応させて作ってみた。

WordPress用AMPテーマ Download
※AMP化の参考用としてお使いください。

WordPressなので、AMP化が必要な部分だけ条件式で分岐すれば良い。

今までと同じように、レスポンシブデザインのテーマを改造すればできたので、それほど困難ではなかった。

超めんどくさかったけど…

問題は、HTMLで書いた純粋な静的サイトの方。

一般的には、通常ページとAMPページをディレクトリを分けて別々に作ることになる。

https://xxxxx.com/ （通常ページ）

https://xxxxx.com/amp/ （AMPページ）

しかし、これではコンテンツを更新する度に2種類のファイルを更新しなければならない為、レスポンシブのメンテナンス性の良さが完全に失われてしまう。

そこで考えたのが、通常ページを捨てて『AMPページのみにする』という方法。

https://xxxxx.com/ （AMPページ）

Googleが『モバイルファースト』を掲げはじめていることを考えれば、AMPページがメインになるこの位置づけは、むしろ好都合かもしれない。

AMPには<amp-img>のように独自のHTMLタグが用意されているが、通常ページで使用しても画像はきちんと表示されるので問題はない。

ただ、基本的にJavaScriptが使用できないので、いくつかは削らないといけない部分は出てくるだろう。

しかし、やっぱりAMP化するのは怖い…

僕が管理しているサイトはほとんどが静的ページの為、AMP化するのにも莫大な時間が掛かってしまう。

もし、AMPが廃止になってしまったら…

本当にこれから、AMPがスタンダードになるのだろうか？

AMPの本質は、「ページの表示を早くして、スマホユーザーのストレスを減らすこと」

それなら、スペックの高いサーバーを選んだり、画像のファイルサイズを圧縮したり、まだできることは色々あると思う。

トップニュースに表示されるというメリットをとっても、まだまだリスクが高すぎると思ったので、今回は既存サイトのAMP化を見送りました。

ただ今後、既存サイトに新しくページを追加する際は、AMP化したページで記事を追加するかも。