格安ホームページ制作のブリリアントワークスです。個人事業(SOHO)としての特長を活かし、格安価格・高品質にてご提供いたします。
ホームページ制作 岐阜(BW)
» » スマホ・携帯非対応のエラー原因

スマホ・携帯非対応のエラー原因

レスポンシブサイトのチェックで紹介している方法を利用すると視覚的にスマホ・携帯でもホームページを快適に閲覧できるかどうかチェックできますが、実際には目に見えないエラーもあり、それ以上のチェックを求められます。

そこで利用したいのが、上記リンクのページでも紹介しているウェブマスターツールです。

サイトを登録して『サイト選択 » 検索トラフィック » モバイル ユーザビリティ』と進むと、スマホ・携帯対応できていないエラーページ数が表示され、更にその下にエラー内容と該当ページも表示されます。

さすがにエラーの場所をピンポイントでは教えてくれませんが、エラーページの告知だけでも十分に助かります。

注意が必要なのは、検索ロボット(クローラー)が来てサイトを分析するまでに時間が掛かることで、一斉にサイト内全ページを評価するわけではないということです。その点だけはご理解ください。

Googleウェブマスターツールのモバイル ユーザビリティ

responsive-error1

上記がエラーの内容とページ数です。クリックすると「URLと最終検出日」が表示されます。

1 タップ要素同士が近すぎます
パソコンの場合はマウスカーソルでかなり小さなリンクでもクリックできますが、スマホやタブレットの場合は指の腹での操作となるのでリンクが近すぎると間違って他のリンクをクリックしてしまいます。したがって、リンク同士が近づく場合は十分な間隔を空けてください。

2 フォントサイズが小です
パソコンの画面をそのまま縮小表示すると文字は全く読めないので、携帯・スマホでも閲覧できるフォントサイズが求められます。グーグルの「読みやすいフォント サイズを使用する」を見ると標準サイズが16px、小さな文字が12pxという例が示されているので、このフォントサイズを参考にしてください。ちなみに、私は14pxをメインで使っています。

3 ビューポートが設定されていません
レスポンシブデザインにする方法でも紹介していますが、スマホ・携帯でも文字を小さくさせないコードです。これはただ記述するだけなので簡単に解決できます。ただ、静的ページの数が多いと修正に時間が掛かるでしょう。

4 Flashが使用されています
スマホ・携帯ではFlashが利用できないので、フラッシュを利用しているとこの警告を受けます。フラッシュを利用する場合はパソコン表示のみで、スマホ・携帯では表示させないようにしましょう。

関連記事

パソコンでも、タブレットでも、スマホ・携帯でも、それぞれの画面サイズに合わせて表示するレスポンシブルデザインですが、視覚的にも検索エンジン的...


インターネットエクスプローラ(IE)やグーグルクローム(Google Chrome)などのブラウザでサイトを見るとき、アドレスバーやタブにア...


『パソコン、タブレット、スマホ・携帯』、それぞれの画面サイズに応じたデザインでホームページを表示するには、次のコードをHTMLファイルのヘッ...


『サイトマップ』と聞くとサイト内に設置する目次的なページを想像する方が多いと思いますが、ここで説明するのはXMLファイル形式のサイトマップで...


グーグルの検索エンジンは、Googlebotと呼ばれるクローラーがウェブ中を駆け巡り、サイト情報を収集して持ち帰ってインデックスします。 ...



コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

最新記事

Homepage

パンくずリストを構造化にすると、検索結果の下に表示されるURLがカテゴリ名にな...

WordPress

ワードプレスでpost classを使うと、さまざまなクラスと同時にhentr...

WordPress

ワードプレスには自動でPタグを入れる機能がありますが、場合によってはこれがデザ...

検索フォーム

コンテンツ

カテゴリ