 |
||||||
サイトのスマホ対応のやり方に困っている。どうやればスマホ化すればいいのか分からない・・・スマホ対応サイトの修正に日々追われているのんくらです。今日はサイトのスマホ化について役立ちそうなことをいくつか書いてみたいと思います。 |
||||||
 |
||||||
| みなさんも年末から連日のようにウェブマスターツールにスマホ化の警告が来て困ってませんか？ 最近になってGoogleから正式発表がありましたが、4月21日以降はスマホ対応していないサイトは検索結果の順位が落ちることが確定しているので、まだスマホ未対応の方は死ぬ気で頑張らないとですね。 僕の所にWMTにスマホ化の警告が始めて来たのは1月14日。「https://ryokoujapan.com/ でモバイル ユーザビリティ上の問題が検出されました」という文面のメールが来てWMT上にも警告が来ています。 僕の場合はHP作成ソフトを使ってHTMLサイトを作っているため、サイトは自動ではスマホ最適化はされません。アドセンスチームや周囲の同業者からは「スマホ化をすれば収益が増えるよ」とはずっと聞いていたですが、これまでずっと未対応でした。 まあ、スマホ化をしなかった理由は単に面倒くさかったからですがね。こんな事に時間を割くくらいなら新しいページを作った方が収益が上がるだろうと考えていたのです。 スマホ化が簡単に変更できるなら速攻でやってましたが、なんせ古いサイトは作ってから10年以上たっているものもあるわけで、そりゃもう一から作り直しレベルの修正を自分でやる必要があるわけです。僕みたいな人はスマホ化には相当な時間が必要となります。 とは言え今回はWMTに直接警告が来たので修正しないわけにはいかないだろうという事でようやく重い腰を上げる決断をしたっちゅうわけでございます。 |
||||||
スマホ化が必要なページや具体的な箇所はどうやって調べるの？ |
||||||
| スマホ化するべきサイトやスマホ未対応ページがどのページなのかを知るにはWMT（ウェブマスターツール）を利用するのが基本ですね。まずはWMTからご説明します。 「ばっか野郎、WMTなんてとうに知ってるわ、意外な方法でも何でもねーじゃねーの」と罵声が飛びそうですが、後からちゃんと説明しますので・・・ ウェブマスターツールの管理画面を開いたらサイドバーにメッセージ届いているかを確認してみましょう。「すべてのメッセージ○件」とい文字をクリックすると以下の画面に切り替わるはずです。 |
||||||
 |
