テーマをAFFINGER4に変えました～決め手はAMP対応～

WordPressテーマをSTINGER PLUSからAFFINGER4に変更しました。
ほぼ、見た目変わらずですので間違い探し状態ですね。

AFFINGER4は、リリース当初から別サイトで利用する予定で手元にありましたが、カスタマイズ記事だけを加筆修正しつつ、当ブログではSTINGER PLUSをこれからもずっと使い続けるつもりでいました。

デザインに関しては今までにない位お気に入りのテーマですから。

記事内やTwitterでも断言していましたしね。

一目惚れして今まで一緒に歩んできたんだから。大切に使い続けるって決めてるし。そうそう心変わりはしないもん！！

な～んて。

自分自身を信じてみるものの、そんなSTINGER PLUSへの「愛」もAFFINGER4を知れば知るほど、だんだんと「意地を張ってるだけ」みたいに思えるように...

まだまだ、言い訳お伝えしたい気持ちは沢山ありますが、エンドレストークになりそうですので一旦区切りたいと思います。(笑)

なかなか踏ん切りがつかずにいた私の背中を押してくださったのは、「AFFINGER4のAMP対応がすごいっ」という周囲の方の声。

そして、実際にAFFINGER4で作成したAMPページを拝見してその素晴らしさに共感。
素直に感じたことが「よいものはどんどん取り入れて発信していこう」という気持ちの方向転換でした。

そもそもAMP対応ってなに？

ものすごく簡単に表現すると、Googleモバイル検索からアクセスしたAMP対応のページは、

ものすごく表示速度が速い。

この一言です。

そして、ページ内容がシンプル。という点も大きな特徴です。

スマホでWeb検索をされる方は、最近目にすることが増えてきたと思いますが、AMP対応のページには⚡マークの「AMPラベル」がつきます。

AMP対応について、もう少し詳しく知りたい方は下記参考サイトをご一読ください。

実際に体験すればわかるように、AMPページの表示は本当に高速です。
読み込みを待つ必要がほとんどありません。
一瞬でコンテンツが表示されます。

AMP表示に慣れてしまうと、たいていの普通のモバイル向けページは遅く感じられてしまうのではないでしょうか。
ユーザー体験を高めたいなら、AMPはとてもいい手段です。

導入に際して大きな障害がないのであれば、積極的にAMP対応に取り組んでみるといいのではないかと僕は考えます。

実際にAFFINGER4でAMP化したページの表示速度を体感して、検索からなんらかのキーワードを打ち込んでご来訪くださったモバイルユーザーさんが一番に求めているものはなんだろう？と改めて考えたとき、それは「探している答え」であると。自分なりに強く感じたことが、今回のテーマ変更の決め手となりました。

AFFINGER4のAMP対応のここがスゴイ

AMP化したページは、本当にシンプルで表示できる項目にもルールがあります。
例えばですね。
プラグインを使って表示しているもの（目次やリンクカード、人気記事ランキング、ハイライト表示のソースコード他）や、アフィリエイトリンク（AMP対応済みのコードやカスタマイズ可能なものを除く）、サイドバーなども表示することができません。
便利な機能だからといって、全てのページに適したものではないのですね。

さらに、ユーザーさんの利便性が上がるメリットの半面、「直帰率が上がってしまうのでは？・・」という不安も。

だけど、AFFINGER4にはそんな不安をスッキリと打ち消してくれる機能がありました。

ページ単位でのAMP対応が可能

現在の当ブログの投稿記事のほとんどがパソコンユーザーさん向け。しかも、カスタマイズ用のソースコードをハイライト表示している部分はAMPページで表示することができないので、一部のページのみ対応しています。

例としてAMP化した記事のURLを貼っておきますね。
パソコンでもアクセスできますが、その場合はGoogle Chromeのデベロッパーツールを使ってスマホサイズで見ていただいた方がわかりやすいかもしれません。

見本ページhttps://kanamii.jp/1514/amp/

・・・そうなんですっ！（タイミングがおかしいですね）

