初代編集長ブログ―安田英久

グーグルで「スマホ対応」ラベルを出すために僕がやった3つのこと

グーグルのモバイルフレンドリー条件を満たし、「スマホ対応」ラベルが問題なく出るようにするのは意外と簡単なのです

安田英久（Web担編集統括） 2015/4/7 11:00 モバイル | コラム

164 128 178

今日は、グーグルのモバイルフレンドリー条件を満たし、「スマホ対応」ラベルが問題なく出るようにするために、Web担で行ったやり方を解説します。たった3つのことをするだけで、スマホ対応は問題なくできるのです。

スマホ対応してないサイトのグーグル検索順位が落ちる

ご存じだと思いますが、念のために説明すると、2015年4月21日から、スマートフォンでグーグル検索したときに、スマホ対応がされていないサイトの検索順位が落ちる予定です。

グーグルさんいわく「結構なインパクトがある」とのこと。

では、どうすれば「スマホ対応」になるのでしょうか。

Web担では、半日程度の作業で約2万ページを「スマホ対応」にしましたので、そのためにやったことを解説します。

「スマホ対応」ラベルを出すために僕がやった3つのこと

「グーグルにスマホ対応だと認識してもらう」ための作業は、実はそんなに大変ではありません。Web担を「スマホ対応」にする作業は、デザインの微調整などあったため半日ちょっとかかっているのですが、微調整を除く主要な部分にかかった時間は1時間程度でした。

やったのは、次のことです。

全ページにビューポートを適切に指定するようにHTMLテンプレートを修正した
画像をレスポンシブ対応にするCSSを指定した
表示を微調整した

それぞれについて説明しますね。

全ページにビューポートを適切に指定するようにHTMLテンプレートを修正した
CMSで利用しているテンプレートで、HTMLの<head>セクションに、ビューポート（画面に対してどうページを表示するかの指定）を指定する以下のmetaタグを追加しました。
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
Web担では、以前からスマホ向けにはPC向けと同様にコンテンツエリアを横幅606pxで表示するビューポート指定をしていたのですが、それを修正した形です。
まだHTML内にビューポートを指定するmetaタグを入れていなければ、上記のタグを入れれば大丈夫です。
サイドバー類を消して1カラムにするには？
Web担では、もともとスマホ向けにはサイドバーなどを除いたHTMLを出力していましたのでこれだけで大丈夫だったのですが、サイドバーのある2カラムや3カラムのレイアウトの場合は、さらに次のようにして、スマホで表示されたときにサイドバー類を消して、コンテンツエリアだけにする必要があるでしょう。
サイドバー類をスマホで消すCSS　※下記の「#sidebar_left」「#sidebar_right」「#main_content」などは、対応するクラス名やID名を指定するセレクタに変えてください。
```
<style>
/* 横幅480px以下の場合のみ適用 */
@media (max-width: 480px) {
  /* サイドバーを消す*/
  #sidebar_left, #sidebar_right{
    display: none;
  }
  /* コンテンツエリアをflotなし幅100%でちゃんと表示する
  #main_content{
    float: none;
    width: 100%;
  }
}
</style>
```
画像をレスポンシブ対応にするCSSを指定した
横幅が大きい画像を記事で使っていても、画面からはみ出さなくするための処理です。
具体的には、CSSファイルで、画像に次のようなスタイルを設定しました。
```
<style>
/* 横幅480px以下の場合のみ適用 */
@media (max-width: 480px) {
  img{
    max-width: 98%;
    height: auto;
  }
}
</style>
```
※max-widthを100%ではなく98%にしているのは、Web担は作りが古いため、基本的にbox-sizingがborder-boxではなくcontent-boxだから、border込みでも100%を超えないようにするためです。
実際にはこれ以外にも、幅を指定している画像のラッパーdivやiframeにも同様のスタイルを指定する必要があります。
そのためWeb担では、単純に<img>タグなどのCSSを指定するのではなく、CMSのプラグインを作成して、そうした処理を自動実行するようにしました。
表示を微調整した
実は、上記の2つだけで、グーグル向けの対応は、ほぼ完了なのです。
でも、それだけではスマホで見たときにデザインが崩れて見えてしまうので、スマホ向けの表示調整をしました。たとえばこんな感じのことです。
- 記事内で左右寄せにしている画像は中央寄せに強制変更するようにCSSを変更
```
<style>
/* 横幅480px以下の場合のみ適用 */
@media (max-width: 480px) {
  .image-box-left, .image-box-right{
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
}
</style>
```
- トップページなど、どうしても左右寄せして表示したい場所や、横幅指定で作っていたレイアウト部分のスタイルを微調整
- グローバルナビなど全体共通部分を、スマホ表示時にもおかしくならないように調整
- などなど

これで、ほぼすべてのページが、グーグルで「スマホ対応」と表示されるようになり、さらにユーザーが見えてもおかしくないようにできました。

実際には、編集部で気づいてないところで表示がおかしくなっているかもしれませんが、もし見つけた方は、ぜひ教えてくださいませ（スマホ表示のときだけ、そういう「表示崩れを報告する」フォームを出すのもいいかもしれませんね）。

グーグルの「スマホ対応」判断は5つ

4月21日の時点でグーグルが判断するのは、次の5つの内容です。

ビューポートを適切に指定しているかどうか
コンテンツがビューポートにちゃんと収まっているか
フォントサイズが小さすぎないか
リンクなどタップ要素が近すぎないか
Flashを使ってないか

これは、ウェブマスターツールの［検索トラフィック］＞［モバイルユーザビリティ］に表示されているものです。

グーグルの人は、モバイルフレンドリーに関しては次のように説明しています。

順位に影響するモバイルフレンドリーの指標は、ウェブマスターツールに出てくるものが、現状ではすべて。
モバイルフレンドリーテストで問題なしと表示されていれば、レスポンシブかどうかなどは関係ない。
モバイルフレンドリーかどうかの判断であって、「どの程度モバイル対応しているか」という段階的評価ではない。
評価はページ単位で、サイト単位ではない。
ナビゲーショナルクエリでは、モバイル非対応でもちゃんと表示されるはず。
現状ではモバイル版ページの表示速度は影響しない。

前述のような作業をすれば、5つのチェック内容のうち、上の2つ（ビューポート関連の2つ）は解決できます

フォントサイズに関しては、ビューポートをちゃんと指定すれば、よほど小さいフォントを使っていない限り、問題ないはずです。

リンクなどのタップ要素が近すぎないかという点に関しては、グローバルナビのメニューなど、特定の部分ではひっかかるかもしれません。とりあえず、そういう場所はモバイル版だけCSSで微調整しておくといいでしょう。

Flashに関しては、もしサイト全体で使っていたら、修正するしかないですね。でも、さすがにイマドキFlashを使いまくっているサイトはないですよね。

Web担では、一部の記事でFlashを使っていたので（特にMozの古い記事でYouTubeなどをの動画を埋め込んでいるもの）、それは1つずつ新しいHTML5版の埋め込みコードに修正していきました。

◇◇◇

「スマホ対応」のラベルを出すのは大変そうに見えるかもしれませんが、実際にはこの記事で解説したように、ちゃんとやれば大変ではありません。

B2Bのサイトでも、ソーシャルメディア経由など、スマホで見られることがけっこうありますから、まずはざっと対応してみてはいかがでしょうか。