サイトのスマホ対応のやり方に困っている。どうやればスマホ化すればいいのか分からない・・・


スマホ対応サイトの修正に日々追われているのんくらです。今日はサイトのスマホ化について役立ちそうなことをいくつか書いてみたいと思います。

みなさんも年末から連日のようにウェブマスターツールにスマホ化の警告が来て困ってませんか?

Googleから正式発表がありましたが、4月21日以降はスマホ対応していないサイトは検索結果の順位が落ちることが確定しているので、まだスマホ未対応の方は死ぬ気で頑張らないとですね。

僕の所にWMTにスマホ化の警告が始めて来たのは1月14日。「https://ryokoujapan.com/ でモバイル ユーザビリティ上の問題が検出されました」という文面のメールが来てWMT上にも警告が来ています。

僕の場合はHP作成ソフトを使ってHTMLサイトを作っているため、サイトは自動ではスマホ最適化はされません。アドセンスチームや周囲の同業者からは「スマホ化をすれば収益が増えるよ」とはずっと聞いていたですが、これまでずっと未対応でした。

まあ、スマホ化をしなかった理由は単に面倒くさかったからですがね。こんな事に時間を割くくらいなら新しいページを作った方が収益が上がるだろうと考えていたのです。

スマホ化が簡単に変更できるなら速攻でやってましたが、なんせ古いサイトは作ってから10年以上たっているものもあるわけで、そりゃもう一から作り直しレベルの修正を自分でやる必要があるわけです。僕みたいな人はスマホ化には相当な時間が必要となります。

とは言え今回はWMTに直接警告が来たので修正しないわけにはいかないだろうという事でようやく重い腰を上げる決断をしたっちゅうわけでございます。


スマホ化するべきページはどうやって調べるの


スマホ化するべきサイトやスマホ未対応ページがどのページなのかを知るにはWMT(ウェブマスターツール)を利用します。

ウェブマスターツールの管理画面を開いたらサイドバーにメッセージがあるかを確認して、あれば早速クリックしてみましょう。以下の画面に切り替わるはずです。



次に、で囲った部分の「モバイルの問題を調べる」をクリックすると以下の画面に移動するはずです。そこには問題点が表示されているはずです。




僕の場合は・・・
1コンテンツのサイズがビューポートに対応していません
2ビューポートが設定されていません
3フォントサイズが小です

この3つです。ようは全部ですね・・・でも、殆どの方は僕と同じではないでしょうか。ビューポート?設定?どゆこと?初心者にはさっぱりだと思います。僕も最初はあんまり良く分かっていませんでした。

簡単に用語を説明しますと・・・

ビューポートを設定するとは、ユーザーが利用する媒体(PC・スマホ・タブレット)に合わせてサイトの横幅をぴったり表示させることです。これは<head>内にビューポートタグが記述されていないと警告を受けます。1と2は同じ対策をすれば多分クリア出来ます。

フォントサイズはもちろん文字の大きさのこと。字が小さすぎると同じく怒られます。読みやすい大きさにすれば警告が消えます。

まずは最低限この3つを対策するとスマホの検索結果一覧にめでたくスマホ対応の文字が出るようになります。

スマホ化すると、「グーグルくだばれ」で検索するとスマホの画面では、ほれ、こんな感じになります。PC版(見にくいけど・・・)と比較すると一目瞭然ですね。

PC版   スマホ版
 


スマホ対応サイトと認定されるには先ほどの3項目が特に重要という事なのでしょうね。今の所はその3つで大丈夫です。とは言え検索は相対的なものなのでライバルサイトをチェックしてモバイル最適化するのは必須でしょう。

とここまではウェブマスターツールを導入している運営者のみが利用できるサービスです。

「オラはブロガーだ。稼ぎ重視のアフィリエイターじゃねえからWMTに登録なんてしてねえよ」って方もいることでしょう。(攻撃的で刺々しい文面ですが僕は生粋のアフィリエイターです。)

そんな方にはこんなモバイル化チェックツールがあります。(ようやく本題に突入w)あ、それ・ワン・ツー・いやっほ〜い!カンペーイ!!


ウェブマスターツールを導入していない、又は、具体的なスマホ対応の仕方が分からない時は・・・


ブロガーさんでもアドセンスに登録している方は多いと思いますが、実はアドセンスに管理画面上でWMTよりも具体的で分かりやすいモバイル化についての情報を知ることが出来ます。

まずアドセンスの管理画面にログイン。下が管理画面です。□で囲った部分がスコアカードと呼ばれるサイトのアドセンス最適化がどの程度されているかを●の数で4段階に表したものです。(僕の場合は悪すぎますねw)



このスコアカードって奴、使えなさ過ぎて導入時にチラ見した程度でそれ以降は利用したがないって方は多いはずです。ところが今、とんでもなく便利になってるのですよ。ビビりますよ。

では早速、で囲ったスコアカードの「サイトの状況」をクリックしましょう。他はこれまで同様、あまり使えないので無視して結構です。クリックすると以下の画面が現れます。



これはPC・スマホそれぞれでアドセンスが最適化されてませんよという微警告です。今回はスマホ対応ということなので最適化されていないアドレスをクリックしてみます。

そうすると「PageSpeed Insights」という別ページに飛ばされてアドセンス上でユーザビリティの悪い修正箇所を知ることが出来ます。



これはあくまでアドセンスにおけるスマホ最適化ですが、WMTに来ている警告内容と重なる項目も多いですし、WMTより分かりやすく更に踏み込んだ提案をしてくれています。

修正すべきカテゴリは、「表示速度」と「ユーザーエクスペリエンス」の2つですが、サイトのモバイル化がどの程度最適化されているかを知るには「ユーザーエクスペリエンス」の項目を確認することになります。

ユーザーエクスペリエンスのカテゴリは速度カテゴリの下の方にあるのでサクサクと画面下へスクロールしましょう。

クリックしたアドレスのページで修正が必要なのは、(修正必要)が、画像の最適化・レンダリングの修正・ブラウザのキャッシュの活用となっています。また、(修正考慮)では、画像の圧縮・CSSを縮小する・HTMLを縮小するとなっています。の項目は4個が合格となっていました。

と、ここまでならWMTとさほど変わりませんよね。では修正方法を表示するという文面をクリックしてみて下さい。以下は「タップターゲットのサイズを適切に調整する」という項目をクリックした時の画面です。



WMTでは具体的にどのタグが修正必要なのか良く分かりませんでしたが、こちらでは具体的に書かれているのでとても便利です。

速度に関しては数字を使ってどのくらいページが軽くなるかも分かるようになっています。

ページが軽いと表示速度が上がりユーザーの離脱率が下げることが出来ます。スマホ化とは関係ありませんが、PCに比べて性能が劣るスマホはページが重いと表示速度が悪くなる傾向があります。出来ればこの機会に修正しておくと良いと思います。

ウェブマスターツールも導入していないアドセンスも導入していないって方はどうすんのって話ですが、検索結果を見て自力で未対応ページを探して頑張りましょうwww
 
       はてなブックマークに追加
 
 
スポンサードリンク
  
  
QLOOKアクセス解析
スポンサードリンク