無料モバイルフレンドリーチェッカー

このツールのチェック内容

• viewport タグ

  ページに viewport メタタグがあるか、width=device-width を使っているか、user-scalable=no や 2 未満の maximum-scale で拡大をブロックしていないかを確認します。

• 画面より幅の広いコンテンツ

  各サイズで、実際の画面幅と比べてページが端末より広くなっていないかを確認し、はみ出している要素を最大 5 件、はみ出している量とともに示します。

• 3 つの画面サイズ

  スマートフォン（375×667）、タブレット（768×1024）、デスクトップ（1440×900）。スマートフォンとタブレットの表示ではモバイルブラウザをエミュレートします。

• スクリーンショット

  スマートフォンでの最初の画面のスクリーンショットと、問題が見つかったサイズのスクリーンショット。

• 読み込みの問題

  いずれかのサイズでページの読み込みが失敗したり、タイムアウトしたりしていないか。

チェックの仕組み

このツールでチェックしないこと

• 実機とすべてのブラウザ

  モバイルエミュレーションを使った Chromium を使用しています。iPhone の Safari や古い Android のブラウザでは、動作が異なる場合があります。

• タップ領域、文字サイズ、重なり

  小さすぎるボタン、読むには小さすぎる文字、互いに重なっている要素については、詳しいレイアウトテストか目視での確認が必要です。

• モバイルでの速度

  スマートフォンでの読み込み速度は、ここではなく速度チェッカーで測定します。

• メニューと操作

  タップしたり開いたりすることはないため、メニュー、ポップアップ、フォームは試しません。

よく見つかる問題

• viewport タグがない、または拡大をブロックしている

  古いサイトには viewport タグがないことが多く、スマートフォンでは縮小されたデスクトップ版のページが表示されます。また、user-scalable=no を設定していて、視力の弱い人が拡大できないサイトもあります。

• 固定幅の要素

  スマートフォンの画面より広い固定のピクセル幅が設定されたコンテナ、表、埋め込み。

• 縮まない画像や動画

  max-width: 100% が指定されていないメディアが、ページを画面より広げてしまいます。

• 幅の広い表

  列の多い料金表や比較表。

• 改行されない長いテキスト

  次の行に折り返せない長い URL、メールアドレス、コード。

直し方

1. 1

   viewport タグを修正する

   ページの head に '<'meta name="viewport" content="width=device-width, initial-scale=1"> を入れ、user-scalable=no と maximum-scale=1 を削除してください。

2. 2

   柔軟な幅を使う

   ピクセル単位の固定幅を max-width やパーセント指定に置き換え、CSS grid や flexbox を使って小さな画面ではレイアウトが折り返されるようにしましょう。

3. 3

   メディアが画面に合わせて縮むようにする

   CSS で、画像、動画、iframe に max-width: 100% と height: auto を指定しましょう。

4. 4

   幅の広い表は枠内でスクロールさせる

   表を overflow-x: auto を指定したコンテナで囲むか、小さな画面では列を縦に並べましょう。

5. 5

   長い単語を改行できるようにする

   長い URL が含まれる可能性のあるテキスト領域には overflow-wrap: anywhere を使いましょう。