（この記事は2021年5月3日に更新されました）
Googleサーチコンソールではエラーが出ると「メッセージ」にて以下のようにお知らせをしてくれます。
サイト https://blog-kt-life.com/ で「モバイル ユーザビリティ」の問題が新たに 検出されました
Googleサーチコンソールにて
エラーには様々種類がありますが、
今回はモバイル ユーザビリティ（スマホなど）での
「お問い合わせページでのエラー」の解決法を解説していきます。
今回検出されたモバイル ユーザビリティのエラー
- コンテンツの幅が画面の幅を超えています
- テキストが小さすぎて読めません
- クリック可能な要素同士が近すぎます
こういったエラーはそれぞれの指示通り改善していけばいいのですが、
実際に自分のスマホでお問い合わせフォームを確認しても検出したエラーと一致、改善しない場合があります。
そういった問題をこの記事では解決していきます。
お問い合わせページのエラー解決法① コードを修正し幅や文字の大きさを変更する
お問い合わせページのエラー解決法② 新たにお問い合わせフォーム作成する
お問い合わせページのエラー解決法
モバイル ユーザビリティのお問い合わせページエラーを解決する方法は大きく分けて２通りあります。
- コードを修正し幅や文字の大きさを変更する
- 新たにお問い合わせフォーム作成する
お問い合わせページのエラー解決法① コードを修正し幅や文字の大きさを変更する
基本的にはGoogleサーチコンソールで確認したエラーはそれぞれの内容通り改善すればOKです。
今回のエラー内容
- コンテンツの幅が画面の幅を超えています
- テキストが小さすぎて読めません
- クリック可能な要素同士が近すぎます
コンテンツの幅が画面の幅を超えています
特定のコンテンツ（要素）の幅が画面の幅を超えている状態で、幅を超えているコンテンツ（画像や動）の幅をCSSなどで画面の幅を超えないように調整します。
CSSがわからなければ、コンテンツその物の大きさを変更して対応しましょう。
テキストが小さすぎて読めません
「テキストが小さすぎて読めません」というエラーは、推奨するフォントサイズより「小さい」というエラーです。
「読みにくいですよー」というエラーなので、Googleが推奨するフォントサイズ「16px」に合わせましょう。
クリック可能な要素同士が近すぎます
ASPアフィリエイトのバナーやテキスト、外部リンク、内部リンク同士が近すぎるとこのエラーが出ます。
「クリック可能な要素が近すぎることで誤ったクリック操作が発生しやすい」ので改善してくださいとうこなので、それぞれのリンク同士を離して設置しましょう。
大人の指の腹のサイズが10mmとされているので、リンク同士の間隔は7mm以上空けることが望ましいとされています。
但し重要ではないリンクは7mm以下でも良い。モバイル ユーザビリティの問題「クリック可能な要素同士が近すぎます」の原因が特定できません – Search Console Community
クリック可能な要素が近すぎることで主に指摘が出るパターン
- APSアフィリエイトのバナーと内部リンクが近い（おすすめ記事など）
- APSアフィリエイトや外部リンクが文章間で近い
お問い合わせページのエラー解決法② 新たにお問い合わせフォーム作成する
しかし、冒頭にも書いたように実際に自分のスマホで確認してもエラー内容が一致しない場合があります。
お問い合わせページのエラーと修正出来ない問題を整理
コンテンツの幅が画面の幅を超えています
- 自分のスマホで問題のコンテンツ（この場合、お問い合わせフォーム）を確認しても画面の幅は超えていない。
- スマホの画面に合っておりコンテンツ幅が広い場合に出来る横スクロールも出来ない。
- コンテンツの幅をCSSで変更しようにも初心者にはちょっと難しい。
テキストが小さすぎて読めません
- テキストの大きさをGoogleが推奨するフォントサイズ「16px」に変更、又はそれ以上の大きさにしてもしても改善しない
- コンテンツの幅の変更同様、CSSで変更しようにも初心者にはちょっと難しい。
クリック可能な要素同士が近すぎます
- お問い合わせフォームにはAPSアフィリエイトや外部リンク、内部リンクのクリック可能な要素がそもそもない。
- 要素の間隔、7mm以内の要素が見当たらない（特定）ので修正出来ない。
お問い合わせページのエラーの問題解決法
基本の改善策のようにお問い合わせフォームを改善しようにも改善出来ない時、初心者でCSSの編集に不安な人は、
「新しいお問い合わせフォームを作ってしまいましょう」
改善出来ないことを調べるのは大事ですが、改善が難しいことに、原因が不明なことに時間をかけるのはもったいないので、基本の改善策で解決出来ない場合は新しいお問い合わせフォーム再度作り対応しましょう！
お問い合わせフォームの作りかたは、「お問い合わせフォーム作成」などで調べるとたくさん出てきますので初心者でも簡単につくれます。
私も「モバイル ユーザビリティ」のエラーが出ていろいろ修正しましたが、改善されなかったので新しいお問い合わせフォームを作成し解決しました。
モバイルフレンドリーテストを確認する
Googleサーチコンソールにはモバイルフレンドリーテストツールもあるので修正後、確認してみましょう。
赤枠にテストしたいURL（修正したコンテンツ）を入力しましょう。
テスト結果が画像のようになればOKです。
まとめ
今回は「お問い合わせページのエラー解決法」を解説してきました。
「解決法」と言っても、直接CSSなどの修正がわからない場合や、うまく修正出来ない場合の大概案」ですが、
初心者は特に「新しいお問い合わせフォームを作ったほうが早い」です。
コード編集は初心者には難しいので、そこで迷うなら新しいお問い合わせフォームを作ってしまいましょう！
正直、お問い合わせフォームのデザインや機能は最低限でいいと思うので、エラーが出ない仕様に変更し、修正に無駄な時間をかけずに「記事を書くこと」に時間をかけた方がよいです！