著者プロフィール
ABOUT ME
WELUCA Web
WELUCA Web
Webクリエイター|WELUCA
Profile
大阪でWebサイト制作&メディア運営をしているフリーランス/AdSense収益額53万円(2023年)/Googleアナリティクス認定資格〈GAIQ〉所持/これまで19名のアドセンス合格サポート経験があります。
ココナラ
アドセンス合格サポートします!
アドセンス不合格の理由を診断&改善します 審査不合格の原因を徹底解析!合格への道をサポート【添削付き】
合格のコツ

AdSense審査に通るためのモバイル対応チェックポイント

weluca

「パソコンでは問題ないのにスマホで見ると崩れている」という方へ。

現在のブログ訪問者の多くはスマホからアクセスしています。スマホ表示が崩れているサイトはユーザビリティが低いと判断され、審査に悪影響を与えます。

この記事では、審査前に確認すべきモバイル対応のチェックポイントを解説します。

なぜスマホ表示が審査に影響するのか

Googleはモバイルファーストインデックスを採用しており、スマホでの表示を基準にサイトを評価しています。

パソコンでどれだけきれいに表示されていても、スマホで崩れているサイトはGoogleに「ユーザーフレンドリーではないサイト」と判断されます。

WELUCAのサポートでも、パソコンだけで確認してスマホをノーチェックだったために、トップページが崩れたまま申請していたケースがありました。パソコンで問題なく見えているからといって、スマホを確認しないのは危険です。審査前に必ず実機で確認してください。

 WELUCA Web
WELUCA Web

チェック1:トップページのスマホ表示を確認する

トップページはGoogleの審査担当者が最初に訪れるページです。

スマホで開いたときに記事一覧が正しく表示されているか・ヘッダーのロゴとメニューが崩れていないかを必ず確認してください。

特にロゴ画像のサイズが大きすぎると、スマホでヘッダーが異常に縦長になることがあります。ロゴのサイズは横幅250〜400px・高さ60〜100px程度を目安にしてください。

 WELUCA Web
WELUCA Web

チェック2:サイドバーとフッターの重複に注意する

パソコン表示ではサイドバーとフッターが別々のエリアに表示されますが、スマホ表示ではサイドバーがコンテンツの下に移動するため、サイドバーとフッターに同じカテゴリーリンクを設置していると、同じ内容が2回連続して表示されてしまいます。

スマホで見たときにカテゴリーが2回連続して表示される状態は、見た目が悪く完成度が低く見えます。サイドバーにカテゴリーを入れる場合はフッターには入れない、またはフッターにはプライバシーポリシー・運営者情報・お問い合わせのみを入れる形にするとスッキリします。

 WELUCA Web
WELUCA Web
サイドバーとフッターの使い分けの目安
  • サイドバー:プロフィール・カテゴリー一覧・人気記事ランキング
  • フッター:プライバシーポリシー・運営者情報・お問い合わせ・コピーライト表記
  • 両方に入れない:同じカテゴリーリンク・同じメニュー項目

チェック3:文字サイズと行間が読みやすいか確認する

スマホで記事を読むとき、文字が小さすぎたり行間が詰まりすぎていたりすると、読者がすぐに離脱します。

文字サイズは16px以上、行間は1.7〜1.8程度が読みやすさの目安です。テーマの設定で調整できる場合は確認してください。

実際にスマホで記事を開いて、自分が読みやすいと感じるかどうかが一番のチェック基準です。ピンチアウト(拡大)しないと読めない文字サイズは問題ありです。

 WELUCA Web
WELUCA Web

チェック4:画像がはみ出していないか確認する

パソコンでは正常に表示されていた画像が、スマホでは横にはみ出してページ全体が横スクロールになってしまうケースがあります。

画像が画面幅をはみ出している状態はレイアウト崩れとして判断されます。記事内の画像はすべてスマホで確認してください。

画像に`max-width: 100%`というCSSが設定されていれば、画像が自動的に画面幅に合わせて縮小されます。WordPressのほとんどのテーマは標準で対応していますが、カスタムCSSで画像の幅を固定している場合は注意してください。

 WELUCA Web
WELUCA Web

チェック5:ボタンやリンクがタップしやすいか確認する

