ページがモバイルフレンドリーではありませんと言われるヤツ

いろんなモバイル端末 ブログ

 

いやいや、そんなはずないんだけど!?

 

どうもどうも、結構人見知りだからお酒の席でくらいじゃないといきなりフレンドリーな雰囲気は醸し出さないモストラです。
いやー、初めて人からフレンドリーじゃないって言われたよ、、人…??まぁ良いか。

 

 

モバイルファーストという時代

いきなりフレンドリーじゃないと言われてもよくわからないかもしれないけど、まぁなんとなくモバイルにとって良い状態じゃないということを言ってんだろうなということは分かる。でもなんでこの記事だけ!?

モバイルフレンドリーではない

これを発見してから他の記事も確認して見たけど、他は大丈夫でした。

他と何が違うのかと言われても分からないとしか言いようがないのですよ。
あえていうならば、初めてアプリを紹介したことと、初めてアプリーチを使ってみたことか。

モバイルフレンドリーじゃないと言われるような内容ではないと思うんですけどね。
その後も同じようにアプリーチを使った記事を書いたけど、そんな表示は出てこなかったから問題ないはず!

ひとまず詳細を確認したいので、「ページがモバイルフレンドリーではありません。」をクリック。

 

モバイルフレンドリーテスト

ここで、問題となっているページのURLを入力!
するとすぐに検索結果が出てきました。

 

モバイルフレンドリーの証明

ここでは「モバイルフレンドリーです」のお墨付きをもらったので問題はなさそうです。

念のため下にある「GOOGLE に送信」ボタンをクリックしておきました。

すぐに対応してくれるわけではないのでしばらく待つ必要があります。

 

 

モバイルユーザビリティにエラーがある場合や、改善されていない場合に今回のような「モバイルフレンドリーではありません」の表示につながるようですが、そちらも問題がなかったので、一時的にこういう表示になる場合があるという感じでしか理解はできませんでした。

 

モバイルユーザビリティ

 

後日確認すると表示が改善されていたので問題はなさそうです。

 

表示が普通のものに変わっていた

 

 

モバイルフレンドリーってどういうもの?

結局モバイルフレンドリーかどうかという表面的な話しか出てこなかったのでちょっと調べて見ました。
PCよりもスマホなどのモバイル端末の利用が多くなってこともあってモバイルファーストという言葉をよく目にするようになってますよね。
モバイルフレンドリーを簡単に説明すると、モバイルからの利用者にとってより良い環境にすることです。

見やすい、使いやすい、イライラさせない!

これからはモバイル利用者優先に考えないとですね。

 

レスポンシブデザインになっているか

サイトのHTMLの中にあるheadタグ内にメタタグで以下の記述があるかどうか。

<meta name="viewport" content="width=device-width, initial-scale=1" />

この記述があるかどうかを見ているようです。PC用のサイトとモバイル用のサイトを分けているところは記述がなかったりするのですが、今では対応しているサイトが多いですね。表とかを作るときにちょっとめんどくさいので画像で作るようにしたのですが、細かいものを作ると次は小さくなりすぎるから色々と考えないといけないけど、まぁ便利ですよね!

 

モバイルでも見やすいフォントサイズか

フォントのサイズを見ているようです。

フォントサイズはデフォルトのままにしている人も多いと思います。変えるとなると、どのサイズが良いのかわからないという問題が出てくるので、そういう時の指標として推奨サイズというのがいろんなところが出しているので、Googleはこちらで確認してみてください。
iOSは

Googleでは16pxを標準フォントサイズとしているようです。
Androidでは日本語はタイトルが20psで見出しが17sp、ボディが15ps  (ps = scalable pixels)
iOSでは最低でも11pt以上を推奨しています。

単位がバラバラなので簡単に揃えてしまうと、14pxから22pxという感じでしょうか。
文字が小さすぎると読みづらくて離脱につながるということがよく言われます。
また大きすぎても読みづらいですよね。

端末からフォントサイズをいじれたりもするのですが、デフォルトで対応している方が親切なので、こだわりがある場合以外はこの範囲内で収めるのが良さそうではあります。

 

リンク同士の距離が近すぎないか

スマホだと間違ってタップしてしまうことが増えるので、それを考慮してボタンなどの距離をとっているかを確認しているみたいですが、どれくらい話していたら良いかの基準が示されているわけじゃないので、モバイルフレンドリーテストを行って問題がなければ大丈夫という具合なのかな。
カエレバとヨメレバのボタンの距離が気になっていてちょっと前にCSSでスペースを開けて見たけど、変更する前の真横に密着している感じでも問題なかったから横が密着してるのは良いのかな?どうなのかな?

 

Flashや広告

HTML5からFlashはあまり必要なくなり、モバイル端末では専用のFlashPlayerはなくなっているので再生するために再生できるアプリケーションが必要になってくる場合があるので利用しない方が無難ですね。また、画面いっぱいに広がる広告なんかもモバイルユーザーに対してストレスにつながるのでモバイルフレンドリーとはかけ離れています。

 

 

まとめ

表示が改善されるまで3日4日かかりましたが、それでもちゃんと解決できてよかった!
結局何が問題だったのかは把握できなかったのですが、改善方法は示せたので良いかなと思ってます。

モバイルフレンドリーテストを行っても「モバイルフレンドリーではありません」という表示になってしまった場合は、モバイルで利用するときに使いづらいものになっているということなので、改善しましょう。

 

アプリーチというカエレバみたいなブログパーツを使うようになったのですが、何やら相性が悪いのかレイアウトが崩れたりアプリの画像がデフォルトのままだと表示されないという事態になってしまってるのが気になってるんですが、少しずつCSSで対応していこうと思ってます。

アプリーチといえば、iOSの方にiTunesのIDが埋め込まれてるんですが、アレは誰のなんだろう。
製作者の人のかな?カエレバの時の問題と同じようなことにならないようにしてほしいですね。

 

コメント