先日、はてなブログ開発ブログにて「AMP用CSS」が設定出来るようになったという朗報が入ってきました。
今まではてなブログのAMPページでは、デザインが適用出来ず薄っぺらいページしか出来なくて、対応を見合わせていた人も多いのではないでしょうか？
僕もその一人ですが、今回のAMP用CSSの対応によってAMPを再検討する人も増えると思います。
AMPについては先日Yahoo!も導入するとのニュースもあり注目が集まっています。
僕のブログでもそのニュースを受けて再導入してみましたが、10日程様子を見てやはりあの見た目にどうしても納得出来ずに、2回目となるAMP対応もヤメていましたｗ
そんな時にこの朗報！
これはもう一度検討すべきなのかと、またまた悩み始めましたｗ
そこではてなブログのAMP対応を導入する上で、AMP用CSSを使うとデザインがどのようになるのか検証してみました。
※このブログではありません。
スポンサーリンク
AMP用CSS各種デザイン
全て検証することは出来ませんが、基本となる「見出しタグ＜ｈ1＞」とよく使われる「カエレバ」リンクを検証してみました。
検証方法は通常（AMP非対応）ページに適応しているCSS（デザインCSS部分）をAMP用CSSにそのまま貼り付けています。
またAMPページでのCSSの使用については、容量が50KBまで等いくつかの制限があるのでご注意ください。
記事＜h1～h5＞見出し部分
一番よく使われているであろう記事の見出し部分。
見出しタグは＜h1＞～＜h6＞までありますが、はてなブログでは＜h1＞が記事タイトル、＜h3＞が大見出しとなっています。
ただ、以前記事でも書きましたが、通常＜h1＞の次は＜h2＞になっていないといけない部分がデフォルトでは＜h3＞となっていて、僕のブログでは「大見出し＜h3＞」を「＜h2＞」に変更しているのでその流れで説明させて頂きます。
まずは、通常ページ（AMP非対応ページ）とAMP用CSSに見出し部分のCSSを適用した場合の見た目から御覧ください。
※＜h6＞は省略しています。
一緒やん！
と言われそうですが、一緒ですｗ
何故かと言うと同じCSSを適用しているからです。
つまり、AMP用CSSに現在使用しているCSS（デザインCSSに書いている）を適用すれば見出し部分は”ほぼ”同じに出来ると思います。
カエレバリンク部分
Amazonや楽天等の商品を紹介する際に、非常に便利な「カエレバ」ですが、今ままでのAMPページでは見るも無残な状態でした。
しかし、こちらもAMP用のCSSを適用する事で見やすいデザインに変更することが出来ました。
個人的には、今回のAMP用CSS対応で一番のメリットは「カエレバ」のデザイン部分だと思っていますｗ
AMP用CSSの注意点
今回の検証で気になった点をまとめておきます。
※確証はないのであくまで参考程度に御覧ください^^;
CSSの容量
先にも書きましたがAMPページではCSSの容量が50kbまでという制限があります。
今回通常ページ用のCSSをそのままAMP用CSS欄に貼り付けたところ反映しないものがありました。
おそらくそれはCSSの容量制限にひっかかった為に反映しなかったものだと思われます。
なのでAMP用CSSに適用するCSSは必要最低限に抑えたほうが良いと思います。
AMP用の書き方
AMPページでCSSを使う場合容量以外にもCSSの書き方にルールがあります。
例えば画像を掲載する際のIMGタグです。
通常
<img src="画像URL">
ですがAMPページでは
<amp-img src="画像URL" width="◯◯" height="◯◯"></amp-img>
のようにAMP専用の記述をしないと画像が表示されてもAMPページとしてはエラーとなります。
他にも広告やソーシャルボタンの記述方法にもルールがあるので、AMPページに対応する際には注意が必要です。
はてなブログテーマ
僕のブログもそうですが、はてなブログのテーマによってはいろいろなデザインが既に適用されている場合があります。
例えば僕が利用している「CONTENTS」ではカエレバのCSSがデザインテーマ内に適用されています。
これは非常にありがたいのですが、AMPページではデザインテーマ（CSS）が使用出来ないので、デザインテーマ内に適用したいCSSが含まれている場合には、該当のCSSをAMP用CSS欄に書く必要があると思われます。
総評
今回AMP用CSSを検証してみましたが、見出し部分やカエレバ等の基本となるデザイン部分だけを対応するのが良いと思いました。
それだけでは通常ページと全く同じデザインにすることは難しいかもしれませんが、見出しやカエレバの部分を変えるだけでもかなりイメージは変わります。
特にカエレバについては、
これ↓
が、これ↓
になるのでかなり違うと思いますｗ
今までデザイン面の理由でAMP対応を見送っていた方であれば、今回のAMP用CSSの実装によってAMPに対応して見ても良いのではないでしょうか？
ただ、収入面を意識されている方の場合、記事上や記事下等に広告を挿入することが現状出来ないので、デザイン面が改善されてもAMP導入は悩むところですねｗ
デザインは対応してくれたので後は
表示速度をとるか収入をとるか！
の2択だと思います。
僕は収入面も意識しているので、今回の対応でデザインが改善されても悩んでしまいます。
ただ、Googleは「表示速度をランキング要因として組み込む」との話もあるので更に悩みますね^^;
最後に
いかがだったでしょうか？今回のAMP用CSSについて基本的な部分を検証してみました。
ページの表示速度が検索結果に影響が出ると言われている中で、今回のデザイン対応は非常にありがたいと思います。
ただ、はてなさんも以下のように言っていますが、AMPやCSSの知識がある方を対象としている機能なので設定する際には十分ご注意ください。
本機能はAMPおよびCSSの知識を持っている方を対象しており、デザインやレイアウトのカスタマイズに関してははてなブログのサポート対象としておりません。
そして、欲を言えば通常ページと同じように「ヘッダ」「フッタ」「記事上」「記事下」部分もAMP用項目を用意してもらいたいですね！
どうかはてなさん、いやはてな様。
AMP対応の更なる改善をお願いします！
この記事が回り回って、はてなブログの関係者の方に届きますようにｗ
