最近、こんな件名のメールが届いているサイトが増えています。「モバイルユーザビリティ上の問題が検出されました」差出人はGoogleです。</span></li> </ol> </div>   <div id="main-and-sub"> <div id="news-main-contents"> <div class="contents"> <div id="news_whatsnew"><div id="news_whatsnew_Contents" style="clear:both;"><h2>「モバイルユーザビリティ上の問題が検出されました」とGoogleから痩身されるメールについて</h2> <div class="document"> <p><br />自サイトのURL　ウェブマスター様　と文面で</p> <p> </p> <p>Google のシステムは、貴サイトの○○ ページをテストし、そのうちの ○○% に重大なモバイルユーザビリティ上の問題を検出しました。この○ページの問題の影響で、モバイルユーザーは貴サイトを十分に表示して楽しむことができません。これらのページは Google 検索でモバイルフレンドリーとは見なされないため、スマートフォンユーザーにはそのように表示、ランク付けされます。<br /><br /></p> <p>------------------------------------------------------------</p> <p>Googleから、こんな内容のメールが届いたら、驚きますね。</p> <p>これは、Webマスターツール登録者宛に届くメールで、4月21日を前に、各サイト管理者に多数届いているようです。</p> <p>なぜ、こんなメールが届いているのかというと、「モバイル対応しないと、4月21日以降の検索結果に影響あるかも」<br />ということがGoogleからアナウンスされているからです</p> <p>。<br /><br />Google ウェブマスター向け公式ブログ<br />「検索結果をもっとモバイルフレンドリーに」という</p> <p>詳細は↓<br />http://googlewebmastercentral-ja.blogspot.jp/2015/02/finding-more-mobile-friendly-search.html</p> <p> </p> <p>Googleから『重大な問題』と指摘されると、なんだか恐ろしいですが、落ち着いてて考えてみましょう。</p> <p> </p> <p>「モバイルユーザビリティ上の問題」と書いてあります。</p> <p><img style="float: right; margin: 10px;" src="/images/news/mobile-google-a.jpg" alt="" width="450" height="419" /></p> <div><br />モバイル（スマフォ等）で検索した場合のリスクを、指摘してくれています。</div> <p>PCでの検索結果も含めて云々という話ではありません。モバイル検索での影響範囲がどの程度かはまだわかりませんが、</p> <p>モバイルからのアクセスが少ないBtoBサイトであれば、影響は軽微かもしれません。</p> <p> </p> <p>逆に、モバイルからのアクセスが多いBtoCサイトなどであれば、集客上、Googleでの検索ランキングが下がるのは死活問題となる可能性もありますので、<br />Webサイトのモバイル台頭に関して何かしら対策を行うことが必要でしょう。</p> <p> </p> <p>・自社サイトの本当のお客様がどこから来られているのか？　アクセス解析でしっかりと把握する</p> <p><br />・その数や価値がどれくらいか？　コンバージョン率等の把握</p> <p> </p> <h3><span id="2">1.</span>「モバイルの問題を調べる」ボタンをクリックし問題点を確認</h3> <p> </p> <p>以下の5つが指摘されていることが多いようです。</p> <p> </p> <p><span>　◯　</span>ビューポートが設定されていない。⇒<strong>viewport</strong><span>（</span><strong>ビューポート</strong><span>）とは、日本語に訳すと「表示領域」という言葉がしっくりくると思います。例えば、デスクトップ環境（PCなど）のブラウザなどでは、ブラウザウインドウの表示領域が</span><strong>viewport</strong><span>になります。ページがveiwportからはみ出た場合は、スクロールをして</span><strong>viewport</strong><span>を変えます。<a href="https://developers.google.com/speed/docs/insights/SizeContentToViewport?hl=ja" target="_blank"><img src="/trycms/icons/027.png" alt="" width="12" height="12" /></a></span></p> <p><span><br /></span></p> <p><span>　◯　</span>コンテンツのサイズがビューポートに合っていない。</p> <p> </p> <p><span>　◯　</span>タップ要素同士が近すぎる。⇒<span>リンクやボタン同士が十分に離れている状態にしてください。</span><a href="https://developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately" target="_blank"><img src="/trycms/icons/027.png" alt="" width="12" height="12" /></a></p> <p> </p> <p><span>　◯　</span>フォントが小である。⇒<span>すべてのフォントサイズがモバイルユーザビリティの標準に準拠しているようにしてください。<a href="https://developers.google.com/speed/docs/insights/UseLegibleFontSizes" target="_blank"><img src="/trycms/icons/027.png" alt="" width="12" height="12" /></a></span></p> <p><span><br /></span></p> <p><span>　◯　</span>Flashが使用されている</p> <p> </p> <p> </p> <h3><span id="2">2.対処法の確認</span></h3> <p>アラートは、原因のほとんどがビューポートの未設定によるものです。</p> <p><strong><span>ビューポートの未設定は以下をheadに入れ込むことでとりあえずは解決</span></strong>しますが根本的にはスマフォようにサイトを再構築するか、レスポンシブデザインでのリニューアルが必要になります。あくまでもBtoCユーザー向けのサイトでと言うことになります。※今後は、スマフォで検索したときに検索結果の記述に「スマフォ対応」と表示されます。</p> <table style="width: 667px;"> <tbody> <tr> <td> <pre> <span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="nt">></span></pre> </td> </tr> </tbody> </table> <p>こちらのタグを記述することで、ビューポートの設定は完了です。</p> <p> </p> <p> </p> <p> </p> </div></div></div><br style="clear:both;" /><div class="defauleButton"><a href="javascript:void(0)" class="commandButton" onclick="history.back()">前ページ</a></div> </div></div></div>   <dl id="sidebar" class="sub-column"> <dt class="sidebar-btn">サイドバー</dt> <dd id="sidebar-in">  <div class="contents"> <div class="side-cont"> <p class="inq-btn"><a href="https://www.mcscorp.co.jp/contact/"><img src="/images/side-btn-inquiry.jpg" width="179" height="48" alt="お問い合わせ電話番号03-5296-0228" /></a></p> </div> <ul class="banner"> <li><a href="/cms2/"><img src="/images/banner/bn-cmc.jpg" width="207" height="100" alt="Try CMS(自社更新ツール)バナー" /></a></li> <li class="end"><a href="/webmarketing/lpo.html"><img src="/images/banner/bn-lpo-s.jpg" width="207" height="100" alt="ランディングページ制作" /></a></li> <li class="end"><a href="/service/analytics-report.html"><img src="/images/banner/bn-analytics.jpg" width="207" height="100" alt="アクセス解析レポートサービスバナー" /></a></li> <li class="end"><a href="http://www.mcscorp.co.jp/rss/"><img src="/images/banner/bn-news.jpg" width="207" height="100" alt="トレンドニュースバナー" /></a></li> </ul> <ul class="banner"> <li><a href="/service/bmobrise.html"><img src="/images/banner/bn-bmobilized.jpg" width="207" height="100" alt="bmobilizedバナー" /></a></li> <li class="end"><a href="/webmarketing/index000.html"><img src="/images/banner/bn-webconsul.jpg" width="207" height="100" alt="無料Webコンサルティングバナー" /></a></li> <li class="end"><a href="https://www.mcscorp.co.jp/estimate/"><img src="/images/banner/bn-estimate.jpg" width="207" height="100" alt="ホームページ制作、Webシステム開発他無料お見積り依頼フォーム" /></a></li> <li class="end"><a href="/homepage/flow.html"><img src="/images/banner/bn-flow.jpg" width="207" height="100" alt="お申込みから納品までバナー" /></a></li> <li class="end"><a href="http://www.try-cms.net"><img src="/images/banner/bn-cms-net.jpg" width="207" height="100" alt="TryCMS紹介サイト" /></a></li> </ul> </div>  </dd> </dl>  </div>  </div>  <div id="footer-wrap"> <div class="inq-baner"><p class="btn-inq"><a href="https://www.mcscorp.co.jp/estimate/"><span>ホームページ制作、Webシステム開発他各種サービスお見積り・ご相談はこちら</span></a></p></div> <div class="foot-text"> <p></p> </dl></div></div>   <div id="top"> <div id="top-in"> <ul id="top-menu"> <li><a href="/about/">会社概要</a></li> <li><a href="/privacy-policy/">個人情報保護方針</a></li> <li><a href="/sitemap/">サイトマップ</a></li> </ul> </div> </div>  </div>  <p class="page-top"><a href="#container">このページの先頭へ</a></p>  </body> </html>