![わからない君](https://papahiiro.com/wp-content/uploads/2019/11/IMG_9167-1.png)
あれー!?
なんだこれ?
スマホから見た画面が
全然違うよ!
(パソコンから見た画面)
(スマホから見た画面)
(パソコンから見た画面)
(スマホから見た画面)
![ひろ](https://papahiiro.com/wp-content/uploads/2019/06/nigaoemaker.png)
あ〜・・・これは
AMP設定が重複してるかも
ね…
![わからない君](https://papahiiro.com/wp-content/uploads/2019/11/IMG_9167-1.png)
A…M…P…?
何それ・・・?
みなさん、こんにちは。
CocoonなのにAMPのプラグインを
入れていたおバカなひろです。
あなたは私のブログを何で
見ていただいていますか?
・スマホ
・タブレット
いずれかかとは思いますが、
スマホからご覧いただいている方が
多いのではないかと思います。
実際に貴方もスマホからご覧
頂いているのではないでしょうか?
スマホから「見やすい」ことは
かなり重要です。
ということで今回はAMP設定に関して
私の失敗談と対策をお伝えします。
【AMP設定】スマホからのデザインが乱れる理由 結論(忙しい方向け)
私の場合は使用テーマである「Cocoon」と、
AMPに関するプラグインが干渉していたことが
原因でした。
(プラグインはAccelerated Mobile Pagesです)
このプラグインを入れた理由は
「プラグイン おすすめ」で出てきたから…
![ひろ](https://papahiiro.com/wp-content/uploads/2019/06/nigaoemaker.png)
安易に入れてはいけませんね…
テーマ側で対応していることに対して
プラグインを入れてしまうと
却って不具合が起きる原因になります。
随時修正することが必要ですね。
【AMP設定】スマホからのデザインが乱れる理由
そもそもAMPとは何か?
AMPは「Accelerated Mobile Pages」です。
Googleが中心となって立ち上げた、
モバイル端末でのウェブサイト閲覧を
高速化することを目的とする
オープンソースプロジェクトです。
(それに関する記事はこちらです)
通常のウェブページで使うHTMLを
改良したものです。
パソコンから見た時と
スマホから見た時では
画面全体の構成が変わっていますよね。
よりスマホを使う人が見やすい仕組、
それがAMPです。
これくらいの理解で十分かなと^^
パソコンから見る時とは別に
スマホから見るためのHTMLが必要です。
ワードプレスはHTMLが分からなくても
ブログを運営することができる仕組みです。
その為に
・テーマ側で対応
・プラグインで対応
という2つのアプローチから
対応がされています。
AMPに対応する為には?
ワードプレスの「テーマ」側で
AMP対応がされているケースが
あります。
私が今使っている「Cocoon」は
既に対応されていますね。
一方で「JIN」はAMP非対応のようです。
この場合「プラグイン」などで
対応する必要があります。
とはいえ「プラグイン」を使うと
デザインが崩れてしまう危険も
あるようなので難しいですね。
![ひろ](https://papahiiro.com/wp-content/uploads/2019/06/nigaoemaker.png)
安易に
Accelerated Mobile Pages
を入れたことを後悔…
両方でAMP対応をするとどうなる?
![わからない君](https://papahiiro.com/wp-content/uploads/2019/11/IMG_9167-1.png)
どっちでもAMP対応したら
効果倍増!とかならないの?
![ひろ](https://papahiiro.com/wp-content/uploads/2019/06/nigaoemaker.png)
残念ながらうまくはいきません
このサイトの問題点につながりますが、
テーマとプラグインでAMP対応をすると
「干渉して想定通りに表記されない」
可能性が極めて高いです。
テーマ側とプラグイン側でそれぞれ
AMP表記の為にHTMLを変換すると
ぐちゃぐちゃになってしまいます。
翻訳でイメージしてみましょう。
まず日本語から英語に翻訳します。
翻訳された英文を日本語に翻訳します。
翻訳された日本語を英文に再翻訳します。
最初の翻訳結果とは全く違いますね。
意味として理解することはできますが、
本来書きたかったこととは
ズレて受け取られてしまいますね。
厳密には異なっているかもしれませんが、
お互いに動作している為に
表記がおかしくなる可能性が高いです。
![わからない君](https://papahiiro.com/wp-content/uploads/2019/11/IMG_9167-1.png)
テーマで対応できる場合は
テーマで
出来ない場合は
プラグインで
![ひろ](https://papahiiro.com/wp-content/uploads/2019/06/nigaoemaker.png)
混ぜるな危険ですね
【AMP設定】スマホからのデザインが乱れる理由 結論
スマホから見るときと
パソコンから見るときで
画面が異なっているのは
「AMP」
という仕組みのお陰なんですね。
スマートフォンユーザー数は、
ニールセンデジタルによると、
2018年度7,000万人を超えています。
確実にパソコンを持っている方よりも
スマホを持っている方の方が
圧倒的多数です。
多数の方たちが便利に使えるように
ブログ運営をしていく
必要がありますね。
実はこの設定を変更するまで
私のサイトは圧倒的に
パソコンユーザーが多かったんですよね💦
この変更をしたところ
モバイルユーザーが増えました…
今まで見にくくて申し訳ございません。
今後も日々改善していきますので、
お付き合い頂ければ幸いです。
ということで、
「【AMP設定】スマホから見た画面が
パソコンと全く違う?[ブログ初心者]」
についてでした。
1つでもあなたの参考になることがあれば幸いです。
ここまでお読み頂きありがとうございました。
こちらの記事も参考にして頂ければ^^
こちらで2020年度におススメできる
商品・サービスを紹介しております。
コメント