ヨコハマとともに生きるクリエイティブ研究サイト
「スマホ対応」ラベルが表示されるモバイルフレンドリーアップデートが開始されて約３週間が経ちました。スマホサイトは用意したけど、ちゃんと対応できているか心配…という方向けに、今回はモバイルフレンドリーに合格しているかを簡単にチェックできる、Chromeの拡張機能を紹介します。
名前の通り、サイトがモバイルフレンドリーになっているかチェックできる拡張機能になります。使い方は簡単で、チェックしたいサイトにアクセスするだけ！ モバイルフレンドリーの評価は0〜100の総合点で表示され、チェックされる各項目ごとに点数が表示されるため、モバイルフレンドリーにならない原因が一目で分かります。
・Viewport Configuration
…Viewport（ビューポート）は設定されているか？・Font Legibility
…読みやすいフォントサイズになっているか？・Use of Incompatible Plugins
…プラグイン（Flash、Silverlight、Java）は使用していないか？・Content To Viewport
…コンテンツのサイズがビューポートに合っているか？・Size and Proximity of Links
…タップエリアのサイズは適切か？
公式のモバイルフレンドリーテストでは、１ページずつURLを入力しなければならないところを、アクセスしたページでチェックできるため大幅に手間が省けます。
さらに手間が省ける、URLを一気に開く拡張機能はこちら
リンクに背景色をつけて表示する拡張機能になります。タップできるエリアがハイライトされるため、「タップエリアのサイズは適切か？」の項目にエラーが出ている場合に有効です。
使い方は、まずChromeのディベロッパーツール＞エミュレーターよりスマホ表示にし、「Start check!」をクリックするだけです。
タップできる範囲が緑色にハイライトされます。
また、この拡張機能をおススメする点としては、ドロワーメニューやアコーディオンで格納されたリンクに対してもチェックできるため、漏れなく確認ができます。
ただ、残念なことに背景画像を設定したリンクや、Javascriptなどでタップエリアを設定したものに対しては無効になってしまうので注意が必要です。
PC、タブレット、スマホ、ガラケーの各デバイスサイズに、ビューポートを変更してくれる拡張機能になります。こちら、エミュレーターで変換したサイトには使えないため、レスポンシブデザインでスマホサイトを用意している方にはおススメです。
使い方は、各デバイスごとのアイコンが表示されていますので、確認したいデバイスをクリックすることでビューポートが変更されます。基本的にはポートレート（縦長）表示ですが、もう一度アイコンをクリックすれば、ランドスケープ（横長）表示にもなります。
また、「Animate」をクリックすると自動的にビューポートが可変されますので、コンテンツがデバイスサイズからはみ出てしまうなどのバグを容易く発見できます。
スマホサイトを用意したら、ぜひ「モバイルフレンドリー」かどうかもチェックするようにして下さいね。
モバイルラボ 編集部
ヨコハマ・モバイルラボとは？
モバイルならではの表現ってなんだろう？
一瞬のひらめきや感動は手のひらから始まっています。
新しいクリエイティブのカタチをここから探してみましょう。 
Mobify（モビファイ）とは
Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。
