注意!AMP対応ページとレスポンシブ対応は全く別物!

文を書く
渋谷 浩一郎

教育現場が自分の思いと異なると感じ、退職。肩書きをなくして自分の価値を見失い、追究するためにBlogを始める。最近、シシトウガラシに超辛いものがあるからこそ、トウガラシ社会は豊かだと感じている。人も辛い人、マイルドな人…多様でありたい!というのが理念。現在は、メーカー・会社の情報発信やブランド化のプロデュースを手がけている。

渋谷 浩一郎をフォローする

Blogのアクセスを増やすために、重要なポイントはたくさんありますが、

  • 見やすいページ作りをすること
  • ページの読み込み速度を速くすること

当然、これらもとても重要なポイントなります。

ここでは、そんな話をする上で、これを十分に知っておいて欲しいのです。

レスポンシブ対応とAMP対応は全く意味が異なる!

そして、Googleが熱くAMPを進めているということは、何を重視しているのか?

その辺りについても見て行きましょう!

 

スポンサーリンク

レスポンシブの話!あなたのBlogは様々なもので見られている!

iPhoneXsなどの発売も決まりました(2018年11月現在)。

もはや、あなたのBlogを見ることができる端末の種類はどれだけあるか分からない程の状況でしょう。

ざっくりと見てもPC、タブレット、スマートフォンがあり、それらの画面の幅はまちまちです。

PCで見たらちゃんと見ることができるけれど、スマートフォンで見るとやたら文字が小さくて拡大しないと文字が読みづらい…。

そんなページを読者はなかなか読んでくれませんが、そんなページは、まだまだたくさん存在するのが現状です。

 

どんなもので見ても見やすく表示しているのがレスポンシブ対応だ!

そこで、登場したのがレスポンシブ機能というものです。

どんな画面幅の端末で見ても見やすいように自動に改行をしてくれたり、画像を縮小してくれるような機能をレスポンシブ対応と言います。

実際にどういうことか画面で解説します。

 

これが画面幅の広いPCで見た時の画面です。

スマートフォンで見た時の画面が下の画像です。

画面幅に応じて、トップページの記事の並び方が勝手に変わってくれています。

以前なら、PC用のページ・スマホ用のページと作成する必要があったのですが、今は端末に合わせて、表示をいい感じにしてくれるために、スマホ用のページを作る必要がありません。

本当にありがたいことです。

では、AMP対応のページとはどういう意味なのでしょうか?

AMPの話!現代人は忙し過ぎる!今すぐに答えが欲しいんだ!

先日、歩いていると突然、おじさんに質問されました。

おじさん
おじさん

兄ちゃん、ちょっとすまんが、経済産業省の大臣の名前教えてくれるか?

今の大臣とちゃうで。ちょっと前のもともと何かの仕事をしていた人や。

思い出せそうで思い出せないから気持ちが悪いんや。

スマホでサッと調べて助けてやー。

しぶやん
しぶやん

何かの仕事をしていた人って全員そうじゃないっすか。

歴代の大臣の名前言うたら思い出せますか?

おじさん
おじさん

多分、思い出せるわ。

お願いだから助けてや。

早よ調べてやー。ほんま気持ち悪いねんなぁ…。

これは、実話で、僕は道端で歴代の大臣の名前を読み上げることになったのです。

そんな時には、検索した結果、見たいページがサッと読み込まれると嬉しいものですが、ページが重たくで読み込めないとなると、イライラすることになります。

ユーザーのことをとても大切にするGoogleにすれば、ページの読み込み速度を何としてでもあげたいわけです。

一刻も早くページが読み込まれるようにしたものがAMP対応だ!

そんな問題(?)を解決するために登場したのがAMPと言う技術です。

主にスマホとかタブレットなどと言ったモバイル端末でウェブページをサッと読み込めるようにしたもので、AMP html(一般的によく使われるものと違う形のプログラム)という形式で記述されています。

 

 

AMP対応のページには上記のような雷マークが検索結果にも表示されています。

クリックして見ると、無茶苦茶読み込み速度が早いことが実感できるはずです。

 

なぜ、AMP対応ページは、読み込みが早いんだ?

AMP対応のページにすると、読み込み速度が早い理由は、いくつかありますが、代表的な理由2つを解説します。

理由1 AMP対応ページのデーターは、GoogleやTwitterにキャッシュされる!

通常、Googleで検索を行い、検索結果をクリックしたら、そのページの情報が保存されているサーバー(エックスサーバーとかロリポップとか…)に接続され、そこから必要な情報があなたの手元に流れる仕組みになっています。

これまでの一般的なページはこんな感じです。

ところが、AMP対応のページのデーターはGoogleに保存されていますから、他社のサーバーに接続する必要がありません。

AMP対応のページはこんなイメージで読み込まれます。

お姉さん
お姉さん

じゃあ、AMP対応ページがある人は、1つの記事に2つのページがあるって感じになるの?

しぶやん
しぶやん

そういうこと。

アドレスも二つできるということになるわけ。

ちょっと、ややこしいかもしれませんが、AMPにすると、いろんなサーバに接続しなくてもページが読み込めるから、めっちゃ早い!ってことです。

イオンモールで洋服を買って、夕飯の食材を買うと短時間で済むけれど、どこかの洋服店で服を買ってからスーパーに移動して…となると時間がかかる。

