Web Direction Magazine

新卒webディレクターのユウジが立ち上げたブログ。webやIT関係の記事を主に書いています。自分の成長の記録である「定点観測」では日々の気づきを記しています。

【スポンサーリンク】

【動画あり】AMPとは?はてなブログで導入してみた

 

毎月社内向けにweb業界のトレンドと事例を紹介する記事を書いているのですが、そこで今回はAMPというものを扱いました。

 

 

AMPが何かというと、Accelerated Mobile Pagesの略で、簡単に言うとすっごく速く読み込まれるモバイルページということです。

 

 

Googleさんも公言している通り、これからはモバイルファーストの時代です。デスクトップ画面で使いやすいのよりも、モバイルで使いやすい方が重要視されています。

 

 

 

AdWordsのヘルプページでもこのような記述がありました。

ランディング ページの読み込み速度は、コンバージョンを獲得できるか、顧客を失うかを決める重要な要素です。モバイルサイトのほとんどの訪問者は、ページの読み込みに 3 秒以上かかると離脱してしまいます。それでも、ほとんどのモバイルサイトは読み込みに平均 19 秒もかかっているのが現状です。

 

support.google.com

 

ほとんどのユーザーが3秒で離脱してしまうのにも関わらず、ほとんどのモバイルサイトは読み込みに平均19秒もかかってしまっているとのこと。

 

 

 

需要と供給が見事にミスマッチを起こしていますね。

だからこそ、読み込み速度が速くなることでユーザビリティも向上し、結果としてSEOも上位に表示できる可能性があります。 

 

 

 

そのための1つの手段がAMPなのです。では実際に見ていただきましょう。

 

 

 

上位2つが僕のサイトです。

上がAMP仕様のページで、下が普通のページです。

f:id:webdirection:20171002214007p:plain

 

どのような挙動をするでしょうか。

 

まずは普通のページから。

 

 

普通に遅めですね。急ぎで探し物してる時とかなら、間違いなく離脱するスピードです。

 

 

では次にAMP仕様のページを見てみましょう。 

 

早いですね。

ただ、一方でものすごく簡素なサイトになりました。

 

デザイン的な装飾はほとんどなくなり、広告ウィジェットも無くなっています。

余計な部分を削ぎ落とすことで読み込み速度をあげているのでそうなりますよね笑

 

ただ、これでモバイルユーザーの獲得が増えるのであれば御の字ではないでしょうか。

 

 

ちなみにはてなブログでは以下で設定することができます。

f:id:webdirection:20171002221705p:plain

 

 

興味のある方はやってみてはいかがでしょうか。

【スポンサーリンク】