ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

スマホ対応に欠かせないツール類とサイト制作のポイント!モバイル検索に備えよう

Googleは2015年4月21日以降に、モバイル検索結果でスマホ対応サイトを優遇すると発表しました。そこで今回は、スマホ対応に欠かせないツール類とサイト制作におけるポイントを紹介します。

ゆめぴょん(@yume_pyon)です。こんちはっ!

ついにスマートフォン対応サイトが検索結果で優遇される時がきましたね。このブログのWordPressテーマは自作ですが、まずスマホ用から作成して、PC用デザインはスマホ用CSSを上書きするような形で生成しています。

新しいWordPressテーマの特徴7つを大公開!SEO対策やメンテ性を向上!タブレットも特化新しいWordPressテーマの特徴7つを大公開!SEO対策やメンテ性を向上!タブレットも特化

このブログのWordPressテーマ(デザインや機能)をゼロから作りなおしました…

今回はこのブログのテーマだけでなく、他のサイトやテーマ作成時に心がけたモバイル・スマホ対応の方法なども共有したいと思います。その前にまずスマホ対応の診断に欠かせないツール類を紹介します。

スマホ対応サイトへの診断ツール群

Googleが実施する、スマホ対応サイトのモバイル検索結果に向けて、まず目指すべき2つの目標はつぎのとおりです。

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

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

Googleが公開したモバイル フレンドリー テストというツールで「問題ありません」と表示されれば、スマホ対応は合格という事になります。

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

2.モバイル検索結果で「スマホ対応」

スマホ、タブレットなどでGoogle検索した時に、モバイルに最適化されたサイトやブログには「スマホ対応」と表示されるようになりました。

サイト制作におけるスマホ対応

「スマホ対応」が表示される条件はいろいろあるのですが、「モバイル フレンドリー テスト」で問題がなければほぼ表示されそうです。

当面はこの2つの指標をクリアできるようにサイト制作して行くことが目標となりそうです。ちなみにGoogleはこれ以外にもいくつかモバイル用の診断ツールを公開しています。簡単に紹介します。

3.モバイルユーザビリティ(ウェブマスターツール)

Googleウェブマスターツールには、サイト制作者にとって欠かせない機能やツールがたくさんあります。昨年あたりからは、スマホ対応する上で役立つものも追加されています。

ウェブマスターツールの左メニューから「検索トラフィック」>「モバイルユーザビリティ」をクリックすると、サイト・ブログがモバイル対応する上で問題になっている点などを教えてもらえます。

ウエブマスターツールのモバイルユーザビリティレポート

スマホ対応に問題がなければ、上のように、問題があれば下のように具体的な内容を教えてくれます。

ウエブマスターツールのモバイルユーザビリティレポート

「モバイル フレンドリー テスト」と似ていますが異なる点は下のとおりです。

  • モバイルユーザビリティは、自分のサイトしか診断できない
  • モバイルユーザビリティは、サイト全体のページ単位が一発で把握できる
  • モバイルフレンドリーテストは、ページ修正直後に即時診断が可能

自分のサイト以外を調べる場合は「モバイルフレンドリーテスト」でのみ可能です。自分のサイト・ブログの場合は、全体をページ単位で診断できる「モバイルユーザビリティ」が便利ですが、反映されるまでは時間がかかる場合もあります。

それぞれのツールの長所を考えて使い分けるのが良いでしょう。ちなみに「スマホ対応」の判断はサイト単位ではなく、ページ単位であることをGoogleは名言しているようです。

Googleモバイル検索結果ではどちらの指標を使うのか、はじまってみないとわかりませんが、インデックスがベースと考えると「モバイルユーザビリティ」の方が有力ですね。対策は早く始めることをオススメします。

4.Fetch as Google(ウェブマスターツール)

Googleウェブマスターツールではもう1つ、左メニューの「クロール」>「Fetch as Google」で、スマートフォンでの表示結果を見ることができます。Googleが見ている景色が見れるので貴重なツールです。

Fetch as Googleの入力欄に、診断したいページのURLを入力してください。httpやドメインは削除したパーマリンク部分のみでOKです。そしてPCを「モバイル: スマートフォン」に変更して「取得してレンダリング」ボタンを押してください。

ページによってはしばらく時間がかかるかもしれませんが、結果は下のように表示されます。

ウエブマスターツールのFetch as Googleのレンダリング取得