スマホはマウスではなく指でタップするため、ボタンやリンクのサイズが小さすぎると誤タップが起きやすくなります。

Googleはタップターゲットのサイズが小さいサイトをモバイルフレンドリーでないと判断することがあります。

メニューのリンク・記事タイトルのリンク・お問い合わせボタンなど、指でタップする要素は48px×48px以上のサイズが目安です。実際にスマホで操作してみて、押しにくいと感じる箇所がないか確認してください。

 WELUCA Web
WELUCA Web

チェック6:Google Search Consoleでモバイルユーザビリティを確認する

目視での確認と合わせて、Google Search Consoleの「モバイルユーザビリティ」レポートを確認することで、Googleが問題と判断しているページを客観的に把握できます。

  1. Google Search Consoleにログインする
  2. 左メニュー「ページエクスペリエンス」をクリックする
  3. 「モバイル」の項目で問題が報告されていないか確認する
  4. 問題が報告されている場合は該当ページを修正する

「モバイルフレンドリーテスト」(search.google.com/test/mobile-friendly)でURLを入力することでも、Googleがそのページをモバイルフレンドリーと判断しているかを確認できます。

モバイル対応チェックリスト

審査前に以下の項目をすべて確認してください。実際のスマホで確認することが一番確実です。

 WELUCA Web
WELUCA Web
モバイル対応チェックリスト
  • スマホでトップページを開いて記事一覧・ヘッダー・ロゴが正しく表示されている
  • サイドバーとフッターに同じカテゴリーリンクが重複して表示されていない
  • 文字サイズが小さすぎず、ピンチアウトしなくても読める
  • 記事内の画像が画面幅をはみ出して横スクロールが発生していない
  • メニューやボタンが指でタップしやすいサイズになっている
  • ハンバーガーメニュー(三本線メニュー)が正しく開閉する
  • フッターのプライバシーポリシー・運営者情報・お問い合わせのリンクが正しく表示されている
  • Google Search Consoleのモバイルユーザビリティで問題が報告されていない

iPhoneとAndroidで表示が異なることがあります。可能であれば両方で確認することをおすすめします。手元に1種類しかない場合は、パソコンのGoogle ChromeでF12を押してデベロッパーツールを開き、スマホ表示に切り替えて確認することもできます。

よくある質問

Q
スマホ表示が崩れているのは何が原因ですか?

主な原因は、カスタムCSSで幅を固定している要素がある・テーマがレスポンシブ対応していない・埋め込んだ外部コンテンツ(YouTubeなど)が幅固定になっている・画像のサイズ指定が絶対値(px)になっているなどです。まずChrome DevToolsでスマホ表示に切り替えて、どの要素が崩れているかを特定してから修正してください。

Q
サイドバーをスマホでは非表示にできますか?

多くのWordPressテーマでスマホでのサイドバー非表示設定が可能です。テーマの設定画面・カスタマイザー・または以下のCSSをカスタムCSSに追加することで非表示にできます。
@media (max-width: 768px) { .sidebar { display: none; } }
クラス名はテーマによって異なるため、Chrome DevToolsでサイドバーの要素を確認してから適用してください。

Q
スマホ表示を直したら審査に通りやすくなりますか?

スマホ表示の改善はGoogleの評価基準に直結するため、修正することで審査通過の可能性は上がります。ただしモバイル対応だけが原因とは限りません。コンテンツの質・必要ページの設置・技術的な設定もあわせて確認してください。

Q
レスポンシブ対応のテーマを使っていれば問題ありませんか?

レスポンシブ対応テーマを使っていても、カスタムCSSの追加・プラグインの影響・埋め込みコンテンツなどによって崩れが発生することがあります。テーマがレスポンシブ対応であることを確認した上で、実際のスマホでの表示確認を必ず行ってください。

ABOUT ME

Warning: Undefined array key 0 in /home/amazonzon/weluca.jp/public_html/adsense/wp-content/themes/jinr/include/shortcode.php on line 306
WELUCA Web
WELUCA Web
Webクリエイター|WELUCA
大阪でWebサイト制作&メディア運営をしているフリーランス/AdSense収益額53万円(2023年)/Googleアナリティクス認定資格〈GAIQ〉所持/これまで19名のアドセンス合格サポート経験があります。
記事URLをコピーしました