WING(Affinger5)

アフィンガー5(WING)AMP速度向上効果の実測結果&表示比較

WING(アフィンガー5)AMP

人気のWordpressテンプレート、WING(アフィンガー5)。当ブログでも使用しているテーマです。

様々な便利機能がありますが、他のテンプレートと比較しても特筆すべきものの一つがAMP対応。

  • ボタンクリック一つで
  • 投稿ページ別に

AMP化することが、WINGではできちゃいます。

でも、AMPって

  • どれくらい効果があって
  • なにかデメリットはないの?

というあたりが気になりますよね。

この記事では、実際にWINGを使っている我が家が、AMP対応することでスマホなどのモバイル環境での読み込みはどれくらい速くなるのか?

また、AMPではサイト表示・表現がシンプルとなり、通常仕様ページと差が出るというデメリットもあります。それはどれくらいなの?というあたりをレポートします。

 

AMPとは?

AMPは「Accelarated Mobile Pages」の略です。日本語直訳すると「高速化されたモバイル用ページ」。

その名の通り、ページやサイトをAMP対応仕様にすると、スマホなどのモバイル環境でページを読み込んだ時に爆速で表示されるようになります。

 

検索時のAMP表示はどんな風?

AMP対応しているページは、Googleの検索結果で「雷マーク」の表示が出ます。下のスクショのような感じ。

AMP検索結果

AMP化すれば、他の通常仕様のページと明らかに区別され、一目でAMP対応してる、とわかるようになるのです。

 

AMP化のメリットは?

AMP対応すると、2つの観点からメリットがあると言えます。

 

ユーザビリティの向上

ネット検索で調べものをしてるとします。

おっ、ほしい情報が載ってそうなサイトが見つかった♪

・・あれ?でもクリックしてもなかなかページが開かない・・イライライラ・・!

という経験はないでしょうか?特にスマホでネット検索をしている時は、パソコンより通信速度が遅くなるケースが多く、ユーザビリティが損なわれてしまいます。

「AMP」は、それに対してGoogleが主導して行っている施策の一つという位置づけで、検索結果表示から目的のページに移る時のスピードがものすごく速い。

そのため、通信環境が悪かったとしても、ユーザーにとってのストレスを大幅に軽減することができます。

 

SEO観点からの効果

AMP対応すると、サイトの運営者にとってもメリットが!

上記の通り、ユーザビリティが向上して必要な情報をサクサク得ることができるようになれば

  • 離脱率の減少
  • 購読率の向上

が見込めます。

読み込みが遅いページだと、途中で「もういいや!」と閉じて他のページに移ってしまうかもしれません。ですが、AMP対応ページならその心配が少なくなるということです。

その結果として、サイトの評価が高まり、SEO的にも効果を得られる可能性が高いのです。




 

WING(アフィンガー5)は簡単にサイトをAMP化できる

このようなメリットがあるAMPですが、対応させるにはサイトのページをAMP用のコードで書き直さなくてはいけなかったり、複雑なルールがたくさんあります。

なので専門的な知識がないと、AMP化は極めて困難といえるでしょう。対応させるには大きな労力も・・。

ですが、WordpressテンプレートのWINGなら、簡単にAMP対応させることができるのです。

 

ボタンを1クリックするだけでAMP化

WINGでは記事の編集画面に「AMPに対応する」というボタンがあり、1クリックするだけでAMP化することが可能。

AMP編集画面

 

アドセンスを入れたりするのには多少の設定が他で必要ですが、それも最初にやってしまえばその後の手間はほとんどかかりません。

複雑で面倒なコード書き換え処理を、超簡単に自動でやってくれるという驚きの仕様になっています。

 

AMP化するか?はページ単位で選択可

上記の「AMP化ボタン」は1記事ごとの設置。つまり、ページ別に、AMP対応するかどうか?選択することができるのです。

これによって、AMPに適したページは対応させて、そうでない場合は通常仕様に・・という戦略を取ることも可能。

AMPを有効活用したサイトの運営を行いたい人にとっては至れり尽くせり・・という仕様になっているのがWINGです。

 

AMPの速度向上効果は?

それではAMP化することで、どれくらいモバイルページの読み込みは速くなるのか?

実際に当サイトのページで試した結果になります。

試したページは

  • 文字数:4600文字
  • 画像:JPEG写真15枚

というスペック。Javasprictを利用した装飾もボチボチに行っています。

試したページはこちら

 

通常仕様ページのスコア

通常仕様ページ

Gooogleの速度測定ツール「Page Speed Insights」にて測定した結果。

ページの速度はエラーとなっていますが、最適化判定としては「Medium(中)」の評価。スコアは79です。

