AMP対応すると、恐ろしくデザインが崩れる。どれだけデザインが崩れるか見てください。

どうも。「産前産後の身体パートナ」の馬場佐希子です。

今日は、WordPress(ワードプレス)のブログで、AMP(アンプ)対応したらどうなるのか、について書きます。
AMP(アンプ)については、年末から何度か試行錯誤していて、今日、改めて思うことがあったので記事にしました。

ちなみに、PC音痴の私は、技術的なことは全くダメなので、テーマ頼りでテーマに解決してもらっています。

私の使っているのはこれ、「ストーク」WordPressテーマです↓↓

 

cssなんか分からなくても、スマホビューで見やすいようにしてくれています。
メニュー表示や、ウィジェットもいろいろあって、使いやすく、STORK様さまです。

でも、そのSTORKさまでも、関係なく、ダッサいブログになってしまうAMPについて書きます。

今日は妊娠とか出産と全く関係ないことです。

ただ、最後に私の想いも書いてあるので、ワードプレスに関係ないあなたは、下にスクロールして、私の思いは、読んでいってください。

AMP(アンプ)って何ですか?

AMP(アンプ)?

えーっと、音が出るやつですか?

アンプ

AMP(アンプ)?

何それ。

AMP(アンプ)は『AMP(Accelerated Mobile Pages)』のことです。

驚くほど速い速度で、モバイルサイトが表示されるというGoogleの取り組みです。

Accelerated Mobile Pages は、読み込みを高速化しさらに快適なユーザー 体験を追求するため、さまざまな技術的手法を活用してコンテンツをほぼ瞬時に読み込めるようにした HTML ページです。

ウェブマスター向け公式ブログより

 

AMPにすると、どれくらい速いのか?

AMP(アンプ)対応にすると、めっちゃ速いです。

どれくらい速いかっていうと、AMP(アンプ)対応ページは、タップしたら、

ぱっ!

って開きます。

 

 

AMP(アンプ)対応してないページは、

ふ〜〜〜〜ん。

くらいです。

 

 

全然イメージわかないですか?

そんな人は、このページが参考になります!

BMS(ブログマーケティングスクール)でお世話になっている松原潤一さんのページです。

ブログのAMP対策の為に最低押さえておきたい4つのポイント!アクセスアップチャンスを逃すなっ!

 

体感的に、めっちゃ速いです。

ただ、代わりに犠牲にしてるものがあります。

 

AMP対応にするデメリット

1.デザインが崩れる

 

こちらが、AMP非対応のモバイルサイトです。

スマホビュー

それが、AMP対応ではこうなります↓↓

スマホビュー

誰だぁ、こんなことをしたやつは!

見にくいやんけー!

 

ダサいなって思ったあなた。

こんなサイト見たくないなって思ったあなた。

ち、ち、違うんです。

本当は、こうなんですよ。

スマホビュー

 

AMP表示で、変化している点は下記のようなことです。

  • SNSシェアボタンが消えた
  • メニュー表示が消えた
  • 色まで変わっちゃった
  • フォントも変わった

 

 

 

AMP非対応

スマホビュー

AMP対応

スマホビュー

 

  • 画像が元のサイズになっている?!
  • 吹き出しがなくなった
  • 見出しもないよね?

 

 

 

AMP非対応

スマホビュー

AMP対応

スマホビュー

 

  • デザインが変わりすぎて、リンクボタンがなくなってしまった

 

 

 

2.表示されなくなるコンテンツがある

この他にも、

  • お問い合わせフォームが表示されない
  • ウィジェットで追加したコンテンツが表示されない
  • 広告などが表示されない

といったことがあるようです。

 

3.グーグルアナリティクスの解析が除外されている

 

グーグルアナリティクスを解析できるよう設定すれば良いのですが、私はうまくできませんでした。

 

助けを求めたら、「いつも心に石上さん」でお馴染みの、石上貴哉さんが下記の記事で優しく教えてくれました。