||||||
次に、上記キャプチャー内の□で囲った部分にある「モバイルの問題を調べる」のバナーをクリックすると以下の画面に移動するはずです。そこにモバイル化での問題点があれば表示されているはずです。 僕の場合は・・・ 1.コンテンツのサイズがビューポートに対応していません 2.ビューポートが設定されていません 3.フォントサイズが小です この３つとなっています。でも、殆どの方は僕と同じではないでしょうか。ビューポート？設定？どゆこと？初心者にはさっぱりだと思います。僕も最初はあんまり良く分かっていませんでした。 超簡単に説明しますと・・・ ビューポートを設定するとは、ユーザーが利用する媒体（PC・スマホ・タブレット）に合わせてサイトの横幅をぴったり表示させることです。これは<head>内にビューポートタグが記述されていないと警告を受けます。1と2は同じ対策をすれば多分クリア出来ます。 フォントサイズはもちろん文字の大きさのこと。字が小さすぎると同じく怒られます。読みやすい大きさにすれば警告が消えます。 まずは最低限この３つを対策するとスマホの検索結果一覧にめでたくスマホ対応の文字が出るようになります。 例えば「グーグルくだばれ」で検索すると最低限のスマホ化が完了していると、スマホ上の検索画面ではこんな感じで表示されることになります。PC版（見にくいけど・・・）と比較すると一目瞭然ですね。
スマホ対応サイトと認定されるには先ほどの３項目が特に重要といえます。今の所はこの３つを修正すれば大丈夫なようです。とは言え、検索は相対的なものなのでライバルサイトをチェックして、より上位に表示されるようモバイル向けに最適化するのは今後は必須項目になると思いますよ。 と、ここまではウェブマスターツールを導入している運営者のみが利用できるサービスで殆どの方は知っていると思います。 ここをご覧の方中には「オラはブロガーだ。稼ぎ重視のアフィリエイターじゃねえからWMTに登録なんてしてねえよ」って方もいることでしょう。 そんな方にはWMT以外で皆さんがよくご存知のモバイル化チェックツールがあります。（ようやく本題に突入w）あ、それ・ワン・ツー・いやっほ～い！カンペーイ！！ |
||||||
ウェブマスターツールを導入していない。具体的なスマホ対応の仕方が分からない時は？ |
||||||
| ブロガーさんでもウェブマスターツールは登録してないけどアドセンスには登録しているって方はかなり多いと思います。 実はこのアドセンスの管理画面でWMTよりも具体的で分かりやすい「モバイル化についてのアドバイス」が見れることはご存知でしたか？ では、その方法についてご説明します。 まずアドセンスの管理画面にログイン。下が管理画面です。□で囲った部分がスコアカードと呼ばれるサイトのアドセンス最適化がどの程度されているかを●の数で4段階に表したものです。（僕の場合は悪すぎますねｗ）  このスコアカードって奴、使えなさ過ぎて導入時にチラ見した程度でそれ以降は利用したがないって方は多いはずです。ところが今、とんでもなく便利になってるのですよ。ビビりますよ。 では早速、□で囲ったスコアカードの「サイトの状況」をクリックしましょう。他はこれまで同様、あまり使えないので無視して結構です。クリックすると以下の画面が現れます。  これはPC・スマホそれぞれでアドセンスが最適化されてませんよという微警告です。今回はスマホ対応ということなので最適化されていないアドレスをクリックしてみます。 そうすると「PageSpeed Insights」という別ページに飛ばされてアドセンス上でユーザビリティの悪い修正箇所を知ることが出来ます。  これはあくまでアドセンスにおけるスマホ最適化ですが、WMTに来ている警告内容と重なる項目も多いですし、WMTより分かりやすく更に踏み込んだ提案をしてくれています。  修正すべきカテゴリは、「表示速度」と「ユーザーエクスペリエンス」の2つですが、サイトのモバイル化がどの程度最適化されているかを知るには「ユーザーエクスペリエンス」の項目を確認することになります。ユーザーエクスペリエンスのカテゴリは速度カテゴリの下の方にあるのでサクサクと画面下へスクロールしましょう。 |
||||||
 クリックしたアドレスのページで修正が必要なのは、！（修正必要）が、画像の最適化・レンダリングの修正・ブラウザのキャッシュの活用となっています。また、！（修正考慮）では、画像の圧縮・CSSを縮小する・HTMLを縮小するとなっています。レの項目は4個が合格となっていました。と、ここまでならWMTとさほど変わりませんよね。では修正方法を表示するという文面をクリックしてみて下さい。以下は「タップターゲットのサイズを適切に調整する」という項目をクリックした時の画面です。 WMTでは具体的にどのタグが修正必要なのか良く分かりませんでしたが、こちらでは具体的に書かれているのでとても便利です。  速度に関しては数字を使ってどのくらいページが軽くなるかも分かるようになっています。ページが軽いと表示速度が上がりユーザーの離脱率を大幅に下げることが出来ます。スマホ化とは関係ありませんが、PCに比べて性能が劣るスマホはページが重いと表示速度が悪くなる傾向があります。出来ればこの機会に修正しておくと良いと思います。 ウェブマスターツールも導入していないアドセンスも導入していないって方はどうすんのって話ですが、検索結果を見て自力で未対応ページを探して頑張りましょうｗｗｗ |
||||||
| 久々に記事を書いたので、支離滅裂、文章もおかしい部分もあり見苦しいと思いますが、無償で無料で情報を提供しているサイトのため、見直しも無しでさっと書いたのでその点はご了承くださいませませ。 | ||||||
Tweet |
||||||
|
||||||
 |
||||||
| 花よりも花を咲かせる土になれ | ||||||
| copyright© 花よりも花を咲かせる土になれ all rights reserved. |
||||||
|
Webプロデュース業を営むフリーランス。淡路島という離島のど田舎で記事書いて畑耕して生活してます。マイペースで他人と自分を比べたり競争したりしない超草食系男子。人生セミリタイアちう。2014年の最高月間PVは300万PVほど。殆ど表には出ない人。