AMPでも読みやすいアメブロ記事の書きかたについて

アメブロが2016年にAMPに対応して以降、スマホでGoogleモバイル検索をした検索結果に表示される記事が、どんどんAMP化してきました。

なので、

「私のアメブロには、スマホでGoogle検索して来る人はいません!」

という人を除き、今後は、AMPでの表示を考慮した記事の作成が必要になってきそうですね。

AMPって何?

AMPは、簡単に言うと、モバイル向けの高速表示ページで、スマホなどで検索したユーザーに対して、実際のブログ記事ページに代わる、素早く表示できるページを提供する仕組みです。

AMPに対応すると、Googleモバイル検索のカルーセルに表示される可能性があるなど、対応しない場合と比較して、検索からのより多くの流入を期待できます。

ただし、高速表示に特化した仕様のため、使えるタグや、タグの属性に制限が多く、思ったような記事ページを作るのが難しいといった面もあります。

ですが、アメブロは既にAMPに対応済みなので、これからスマホで検索してアメブロの記事を見つけてくれる人は、実際のアメブロの記事ページではなく、その記事ページから作成されたAMP対応ページを見る機会が多くなります。

本来は、AMPを別に作成、あるいは作成するかどうかを選べればいいのですが、アメブロでは、通常ページからAMP用ページが自動生成されるシステムになっています。

なので今後は、通常ページだけでなく、AMP表示された際にも見やすくなるような記事の書き方が求められるようになると言えるでしょう。

アメブロのAMP対応ページ

タグやタグの属性に制限の多いAMPですが、更にアメブロのAMP対応ページでは、ユーザーはCSSファイルやstyleタグを使ったスタイル指定(CSSを使った見た目の装飾)を一切することができません。

なので、記事作成時に、文字を太字や目立つ色にしてもAMPでは反映されませんし、囲み枠も囲み枠として表示されません。

また、アメブロのシステムで標準設定されているスタイルでは、「見出し」「引用」「リスト」などが、全て通常文字と全く見分けがつかない状態です。

ですので、これまでどおりの一般的な視覚効果によって読みやすさを確保した記事の書き方をすると、AMPでは非常に読みにくい記事となってしまう場合もありますので注意する方が良いでしょう。

AMPでも記事を読みやすくし、内容をうまく読者に伝えるためには、AMP対応以前とは少し違う工夫が必要になって来そうです。

アメブロのAMP対応ページの表示状態についてはこちらの記事を参照下さい

アメブロのAMP対応ページで使えそうなタグは?

というわけで、読者に記事の内容をうまく伝えるために、どんなタグが使えそうか?を考えてみました。

見出しに「hr」タグで下線

実は当記事でも使用していますが、見出しタグに「hr」タグ(区切りタグ)を下線として使うと、見出しが通常の段落とは切り離されて、少し見出しらしくなります。

上記画像の矢印で示した行は何れも中見出し「h3」タグですが、下線がある方が分かりやすいですよね。

例えば、中見出し「h3」タグの場合は以下のように書きます。

<h3>見出しの文字列<hr style="display:none"></h3>

閉じタグの直前に、

<hr style="display:none">

を挿入するだけです。

ちなみに、このように「style=”display:none”」を付けることで、そのHTMLタグを通常ページでは表示させず、AMPページでは表示させることができますので、他のタグにも応用することができるかもしれませんね。

ただし、AMPページになる時点で削除されてしまうタグもたくさんあり、そういうタグには使えませんのでご注意下さい。

囲み枠や引用は上下に「hr」タグ

囲み枠や引用は、上下に「hr」タグを置くと良さそうです。

画像の矢印で示した箇所は、どちらも囲み枠が付けてあった箇所ですが、AMPになって囲み枠が消えています。

そして、下側だけ「hr」タグで上下に区切り線を付てあるのですが、けっして派手な装飾ではないものの、通常の段落との切り離し効果による見やすさ向上の効果は十分に発揮できるのではないでしょうか。

書き方は、

<div style="囲み枠のスタイル"><hr style="display:none">囲み枠の中の文字囲み枠の中の文字囲み枠の中の文字
囲み枠の中の文字囲み枠の中の文字囲み枠の中の文字<hr style="display:none"></div>

のようになります。

囲み枠の中の内容の直前と直後に、

<hr style="display:none">

を挿入するだけです。

ちなみに、引用(blockquote)タグも、同様の方法で上下に「hr」タグを置くと見やすくなると思います。

強調

次に、「ここが重要!」「ここを強調したい!」といった場合、通常なら「strong」や「em」などのタグを使ったり、あるいは、「style」で文字サイズを大きくしたりするところだと思いますが、AMP対応ページでは、これらのタグは通常文字と同じ見た目になり、全く見分けがつきません。

そこで、何かないか色々なタグを試してみたところ、「markタグ」と「uタグ」が使えそうです。

アメブロのAMPページでは、

markタグは、黄色のマーカーペンで線を引いたような表示になります。

uタグは、文字に下線(アンダーライン)が引かれます。

どちらも多用すると見苦しくなりそうですが、「ここだけはAMPで見たときも是非とも強調表示したい!」という箇所には、これらを検討してみてはいかがでしょうか。

ちなみに、「mark」タグの方はタグの意味的にもこのような使い方をしても問題はなさそうですが、「u」タグは、本来のタグの意味とは違う使い方になりますので、見た目上どうしても必要というので無ければ、使わないほうが良いかもしれません。

画像

アメブロのAMPページは、画像の表示にも癖があります。

特に外部サーバーに保存してある画像は、小さくなったり、大きくなったり、長細くなったりと、まともに表示されないことが多いので、できるだけ使わないほうが良いと思います。

画像は、アメブロの画像フォルダにアップロードした画像を使い、必ず「width属性」と「height属性」を記述しておくようにすると、

・画面幅よりも小さい画像はそのまま表示
・画面幅よりも大きい画像は縦横とも正常に縮小されて表示

されますので、比較的問題が出にくいと思います。

まとめ

以上、AMPでも見栄えのするアメブロ記事の書きかたを考えてみました。

ちなみに、当記事も、ご紹介した「hr」タグなどを使って書いてありますので、もしよろしければ、スマホでAMP対応ページを確認して、どのように表示されるのか見てみて下さいね。

当記事のAMP対応ページはこちらです。

以上、よかったら参考にして下さい。

最終更新日:2017/09/03