AMP+レスポンシブは可能か?

AMPマーク

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

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

WordPressのAMP化

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

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

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

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

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

静的HTMLサイトの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化したページで記事を追加するかも。

この記事のURLをコピー

関連情報

メールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。