実際の表示とずれてたり、表示されてない部分などがある場合は「robots.txt」でJavaScriptやCSSをクロール拒否していないか確認した方がいいでしょう。

ウェブマスターツールのレンダリング診断でrobots.txtを見なおす方法ウェブマスターツールのレンダリング診断でrobots.txtを見なおす方法

ウェブマスターツールのFetch as Googleで、サイトのレンダリング診断…

Googleウェブマスターツールには他にも便利な機能がたくさんあります。興味ある人は、下の記事も参考にしてくださいね。

保存版!Googleウェブマスターツール/Search Consoleの使い方はSEOの第一歩保存版!Googleウェブマスターツール/Search Consoleの使い方はSEOの第一歩175 shares

ブログやウェブサイトを制作したら、SEO対策にこだわる前に、まずGoogleウェ…

5.PageSpeed Insights

表示の速さは、SEOや検索結果への直接的な影響はまだ少なそうですが、今後はもっと左右されるかもしれません。特にスマホやタブレットは、PCと比べるとCPUパワーや通信速度が劣るため、表示が遅いと読者に離脱される確率も高まります。

「PageSpeed Insights」はGoogleが提供する、表示速度に特化した診断ツールです。GTmetrixPingdomなどの有名ツールにはない、スマホ画面での表示スピード診断機能があるのが特徴です。

PageSpeed Insights

ただし今はまだ、PC・スマホのGoogle検索結果とも、PCの表示速度のみが影響しているようです。もちろん将来的には、モバイル検索結果は、スマホ画面での表示速度で判断されるようになると思われますが。

いずれにしろ、サイトの表示速度向上は読者のためにも必要な課題です。下の記事も参考にしてください。

Webサイト高速化の記事一覧

スマホ対応サイト作成のポイント

今回はWordPressなど特定のCMSには特化しないサイト制作についての、スマホ対応のポイントを紹介します。今回特にはふれませんが「Flashを使わない」のは原則です。

1.ビューポート/viewportの設定

サイトの最上部(headタグの直後や、CSS定義の前が望ましい)でビューポートの設定を忘れないようにしましょう。

特にスマホやタブレットではほぼ必須の設定です。記述法については細かくなるので、ここでは解説しませんが、まだあいまいな人は調べてくださいね。例えば下のように書くと、端末画面サイズにあわせて表示され、ピンチでの拡大縮小も可能になります。

2.文字や行間、段落文字数、リンクを適切な大きさや長さに

スマホ用のフォントサイズは14px以上だとか、最低16pxとかいろんな意見がありますが、サイトの作りによってバランスは違ってくるので一概には言いにくいです。ビューポートによって縮小される場合もあるので目視チェックが必須です。

また記事を書く人は、1段落の文字数にも配慮する必要があります。PC版で4行以上の場合は、スマホでは8行になったりして読みにくくなります。私はスマホでも5行くらいを心がけてますが、実際は4行に収めたいとも思ってます。

スマートフォンやタブレットでは、リンクやボタンを指でタッチして操作します。だからPCでのマウスのように繊細なクリックはできません。複数のリンクが近すぎると誤クリックになりやすくて、読者もいらいらすることでしょう。

タップできる領域(リンク部分)は、縦も横も広めにして、隣リンクとの間の余白も長めにとりましょう。Googleのツール「ユーザーフレンドリーテスト」「ユーザビリティ」「PageSpeed」などでもチェックされるポイントです。

3.横スクロールや横グラグラしないように設計

企業サイトでもたまにあるのですが、スマホで横にグラグラするとスクロールしづらいため、全文読む前に離脱されてしまいます。

主な原因としては、ビューポートの設定誤りや、画像や広告・SNSなどの埋め込みコンテンツがはみ出している場合です。横幅320px以上の埋め込みコンテンツを表示する場合は、PCとスマホで条件分岐して出し分ける必要があります。

WordPress以外でも使える!スマホとタブレット・PCの振り分け方法まとめWordPress以外でも使える!スマホとタブレット・PCの振り分け方法まとめ84 shares

スマホとPC・タブレットでのデザインや見栄えを変えるための判別方法を紹介します。…

画像がはみ出してしまう場合は、下のようなCSS/スタイルシートを全体に設定すると解消されます。ただしビューポートと、親要素の横幅(width)が適切に設定されていることが前提となります。

スマホ(特にiPhone)で入力フォームを使う場合は、フォーカスすると画面が拡大されてしまい、その後はグラグラしてしまいます。下の記事を参考にして対処してください。

