[say name="" img="https://bryog.com/wp-content/uploads/2020/09/vodman.jpg" ]AMP や PWA を使うとサイトの高速化ができるみたいなんだけど、これらの違いってなんだろう...[/say]
と気になっている人もいるでしょう。
そこで、この記事では下記の内容を解説します。
この記事で分かること
[box class="box3"]
- AMP と PWA の違い
- 導入する方法と注意点
- 導入に便利な WP プラグインとテーマ
[/box]
Core Web Vitals が Google 検索のランキングに影響することで、スマホ表示を早くする AMP と PWA に興味を持った人は多いでしょう。
両方ともスマホユーザーのユーザビリティを向上するものですが、システムとしては全く異なります。
それでは、AMP と PWA について解説します。
「ＡＭＰ」と「ＰＷＡ」の違い
「AMP」と「PWA」は、どちらもスマホユーザーが快適に記事を読んだりできるシステム。
なので、SEO の面でも効果があることから導入するサイトがここ数年で増えています。
とはいえ、絶対にした方が良いというわけではないので、導入していないサイトはまだまだたくさんあります。
表示速度を速くする「ＡＭＰ」
AMP は Accelerated Mobile Pages の略称で、スマホでサイトの表示を高速化させる仕組みのこと。
表示が早くなることでユーザビリティが向上して、サイトを閲覧する人のストレスを軽減できます。
そのため、AMP の導入を Google は推奨しています。
ただ、Core Web Vitals の指標としては、AMP 化することを必須としないと Google は発言しているので、絶対に導入しなければならないわけでもありません。
アプリ化させる「ＰＷＡ」
PWA は Progressive Web Apps の略称で、WEB サイトをアプリ化させるための仕組みのことを言います。
導入すると、スマホ画面にアプリアイコンを追加させることができます。
この PWA のスゴイところは、普通はサイトを見る時にブラウザを立ち上げますよね。
しかし、アプリ化するので単独で立ち上がることになります。
しかも、データさえ読み込めばオフラインでもサイトが閲覧できるようになるので、サイト表示のサクサク感がハンパないです。
[say]この PWA もユーザビリティを向上させることができるということで、AMP と同様に Google が推奨していますよ。[/say]
「ＡＭＰ」や「ＰＷＡ」を導入する方法
この記事では「AMP と PWA を違いを理解する」ということを目的としているので、詳しい導入方法は紹介しません。
ただ、どういう形で導入することできるのかを紹介しておきます。
「ＡＭＰ」を導入するには？
AMP を導入するには、以下の３通りあります。
AMP を導入する方法
[box class="box3"]
- プログラムする
- プラグインを使う
- 対応済のテーマを使う
[/box]
最もハードルが高いのはプログラムすることですが、ちゃんと解説してくれているサイトがいくつかあるので、普段から php などを触っている人なら挑戦してみても良いと思います。
いやいやプログラミングなんて... という人は、プラグインを使ってみるのも良いと思います。
AMP 化できる WP プラグイン
[box class="box3"]
[/box]
そんなことより、もっと手軽に AMP 化したいという人は、最初から AMP 対応されているテーマを使うという手もあります。
設定で AMP にチェックを入れれば良いだけなので、無駄なプラグインを入れる必要もないです。
AMP 対応の WP テーマ
[box class="box3"]
[/box]
「ＰＷＡ」を導入するには？
PWA を導入するには、以下の２通りあります。
PWA を導入する方法
[box class="box3"]
- プログラムする
- プラグインを使う
[/box]
プログラミングに関しては、AMP より導入が簡単ではあります。
こちらも丁寧に解説してくれているサイトがいくつかあるので、php などにアレルギー反応が出ない人は挑戦してみると良いと思います。
でもプログラミンが苦手な人は、プラグインを使ってみると良いでしょう。
ただ、それぞれのプラグインにはクセがあるので、自分の使いやすいものを検討してから導入することをオススメします。
PWA 化できる WP プラグイン
[box class="box3"]
[/box]
AMP と同様に、最初から PWA 化できる WordPress テーマもあります。
もしサイトを構想する段階から PWA 化を検討している人は、これらのテーマを選んでもいいでしょう。
PWA 対応の WP テーマ
[box class="box3"]
[/box]
「ＡＭＰ」と「ＰＷＡ」の導入で気をつけること
AMP と PWA を導入するのは、プラグインなどで簡単にできます。
ただ、それぞれには導入時に気をつけるポイントがいくつかあります。
プラグインを有効にしただけでは、逆に何も表示されないような事態になるので、しっかりと確認をしておきましょう。
「ＡＭＰ」の導入で気をつけること
プラグインで AMP 化させる人は多いと思いますが、インストールするだけなので導入自体は簡単です。
ただ、「画像」「広告」「デザイン」の 3 つには手を加える必要が場合によってあります。
その理由は、AMP 用の全く異なるページを作成している状態なので、サイトに設定されている JS や CSS が全て無効になっているからです。
なので、
[box class="box3"]
- AMP で表示される画像タグに変更する
- AMP 対応の広告タグに変更する
- CSS を別途設定する
[/box]
ことが必要となってきます。
多くの人が利用している「アドセンス」に関しても同じで、単純に AMP 化するとアドセンス広告も表示されなくなります。
そのため、AMP 化されたページに表示されるように再設定が必要となってきます。
また、AMP は JS が利用できない仕組みとなっているので、利用している他のプラグインが機能しなくなることもあります。
こればかりは使ってみないと分からない部分もあるので、導入後に機能しなくなったら、別のプラグインを検討しましょう。
「ＰＷＡ」の導入で気をつけること
PWA 導入では、必須なことが 1 つだけあります。
それは、サイトを SSL 化していること。
最近は当たり前となった SSL 化なので、逆に非 SSL 化しているサイトを見る方が珍しくなりましたよね。
でも、まだ SSL 化していないサイトの場合には PWA を導入できないので注意してください。
そして、アプリとして起動させることになるので、通常の WEB サイトを閲覧するような形とは異なります。
iPhone では戻るボタンが表示されない場合もプラグインによってあるので、ある程度の設定を追加する必要もあります。
またアプリとして機能させるので、「アイコン」も用意する必要があります。
デザインできるツールなどを使って、あらかじめ用意しておきましょう。
「ＡＭＰ」と「ＰＷＡ」に向いているサイト
AMP と PWA、どちらもスマホでの表示を早くするとうことで、SEO 的にもユーザビリティ的にも効果があると言えるでしょう。
それぞれどんなタイプに向いているかというと、
[box class="box3"]
- AMP：ブログや記事の投稿が多いサイプのサイト
- PWA：ニュースや告知などを頻繁に更新するサイト
[/box]
です。
AMP は、閲覧数を伸ばしたいような「ブログ」には向いていると言えるでしょう。
PWA は、「ニュースサイト」や「ファンがいるようなサイト」が向いていますね。
アーティストなどの「告知」をするようなサイトなら、PWA を導入しておくと良いと思います。
今現在の現状として
一時期は AMP 化するサイトが増えましたが、導入が少し面倒なことから最近では逆に減ってきた感じを受けます。
企業系では導入しているものの、個人で AMP 化しているサイトはそこまで多くはないですね。
ただ、Core Web Vitals が Google 検索のランキングに影響することで、手っ取り早く改善できる AMP を導入する人は増えるでしょう。
もし PageSpeed Insights の結果が悪い場合は、AMP の導入を検討してみましょう。
そして、「PWA」は、個人レベルで導入している人はほとんどいないですね。
よっぽど毎日読んでくれるようなファンが付いているブロガーさんレベルではないと、あまり意味がない仕組みではありますから。
ただ、ニュースレターの購読を促したいという人には、通知機能を追加した上で「PWA」を導入するのも効果があると思います。
メールでは埋もれてしまうことも、アプリの通知ならついつい見てしまいますからね。
[say]そういえば、そもそも「PWA」に対応したらどうなるのか気になった人がいたら、「NIKKEI」さんのサイトをスマホで閲覧していると分かります。サイトを見ると、すぐに画面下に「ホーム画面に追加」というバナーのようなものが出てきますから。[/say]
さいごに：ＡＭＰもＰＷＡもスマホの閲覧を快適に
以上で、AMP と PWA の違いを解説しました。
AMP と PWA は、導入することでデメリットになることはないです。
もちろん、AMP では広告などが非表示ならないようにタグの切り替えを行なった上での話ですけどね。
PWA はアプリとして認識してくれるので、実はアプリストアに登録することも可能なんです。
そのため、アプリを作るプログラミング知識がなくても、サイト作成して PWA を導入すればアプリとして発表することもできちゃうんですよ。
もし利用してみようと思ったら、注意点だけ気にしながら導入してみてくださいね。
