アメブロのAMP対応ページの表示について調べてみました

アメブロは、2016年にAMP対応ページが用意されるようになりましたが、当ブログでも、スマホでGoogle検索するとAMPが表示されるページがあったので確認してみたところ、通常ページの表示とは全く異なる表示だったため驚きました。

ちなみに、AMPというのはこのようなものです。

ごく簡単に言うと、モバイル検索したユーザーに対して(本来の記事ページではなく)高速で表示される代替ページを提供する仕組みです。

恐らく今後は、多くのアメブロユーザーのいろんな記事でAMPが用意されるようになるのだと(既になっているとも)思いますので、どんなふうに違うのか、ちょっとご紹介したいと思います。

見出しが通常文字と見分けがつかない

最新版エディタで「大見出し」とされているh2タグや、「中見出し」とされているh3タグなどは、通常ページでは何もしなくても太字の大きな文字で表示されて目立つようになっています(画像は当アメブロの記事内見出しで、少しカスタマイズしてあります)

ですが、AMPでは、見た瞬間に見出しとはとても気づきそうもないような、太字でもない、大きい文字でもない、普通サイズの文字で表示されますので、何かしらの見出しとわかる工夫が必要になりそうです。

引用も通常文字と見分けがつかない

他サイトの文章に言及するためにその一部をブログ記事に貼り付けて使う「引用」も見分けがつきません。

通常ページでは左側にラインとインデントが付いて引用となっている範囲がわかりますが、AMPでは一見ではわかりませんので、まるで、その記事のオリジナルの文を装っているかのようにも見えます。

囲み枠も無くなってしまう

読者に重要な箇所を伝えるための囲み枠も、全てなくなってしまいます。

また、囲み枠の中の装飾もほぼ無くなってしまい、素の状態で表示されますので、目立たせるためには工夫が必要です。

太字や文字色もなくなってしまう

通常の段落中でも、重要な箇所を提示する太字や文字色、文字サイズ等の装飾がほとんど無くなります。

これらも、素の状態の文字になってしまい、全く目立たなくなります。

画像の表示がうまくいかないことがある

アメブロのAMP対応ページでは、画像が「小さくなったり」「大きくなったり」「伸びてしまったり」とおかしな表示になることがよくあります。

特に、外部サーバーに保存された画像を表示した時に、そのようになりやすいようです。

アメブロの画像フォルダにアップロードした画像の場合は、概ね

・画面幅よりも小さい画像はそのまま表示
・画面幅よりも大きいな画像は画面幅に合わせて縮小表示

となり、比較的安心という印象です。

有料ユーザーでも広告が表示される

僕は、月1,000円ちょっとをアメブロさんに納めている「広告を外す」有料ユーザーですでしたが、記事下に芸能人ブログなどへの広告リンクがたくさん表示されます。

通常のスマホ用ページでは、このような広告リンクは表示されませんので、AMP対応ページのみの特別仕様のようです。

改善してほしいですね

というわけで、個人的に、かなり厳しい状況だと感じたんですがいかがでしょう?

AMPの性格上、表示が重くなるようなカスタマイズや、AMPで許可されていないタグなどが外されてしまうのは仕方がないとは思うのですが、

・見出しタグや引用くらいは、ひと目でそれだとわかるように、アメブロのシステム側で対応欲しい。
・「広告を外す」契約をしているユーザーのページに芸能人ブログへの大量の広告リンクを表示するのは辞めて欲しい。

と感じます。

AMPでも見やすい工夫が必要

ですが、運営の改善を待っていても実施されるかどうかはわかりませんので、読者に快適に記事を読んでもらうために、アメブロのユーザー側でできる工夫はやっておく必要があると思います。

例えば、

・見出しと通常の段落を見分けやすくする。
・重要な箇所には、文字装飾としても使えるHTMLタグを利用する。
・囲み枠や引用も、通常の段落とは見分けられるようにする。

くらいができれば、かなり違ってくるのではないでしょうか。

というわけで、これらを何とかする方法も考えてみました。
AMPでも読みやすいアメブロ記事の書きかたを考えてみました

最終更新日:2017/09/03