AFFINGER4では、管理画面からの過去記事を含む全ページ一括のAMP化の他に、例えばプラグインや標準機能の装飾を重要視したいページや紹介リンクを貼りたいページはそのまま。「読み物」として情報を発信しているページはAMP化する。といったページ単位でのAMP化が簡単にできるようになっています。

その方法は、AMP化したいページの投稿画面の項目にチェックを入れて更新するだけの手軽さです。（管理画面での必須項目の事前設定は必要）

ページ単位のAMP化は、例えば、多くの過去記事の修正は大変。だけど新規記事からAMP対応してみようかな。といった選択肢や、時間のあるときに数ページずつ表示確認をしながら過去記事もAMPページに変更していく。といった使い方もできます。
さらに、今後の記事の書き方や内容を変更したい場合にも柔軟に対応できるのでおすすめです。

アドセンス広告・SNSシェアボタン・関連記事表示が標準仕様

AMPページに設置するアドセンス広告やSNSシェアボタン、Googleアナリティクスの解析用のコードなど、通常ページとは別の専用コードを使用するというルールがあったり、先に説明したようにプラグインでの関連記事表示ができなかったりと、WordPressのAMP化プラグインや自力での対応は難しいと感じていた部分も、AFFINGER4は標準仕様で全てカバーしてくれます。

アドセンス広告は、管理画面にコード内の数字を入力するだけで、記事下とショートコードを使用している広告が自動表示、関連記事に関しては、表示されるリンクにAMP化したページが含まれている場合、自動的にAMPページへアクセスされるようになっています。

内部リンクのリンクカードもオリジナル対応

WordPress標準の埋め込みカード（Embedカード）はAMPページでは表示できません。（2017年2月現在）

これですね。

今までの STINGER PLUS+ カスタマイズまとめ

AFFINGER4では、このような通常ページ・AMPページ共通の内部リンクカードでの表示が可能となっています。

表示方法は、入力した記事IDを選択後「ブログカード風」をクリックするだけ。自動的にショートコードが記事内に挿入されます。
こちらも関連記事同様、リンク先がAMP対応ページの場合はそちらにアクセスされます。

上記は、テキストエディタ上部のキャプチャですが、最後の「crayon」以外はAFFINGER4標準、リンクカードの他にも沢山の機能が準備されています。
これでもかぁ～っ！という位の親切さに感動。

表示項目が追加できるAMP用ウィジェット

WordPressダッシュボード→外観→ウィジェットで設定することができる「AMPサイドバーウィジェット」では、サイド用メニュー（通常ページ共通）をAMPページに追加することが可能です。

今後変更するかもしれませんが、現在当ブログでは通常ページにサイドバーウィジェットを利用していませんので、AMPページ用にSNSのフォローリンクを入れています。

フォローしてくださる方が増えるといいなぁ...(笑)

デザインのカスタマイズも柔軟にできる

AFFINGER4だけでなく、STINGERシリーズ全般に言えることですが、カスタマイズのしやすさも大きなメリットだと思います。
当ブログでのAMPページでは、以下のカスタマイズを行っています。

AFFINGER4の利用をご検討中の方へ

当ブログで利用しているWordPressテーマ「AFFINGER4」は、優待ページ（infotop経由）を利用すると標準価格より800円オフの割引価格で購入することができます。
ページ内でご紹介したAMP対応機能は現在はβ版となっていますが、デザイン・機能共に自信を持っておすすめできるテーマです。
利用をご検討されている方はぜひチェックしてみてください。

Kanami

複数サイトでの利用可能。↑このようなリンクボタンや吹き出し会話機能もAFFINGER標準で使えます♪

今後は、AFFINGER4でのAMP対応の手順や注意事項、そして今までのSTINGER PLUSと同じように、当ブログで行った全てのカスタマイズ方法を公開していきます。

不定期更新でお待たせしてしまうこともあるかと思いますが、お時間のあるときにでもお立ち寄りいただけると大変嬉しく思います。

大変長文になりました。
最後までお付き合いくださりありがとうございます。