グーグルで「スマホ対応」ラベルを出すために僕がやった3つのこと | 編集長ブログ―安田英久 | Web担当者Forum

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

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

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

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

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

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

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

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

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

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

1. 全ページにビューポートを適切に指定するようにHTMLテンプレートを修正した

   CMSで利用しているテンプレートで、HTMLの

   セクションに、ビューポート（画面に対してどうページを表示するかの指定）を指定する以下のmetaタグを追加しました。

   Web担では、以前からスマホ向けにはPC向けと同様にコンテンツエリアを横幅606pxで表示するビューポート指定をしていたのですが、それを修正した形です。

   まだHTML内にビューポートを指定するmetaタグを入れていなければ、上記のタグを入れれば大丈夫です。

   サイドバー類を消して1カラムにするには？

   Web担では、もともとスマホ向けにはサイドバーなどを除いたHTMLを出力していましたのでこれだけで大丈夫だったのですが、サイドバーのある2カラムや3カラムのレイアウトの場合は、さらに次のようにして、スマホで表示されたときにサイドバー類を消して、コンテンツエリアだけにする必要があるでしょう。

   サイドバー類をスマホで消すCSS　※下記の「#sidebar_left」「#sidebar_right」「#main_content」などは、対応するクラス名やID名を指定するセレクタに変えてください。

2. 画像をレスポンシブ対応にするCSSを指定した

   横幅が大きい画像を記事で使っていても、画面からはみ出さなくするための処理です。

   具体的には、CSSファイルで、画像に次のようなスタイルを設定しました。

   ※max-widthを100%ではなく98%にしているのは、Web担は作りが古いため、基本的にbox-sizingがborder-boxではなくcontent-boxだから、border込みでも100%を超えないようにするためです。

   実際にはこれ以外にも、幅を指定している画像のラッパーdivやiframeにも同様のスタイルを指定する必要があります。

   そのためWeb担では、単純にタグなどのCSSを指定するのではなく、CMSのプラグインを作成して、そうした処理を自動実行するようにしました。

3. 表示を微調整した

   実は、上記の2つだけで、グーグル向けの対応は、ほぼ完了なのです。

   でも、それだけではスマホで見たときにデザインが崩れて見えてしまうので、スマホ向けの表示調整をしました。たとえばこんな感じのことです。

   • 記事内で左右寄せにしている画像は中央寄せに強制変更するようにCSSを変更

   • トップページなど、どうしても左右寄せして表示したい場所や、横幅指定で作っていたレイアウト部分のスタイルを微調整

   • グローバルナビなど全体共通部分を、スマホ表示時にもおかしくならないように調整

   • などなど

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• ウェブマスターツール
  https://www.google.com/webmasters/?hl=ja
• モバイルフレンドリーテスト
  https://www.google.com/webmasters/tools/mobile-friendly/?hl=ja

※このコンテンツはWebサイト「Web担当者Forum - 企業ホームページとネットマーケティングの実践情報サイト - SEO/SEM アクセス解析 CMS ユーザビリティなど」で公開されている記事のフィードに含まれているものです。
オリジナル記事：グーグルで「スマホ対応」ラベルを出すために僕がやった3つのこと | 編集長ブログ―安田英久 | Web担当者Forum
Copyright (C) IMPRESS CORPORATION, an Impress Group company. All rights reserved.

この記事の筆者

安田 英久（やすだ・ひでひさ）

株式会社インプレスビジネスメディア
Web担当者Forum 編集長

プログラミングやサーバー、データベースなどの技術系翻訳書や雑誌『インターネットマガジン』などの編集や出版営業を経て、現在Webサイト 「Web担当者Forum」編集長。ビジネスにおけるWebサイトの企画・構築・運用と、オンラインマーケティングの2軸をテーマにメディアを展開してい る。

個人としては、技術とマーケティングの融合によるインターネットのビジネス活用の新しい姿と、ブログ/CGM時代におけるメディアのあるべき姿を模 索し続けている。趣味は素人プログラミングと上方落語と南インドカレー。

→安田英久（Web担 編集長）のプロフィールページ

→Google