iPhone X が発売されましたね、ガジェレポ！@gadgerepoです。こんにちわ。
突然ですが、当ブログは投稿記事の『AMP配信』に対応いたしました。
AMPとは？
AMPとは「Accelerated Mobile Pages」の略。
直訳すると “加速されたモバイルページ”、文字通りモバイルでのウェブサイト閲覧を高速化するためのプロジェクト、またはそのためのフレームワーク（AMP HTML）です。
2015年10月、GoogleとTwitter共同開発のオープンソースプロジェクトとして、この「AMPプロジェクト」は立ち上がりました。
スマホのブラウザでキーワード検索すると、検索結果の中に稀に「イナズマ」マークが付いたサイトが表示されるようになっています。
これが「AMP対応」したサイトで、モバイル端末から対応するサービス内でアクセスすると、表示が高速化され一瞬で読み込まれます。
「AMP対応」サイトは、AMPに必要最小限なタグや機能を記述したHTMLコードで構築、さらにGoogleやTwitter、はてなブックマークなどの対応するサービス側がキャッシュを保存することでサイトへのアクセスを減らし、読み込みの高速化を実現しているのです。
現状、サイトアクセスの大半を占める割合となっているモバイルユーザー。
そのユーザーエクスペリエンス向上を目的とする技術として、注目を集めているのが「AMP」なのです。
AMP対応はプロにおまかせ
2016年6月、「はてなブログPro」ユーザー向けにベータ版としてAMP配信オプションがリリースされました。
さらに当初、はてなブログ版AMPではCSSが使用できませんでしたが、AMP用のCSSが使えるようになりレイアウトもある程度いじれるようになりました。
筆者が導入を考え始めたのも、デメリット面での敷居が下がったことによります。
「はてなブログPro」ユーザーはブログの管理ページから「設定」→「詳細設定」→「AMP」にチェックを入れることでAMP対応が可能。
しかし、単純にチェックを入れればそれで投稿記事のAMP配信が可能になる、というわけではありません。
AMPを導入するには、その仕様に従ってページを構築する必要があります。
ひと度記述を間違えようものなら、エラーによってAMP対応とは見なされず、Googleにインデックスもキャッシュされません。
なんとか自力でAMP対応に挑戦していた筆者ですが、知識も少なく、際限なく吐き出されるエラーにお手上げ状態……
そんな時、見かけたのが MINIMAL GREEN（id:minimalgreen）さんのAMP用CSSに関するブログ記事でした。
CSS記述の参考とするためたどり着いた記事でしたが、その中に信じられない一文が！
有料カスタマイズサービスでAMP対応も受けています。自分で上手く出来ない場合やわからないことがある場合は是非有料サービスも使ってみてください。お問い合わせいただければ、お見積させていただきます。
はてなブログのAMP用CSSを書くときの注意点 - Minimal Green
さっそくお問い合わせフォームからお伺いしてみたところ、デザインによって料金は変わるものの AMP対応は可能、とのお返事が！
ただその際、AMP対応に関して、
- AMPはAMP用のAdSense設定が必要、収益には不向き
- AMPは仕様上デザインの制約がある
- AMP対応はトップページはなく記事ページのみ
- AMP対応が本当に必要か？
といった注意点・留意点も教えていただきました。
正直なところ、AdSenseによる増益を期待していたので目論見が外れた感はありましたが、そこはもともと収益化の出来ていない弱小ブログｗ
それ以上にAMP対応によるアクセスの変化などを知りたい（ブログのネタにしたい）という思いがありましたので、MINIMAL GREENさんにお願いすることにいたしました。
そこからはまさに電光石火。細かい修正も含めながらあれよあれよという間にカスタマイズしていただいた当ブログ。
メールでの密な打ち合わせ、アフターフォローも万全で、終始安心しておまかせできました。
MINIMAL GREENさん、ありがとうございます！！
AMPのメリット・デメリット
さて、サイトを「AMP対応」にすることのメリット・デメリットについて解説します。
メリット
- モバイル端末からのサイト表示高速化・レスポンス向上
- 離脱率・滞在時間・回遊率の改善
- 検索画面上での差別化
①が先ほども触れたとおり、「AMP対応」において一番効果が顕著に現れるメリット。
PageSpeed Insightsで計測してみたところ、AMP未対応ページの場合はモバイルの結果が「44」だったのに対し、
同記事のAMP対応ページ、モバイルの結果が「82」と劇的にアップ！
やはりAMP対応による高速化の恩恵は大きいですね。
さらに、①に付随して②、サイトの離脱率低下、滞在時間の延長、回遊率上昇が見込めます。
そして③、検索画面上での「イナズマ」マーク、リッチカード表示による他サイトとの差別化は、AMPの知識があるユーザーからより多くクリックされることが期待できます。
デメリット
- 技術的な制約が多く、知識が必要
- はてなブログでは、サイドバーモジュール・カスタマイズしたシェアボタンなどは表示されない
- はてなブログでは、AdSenseの広告ユニットを記事に直接記載しなければ表示されない
①、AMP用CSSには制約が多く、一部のHTMLタグやCSSは使えない、JavaScriptが反映されないなどといった点から一定の知識が必要になります。
また②にあるように、はてなブログのデザインテーマは反映されず、せっかくカスタマイズしたサイドバーモジュールや、記事上下・ヘッタ・フッタは表示されません。
一番大きいのは、これまでカスタムCSSなどに記載していたAdSenseの広告ユニットは、記事中にAMPに対応する表記で直接記載しなくてはならない点でしょうか。
詳しくはコチラ、ケー (id:photoblg)さんの記事をご参照ください。
そして現在のところ、AMP対応しているか・していないか、という点で直接検索順位が左右されることはない、というところもご留意ください。
まとめ
ともあれ、『AMP配信』に対応した当ブログ。
対応後のアクセスの変化など、これからレポートしてみたいと思います。