そんなイメージです。

 

理由2 使える機能が一部削減される!

もっとも分かりやすい例が、WordPressでもよく見かける検索窓の有無です。

通常のページだと、Blog内を検索する窓が見えていても、AMP対応のページになると検索窓が消えるわけです。

つまり、必要最低限のデーターしか読み込まないようになっているので、読み込み速度がグンっと上がるわけです。

これはほんの一例ですが、読み込み速度を上げる工夫がされているわけです。

 

しかし、AMP対応にはちょっとした問題点がある!

こうして見ると、AMP対応をさせた方がメリットがたくさんあるように思いますが、WordPressでブログを作成している場合、テーマによってはレイアウトやデザインが崩れてしまう場合も見られます。

ここで使っているテーマCocoonでは、大きな問題が見られませんので、AMP対応もさせながら快適に利用しております。

ただ、先にも触れたように、AMP対応をさせるとアドレスが1つの記事に対して2つできるという事態が発生しますから、アクセス解析をする場合は、どちらのページが見られてもアクセスが計測できるようにする必要があります。

AMP対応をさせている方は、お忘れないようにしてください。

【Cocoon設定】AMP対応のアナリティスクの設定の仕方!
WordPressのテーマは山ほどありますが、僕はもう完全にCocoonファンであります。 ところが、別のBlogでアクセスが順調に伸びてきたなぁ…と喜んでいた矢先にアクセスが順調に落ちていきました。 ありゃ〜〜。記事は真面目に【続きを読む】

 

これで、あなたもレスポンシブとAMPの違いは、なんとなく感じられたことだと思います。

では、こうしたことをどう活かすのか?

ページ読み込み速度をあげることで、検索順位は上がる!

AMPページを作成すると、稲妻マークがつけられ、検索結果にもVIPなコーナーがもうけられることがわかります。

つまり、Googleが暑くAMP対応をしているということは、ページ読み込み速度は重要だ!と言っているわけです。

もちろん、AMP対応のページを準備するのも一つの作戦ではありますが、一般のページにしてもページ読み込み速度を意識することはとても重要です。

あなたのページの読み込み速度は、ここで適切かどうかチェックすることができます。

ここでページ読み込み速度を評価してくれます。

Google PageSpeed Insight

 

90点以上の取得は、ハードルは結構高いと思います。

このBlogももう少し、読み込み速度の改善をしようと思っています。

 

最低限、画像のファイルサイズは意識しておきたい!

データー容量が大きくなる最大の原因は、画像です。

だからと言って、画像を使わないページは面白みもなければ、インパクトも薄くなってしまいます。

ですから、画像ファイルサイズをギュッと圧縮しておくことはとても重要です。

僕の場合は、画像ファイルサイズを80kb以下に圧縮することを目標にしています。

画像を挿入するときは、ぜひ、ファイルサイズも意識してみてください。

 

サーバーを変更するだけでも読み込み速度はグンっと変わる!

世の中にはたくさんのサーバー会社があります。

先日も、ある会社さんのサーバーの移動を行ったわけですが、それだけで読み込み速度はグンっと上がりました。

作業事態も快適になる上に、SEO的にも良かったらしく、検索からの流入が少しずつ増えてきました。

Xserverはまじで早い!と実感した瞬間でもあります。

月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』

ただし、通信電波が第5世代に突入することも頭に残しておきたい。

2020年に向けて、通信電波は5Gへと移行する動きがあります。

様々な会社が運用のテストも行っており、強烈な通信速度が実現すると言われています。

そうなると、これまで「重たいなぁ」と言っていたページも瞬時に読み込めるようになるわけです。

と、いうことはAMPページが必要ない!という意見もあるわけです。

とは言え、時代の流れが早い中で2年間ほど待っておくというのもロスが大きいような気がします。

2020年にはAMPページが不要になるのか?

またまた、賢いGoogleやツイッター社が取り組んでいることですから、何か考えていることがあるのか?

もし、あなたが情報を発信するのであれば、こうした所にも注目しておくことは大切だと思うのです。

 

まとめ

  • レスポンシブ対応とは、どの端末で見ても見やすくなるというもの。
  • AMP対応とは、ページ読み込み速度をグンっと上げるための仕様。
  • 第5世代の通信電波の動向には注意が必要。

技術的な話をいろいろしましたが、気持ちが一番大事だなぁと思います。

例えば、画像のファイルサイズを落とすために、その都度圧縮するなんて作業は一手間かかります。

その時に、クソ面倒くせーな!!って思いながら作られたブログ記事と、ここで自分が一手間かけるだけで、大勢の人の0.5秒が短縮できるんだ!!って思いながら作られたブログ記事とは全く雰囲気が異なると思うんです。

この気持ちの持ち方が僕は一番のSEO対策じゃないかなぁって思うんです。

渋谷 浩一郎

教育現場が自分の思いと異なると感じ、退職。肩書きをなくして自分の価値を見失い、追究するためにBlogを始める。最近、シシトウガラシに超辛いものがあるからこそ、トウガラシ社会は豊かだと感じている。人も辛い人、マイルドな人…多様でありたい!というのが理念。現在は、メーカー・会社の情報発信やブランド化のプロデュースを手がけている。

渋谷 浩一郎をフォローする
文を書く
スポンサーリンク
シェアしてくれたら喜びます!
ことば屋