noteで書く今日は、グーグルのモバイルフレンドリー条件を満たし、「スマホ対応」ラベルが問題なく出るようにするために、Web担で行ったやり方を解説します。3つのことをするだけで、スマホ対応は問題なくできるのです。スマホ対応してないサイトのグーグル検索順位が落ちるご存じだと思いますが、念のために説明すると、2015年4月21日から、スマートフォンでグーグル検索したときに、スマホ対応がされていないサイトの検索順位が落ちる予定です。グーグルさんいわく「結構なインパクトがある」とのこと。すれば「スマホ対応」になるのでしょうか。Web担では、半日程度の作業で約2万ページを「スマホ対応」にしましたので、そのためにやったことを解説します。「スマホ対応」ラベルを出すために僕がやった3つのこと「グーグルにスマホ対応だと認識してもらう」ための作業は、実はそんなに大変ではありません。Web担を「スマホ対応」にする作業は、デザインの微調整などあったため半日ちょっとかかっているのですが、微調整を除く主要な部分にかかった時間は1時間程度でした。やったのは、次のことです。全ページにビューポートを適切に指定するようにHTMLテンプレートを修正した画像をレスポンシブ対応にするCSSを指定した表示を微調整したそれぞれについて説明しますね。全ページにビューポートを適切に指定するようにHTMLテンプレートを修正したCMSで利用しているテンプレートで、HTMLの<head>セクションに、ビューポート(画面に対してどうページを表示するかの指定)を指定する以下のmetaタグを追加しました。initial-scale=1.0">Web担では、以前からスマホ向けにはPC向けと同様にコンテンツエリアを横幅606pxで表示するビューポート指定をしていたのですが、それを修正した形です。HTML内にビューポートを指定するmetaタグを入れていなければ、上記のタグを入れれば大丈夫です。サイドバー類を消して1カラムにするには?Web担では、もともとスマホ向けにはサイドバーなどを除いたHTMLを出力していましたのでこれだけで大丈夫だったのですが、サイドバーのある2カラムや3カラムのレイアウトの場合は、さらに次のようにして、スマホで表示されたときにサイドバー類を消して、コンテンツエリアだけにする必要があるでしょう。※下記の「#sidebar_left」「#sidebar_right」「#main_content」などは、対応するクラス名やID名を指定するセレクタに変えてください。}}</style>画像をレスポンシブ対応にするCSSを指定した横幅が大きい画像を記事で使っていても、画面からはみ出さなくするための処理です。具体的には、CSSファイルで、画像に次のようなスタイルを設定しました。}}</style>※max-widthを100%ではなく98%にしているのは、Web担は作りが古いため、基本的にbox-sizingがborder-boxではなくcontent-boxだから、border込みでも100%を超えないようにするためです。実際にはこれ以外にも、幅を指定している画像のラッパーdivやiframeにも同様のスタイルを指定する必要があります。そのためWeb担では、単純に<img>タグなどのCSSを指定するのではなく、CMSのプラグインを作成して、そうした処理を自動実行するようにしました。表示を微調整した実は、上記の2つだけで、グーグル向けの対応は、ほぼ完了なのです。それだけではスマホで見たときにデザインが崩れて見えてしまうので、スマホ向けの表示調整をしました。こんな感じのことです。}}</style>トップページなど、どうしても左右寄せして表示したい場所や、横幅指定で作っていたレイアウト部分のスタイルを微調整グローバルナビなど全体共通部分を、スマホ表示時にもおかしくならないように調整などなどこれで、ほぼすべてのページが、グーグルで「スマホ対応」と表示されるようになり、さらにユーザーが見えてもおかしくないようにできました。実際には、編集部で気づいてないところで表示がおかしくなっているかもしれませんが、もし見つけた方は、ぜひ教えてくださいませ(スマホ表示のときだけ、そういう「表示崩れを報告する」フォームを出すのもいいかもしれませんね)。グーグルの「スマホ対応」判断は5つ4月21日の時点でグーグルが判断するのは、次の5つの内容です。ユーザビリティ]に表示されているものです。グーグルの人は、モバイルフレンドリーに関しては次のように説明しています。順位に影響するモバイルフレンドリーの指標は、ウェブマスターツールに出てくるものが、現状ではすべて。モバイルフレンドリーテストで問題なしと表示されていれば、レスポンシブかどうかなどは関係ない。モバイルフレンドリーかどうかの判断であって、「どの程度モバイル対応しているか」という段階的評価ではない。評価はページ単位で、サイト単位ではない。ナビゲーショナルクエリでは、モバイル非対応でもちゃんと表示されるはず。現状ではモバイル版ページの表示速度は影響しない。前述のような作業をすれば、5つのチェック内容のうち、上の2つ(ビューポート関連の2つ)は解決できますフォントサイズに関しては、ビューポートをちゃんと指定すれば、よほど小さいフォントを使っていない限り、問題ないはずです。リンクなどのタップ要素が近すぎないかという点に関しては、グローバルナビのメニューなど、特定の部分ではひっかかるかもしれません。いう場所はモバイル版だけCSSで微調整しておくといいでしょう。Flashに関しては、もしサイト全体で使っていたら、修正するしかないですね。イマドキFlashを使いまくっているサイトはないですよね。Web担では、一部の記事でFlashを使っていたので(特にMozの古い記事でYouTubeなどをの動画を埋め込んでいるもの)、それは1つずつ新しいHTML5版の埋め込みコードに修正していきました。「スマホ対応」のラベルを出すのは大変そうに見えるかもしれませんが、実際にはこの記事で解説したように、ちゃんとやれば大変ではありません。B2Bのサイトでも、ソーシャルメディア経由など、スマホで見られることがけっこうありますから、まずはざっと対応してみてはいかがでしょうか。「Web担当者Forum」編集長。個人としては、技術とマーケティングの融合によるインターネットのビジネス活用の新しい姿と、ブログ/CGM時代におけるメディアのあるべき姿を模索し続けている。趣味は素人プログラミングと上方落語と南インドカレー。AdWordsが消滅、18年の歴史を終え「Google広告」へ。最近(過去90日間)の記事で、Facebookの「いいね!」が多かった記事をお見逃し無く。ネット広告への強い嫌悪感、テレビや新聞の倍以上に。いいね!伝説のTwitter企業アカウント“中の人”の先駆け。いいね!私は変人コレクター。いいね!「おもてなし」は思考停止ワード。「おもてなし」は思考停止ワード。2/24~2/28のマーケティング、インサイドセールス、データ分析、EC、SEOなど他社セミナー情報52件Web担編集部がゼロから学ぶ、Tableau「BI講座」。Patterns』を3名様にプレゼント!【受付終了】企業がDXに向かう取り組み方を考える『デジタルファースト・ソサエティ』を3名様にプレゼント!すべて見るインフォメーションWeb担のメルマガを購読しませんか?Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。編集後記サイトマップFAQ(よくある質問とその答)Web担に広告を掲載しませんか?購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。