【スマホサイト作成】iPhoneでフォームにフォーカス時に画面拡大しない方法【スマホサイト作成】iPhoneでフォームにフォーカス時に画面拡大しない方法

このブログのスマホ版のデザインでは、アイコンクリックで検索フォームを表示させてい…

4.狭い画面なので最大限に工夫。遷移も少なめに

PC版とは違い、スマホではサイドバーを表示するのは現実的ではありません。スライドメニューにしたり、アコーディオン、モーダルウィンドウなどを用いての工夫が必要になります。私はjQueryと数行のみで実現してましたが、今はページ内スクロールで対応してます。

【スマホサイト作成】jQueryで簡単!ふわっとメニューのアイコン設置方法【スマホサイト作成】jQueryで簡単!ふわっとメニューのアイコン設置方法

jQueryを使ってカテゴリーなどのナビゲーションメニューをふわっと出現させる方…

コピペでOK!スムーススクロールでページ内リンクやトップへ移動!#なしでコピペでOK!スムーススクロールでページ内リンクやトップへ移動!#なしで24 shares

記事が長い場合、目次やページ先頭「#」へのページ内リンクはとても便利です。しかも…

通信回線も遅いため、画面遷移も少ない方が利用しやすいです。このブログでも一覧ページでは、画面遷移なしで次ページを表示させたりしています。

jQueryのautopagerで次ページを画面遷移なしで自動読込みする方法jQueryのautopagerで次ページを画面遷移なしで自動読込みする方法17 shares

jQueryプラグインautopagerを使うと、ツイッターなどでも導入されてい…

5.画像・SNSボタン・JavaScriptなどを圧縮・適切に配置

画像は、PCとスマホで出し分けるのが理想ですが、数種類の画像を用意する手間や、条件分岐処理で負荷をかけることもあるため、自動化できないのなら現実的ではありません。

それに最近のモバイルデバイスは、Retinaなど高解像度化が進んでいるので、いずれPC版と同等レベルの画像が見れるようになりそうです。それでも最低限、画像の圧縮はしておくことをオススメします。

私がよく使うのは、JPGなら「JPEGmini」、PNGなら無料Webサービス「TinyPNG」や無料アプリ「ImageAlpha(Mac)」。また「ImageOptim(Mac)」「PNGGauntlet(Windows)」も併用すると更に圧縮可能です。

画像圧縮の方法にはCSSスプライトもあります。WordPressの場合は、プラグイン「EWWW Image Optimizer」がおすすめです。

CSSスプライト(Spirte)でWebサイトの画像表示を高速化!HTTPリクエストを減らすCSSスプライト(Spirte)でWebサイトの画像表示を高速化!HTTPリクエストを減らす

CSSスプライトを利用すると表示速度を高速化できます。しかし複数画像を1つにまと…

EWWW Image OptimizerプラグインでWordPress画像圧縮!表示も高速化EWWW Image OptimizerプラグインでWordPress画像圧縮!表示も高速化20 shares

WordPressプラグイン「EWWW Image Optimizer」はブログ…

SNSボタンも高速化の障害になりえますが、設置しないと良いコンテンツでもシェアされにくくなるので悩ましいです。このブログのスマホ用ではWordPressプラグインと、ウェブフォントでSNSボタンを自作しています。

【WordPress】オリジナルSNSボタン設置方法!スマホ用シェア数つきSNSアイコンも公開【WordPress】オリジナルSNSボタン設置方法!スマホ用シェア数つきSNSアイコンも公開87 shares

このブログではオリジナルのソーシャルボタンを設置して、サイト表示速度を高速化し、…

WordPress以外のソーシャルカウントの取得法は、下のサイトが参考になります。

ソーシャルカウントの取得方法まとめ(全9サイト)

JavaScriptやCSSも可能なものは圧縮しましょう。また特にJavaScriptは、支障がなければなるべく下方(body閉じタグの直前など)に配置した方が、レンダリングを阻害しないので望ましいです。

まとめ:今日のゆめぴょんの知恵

このブログでも、まだできてないことがあります。しかしスマホ対応はもはや必須となってきてるので、今後のサイト制作に役立ててもらえればうれしいです。

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:WordPress以外でも使える!スマホとタブレット・PCの振り分け方法まとめWordPressでスマホ対応する4つの方法とおすすめパーツのデザインを紹介:次記事»
ページ
↑先頭
ホーム