ブログ初心者がモバイル表示で注意するべき３つの事

自分では意外と知らないスマホでの表示状態。画面が切れたり、小さくて文字が読めなかったりと多岐に渡ります。

 

今回は、ブログ初心者がスマホ表示で注意すべき３つの事について紹介します。

　

 

ブログ初心者がモバイル表示で見落とす事

ブログ初心者がモバイル表示の状況を意識する人って意外と少ないんです。

 

なぜならば、基本はPCでブログを書いておりプレビュー画面もPCでの画面になっているので、実際にスマホでどのように表示されるのか意識していない人が多いです。

 

自分もかつてはそうでした。ある日、スマホ画面の乱れが有ることを確認出来てから、対応方法としてやっていることを記事に書きました。

https://daini-no-jinsei.jp/blog/smatphone-view/

 

この記事は、スマホと同じ状態でプレビューを確認する方法の紹介です。

 

確認する方法は、先の記事を読んで頂ければ分かるように、いくつかの方法は存在します。

 

しかし、今回は確認ではなくそもそも見落としがちなスマホを意識した書き方に注目していきたいと思います。

 

これは自分がGoogleから指摘された内容です。

 

今から書く注意点を意識して書くようにしましょう。

　

 

ブログ初心者がモバイル表示で注意するべき３つの事

ブログ初心者がモバイル表示で注意するべき３つの事について書いていきましょう。基本は書式の話ですので、SEOの内容も含んでいます。

 

分かっていそうで分かっていなかったことについての説明になりますので、よく読んでくださいね。

１．コンテンツの幅が画面の幅を超える

これは、スマホで画面を見た際に画面の一番下に左右のスライドバーが出ていることや、画面上部のメニューの右端が切れて読めなかったりすることです。

 

つまり、設定している画面サイズがスマホの画面サイズより大きくなってしまっているということですね。

 

原因としては、レスポンシブル表示担っていないということです。使用するテーマによっては自動で設定してくれますが、wordpressの標準テーマを使用したりする場合には注意が必要です。

 

メニュー表示なのであれば、外観 -> メニューを選択して、一番下の方にある赤く囲った部分にチェックが入っていることを確認しましょう。

 

その他として、Adsenseの広告を表示させた場合に、右端が切れてしまっている（はみ出している）場合があると思います。

 

こちらもレスポンシブルの場合でも発生する場合があり、理由としては表示上右側にmarginが10px取られているからだと思います。

 

従って、このAdsenseのコードの部分に数行のコードを追加すれば回避することができます。

 

<div style="margin-left:-10px;">  ← marginを相殺する
あなたのGoogle Adsense code
</div>

 

この対策をすれば、コンテンツが画面幅を超えることは無くなるはずです。

 

２．クリック可能な要素同士が近すぎる

この問題は、PCで表示している時には気にならないのですが、モバイル表示になると画面幅の関係で行が途中で折り返してくるとが有ると思います。

 

そうした時に、リンクやボタン表示、またはアフィリエイトのリンクなどがすぐ近くに密集することがあります。

 

故意ではないのですが、画面の関係上でなるんです。

 

そうすると、Googleからユーザーが間違ってリンクボタンを押しやすいと言う指摘を受けます。これは悪質なアフィリエイトへの誘導とご認識される可能性があるみたいなのです。

 

誤クリック防止のためには、どうしてもリンク位置をはなすしかありません。

 

PCと比較するとおかしな位置になってしまうかもしれませんが、近年はモバイルでのアクセスが多いという状況を踏まえると、モバイルでの位置決めを優先するほうがよろしいかと思います。

 

モバイルでの位置は、先頭で説明した確認方法を用いてチェックするしながら位置調整を行います。

 

３．テキストが小さすぎて読めない

一般的には、モバイルで記事を表示する文字サイズは固定されているので、一部だけ文字が小さくなるようなことは無いとお思いでしょう。

 

実は自分が体験したことですが、表示するテキストの文字は問題ないのですが、使用している画像の文字が小さすぎて読めないということでGoogleから指摘を受けました。

 

こちらもPCでの表示を実施した場合には、画像も縮小されませんので画像上の説明文など十分に読めるのです。

 

しかし、モバイルになった場合には、画像が縮小されて表示されますのでパット見た時に小さすぎて読めないと言う問題が発生します。

 

当然、画像をクリックして拡大すればよいわけですが、いちいち画像をクリックするわけでもないので、これでは読めないと言うGoogleからの指摘なのです。

 

この場合の対策は、画像の余白をできる限り切り捨てるか、画像の必要な部分のみを使うか、いずれにしても画像側で対処する以外に方法はありません。

　

 

ブログ初心者がモバイル表示で注意するべき３つの事　まとめ

ブログ初心者がモバイル表示で注意するべき３つの事について今回説明してきました。

 

実はこれ、Googleが推奨しているモバイルユーザービリティと言う考え方に合っていないと言うことで、Googleから指摘が来るのです。

 

近年、モバイルでのアクセスが急激に増えている中、いつまでもPC主体のレイアウトではいけませんよとGoogle言っているのですね。

 

Googleが推奨するユーザーに優しいサイトが、サイト品質の良いサイトと言う事になりますので、当然モバイル環境ではモバイルユーザービリティに対処しているサイトが品質が良いサイトということになります。

 

 

今回取り上げた３つは、意外と気が付かない落とし穴的な部分もありますので、是非気をつけてサイト構築をするようにしてください。

人気記事　何でwordpressはセルフピンバックするんだ？無駄なピンバックを回避してみた。
人気記事　Google Search Consoleでエラーを修正してくれと怒られた