AFFINGER5(WING)導入 レビュー | CTR改善効果の高いカスタマイズがボタン一発

ブログカスタマイズ後は必ずタグマネで効果測定しています、PDCAマニアのNAEです。

AFFINGER4の後継テーマ「WING」が発表されたので、さっそくAFFINGER5版を導入してみました。

すると、驚きました。

これまで積み重ねてきたテストの結果、「こうすると効果が高い」と立証されたカスタマイズが、ほとんど一発でできるようになっていたんです。

そこで本記事では、AFFINGER5で追加された機能やデザインについて、特に注目すべきポイントをピックアップしてご紹介します。

AFFINGER5を買うか悩まれている方の参考になればと思います。

参考 AFFINGER5（WING）

※本記事では便宜上、WING（AFFINGER5版）を「AFFINGER5」と呼びます

おさらい：AFFINGER5とは

AFFINGER5は、有名な有料WordPressテーマAFFINGER4の後継にあたるテーマです。

AFFINGER4時代にくりかえされた機能アップデートはそのままに、さらにパワーアップして帰ってきた新装開店版、という位置づけ。

作者はアフィリエイターのENJIさん。AFFINGER5には、ENJIさん本人が「こんな機能があったら『稼ぐが捗る』」と感じた機能をふんだんに搭載されています。

詳しい機能ラインナップやAFFINGER4との機能の差分は、AFFINGER5の公式サイトをご覧ください。

公式 AFFINGER5（WING）

AFFINGER5で注目すべき強化ポイント

ブログの表示速度アップ

Pagespeed Insightsのスコアが、平均で10ポイント改善しました。

• モバイル：60点台 → 70点台
• PC：70点台 → 80点台

※AdSenseやPtengineのスクリプトが入った、画像多めの記事ページ複数で計測した平均

スコアだけでなく、体感速度もかなり改善されています。具体的には、AFFINGER4時代には5秒かかっていたページが、AFFINGER5にしただけでだいたい3秒くらいに縮まりました。

ページの表示が遅いほど離脱率が高まることは、一般的によく言われていますし、実際に運営サイトのアクセス解析結果でも明らかに相関があります。

表示速度の改善により、離脱による機会損失を減らす効果が期待できます。

各種パーツのプリセット無料配布

AFFINGER5には、記事制作に使えるさまざまなショートコードがプリインされています。

しかしショートコード自体が高機能すぎるあまり、どう使えばいいかイメージがわきづらかったんです。

たとえば「マイボックス」には色や装飾が指定できる機能があるんですが、属性値を自分で指定する＝CSSを自分で書くのと変わらず、「どうすりゃいいのコレ」状態でした。

［st-mybox title=”ポイント” fontawesome=”fa-check-circle” color=”#757575″ bordercolor=”#BDBDBD” bgcolor=”#ffffff” borderwidth=”2″ borderradius=”5″ titleweight=”bold”］

こういうかんじ

［/st-mybox］

しかし、作者のENJIさんはそれをわかっていたのか、購入者限定のページで、すぐ使えるプリセット版ショートコードを無料配布してくださっています。（URLは購入者限定）

「Add Quick Tag」プラグインに読み込ませれば、AFFINGER5の紹介ページに載っている装飾パーツのほとんどをワンタッチで使えるようになります。

これらパーツによる記事装飾により、記事の途中で読者を飽きさせない演出が可能になります。結果、完読率や滞在時間など間接的なKPI向上が見込めます。

記事一覧系のショートコード

AFFINGER5には「記事一覧パーツ」を表示するショートコードが追加されています。

• 特定カテゴリの新着記事を表示する
• おすすめ記事をランキング形式で表示する

これら、ブログのトップページを作るのに非常に重宝するんです。

ぼくはこれまで、プラグインとウィジェットの組み合わせでトップページを作っていました。

参考 ブログのトップページを作ったので、作り方から実測効果まで全部紹介

しかし、プラグインを使う＝管理対象が増える＝面倒くさいし、管理画面の「設定」メニューがプラグイン名前で埋め尽くされるのも地味に嫌。

そのため、テーマに同梱されたショートコードでトップページが作れるのはすごく嬉しいんです。

加えて「PCのみ左右50%ずつのレスポンシブボックス」など既存機能と組み合わせることで、非常に多彩なトップページデザインが可能となりました。

ブログ回遊率アップの効果を見込めます。

モバイル向けヘッダーの柔軟性アップ

モバイル向けヘッダーまわりの機能改善も嬉しいポイントです。

これまでAFFINGER4では、モバイル向けのコンパクトなヘッダーは「左寄せのサイトロゴ＋右寄せのハンバーガーメニュー」で固定でした。