AMPのプラグインを拡張して、下がったPVとSNSボタンを取り戻せ!

 

 

BMS(ブログマーケティングスクール)の松原潤一さんも助けてくれました。
私のようなPC音痴でもできるはずの、たったこれだけのことなのに、なぜかうまく設定できませんでした。

詳しい設定の仕方は、記事に書いてあります↓↓

AMP導入でPVが下がった!?そんな事ないGoogleアナリティクスにカウントされてないだけ!

 

 

AMPを導入するメリット

1.モバイルサイトの表示速度が上がるので、ストレスなく見ることができる

 

表示速度が速いと、離脱が防げますよね。

結果的に、読まれるページになりますね。

読み込みに3秒以上かかると40%の人がサイトの閲覧を諦める、という調査結果も決して大げさな話ではありません。

ウェブマスター向け公式ブログより

 

 

2.Googleがモバイルファーストを重要視しているーSEOの評価になる?

 

Googleは下記のように述べています。

そこでユーザーにとってさらに価値ある検索結果を提供するために、Google ではモバイル ファーストのインデックス登録に向けた実験を開始しています。Google 検索のインデックスは、サイトやアプリについての単一のインデックスとして存続しますが、将来的に Google のアルゴリズムはモバイル版のコンテンツを主に使用するようになります。つまり、ページのランキングを決定したり、構造化データを理解したり、検索結果にスニペットを表示する際も、モバイル版のコンテンツが使用されるようになります。

ウェブマスター向け公式ブログ
モバイルファーストインデックスに向けてより

このような発表のため、将来的にAMP対応のページが検索上位に来る可能性があるのではないでしょうか。

 

 

3.カルーセル表示される可能性がある

 

カルーセル表示は、横並びでズラ〜っと出てくるこういうやつです。

スマホビュー

ここに、AMP対応って書かれた記事が上がっていますね。
カルーセル表示に上がってくると、読まれやすくなりますよね。

ですが、すべてのAMP対応のものが、カルーセル表示で検索1ページめに来るわけではありません。

私自身の検索上位記事を、スマホで確認してみました。

スマホビュー

こんな形で、カルーセル表示にはなっていません。

 

AMP対応にした理由

 

私が、AMPを導入しようと思ったのは、検索上位に来て、たくさんの人に見られるブログになったらいいな、と思ったからです。

ブログで発信しているのには、こんな理由があります。

現場で、ネットで迷子になったり、ネットの情報に振り回されたりして、どうしていいか分からなくなっている妊婦さんや子育て中のママに出会うからです。

今の時代は、情報が本当に多くて、何を選択して良いのかわからなくなっていますよね。

特に、妊娠・出産・子育てに、自信がなくて、真剣に悩んでいる方に出会います。

 

だけど、子育てに正解なんかないと思いませんか?

隣のあの子に当てはまることが、あなたのお子さんに当てはまるとは限りませんよね。

 

だから、自分の責任で、やってみて、その子に合うかどうか判断したらいいと思うんです。

でも、自信を持って判断することができないから、悩むんですよね。

 

そこに、自信を持って判断できるように、背中をそっと押してもらっているようなサイトがあったらいいなと思うんです。

「私の子育て、これでいいんだ」って自信が持てたらいいなって。

きっかけや気付きを得られて行動につながるような、そんなサイトでありたいなと思っています。

 

だから、情報で混乱させるんじゃなくて、検索上位にきて、たくさんの悩める人が、自分で自信を持って判断できるような記事を書きたいなと思っています。

子ども

さらに言えば、ネットより、断然リアルがいいです!

実際に会って話して、その場の空気感とか、温度とか、ネットでは伝わらないことが、リアルにはたくさんあります。

何でも効率化とか、速さが求められている昨今ですが、子育てなんて、すぐには結果が出ないことの典型ですよね。

だからこそ、迷ったり、悩んだりすることがたくさんあるんですよね。

私は、ネットをひとつの契機にして、リアルでもどんどん繋がっていきたいと思っています。

