2018.10.03こんにちは、ゆんつです。Consoleのモバイルユーザビリティーという項目を見ていたらこんなエラーメッセージに出ていました。1つは「クリック可能な要素が近すぎます」もう1つは「コンテンツの幅が画面の幅を超えています」というものです。検出されたのは2018年7月30日のようです。その後一時期検出されていなかったようですが、最近になって再び検出されるようになったみたいです。普段モバイルユーザビリティーの項目は見ていないので、ブログにこんなエラーが出ていることを初めて知りました。みると以下のようなことがわかりました。クリック可能な要素が近すぎますボタンやリンクなどタップをすることが出来る要素の位置同士が近く、モバイルユーザーが誤ってタップしてしまうような要素の配置をしている場合に出るエラーのようです。コンテンツの幅が画面の幅を超えています画像や表がモバイルの画面からはみ出す場合に出るエラーのようです。原因を追究する僕のブログでエラーになっているのは以下の5つのURLです。「クリック可能な要素が近すぎます」「コンテンツの幅が画面の幅を超えています」という2つのエラーは同じページで発生していることがわかります。ためしに一番上にあるURLをクリックしてみるとライブページをテストという項目があるのでクリックしてみます。ページの分析が始まりました。「このページはモバイルフレンドリーです」えっ?どういうこと?モバイルフレンドリーなの?でもグーグルでのこのページの検索結果を見てみるときっちり「ページがモバイルフレンドリーではありません」と書かれています。うーん何でだ?とりあえずエラーになっている5つのURLを全てテストしてみましたが、結果は3つがユーザーフレンドリーで2つがユーザーフレンドリーでは無いページでした。改善するとりあえずユーザーフレンドリーテストに合格しているページは置いておいて、ユーザーフレンドリーではないと判定されたページを調査してみます。自分のモバイル環境からページを視認してみましたが特におかしいところは見当たりません。タップしづらいとも感じないし、画像や表もちゃんとメイン画面の幅に収まっています。うーん、さっぱり理由がわからん。Advancedというプラグインで作成した大き目の表があるということです。したらこれが原因なのでしょうか?他に解決策が思い浮かばないのでとりあえずこの表をいじってみたいと思います。表のプロパティを開くと幅という部分に数値が入っています。ここに数値が入っていると画面から表がはみ出して見える場合があるそうなのでここを空白にします。OKをクリックし、他の部分は何も変更しないでページを更新します。ページの見た目は更新前も更新後も全く変わりません。「表のプロパティ」の幅の欄に数値が入っていたのを空白にしただけです。Consoleの画面で今修正したページを再テストします。このページはモバイルフレンドリーです!!やったー!!治ったぞー。1つのURLも同じようにすることでユーザーフレンドリーなページになりました。いうわけで僕のユーザーフレンドリーじゃなかったページは表のプロパティの幅の欄を空白にすることでフレンドリーになりました。ユーザーフレンドリーになったはいいが・・・5つの記事にあったエラーのうち3つは何も改善しなくてもテストではユーザーフレンドリーで、残りの2つは表のプロパティの幅の欄を空欄にすることによりユーザーフレンドリーとなりました。なったはいいのですが、問題は検索結果の画面に出ている「ページがモバイルフレンドリーではありません」というメッセージです。テストに受かっているのだからこのメッセージは消えてほしいです。修正が完了したので「修正を検証」というボタンがあるので押してみます。この検証結果がOKなら「ページがモバイルフレンドリーではありません」というメッセージが消えてくれるかもしれません。