しかしAFFINGER5では、

• サイトロゴが中央寄せできる
• ハンバーガーメニューの位置を左右に切り替えられる
• ハンバーガーメニューのアイコンデザインが3種類から選べる

など、モバイル向けヘッダーをかなり柔軟にデザインできるようになりました。

いまやWebサイトへのアクセスの8割がスマホからなので、モバイル向けヘッダーはこだわりたいところ。

実際、これまであまりクリックされていなかったハンバーガーメニューのクリック率が、若干ですが改善しています。

スマホミドルメニューが3列にできる

モバイル表示の際にサイトタイトルの下に表示される「スマホミドルメニュー」が3列表示にできるのもGoodです。

なぜなら、運営サイトにおけるクリック計測の結果、スマホミドルメニューは3列1行表示がもっともクリック率が高かったから。

ブログヘッダーのスマホ用ミドルメニューをいじって3個1列にしたらめちゃんこクリック率が上がった。2個2列のときはほとんど無視されてたのに。にんげんってふしぎ pic.twitter.com/VB2WQ9HVzw

— NAE@ガジェットレビュー『2ミニッツ』 (@naenotenet) February 20, 2018

せっかく表示させているんですから、クリックされないと意味がないですもんね。

これまではCSSでなんとかしていましたが、設定画面から一発で3列表示にできるようになったのは「ムフフ」っとなりました。

AFFINGER5は、ハンター✕ハンターの「ビスケ」である

このように効果の高いカスタマイズがすぐに使えるAFFINGER5。

販売ページは「かわいくて楽しそうなブログがかんたんに作れる」雰囲気を出していますが、その中身は収益向上系の機能がゴリゴリ詰まったガチテーマです。

それもそのはず。AFFINGER5には「稼ぐに特化」が決め文句のAFFINGER4に備えられた「武器＝強い機能」がすべて継承されているんです。

例えるなら、ハンター✕ハンターの「ビスケ」みたいなもんです。

• 見た目（デザイン）はかわいく楽しくできる
• 中身（機能）は骨太・屈強・ゴリマッチョ

見た目と中身、両方にこだわることで収益を追いたいなら、AFFINGER5は良い器になってくれるでしょう。

AFFINGER5は買うべき？

AFFINGER4時代からこのテーマを使ってきたぼくに言わせると、「買っておけ」です。

なぜなら、実は当ブログ、使うテーマをAFFINGER5の前身であるAFFINGER4に変えてから、PVあたりの収益が1.5倍くらいに増えたからです。

参考 コンバージョン率が大幅改善。当ブログが「細マッチョ」になったきっかけ

もちろん、特定トピックに関する記事を集中的に投下したのも手伝ってのことと思います。

しかし、「器」としてのAFFINGER5がその動きを邪魔しなかったという点もあったのかなと。

PVだけはあるけど収益は……という人こそ、AFFINGER5を買うべきです。

公式 AFFINGER5（WING）

まとめ：AFFINGER5は自分もアップデートしてくれた

以上、AFFINGER4からAFFINGER5にテーマを変えてみた感想でした。

実は、変えた当初は「微妙だわこのテーマ」と思っていました。自分では手にあまるほど高機能だったこともあり、使いこなせる自信がなかったからです。

例えるならば

黒電話しか使えないのに、いきなりスマホを持たされたおじいちゃん

— NAE@ガジェットレビュー『2ミニッツ』 (@naenotenet) March 26, 2018

しかし、しばらく使って手になじんだ結果、「こんなに使いやすいテーマはない」と思えてきました。

WINGをいろいろいじくり倒して慣れてきたせいか、かんじていた違和感がほとんどなくなってきた

— NAE@ガジェットレビュー『2ミニッツ』 (@naenotenet) April 1, 2018

つまり、ぼくの頭がWINGによってアップデートされたんですね。

「黒電話しか使えないおじいちゃん」でも、渡されたスマホを必死に触った結果、使いこなせるようになりました、と。

AFFINGER4時代には使いづらかった管理画面が、使いやすいようにリデザインされていたのも手伝って、かなり早くキャッチアップできたと思います。

 

とはいえAFFINGER5は有料ですし、過去記事「AFFINGER5を買う前に答えるべき3つの問い」にも書いたとおり、万人向けではありません。

ただ、

• 高機能な有料テーマが自分の可能性を広げる側面もある
• AFFINGER5はそれを試すのにはもってこいなテーマである

……という2点は、頭の隅に置いておいてもらえると嬉しいかな、と思います。

公式 AFFINGER5（WING）