妊娠、出産、育児といった命に関することは、断然リアルがいいです!

 

AMP対応は見送ったほうがいいのかも

上のような理由から、AMP対応にしました。

しかし、デザインが崩れている点や、解析がうまく行えないことで、しばらくAMPの導入は見送ったほうがいいのかも、と迷っています。

下記引用のように、初心者が手を出すものではないかもしれません。

グーグルアナリティクスの解析の対応さえも中途半端なまま、新たにプラグインを入れることにも抵抗があります。
新たな不具合が出た時に、時間をものすごく浪費しそうな気がします。

AMPを導入するには犠牲にするものが多すぎるため、もっと情報が出揃うまでは手を出すべきではないと思います。

*https://www.gamitaka.com/amp-expansion-plugin.html,AMPのプラグインを拡張して、下がったPVとSNSボタンを取り戻せ!より

 

妊婦さんや子育て中のママの役に立てばいいなという思いで、必死に書いていても、デザインが崩れて、

「なんじゃこりゃ〜」

っていうサイトだと、途中でページを閉じて読んでもらえないこともありますよね。

そして、「なんじゃこりゃ」のサイトでは、私のことを信用してもらえませんよね。

 

AMPだと、「いい加減にサイト作ったの?」って思われるくらいデザインが崩れちゃってます。

AMPにするとデザインが崩れるのは、

ページの高速化を優先し、JavaScript(ジャバスクリプト)を読み込まないため

*https://www.gamitaka.com/amp-expansion-plugin.html,AMPのプラグインを拡張して、下がったPVとSNSボタンを取り戻せ!より

だそうですが、これじゃダメですよね。

 

AMP非対応

スマホビュー

AMP対応

スマホビュー

 

全く別物になっちゃってます。

速く読み込まれた方が、モバイルフレンドリーで、読者さんのために良いのでは、とAMP対応にしましたが、今後の対応を再考します。

 

ひとりでは難しいので、石上さんがやってるWebに関する「ちょっと困った」を解決するスポットサービスに申し込んで解決することも検討中です。

リアルでつながれるように、やっぱり読まれるようになってほしいもの!!

 

おしまい。

 

 

追伸)

AMPだけじゃなくて、サイトの見やすさとか、スマホビューで見やすいテーマをお探しなら、
「ストーク」WordPressテーマがオススメです。

私も使っています。

PC音痴のcssも分からない私は、完全にテーマ頼りです。
PC音痴でも、見やすいサイトが作れるテーマです。

 

 

妊娠・出産・育児を応援するメルマガを発行しています。

体験会の優先案内、最新情報が届くメルマガは下記フォームから登録できます▼▼▼

妊娠やお産、子育てに役立つ情報をいち早くゲット!
メルマガに登録する
お名前(姓)
お名前(名)
メールアドレス(必須)

 

携帯メールアドレス(特にdocomo)や無料アドレスよりお申込みいただいた場合、迷惑メールと判断されメールが届かない場合があります。

メール:info@tanpotokoyoga.comからのドメイン指定受信の設定をお願いします。



一度は諦めた母乳育児産後のぽっこりお腹気になる体型も解決できる!
産後のキレイを叶える 授乳の10ポイント


母乳育児への不安を、妊娠中の今から解決しておくことで、不安なく、楽しみながら母乳育児を叶えられるようになります。

 

●「こんなに泣いて大丈夫かしら。母乳が足りないのかしら。」から、「今は、泣くときなのねー。泣いていいよ^^。大丈夫。」と思えるようになります。

●身体の使い方を身につければ、ぽっこりお腹も、産後の腰痛肩こりにもさようならできます。

●美しい姿勢で、エクササイズする必要なくなります。

●授乳しながら、ぽっこりお腹が解消すれば、時短になります。

●その姿勢をキープできる体幹力があれば、抱っこ楽ちんになります。



 

下のボタンをクリックしてダウンロードしてください。


 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です