通常仕様ページだともっと遅いかな?と想定していましたが、あと一歩で「Good(良)」というスコア。思っていたよりは悪くありませんでした。

このページをAMP化するとどうなるか?結果は次のようになります。

 

AMP化ページのスコア

WING AMP化ページスコア

最適化判定は「Good(良)」で、スコアは94となりました。通常仕様ページと比べると15ポイント良い評価となっています。

さすがのAMP対応ページ・・といったところでしょうか。次は、AMP化することによってデメリットはないのか?について紹介します。




 

AMPのデメリット【サイト表示・表現の制限】

魅力的なAMP化ですが、一方でデメリットもあります。

それは、AMP対応すると、サイトの表現が限定されてしまうこと。

AMPは基本的に「テキスト情報を高速で配信する」ことを主眼に置いて組まれた仕組み。

なので

  • CSSが制限されて、ページ内の凝った装飾ができなかったり
  • JavaScriptが制限されて、動かす仕掛けができなかったり

ということが発生してしまいます。それはWINGでも例外ではありません。

CSSとは

タグで囲んだ範囲の文字の色・大きさ・背景の色や配置などを指定するためのプログラミング言語。こういう赤字テキストマーカーテキストも基本的にはCSSを用いて表現されています。

JavaScriptとは

プログラミングの補助言語。主に、文字や画像,インターネットのページ等を動かす仕掛けを作るものです。例えばこんな文字や、下のようなスライドされる記事リンクはJavaScriptを利用して作られています。
ドメインSSL化

Wordpress

2020/8/22

ドメインの取得・SSL(https)化の設定方法を初心者向けに解説

自分のブログ・サイトを立ち上げたい!・・けど、自分のドメインをどうやってとればいいのか全然わからない! あと、よく聞くSSL(https)化って一体何なの?やった方がいいの?どうやってやるの? そんな貴方のために、この記事ではサイト立ち上げ初期の手順・方法を順を追って解説していきます。   マストツール!な商品紹介リンク あなたのサイトで商品を紹介するのに、こんなリンクを作成して使ってみたくありませんか? リンク 手間なくカンタンに、無料ツールで作れる方法を下記のページで解説しています! 必須! ...

ReadMore

アフィンガーサイトデザイン初心者

WING(Affinger5)

2020/7/23

アフィンガー5のサイトデザイン設定方法!初心者用の一番カンタンな手順

アフィンガー5(WING)の初心者の方向けマニュアル!今回はサイトのデザイン編です。 アフィンガー5はすごく多機能なテーマなので、こだわればいくらでも凝ったデザインにしていくことは可能。 ただサイトを見に来る人の大半は、貴方のサイトのデザインを見に来るわけではなく、作ったコンテンツの中身を見に来ています。 最初から見込み客がいるようなサイトを立ち上げる場合を除き、デザインに時間をかけるよりまずはコンテンツに時間をかけて充実させ、seo評価を上げていくのを優先するのがベター。 この記事では上記の主旨に沿って ...

ReadMore

パソコン2台キーボードマウス1組

PC作業快適グッズ

2020/7/12

パソコン2台を1組のキーボード・マウスで切り替える方法【無線・有線】

「2台の別々のパソコンを、1組のキーボード・マウスで切り替えて使いたい!」 この記事では、そんな方向けの商品を紹介します。我が家でも実際使ってますが便利ですよ! 有線で1組のキーボード・マウスを切り替えて使う方法    まず、パソコンまで有線でつなぐ方法。 これはサンワダイレクトが出しているUSB切替器が、すごく使いやすいです。 有線でつなぐ場合のメリット  メリット ①切替器本体にランプ表示がついていて、どちらのパソコンに今つながっているのか?パッと確認できる    有線でつなぐ場合 ...

ReadMore

rinkerとカッテネ比較

Wordpress

2020/7/6

【Rinkerとカッテネ比較】使いやすいのは?実は他にも良いツールが!

「Amazonや楽天、Yahooショッピング等の商品を、自分のブログやサイトで手軽にスマートに紹介したい!」 そのための、wordpressブログ用商品紹介リンク作成ツール「Rinker」と「カッテネ」。どちらも有名なツールですが、どっちがいいのか? 実は結論としては、どちらもベストではなく「」に登録して、「かんたんリンク」という無料ツールを使う我が家にとって一番の方法でした。 実際に「かんたんリンク」で作った商品紹介リンク例   以下の記事で、Rinkerとカッテネだけでなく他ツールとの比較検 ...

ReadMore

amazon 楽天 yahoo 商品リンク ブログ

Wordpress

2020/7/15

ブログにアマゾン・楽天・ヤフーの商品紹介リンクを貼る一番ラクな方法

