ブログに関して前から気付きつつも、みんなそうなんだと思って流していたことがあります。
それは
「スマホでツイッター（ツイート）からブログ記事へ飛ぶとデザインが崩れている現象」
です。
どういう事かというと
このブログ「すみっこから」の本来のスマホデザイン（はてなブログ時代）はこうですが
ツイートからブログへアクセスするとこう表示されます（現在は直ってます）
必死こいてちまちま設定したcssガン無視デザインです！
気にはなりつつも「外部サイトからアクセスすると崩れるちゃうんだなー」ぐらいにしか思わず、深く考えていませんでした。
しかし、あるフォロワーさんの記事URLが載ったツイートをタップしてブログへ飛ぶと、ちゃんとキレイなデザインで表示されているではありませんか！
…あれれれれ？なんで？
その後もいろんな人のツイートからブログへ飛んで確かめましたが、どうやらこの現象、デザインが崩れてる人／そうでない人で分かれてるんです。
そして先に結論から話すと、原因は「AMP（アンプ）対応にしていたから」でした。
見たい場所へジャンプ
AMP（アンプ）とはなんなのか
AMP(Accelerated Mobile Pages)とはGoogleとTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)のことです。
引用：SEO HACKSより
AMP（アンプ）というのは簡単にいうと「モバイルからのアクセス時にページ表示速度を速くするシステム」のようです。
AMPに対応している記事は、このようなカミナリのマークがついています。
このマークがついている記事とそうでない記事とでは、かなり表示速度に違いが出ます。
AMP対応の記事はページ表示の際にキャッシュを利用＆容量の軽いHTMLで書かれているため、表示速度を速めることが可能なようです。
ただ、高速表示してくれる代わりにデザインは勝手に簡素な見た目に変えられちゃいます。（後述しますが、ある程度は整えることは可能）
はてなブログはどこからAMP対応をオン／オフするのか
はてなブログ（Pro限定）は簡単にAMP対応／非対応に切り替えることができます。
AMP対応にしたければ「設定」→「詳細設定」→「AMP」にチェックを入れて保存するだけでOKです。
逆にAMP非対応にしたければチェックを外して保存すれば大丈夫です。
どうやら僕は、はてなProへ移行した際「表示速度が速くなる」ということしか知らずにチェックを入れ、デザインが崩れている理由がまさかAMP対応にしていたからとは気づかずに今まで過ごしていたようです。
AMP対応のメリット・デメリット
メリット
表示速度が速い
メリットはなんといってもその表示速度の速さです！
そしてGoogleが推進しているページを高速表示させる手法なので、検索順位にも良い影響があると言われています。
検索結果のトップ（カルーセル表示）にも記事が載りやすくなるそうですよ！
数値改善につながる
表示速度が速いことで、直帰率や滞在時間などの改善にも良い効果を期待できます。
特にページが重くなりがちな写真やイラストを多く載せるブログは効果が出やすいんじゃないでしょうか。
デメリット
デザインが崩れる
見出しやシェアボタンなど、cssで設定したありとあらゆるデザインが適用されず簡素な見栄えになってしまいます。（上の画像参照）
AMP対応用のcssを記述することもできるようですが、コードや容量にいろいろ制限があるようで正直めんどくさそう…。
広告が表示されない
AMP対応にすると、アドセンス広告が表示されないようです。
正確に言うとタグを記述したりプラグインを追加したりするときちんと表示されるようですが、そういった対応をしないと表示されないっぽいです。
アフィリエイトをしている人なら大多数が使っているであろう「ヨメレバ／カエレバ」も機能はしますが、デザインが崩れるのでクリック率が悪そうな見た目になってしまいます。
まとめ／結局どっちがいいのか
結局のところどっちがいいんだって話ですが
1番良いのは
「AMP対応にしたうえでそれ用のcss、プラグイン、タグ等を追加してデザインや広告が問題なく表示されるよう整えてあげる」
ことです。
そうすれば、表示速度も速くデザインも綺麗で稼げる最強ブログの完成です！
…ただ、僕はめんどくさいんでAMP対応はやめましたw
そのうち調べながらAMP対応にしてカスタマイズするかもですが、一旦はデザイン重視でこのままでいきたいと思います。
速さを捨てるのは心苦しいですが、やっぱり見栄え良く見せたいので！ （ドヤ顔）
逆に言うと、デザインや収益に特にこだわりがないって人はぜひ対応した方がいいと思います！
表示速度がガラッと変わりますよ！
それぞれメリット／デメリットがあるので、自分のサイトに合った対応をとってくださいね！