この記事は 「Amazonや楽天、Yahooショッピングの商品リンクを、自分のブログやサイトに、手軽かつスマートに設置したい!」方向けのまとめになります。 リンク一つ作るのにも、使うツールが良くないと地味に時間がかかってしまいます・・。時間は貴重!決してムダにしてはいけません。その大事な時間は、貴方のコンテンツ作りにあてるべきなのです。 手軽かつスマートに設置するには、「」に登録して、「かんたんリンク」という無料ツールを使うのが一番の方法!   実際に「かんたんリンク」で作った商品紹介リンク例 ...

ReadMore

AMP化したページはスマホ画面で見た時の表示に差が出てきます。

WINGの通常仕様ページとAMP化したページで、スマホで見た時の表示がどのように変わるのか?詳しく紹介してみます。

 

AMPページと通常ページの表示比較

<表示比較1>ページ冒頭

WING AMP通常ページ比較

まずはページの冒頭部分。左側が通常仕様、右側がAMPページです。

パッと見でわかりますように、AMPページだと色がグレー基調になって鮮やかな表現ができなくなっています。左上のメニューは使えなくなり、カテゴリーの表示も出ていません。

ちなみにWINGのAMPページでは「完全版を表示する」というボタンを設置することができます(赤枠で囲った部分)

これをクリックするとAMPページから通常仕様のページにユーザーを遷移させることが可能。

なので、キレイな表示で見たい人には「完全版を表示する」をクリックしてもらうなど、うまく使えばユーザビリティーを向上させられます。

 

<表示比較2>プラグイン、ページ内表現

WING AMP通常仕様表示比較

赤のマーカー部はAMP化しても同じように表示されていますね。

ですが、テキストの調整が解除されていて、AMPページだと少し文字が小さくなっています。また、赤で囲った部分で、チェックマークの色がグレーに変わってます。

JavaScriptを使ったプラグインにも制限が。緑枠部分を見てもらえばわかるように、プラグインを使った目次の表示がAMPページだとできなくなっています。

 

<表示比較3>CSSボタン、ページ内表現

AMP通常仕様表示比較3

AMPページでは赤枠で囲った部分の吹き出し付ボックスの色が抜けてしまって、アイコンも小さく。

青枠で囲った「ページ上部へ戻る」ボタンはAMPページだと表示されません。

また、緑枠のボタンは

今すぐクリック

のようにキラリと光るボタン。WINGだと簡単に設置できますが、これもAMPページだとすごくシンプルな表現になってしまっています。

 

WING(アフィンガー5)のAMP化まとめ

AMP化まとめ

  1. WINGは1クリックでページをAMP化できるという優れたテンプレート
  2. AMP化すると、スマホ表示が速くなる
  3. 一方、AMP化するとサイトの表示がすごくシンプルになってしまう

まとめると、AMPには上記のようなメリット・デメリットがあります。

ちなみに我が家は最初このAMPに魅かれてWINGを購入したのですが、結果的に当サイトではAMP化はしてません(苦笑)

なぜかというと、やっぱり表示がシンプルになってしまうとWINGで可能な多彩な表現ができなくなってもったいないし、なにより通常仕様でもモバイルの速度スコアがいいからです。

先ほどは評価「Medium(中)」のページをサンプルとして出しましたが、ほぼ「Good(良)」に近いスコア。

他の画像を多く使っているページでもテストをしてみましたが、ほとんどが通常仕様で90スコア超えの「Good(良)」評価になりました。

WING通常仕様スコア

通常仕様AMPスコア

 

WING(アフィンガー5)はテンプレート自体がすごく高速表示されると評判ですが、試してみてもそれが納得できる結果になりました。

 

表示が速いWINGはオススメテンプレート

WING(アフィンガー5)はこのようにモバイル環境でもデフォルトで高速表示される仕様になっています。

それに加え、さらに速度を上げたい場合AMP対応することも簡単にできるという、なんとも贅沢な仕様。

その他の部分でも使い勝手が抜群で、オススメできるテンプレートです。

Amazonアソシエイト審査通過できない方へ!

Amazonの商品を紹介したいのに、審査がいつまでたっても通過せずウンザリ・・

そんな貴方への解決策!

カンタンに審査通過できるだけじゃなく、こんなリンクもカンタンに作れちゃいますよ~

必見!
amazonアソシエイト審査落ち 代わり
Amazonアソシエイトの審査に受からない方へ!ベストな代替策教えます

この記事は、「Amazonとかのネット通販商品を、手間なく格好良く紹介したい!」のに   Amazonアソシエイトの審査に全然通らない・・! Amazonアソシエイトの新規ルール(3件発生後 ...

続きを見る

-WING(Affinger5)
-

© 2020 Affingerの教科書 Powered by AFFINGER5